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" style="width: calc(100% - 260rpx)">
            <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 class="checkbox-item">
          <general-checkbox
            v-model="it.ischeck"
            @change="(val) => onCheckChange(id, val)"
          />
        </view>
      </view>
      <view style="width: 100%; height: 100rpx"></view>
      <!-- 确认接单按钮 -->
      <view class="btn_wrapper" v-if="orderList.length > 0">
        <button
          :class="['btn_style', isLoading ? 'btn_disabled' : '']"
          @click="handleSubmit"
          :disabled="isLoading"
          :loading="isLoading"
        >
          确认接单
        </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 GeneralCheckbox from "@/components/general-checkbox/general-checkbox.vue";
import { checkEcuBells } from "@/utils/commonApi";
import * as api from "@/utils/api.js";

const orderList = ref([]);
const isLoading = ref(false);

onLoad((options) => {
  const { changeBatteryArr = [] } = navigator.getParams(options);
  orderList.value = filtrationList(changeBatteryArr);
  // orderList.value = filtrationList([
  //   {
  //     bikeId: "300118388304969728",
  //     bikeCode: "123456",
  //     soc: 80,
  //     latestTimestamep: "2023-10-01 12:00:00",
  //     refreshTimestamp: "2023-10-01 12:05:00",
  //     longitude: 116.397128,
  //     latitude: 39.916527,
  //   },
  //   {
  //     bikeId: "300118388304969720",
  //     bikeCode: "654321",
  //     soc: 60,
  //     latestTimestamep: "2023-10-01 11:00:00",
  //     refreshTimestamp: "2023-10-01 11:05:00",
  //     longitude: 116.397128,
  //     latitude: 39.916527,
  //   },
  // ]);
});

const onCheckChange = (index, val) => {
  console.log("选中状态变化", index, val);
};

function filtrationList(list) {
  if (!list || !Array.isArray(list)) {
    return [];
  }
  return list.map((item) => {
    return {
      ...item,
      ischeck: false,
    };
  });
}

const checkEcu = (it) => {
  checkEcuBells(it);
};

// 处理提交按钮点击事件
const handleSubmit = () => {
  let bikeIds = [];

  orderList.value.forEach((item) => {
    if (item.ischeck) {
      bikeIds.push(item.bikeId);
    }
  });

  if (bikeIds.length === 0) {
    uni.showToast({
      title: "请选择换电辆车",
      icon: "none",
    });
    return;
  }
  console.log(bikeIds);
  isLoading.value = true;
  api
    .callEbikeOrder("receiveBatchBatteryOrder", {
      bikeIds,
    })
    .then((res) => {
      isLoading.value = false;
      if (res.code === 200) {
        uni.showToast({
          title: "接单成功",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
          // 触发全局事件，传递数据
          uni.$emit("takeOrders", {
            type: "battery",
          });
        }, 800);
      } else {
        uni.showToast({
          title: res.message || "接单失败，请稍后再试",
          icon: "error",
        });
      }
      console.log(res);
    })
    .catch((err) => {
      isLoading.value = false;
      console.error("接单失败", err);
      uni.showToast({
        title: "接单失败，请稍后再试",
        icon: "none",
      });
    });
};
</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;

    .checkbox-item {
      position: absolute;
      right: 10rpx;
      top: 40rpx;
    }

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

      &:active {
        background-color: #3874f6d2;
      }
    }

    .btn_disabled {
      background-color: #cccccc; /* 禁用状态的背景色 */
      color: #999999; /* 禁用状态的文字颜色 */
      opacity: 0.8; /* 可选：设置透明度 */
    }
  }
}
</style>