spring
2025-11-19 af4f45eaa2703ecf991bd10f07f6df179f2677d9
src/pages/routingInspection/product_card/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,202 @@
<template>
  <wd-card class="card_bg" @click="handleCardClick">
    <template #title>
      <view class="flex justify-between w-full">
        <text class="font-medium text-[#252525]">记录位置: {{ data[map.recordPosition] }}</text>
        <wd-tag color="#0D867F" bg-color="#E7F4EC">
          <text class="text-xs">{{ data[map.model] }}</text>
        </wd-tag>
      </view>
    </template>
    <wd-row class="my-2">
      <wd-col :span="24">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            ç­æ¬¡:
            <text class="text-[#252525]">{{ data[map.workShift] }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2">
      <wd-col :span="24">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            ç­ç»„:
            <text class="text-[#252525]">
              {{ data[map.teamName]?.slice(-2) || data[map.teamName] }}
            </text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2" v-if="data[map.productType]">
      <wd-col :span="24">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            äº§å“ç±»åˆ«:
            <text class="text-[#252525]">{{ data[map.productType] }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2">
      <wd-col :span="12">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            è‡ªæ£€äºº:
            <text class="text-[#252525]">{{ data[map.inspectPerson] }}</text>
          </text>
        </view>
      </wd-col>
      <wd-col :span="12">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            çŠ¶æ€:
            <text class="text-[#252525]">{{ data[map.status] == 1 ? "被驳回" : "巡检" }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2">
      <wd-col :span="16">
        <view class="flex">
          <view class="icon_box">
            <wd-icon name="folder" color="#0D867F"></wd-icon>
          </view>
          <text class="text-[#646874] mx-2">
            è®°å½•æ—¶é—´:
            <text class="text-[#252525]">{{ data[map.recordDate] }}</text>
          </text>
        </view>
      </wd-col>
      <wd-col :span="8">
        <view class="flex" @click.stop>
          <wd-button
            v-if="data[map.status] == 1"
            size="small"
            type="primary"
            @click="showRejectPopup = true"
            style="margin-left: auto"
          >
            æŸ¥çœ‹é©³å›žä¿¡æ¯
          </wd-button>
        </view>
      </wd-col>
    </wd-row>
  </wd-card>
  <wd-popup
    v-model="showRejectPopup"
    title="驳回信息"
    custom-style="border-radius:32rpx;height: 800rpx;width: 600rpx;"
  >
    <wd-card
      v-for="(item, index) in data.rejectList"
      :key="index"
      :class="index % 2 === 0 ? 'reject-card-bg-1' : 'reject-card-bg-2'"
      style="margin-bottom: 8px; padding: 10px; border-radius: 8px"
    >
      <view class="content">
        <view>
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              margin-bottom: 8px;
            "
          >
            <view>{{ item.rejectPerson }}</view>
            <view>{{ item.rejectTime }}</view>
          </view>
          <view
            style="
              color: rgba(0, 0, 0, 0.85);
              font-size: 14px;
              word-break: break-word;
              overflow-wrap: break-word;
              max-width: 100%;
              padding: 5px 0;
            "
          >
            {{ item.rejectReason.reason }}
          </view>
        </view>
      </view>
    </wd-card>
  </wd-popup>
</template>
<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["click"]);
defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  map: {
    type: Object,
    default: () => {},
  },
});
const showRejectPopup = ref<boolean>(false);
const handleCardClick = () => {
  emit("click");
};
</script>
<style lang="scss" scoped>
.card_bg {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
}
// æ·»åŠ ï¼šä¸¤ç§ä¸åŒçš„èƒŒæ™¯è‰²æ ·å¼
.reject-card-bg-1 {
  background-color: #f5f7fa;
}
.reject-card-bg-2 {
  background-color: #eef2f7;
}
.page-class {
  :deep() {
    .custom-shadow {
      box-shadow:
        0 3px 1px -2px rgb(0 0 0 / 20%),
        0 2px 2px 0 rgb(0 0 0 / 14%),
        0 1px 5px 0 rgb(0 0 0 / 12%);
    }
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// ä¿®æ”¹ï¼šè°ƒæ•´å†…容区域的样式
.content {
  padding: 5px;
}
</style>