aiot-app/pages/warehouse/reportLoss copy/components/CardList.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.code }}</text>
        <text>名称：{{ item.name }}</text>
      </view>
      <view class="kd-col">
        <text>报损报溢部门：{{ item.reportDeptName }}</text>
        <text>审核人：{{ item.auditName }}</text>
      </view>
      <view class="kd-col">
        <text
          class="status"
          :class="
            statusList[item.status && item.status] &&
            statusList[item.status && item.status].class
          "
          >{{ statusList[item.status] && statusList[item.status].label }}</text
        >
        <text class="text-danger">创建时间 {{ item.createTime }}</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: 'normal', label: '待审核' },
        0: { class: 'text-danger', label: '驳回' },
        3: { class: 'normal', label: '草稿' },
        2: { class: 'text-primary', label: '通过' }
      }
    }
  },
  methods: {
    goDetail ({ id }) {
      uni.navigateTo({
        url: `/pages/warehouse/reportLoss/detail?&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 {
        display: inline-block;
        padding: 4rpx 10rpx;
        border-radius: 18rpx;

        &.normal {
          background-color: $page-bg;
        }
        &.text-danger {
          background-color: rgba($color: $uni-color-order-error, $alpha: 0.1);
        }
        &.text-primary {
          background-color: rgba($color: $j-primary-green, $alpha: 0.1);
        }
      }
    }
    .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>