delivery-depot-uniapp/pages/myTask-verification/components/StorageInfo.vue

<template>
  <view class="storage-info">
    <view class="info-card">
      <view class="info-row" style="border: 0">
        <text class="label">库区名称:</text>
        <text class="value">{{ kqxx.kqmc || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">所属企业:</text>
        <text class="value">{{ kqxx.dwmc || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">统一社会信用代码:</text>
        <text class="value">{{ kqxx.tyxydm || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">库区性质:</text>
        <text class="value">{{ filterXZ(kqxx.qyxz) || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">库区地址:</text>
        <text class="value">{{ kqxx.jtdz || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">库区负责人:</text>
        <text class="value">{{ kqxx.kqfzr || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">库区联系方式:</text>
        <text class="value">{{ kqxx.lxdh || "-" }}</text>
      </view>
    </view>
    <view class="info-card" style="margin-top: 20rpx">
      <view class="info-row" style="border: 0">
        <text class="label">占地面积(㎡):</text>
        <text class="value">{{ kqxx.zdmj || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">经度:</text>
        <text class="value">{{ kqxx.jd || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">纬度:</text>
        <text class="value">{{ kqxx.wd || "-" }}</text>
      </view>
      <view class="info-row">
        <text class="label">库区图:</text>

        <image
          @click="handleImageClick(kqxx.resid)"
          class="storage-image"
          :src="kqxx.resid"
          mode="aspectFit"
        />
      </view>
    </view>
    <!-- margin预留空间不生效, 添加空的view元素 -->
    <view style="height: 140rpx"></view>
  </view>
</template>

<script>
import { getKqxxByKqId } from "@/api/task";
import { getDictOptions, DICT_TYPE } from "@/utils/dict.js";
export default {
  name: "StorageInfo",
  props: {
    taskInfo: {
      type: Object, // 根据实际数据类型调整
      default: () => ({}), // 默认值
    },
  },
  data() {
    return {
      kqxx: {},
      qyxzList: [],
    };
  },
  async mounted() {
    this.qyxzList = await getDictOptions(DICT_TYPE.SYSTEM_QYXZ);

    this.getStorageInfo();
  },

  methods: {
    filterXZ(value) {
      return this.qyxzList.find((item) => item.value == value)?.label;
    },

    // 图片预览
    handleImageClick(url) {
      uni.previewImage({
        urls: [url],
      });
    },

    getStorageInfo() {
      getKqxxByKqId({
        kqId: this.taskInfo.kqId,
      }).then((res) => {
        if (res.code === 0) {
          this.kqxx = res.data;
        } else {
          uni.showToast({
            title: res.msg || "获取任务列表失败",
            icon: "none",
          });
        }
      });
    },
    handleVerify(isPassed) {
      // 处理验证结果
      console.log("库区信息验证结果：", isPassed);
    },
  },
};
</script>

<style lang="scss" scoped>
.storage-info {
  padding: 20rpx;
  height: 100%;
  overflow: auto;
  .info-card {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

    .info-row {
      display: flex;
      align-items: center;

      padding: 20rpx 0 20rpx 0;
      justify-content: space-between;
      border-top: 1rpx solid #eee;
      .label {
        color: #666;
        font-size: 28rpx;
      }

      .value {
        color: #000;
        font-size: 28rpx;
      }
    }

    .storage-image {
      width: 400rpx !important;
      height: 200rpx !important;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>