ebike-ui/ebike-maintenance/pages/devops/takeOrders/takeOrders.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">{{ 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
                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>
     <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 { changeBatteryArr = [] } = navigator.getParams(options); 
    orderList.value = changeBatteryArr
});

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,.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>