<template> <view class="page"> <u-navbar title="选择车辆 " :border-bottom="false" :background="background" title-color='#000' title-size='36' height='45' back-icon-color='#000'></u-navbar> <view class="content"> <view class="content_item" v-for="item, indexs in deviceList" :key="indexs" @click="selectCar(item)"> <view class="content_item_left"> <view class="carInfo"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uUIunSd0CSU3ovogLJHk" mode="" class="titimg"> </image> <view class="power"> <view v-for="index in 10" :key="index"> <image :src="getImageSrc(index, item.remainingPower)" mode="aspectFit" class="power-icon" /> </view> </view> {{ item.remainingMileage }}KM </view> <view class="model"> 车型:{{ item.model }} </view> <view class="carNum"> {{ item.vehicleNum }} </view> <view class="type"> 租赁中 </view> </view> <view class="content_item_right"> <image :src="modelInfo.picture" mode="" v-if="modelInfo.picture" class="rightimage"></image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uB1F5aibooguILH8uB4F" mode="" v-else class="rightimage"></image> <view class="tips"> 选择车辆 <image src="https://lxnapi.ccttiot.com/bike/img/static/uj7bE7GMcCm6g2igeo7k" mode="" v-if="item.isDefault == 1"></image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uN3QtzNuM2CMTLUm3joR" mode="" v-else> </image> </view> </view> </view> </view> <u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select> <view class="botBtn" @click="addCar">+ 添加车辆</view> <view class="botBtn1" @click="cancel">取消</view> </view> </template> <script> export default { data() { return { background: { backgroundColor: "#fff", }, deviceList: [], showadd: false, list: [ { value: '1', label: '扫码添加' }, { value: '2', label: '手动输入' } ], } }, onLoad() { this.getDeviceList() }, methods: { confirm(e) { this.showadd = false if (e[0].value == '1') { uni.navigateTo({ url: '/page_user/QrBind' }) } else if (e[0].value == '2') { uni.navigateTo({ url: '/page_user/SnBind' }) } }, cancel() { uni.navigateBack() }, addCar() { this.showadd = true }, selectCar(item) { this.$u.put(`/appVerify/toggleDefault?sn=${item.sn}`).then((res) => { if (res.code == 200) { this.getDeviceList() uni.showToast({ title: '操作成功', icon: 'none', duration: 2000 }); } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); } }); }, getDeviceList() { this.$u.get(`/appVerify/getDeviceListByToken`).then((res) => { if (res.code == 200) { // 检查返回的数据数组是否非空 if (res.data && res.data.length > 0) { // 找出所有 isDefault 为 0 的设备 this.deviceList = res.data // 设置 showdevice 为 true } } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); } }); }, getImageSrc(index, power) { const fullPowerIcon = 'https://lxnapi.ccttiot.com/bike/img/static/uhxmJlps8lrRRTmBIFpl'; const emptyPowerIcon = 'https://lxnapi.ccttiot.com/bike/img/static/u1CcbtQydd107cOUEZ1l'; // 计算每个格子代表的电量值 const powerPerGrid = power / 10; // 如果当前格子序号小于等于应显示的格子数,显示满格图标 return index + 1 <= Math.floor(powerPerGrid) ? fullPowerIcon : emptyPowerIcon; }, } } </script> <style lang="scss"> .page { .botBtn1 { position: fixed; display: flex; justify-content: center; align-items: center; left: 38rpx; bottom: 58rpx; width: 682rpx; height: 92rpx; box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1); border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #4297F3; font-weight: 500; font-size: 40rpx; color: #4297F3; } .botBtn { position: fixed; display: flex; justify-content: center; align-items: center; left: 38rpx; bottom: 178rpx; width: 682rpx; height: 92rpx; background: #4297F3; box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1); border-radius: 16rpx 16rpx 16rpx 16rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; } .content { padding: 0 40rpx; background-color: #fff; .content_item { margin-top: 20rpx; padding: 48rpx 42rpx; width: 688rpx; display: flex; flex-wrap: nowrap; background: #EEF2FD; border-radius: 28rpx 28rpx 28rpx 28rpx; .content_item_right { width: 300rpx; image { width: 212rpx; height: 164rpx; } .tips { display: flex; flex-wrap: nowrap; align-items: center; margin-top: 12rpx; font-weight: 400; font-size: 30rpx; color: #3D3D3D; image { width: 29rpx; height: 29rpx; margin-left: 12rpx; } } } .content_item_left { display: flex; align-items: center; flex-wrap: wrap; .type { margin-top: 20rpx; padding: 8rpx 19rpx; background: #D2E8FF; border-radius: 29rpx 29rpx 29rpx 29rpx; font-weight: 500; font-size: 28rpx; color: #4297F3; } .model { width: 100%; margin-top: 15rpx; font-weight: 700; font-size: 32rpx; color: #3D3D3D; } .carNum { width: 100%; margin-top: 15rpx; font-weight: 700; font-size: 32rpx; color: #3D3D3D; } .carInfo { display: flex; align-items: center; font-weight: 700; font-size: 36rpx; color: #3D3D3D; // justify-content: center; .titimg { margin-bottom: 8rpx; margin-right: 12rpx; width: 30rpx; height: 30rpx; } .power { display: flex; align-items: center; // gap: 4rpx; // 设置图标之间的间距 margin-right: 12rpx; .power-icon { width: 18rpx; height: 36rpx; } } } } } } } </style>