qa-prevention-xgf-app/pages/door_access_control/vehicle_info/view.vue

<template>
  <view class="content">
    <view class="card">
      <u-cell-group :border="false">
        <u-cell>
          <view slot="title" class="title">车牌号</view>
          <view slot="label" class="mt-10">{{ info.LICENCE_NO }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">车牌类型</view>
          <view slot="label" class="mt-10">{{ VEHICLE_LICENSE_PLATE_TYPE_MAP[info.LICENCE_TYPE] }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">车辆类型</view>
          <view slot="label" class="mt-10">{{ VEHICLE_TYPE_MAP[info.VEHICLE_TYPE] }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">范围</view>
          <view slot="label" class="mt-10">{{ VEHICLE_PORT_MAP[info.portId] }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">车辆所属部门</view>
          <view slot="label" class="mt-10">{{ info.DEPT_NAME }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">车辆归属人</view>
          <view slot="label" class="mt-10">{{ info.USER_NAME }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">有效期开始</view>
          <view slot="label" class="mt-10">{{ info.VISIT_START_TIME }}</view>
        </u-cell>
        <u-cell>
          <view slot="title" class="title">有效期结束</view>
          <view slot="label" class="mt-10">{{ info.VISIT_END_TIME }}</view>
        </u-cell>
        <template v-if="info.IS_AUDIT === '2' || info.IS_AUDIT === '3'">
          <u-cell>
            <view slot="title" class="title">审核状态</view>
            <view slot="label" class="mt-10">{{ IS_AUDIT_LIST[info.IS_AUDIT] }}</view>
          </u-cell>
          <u-cell>
            <view slot="title" class="title">企业审核人</view>
            <view slot="label" class="mt-10">{{ info.QY_AUDITOR_NAME }}</view>
          </u-cell>
          <u-cell>
            <view slot="title" class="title">企业审核时间</view>
            <view slot="label" class="mt-10">{{ info.QY_AUDIT_DATE }}</view>
          </u-cell>
          <u-cell>
            <view slot="title" class="title">打回原因</view>
            <view slot="label" class="mt-10">{{ info.QY_REMARK }}</view>
          </u-cell>
        </template>
        <u-cell v-if="info.drivingImgs && info.drivingImgs.length > 0">
          <view slot="title" class="title">行驶证照片：</view>
          <view slot="label" class="mt-10">
            <view style="display: flex;flex-wrap: wrap">
              <view v-for="(item, index) in info.drivingImgs" :key="index" class="ml-10 mt-10">
                <u--image :showLoading="true" :src="item.FILEPATH" width="80px" height="80px"
                          @click="previewImage(item.FILEPATH, info.drivingImgs)"></u--image>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell v-if="info.vehicleImgs && info.vehicleImgs.length > 0" >
          <view slot="title" class="title">车辆照片：</view>
          <view slot="label" class="mt-10">
            <view style="display: flex;flex-wrap: wrap">
              <view v-for="(item, index) in info.vehicleImgs" :key="index" class="ml-10 mt-10">
                <u--image :showLoading="true" :src="item.FILEPATH" width="80px" height="80px"
                          @click="previewImage(item.FILEPATH, info.vehicleImgs)"></u--image>
              </view>
            </view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import { getVehiclemessageView, getVehicleTypeList } from "@/api";

export default {
  data() {
    return {
      info: {},
      VEHICLE_LICENSE_PLATE_TYPE_MAP: {
        0: "白牌",
        1: "蓝牌",
        2: "黄牌",
        3: "绿牌",
        4: "黑牌",
      },
      VEHICLE_TYPE_MAP: {},
      VEHICLE_PORT_MAP: {
        0: "全部",
        1: "东港区",
        2: "西港区",
      },
      IS_AUDIT_LIST: {
        1: "待审核",
        2: "审核通过",
        3: "审核驳回",
      }
    }
  },
  onShow() {
    this.getData()
    this.getVehicleTypes();
  },
  methods: {
    async getData() {
      const resData = await getVehiclemessageView({VEHICLE_ID: this.$route.query.VEHICLE_ID });
      this.info = resData.pd;
      for (let i = 0; i < resData.pd.drivingImgs?.length; i++) {
        this.info.drivingImgs[i].FILEPATH = this.$filePath + resData.pd.drivingImgs[i].filepath;
      }
      for (let i = 0; i < resData.pd.vehicleImgs?.length; i++) {
        this.info.vehicleImgs[i].FILEPATH = this.$filePath + resData.pd.vehicleImgs[i].filepath;
      }
    },
    async getVehicleTypes() {
      const { list } = await getVehicleTypeList();
      const TYPE_LIST = [];
      for (let i = 0; i < list.length; i++){
        TYPE_LIST.push({id: list[i].BIANMA, name: list[i].NAME})
      }
      const TYPE_MAP = new Map(TYPE_LIST.map(item => [item.id, item.name]));
      // 如果你需要将 Map 转换为普通对象
      this.VEHICLE_TYPE_MAP = Object.fromEntries(TYPE_MAP);
    },
    previewImage(src, srcArr) {
      const urls = srcArr.map((item) => item.FILEPATH);
      uni.previewImage({
        urls,
        current: src,
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>