aiot-app/pages/pda/selfBuiltPickOrder/components/pickWorkCard.vue

<template>
  <view class="card-wrapper">
    <checkbox-group
      v-for="(item, index) in list"
      :key="index"
      @change="(e) => selectVal(e, item, index)"
    >
      <label class="card" @click="openDetails(item.status, item)">
        <view class="card-header">
          <view class="index">{{ index + 1 }}</view>
          <view class="order">{{ item.code }}</view>
          <view class="status-tag" :class="'status-' + item.status">
            {{ statusText[item.status] }}
          </view>
        </view>

        <view class="row">
          <text class="label">领料单编号：</text>
          <text class="value ellipsis">{{ item.code }}</text>
        </view>

        <view class="row">
          <text class="label">领料单名称：</text>
          <text class="value ellipsis">{{ item.name }}</text>
        </view>

        <view class="row two-col">
          <view class="col">
            <text class="label">领料人：</text>
            <text class="value theme ellipsis">{{ item.executorName }}</text>
          </view>
          <view class="col">
            <text class="label">审核人：</text>
            <text class="value ellipsis">{{ item.joinReviewerName }}</text>
          </view>
        </view>

        <view class="row">
          <text class="label">领料仓库：</text>
          <text class="value ellipsis">{{ item.joinWarehouseName }}</text>
        </view>

        <view class="row">
          <text class="label">类型：</text>
          <text class="value theme">{{ typeMap[item.type] }}</text>
        </view>

        <view class="row">
          <text class="label">领料时间：</text>
          <text class="value ellipsis">{{ item.createTime }}</text>
        </view>
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      statusText: {
        0: "未领料",
        1: "领料中",
        2: "已出库",
      },
      typeMap: {
        1: "自建领料",
        2: "工单领料",
        3: "委外领料",
      },
    };
  },

  methods: {
    selectVal(e, val, index) {
      this.list[index].checked = !this.list[index].checked;
    },

    openDetails(pickStatus, item) {
      if (pickStatus == 1 || pickStatus == 2) {
        let url =
          "/pages/pda/selfBuiltPickOrder/components/selfBuiltPickOrderDetail";
        url += `?item=${JSON.stringify(item)}&status=${pickStatus}`;
        uni.navigateTo({ url });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card-wrapper {
  padding: 20rpx;
}

.card {
  background: #fff;
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
  display: block;
  transition: 0.1s;
}

.card:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 顶部标题区 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14rpx;

  .index {
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 50%;
    background: $theme-color;
    color: #fff;
    text-align: center;
    font-size: 22rpx;
    margin-right: 16rpx;
  }

  .order {
    flex: 1;
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-left: 10rpx;
  }

  .status-tag {
    font-size: 24rpx;
    padding: 4rpx 14rpx;
    border-radius: 8rpx;
    color: #fff;
  }

  .status-0 {
    background: #bfbfbf;
  }
  .status-1 {
    background: #ffa929;
  }
  .status-2 {
    background: #30c26e;
  }
}

/* 信息行 */
.row {
  font-size: 26rpx;
  margin-top: 12rpx;
  display: flex;

  .label {
    color: #999;
    width: 160rpx;
  }
  .value {
    color: #333;
    flex: 1;
  }
  .theme {
    color: $theme-color;
  }
}

/* 两列布局 */
.two-col {
  display: flex;
  justify-content: space-between;

  .col {
    width: 48%;
  }
}

/* 长文本省略 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>