ebike-ui/ebike-maintenance/pages/devops/dispatchTakeOrders/dispatchTakeOrders.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>