aiot-app/pages/warehouse/outHouse/components/CardList copy.vue

<template>
  <view class="marginTop">
    <view
      v-for="(item, index) in list"
      class="kd-row"
      :key="item.id"
      @click="goDetail(item)"
      v-show="list.length !== 0"
    >
      <!-- 进度组件 -->
      <view class="kd-col">
        <text class="title">{{ item.bizNum }}</text>
        <text>{{ item.planName }}</text>
      </view>
      <view class="kd-col">
        <text>{{ item.createUserName }}</text>
        <text>{{ item.documentSource }}</text>
      </view>
      <view class="kd-col">
        <text
          class="status"
          :class="
            statusList[item.verifyStatus] && statusList[item.verifyStatus].class
          "
          >{{
            statusList[item.verifyStatus] && statusList[item.verifyStatus].label
          }}</text
        >
        <text class="text-danger" style="width: 400rpx"
          >出库时间 {{ item.verifyStatus == 2 ? item.verifyTime : '' }}</text
        >
      </view>
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data" textSize="22"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      statusList: {
        1: { class: '', label: '待审核' },
        0: { class: 'text-danger', label: '已驳回' },
        2: { class: 'text-primary', label: '已完成' }
      }
    }
  },
  methods: {
    goDetail ({ id }) {
      uni.navigateTo({
        url: `/pages/warehouse/outHouse/details?&id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginTop {
  border-top: 20rpx solid $page-bg;

  .kd-row {
    font-size: 28rpx;
    padding: 14rpx 12rpx 6rpx;
    border-bottom: 1rpx solid $page-bg;
    .kd-col {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rpx;
      color: #aaaaaa;

      .status {
        background-color: $page-bg;
        display: inline-block;
        padding: 4rpx 10rpx;
        border-radius: 18rpx;
      }
    }
    .title {
      font-weight: bold;
      color: #333333;
    }
  }

  .center {
    text-align: center;
    margin-bottom: 10rpx;
    color: #999;
  }
  .no_data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 28rpx;
  }
}
</style>