144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="content_wrapper">
|
|
<view
|
|
class="box"
|
|
v-for="(it,id) of orderList"
|
|
:key="id"
|
|
>
|
|
<!-- 车辆编号 -->
|
|
<view class="row">
|
|
<text class="label">车辆编号</text>
|
|
<view class="value">
|
|
<text style="margin-right: 30rpx;">{{ it?.bikeCode || '-' }}</text>
|
|
<uni-icons type="sound" size="25" style="position: relative;top: 6rpx;" color="blue"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- 最新电量 -->
|
|
<view class="row">
|
|
<text class="label">最新电量</text>
|
|
<text class="value">{{ it?.soc || '-' }}</text>
|
|
</view>
|
|
<!-- 最后骑行时间 -->
|
|
<view class="row">
|
|
<text class="label">最后骑行时间</text>
|
|
<text class="value">{{ it?.latestTimestamep || '-' }}</text>
|
|
</view>
|
|
<!-- 电量刷新时间 -->
|
|
<view class="row">
|
|
<text class="label">电量刷新时间</text>
|
|
<text class="value">{{ it?.refreshTimestamp || '-' }}</text>
|
|
</view>
|
|
<!-- 设备位置 -->
|
|
<view class="row">
|
|
<text class="label">设备位置</text>
|
|
<view>
|
|
<view>查看地图</view>
|
|
<view style="color: darkgrey;font-size: 28rpx;">{{ (it?.longitude || '-') + ',' + (it?.latitude || '-')}}</view>
|
|
</view>
|
|
<uni-icons type="right" size="20" class="arrows" color="grey"></uni-icons>
|
|
</view>
|
|
<!-- 删除 -->
|
|
<uni-icons type="trash" size="25" class="deleteBtn" color="orange"></uni-icons>
|
|
</view>
|
|
<view style="width: 100%;height: 100rpx;"></view>
|
|
<!-- 确认接单按钮 -->
|
|
<view class="btn_wrapper" v-if="orderList.length > 0" >
|
|
<button class="btn_style">确认接单</button>
|
|
</view>
|
|
</view>
|
|
<empty-component v-if="orderList.length === 0" description="无可接单数据"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import navigator from '@/utils/navigator.js';
|
|
import EmptyComponent from '@/components/empty-component/empty-component.vue';
|
|
|
|
const orderList = ref([]);
|
|
|
|
onLoad((options) => {
|
|
const {changeBatteryArr} = navigator.getParams(options) || [];
|
|
orderList.value = changeBatteryArr
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content_wrapper{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 30rpx;
|
|
background-color: rgb(226, 223, 223,.5);
|
|
overflow-y: auto;
|
|
|
|
.box{
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 35rpx 25rpx;
|
|
background-color: white;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2px 8px #0000000d;
|
|
margin-bottom: 30rpx;
|
|
|
|
.row{
|
|
position: relative;
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
align-items: baseline;
|
|
margin-bottom: 30rpx;
|
|
:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label{
|
|
width: 200rpx;
|
|
color: gray;
|
|
}
|
|
|
|
.value{
|
|
width: calc(100% - 230rpx);
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.arrows{
|
|
position: absolute;
|
|
right: 0;
|
|
top:0;
|
|
}
|
|
}
|
|
|
|
.deleteBtn{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 25rpx;
|
|
color: red;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.btn_wrapper{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20rpx 40rpx 30rpx 40rpx;
|
|
background-color: white;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.btn_style{
|
|
color: white;
|
|
background-color: #3875f6;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style> |