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

<template>
  <view>
    <checkbox-group
      v-for="(item, index) in list"
      :key="index"
      @change="(e) => selectVal(e, item, index)"
    >
      <label>
        <view class="card_box" @click="openDetails(item.status, item)">
          <view class="item_box rx-bc">
            <view class="rx-sc">
              <view class="round">{{ index + 1 }}</view>
              <view class="orderId">{{ item.code }} </view>
            </view>
            <view class="status" :class="[item.status != 0 ? 'FAA' : '']">
              {{
                item.status == 0
                  ? "未领料"
                  : item.status == 1
                  ? "领料中"
                  : item.status == 2
                  ? "已出库"
                  : ""
              }}</view
            >
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">关联工单号：</view>
              <view>{{ item.joinWorkOrderCode }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one perce50 rx-sc">
              <view class="lable">领料人：</view>
              <view class="gylx">{{ item.executorName }}</view>
            </view>
            <view class="item_one perce50 rx-sc">
              <view>关联审核人：</view>
              <view class="gylx">{{ item.joinReviewerName }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">领料仓库：</view>
              <view>{{ item.joinWarehouseName }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">类型：</view>
              <view class="gylx" v-if="item.type == 1">自建领料</view>
              <view class="gylx" v-if="item.type == 2">工单领料</view>
              <view class="gylx" v-if="item.type == 3">委外领料</view>
            </view>
          </view>

          <view class="item_box rx-sc">
            <view class="item_one rx-sc">
              <view class="lable">领料时间：</view>
              <view>{{ item.createTime }}</view>
            </view>
          </view>
        </view>
      </label>
    </checkbox-group>
  </view>
</template>

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

  data() {
    return {
      statusList: {
        4: "待生产",
        5: "生产中",
        6: "已完成",
        7: "已延期",
        8: "待下达",
      },
    };
  },

  created() {
    console.log(this.list, "领料单数据");
  },

  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/picking/bill/index";
        url += `?item=${JSON.stringify(item)}&status=${pickStatus}`;

        uni.navigateTo({
          url,
        });

        // let url = `/pages/pda/picking/bill/index?id=${id}&status=${pickStatus}`;
        // uni.navigateTo({
        //   url,
        // });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card_box {
  width: 100%;
  margin: 20rpx 24rpx;
  padding: 24rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  }

  .item_box {
    margin-top: 20rpx;

    &:first-child {
      margin-top: 0;
    }

    .round {
      width: 44rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, $theme-color 0%, lighten($theme-color, 10%) 100%);
      color: #fff;
      text-align: center;
      font-size: 22rpx;
      font-weight: 600;
      flex-shrink: 0;
      box-shadow: 0 2rpx 8rpx rgba($theme-color, 0.3);
    }

    .orderId {
      color: #333333;
      font-size: 30rpx;
      font-weight: 600;
      margin-left: 16rpx;
      flex: 1;
      line-height: 44rpx;
    }

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #666666;
      word-wrap: break-word;
      display: flex;
      align-items: center;

      .lable {
        color: #999999;
        flex-shrink: 0;
      }
    }

    .gylx {
      color: $theme-color;
      font-weight: 500;
    }

    .perce50 {
      width: 50%;
      padding-right: 12rpx;
      box-sizing: border-box;
    }

    .status {
      padding: 8rpx 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      border-radius: 24rpx;
      background: #f0f0f0;
      color: #666666;
      flex-shrink: 0;

      &.FAA {
        background: linear-gradient(135deg, #fff3e6 0%, #ffe8cc 100%);
        color: #ff8800;
        border: 1rpx solid #ffd699;
      }
    }

    /deep/ .uni-checkbox-input-checked {
      background-color: $theme-color !important;
      border-color: $theme-color !important;
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .card_box {
    margin: 16rpx 20rpx;
    padding: 20rpx;

    .item_box {
      .orderId {
        font-size: 28rpx;
      }

      .item_one {
        font-size: 24rpx;
        line-height: 36rpx;
      }
    }
  }
}
</style>