<template> <view class="pages"> <view class="search"> <view class="search_input"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uxCcWSvcrLOTaQVpsE2g" class="search_icon" /> <input type="text" placeholder="请输入" v-model="keywords" @input="search" /> </view> <view class="search_btn"> 添加设备 </view> </view> <view class="content"> <view class="content_item" v-for="item in deviceList" :key="item.deviceId"> <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"> <!-- 已绑定 --> {{ carType(item.status) }} </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" v-if="item.inProgressOrderNo" @tap="handleOrderss(item.inProgressOrderNo)"> 查看当前订单 > </view> </view> </view> </view> <tab-bar :indexs='0' style=""></tab-bar> </view> </template> <script> import TabBar from '@/pages_store/components/tab-bar/tab-bar.vue'; let timerId; export default { components: { TabBar }, data() { return { deviceList: [], keywords: '' } }, onShow() { this.getDeviceList() }, methods: { search() { clearTimeout(timerId); // 设置一个新的定时器,在滑动停止后 500ms 执行 getmarks 方法 timerId = setTimeout(() => { this.getDeviceList(); // 调用实际的搜索功能 }, 500); }, carType(status) { switch (status.toString()) { case '0': return '未绑定'; case '1': return '待租'; case '2': return '已绑定(自用)'; case '3': return '租赁中'; case '4': return '临时锁车'; case '5': return '临时分享中'; case '6': return '调度中'; case '8': return '未上架'; default: return '未知状态'; } }, handleOrderss(orderNo) { // 取消注释并使用正确的参数名 uni.navigateTo({ url: `/pages_store/ordder/ordder_Detail?orderNo=${orderNo}` }) }, getDeviceList() { let data = { keywords: this.keywords } this.$u.get(`/appVerify/getDeviceListByMerchantToken?`, data).then((res) => { if (res.code == 200) { this.deviceList = res.data } 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 { background-color: #F9FDFF; } .pages { .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; margin-top: 12rpx; font-weight: 400; font-size: 30rpx; color: #3D3D3D; } } .content_item_left { display: flex; align-items: center; flex-wrap: wrap; .type { margin-top: 12rpx; padding: 4rpx 12rpx; background: #D2E8FF; border-radius: 29rpx 29rpx 29rpx 29rpx; font-weight: 500; font-size: 28rpx; color: #4297F3; } .model { width: 100%; margin-top: 12rpx; font-weight: 700; font-size: 32rpx; color: #3D3D3D; } .carNum { width: 100%; margin-top: 12rpx; 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; } } } } } } .search { padding: 0 40rpx; padding-top: 200rpx; padding-bottom: 30rpx; background-color: #fff; display: flex; // justify-content: space-between; .search_input { width: 460rpx; height: 84rpx; background: #F7F7F7; border-radius: 10rpx 10rpx 10rpx 10rpx; display: flex; align-items: center; padding-left: 20rpx; image { width: 44rpx; height: 44rpx; } input { margin-left: 20rpx; width: 100%; height: 100%; background: transparent; } } .search_btn { margin-left: 22rpx; width: 190rpx; height: 84rpx; background: #4297F3; border-radius: 10rpx 10rpx 10rpx 10rpx; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 32rpx; color: #FFFFFF; } } } </style>