163 lines
4.0 KiB
Vue
163 lines
4.0 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
|
|
custom-prefix="iconfont"
|
|
type="icon-ebikeyinlianglabashengyin"
|
|
style="position: relative; top: 5rpx"
|
|
color="#0084FF"
|
|
size="25"
|
|
@click="checkEcu(it)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 最新电量 -->
|
|
<view class="row">
|
|
<text class="label">最新电量</text>
|
|
<text class="value">{{ it?.soc || 0 }}%</text>
|
|
</view>
|
|
<!-- 中控品牌 -->
|
|
<view class="row">
|
|
<text class="label">中控品牌</text>
|
|
<text class="value">{{ "/" }}</text>
|
|
</view>
|
|
<!-- 设备位置 -->
|
|
<view class="row">
|
|
<text class="label">设备位置</text>
|
|
<view
|
|
class="value"
|
|
@click="
|
|
navigator.to('/pages/map/map-findbike', {
|
|
longitude: it.longitude,
|
|
latitude: it.latitude,
|
|
})
|
|
"
|
|
>
|
|
<view>查看地图</view>
|
|
<view style="color: darkgrey; font-size: 26rpx">{{
|
|
(it?.longitude || "-") + "," + (it?.latitude || "-")
|
|
}}</view>
|
|
</view>
|
|
<uni-icons
|
|
type="right"
|
|
size="20"
|
|
class="arrows"
|
|
color="grey"
|
|
></uni-icons>
|
|
</view>
|
|
<!-- 设备距离 -->
|
|
<view class="row">
|
|
<text class="label">设备距离</text>
|
|
<text class="value">{{ "/" }}m</text>
|
|
</view>
|
|
</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";
|
|
import { checkEcuBells } from "@/utils/commonApi";
|
|
|
|
const orderList = ref([]);
|
|
|
|
onLoad((options) => {
|
|
const { dispatchArr = [] } = navigator.getParams(options);
|
|
orderList.value = dispatchArr;
|
|
});
|
|
|
|
const checkEcu = (it) => {
|
|
checkEcuBells(it);
|
|
};
|
|
</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, 0.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: 28rpx;
|
|
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>
|