ebike-ui/ebike-maintenance/pages/warehouse/maintainOrder/maintainOrderDetail.vue

<template>
  <view class="maintainOrderDetail-main">
    <!-- 内容 -->
    <view class="content-wrapper">
      <uni-card
        v-for="(item, index) in FaultReportList"
        :key="item.faultReportId"
      >
        <uni-forms label-width="80">
          <uni-forms-item label="车辆编号:">
            <view class="deepBlackBoldText">
              <span>{{ item["bikeCode"] || "---" }} </span>
            </view>
          </uni-forms-item>
          <uni-forms-item label="故障部位:">
            <view class="deepBlackBoldText">
              <span>{{ item["faultPart"] || "---" }} </span>
            </view>
          </uni-forms-item>
          <uni-forms-item label="故障内容:">
            <view class="deepBlackBoldText">
              <span>{{ item["faultDescription"] || "---" }} </span>
            </view>
          </uni-forms-item>
          <!-- <uni-forms-item label="上报人:">
            <view class="deepBlackBoldText">
              <span> </span>
            </view>
          </uni-forms-item> -->
          <uni-forms-item label="上报来源:">
            <view class="deepBlackBoldText">
              <span>{{ item["reportSource"] || "---" }} </span>
            </view>
          </uni-forms-item>
          <uni-forms-item label="上报时间:">
            <view class="deepBlackBoldText">
              <span>{{ item["reportAt"] || "---" }} </span>
            </view>
          </uni-forms-item>
          <!-- <uni-forms-item label="在线状态:">
            <view class="deepBlackBoldText">
              <span> </span>
            </view>
          </uni-forms-item> -->
          <uni-forms-item label="电池电量:">
            <view class="deepBlackBoldText">
              <span>{{ bickInfo["resGPSDto"]["soc"] || 0 }} %</span>
            </view>
          </uni-forms-item>
          <uni-forms-item label="车辆位置:">
            <view class="deepBlackBoldText center">
              <text style="width: 100rpx">
                {{
                  formatCoordinates(
                    bickInfo["resGPSDto"]["longitude"],
                    bickInfo["resGPSDto"]["latitude"]
                  )
                }}
              </text>
              <view
                class="center"
                @click="
                  viewMap(
                    bickInfo['resGPSDto']['longitude'],
                    bickInfo['resGPSDto']['latitude']
                  )
                "
              >
                <text>查看地图</text>
                <uni-icons type="right" size="20"></uni-icons>
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item label="信号强度:">
            <view class="deepBlackBoldText">
              <span>{{ bickInfo["resGPSDto"]["gsm"] || 0 }} </span>
            </view>
          </uni-forms-item>
        </uni-forms>
        <button class="fancy-button" @click="hanldeOrder(item)">接单</button>
      </uni-card>
      <view style="width: 100%; margin-top: 50px"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import navigator from "@/utils/navigator.js";
import * as api from "@/utils/api.js";
import { onUnload } from "@dcloudio/uni-app";

const userInfo = ref({});
const bickInfo = ref({
  resGPSDto: {},
});
const FaultReportList = ref([]);

// 获取维修单详情
const getMaintainOrderDetail = async (bikeCode) => {
  FaultReportList.value = [];
  const params = {
    receiverId: userInfo.value.staffId,
    bikeCode,
  };
  //   console.log(params, "获取维修单详情参数");
  try {
    //获取车辆信息
    const bickRes = await api.callEbikeInfo(
      "getBikeINfoData?bikeCode=" + bikeCode
    );
    if (bickRes.code === 200) {
      bickInfo.value = bickRes.data;
    }

    const FaultReportRes = await api.callEbikeInfo(
      "getFaultReportList?bikeCode=" + bikeCode,
      {},
      "get"
    );
    if (FaultReportRes.code === 200) {
      FaultReportList.value = FaultReportRes.data;
      console.log(FaultReportList.value, "====");
    }

    // console.log(FaultReportRes);

    // console.log(bickRes, "获取车辆信息");
  } catch (error) {
    console.error("获取维修单详情失败:", error);
  }
};

//经纬度格式化
const formatCoordinates = (longitude, latitude) => {
  if (!longitude || !latitude) return "--";
  return `${longitude}, ${latitude}`;
};

// 查看地图
const viewMap = (lng, lat) => {
  uni.navigateTo({
    url: "/pages/map/map-findbike?longitude=" + lng + "&latitude=" + lat,
  });
};
onLoad((option) => {
  const { bikeCode } = navigator.getParams(option);
  userInfo.value = uni.getStorageSync("userInfo");
  if (bikeCode) {
    getMaintainOrderDetail(bikeCode);
  }
});

// 点击接单
const hanldeOrder = (item) => {
  console.log(item, "点击接单");
  const faultIds = [item.faultReportId];

  const params = {
    bikeCode: item.bikeCode,
    faultIds: faultIds,
    receiverId: userInfo.value.staffId,
  };

  console.log(params);

  api.callEbikeInfo("createWorkOrder", params).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "接单成功",
        icon: "success",
        duration: 2000,
      });
      getMaintainOrderDetail(item.bikeCode);
    }
  });
};

onUnload(() => {
  console.log("组件卸载-----22");
});
</script>

<script>
export default {
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.maintainOrderDetail-main {
  width: 100%;
  height: 100vh;

  .content-wrapper {
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    overflow-y: auto;

    .deepBlackBoldText {
      font-weight: bold;
    }

    :deep(.uni-forms .uni-forms-item__content) {
      position: relative;
      font-size: 14px;
      flex: 1;
      box-sizing: border-box;
      flex-direction: row;
      line-height: 36px;
    }

    :deep(.uni-forms .uni-forms-item) {
      position: relative;
      display: flex;
      flex-direction: row;
      margin-bottom: 10px !important;
    }
  }

  .fancy-button {
    padding: 10rpx 24rpx;
    margin: 15rpx 0;
    background: linear-gradient(to right, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 191, 255, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;

    &:hover {
      box-shadow: 0 8px 16px rgba(0, 191, 255, 0.4);
    }

    &:active {
      transform: scale(0.95);
      box-shadow: 0 4px 8px rgba(0, 191, 255, 0.2);
    }
  }
}

.center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>