spring
2025-12-04 f7f25f593a731ea71e307257f5cec3ba562dacda
src/components/product_card/index.vue
@@ -2,12 +2,51 @@
  <wd-card class="card_bg">
    <template #title>
      <view class="flex justify-between w-full">
        <text class="font-medium text-[#252525]">设备编号: 1234567891</text>
        <text class="font-medium text-[#252525]">设备编号: {{ data[map.deviceModel] }}</text>
        <wd-tag color="#0D867F" bg-color="#E7F4EC">
          <text class="text-xs">JL/B20-400-35</text>
          <text class="text-xs">{{ data[map.model] }}</text>
        </wd-tag>
      </view>
    </template>
    <wd-row class="my-2" v-if="data[map.systemNo]">
      <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.systemNo] }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2" v-if="data.type === '拉丝' && data.poleModel">
      <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.poleModel }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2" v-if="data.type === '拉丝' && data.contractNo">
      <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.contractNo }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2">
      <wd-col :span="12">
        <view class="flex">
@@ -16,7 +55,7 @@
          </view>
          <text class="text-[#646874] mx-2">
            总需求数量:
            <text class="text-[#252525]">274m</text>
            <text class="text-[#252525]">{{ data[map.totalAmount] }}{{ data[map.unit] }}</text>
          </text>
        </view>
      </wd-col>
@@ -29,7 +68,7 @@
          </view>
          <text class="text-[#646874] mx-2">
            已生产数量:
            <text class="text-[#252525]">202m</text>
            <text class="text-[#252525]">{{ data[map.amount] }}{{ data[map.unit] }}</text>
          </text>
        </view>
      </wd-col>
@@ -40,7 +79,20 @@
          </view>
          <text class="text-[#646874] mx-2">
            待排产数量:
            <text class="text-[#252525]">72m</text>
            <text class="text-[#252525]">{{ data[map.unAmount] }}{{ data[map.unit] }}</text>
          </text>
        </view>
      </wd-col>
    </wd-row>
    <wd-row class="my-2" v-if="data[map.segmentLengthNote]">
      <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.segmentLengthNote] }}</text>
          </text>
        </view>
      </wd-col>
@@ -48,9 +100,21 @@
  </wd-card>
</template>
<script setup lang="ts">
defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  map: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss" scoped>
.card_bg {
  margin-top: 12px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
}