aiot-app/pages/home/components/KdCard/index.vue

<template>
  <view class="kd-card">
    <view class="card-title">
      <view class="">
        <text v-if="orderTitle" class="orderTitle">{{ orderTitle }}</text>
        <text>{{ title }}</text>
      </view>
      <text
        v-if="status"
        class="status"
        :class="statusList[item.status && item.status.descp]"
      >
        {{ item.status && item.status.descp }}
      </text>
    </view>

    <view @click="handleDetail">
      <view class="card-body">
	
        <view class="card-col" v-for="itm in colOptions">
          <text class="label">{{ itm.label }}</text>
	
          <text class="content" v-if="itm.formatter">{{
            itm.formatter(item[itm.key])
          }}</text>
          <text class="content" v-else>{{ item[itm.key] }}</text>
        </view>

        <view
          class="asset"
          v-if="type == 'check'"
          :style="dictOpt.asset[item.assetDict]"
        >
          {{ getDictValue('物品类型', item.assetDict) }}
        </view>
      </view>
      <view class="card-footer">
		 
        查看详情<u-icon name="arrow-right"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import itemConfig from './config.js'
import dictMixins from '@/mixins/dictMixins'
export default {
  mixins: [dictMixins],
  props: {
    title: String,
    orderTitle: String,
    item: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      required: true
    },
    status: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      statusList: {
        待接收: 'text-danger',
        待执行: 'text-danger',
        执行中: 'text-warning',
        未修复: 'text-normal'
      },
      dictOpt: {
        asset: {
          1: {
            color: '#027DB4',
            backgroundColor: '#def5ff'
          },
          2: {
            color: '#B8741A',
            backgroundColor: '#fef1e8'
          },
          3: {
            color: '#A30014',
            backgroundColor: '#f9e5e7'
          },
          4: {
            color: 'green',
            backgroundColor: '#67C23A'
          },
          5: {
            color: '#a30014',
            backgroundColor: '#F56C6C'
          },
          6: {
            color: '#f56c6c',
            backgroundColor: '#fbc4c4'
          },
          7: {
            color: '#e6a23c',
            backgroundColor: '#fdf6ec'
          }
        }
      }
    }
  },
  created () {
    this.requestDict('物品类型')
  },

  computed: {
    colOptions () {
      return (
        itemConfig[this.item.workOrderType?.code == 10 ? 'planWx': this.type] || [
          { label: '单号', key: 'workOrderCode' },
          { label: '申请人', key: 'applicantName' },
          { label: '申请时间', key: 'createTime' }
        ]
      )
    }
  },
  methods: {
    handleDetail () {
      this.$emit('handleDetail', this.item)
    }
  }
}
</script>

<style lang="scss" scoped>
.kd-card {
  font-size: 34rpx;
  color: #333;
  background-color: #fff;
  border-radius: 8rpx;
  word-break: break-all;
  .status {
    font-weight: normal;
  }
  .card-title {
    font-weight: bold;
  }
  .card-footer,
  .card-title {
    display: flex;
    justify-content: space-between;
    padding: 12rpx 16rpx;
  }

  .card-body {
    padding: 0 28rpx;
    border-top: 1rpx solid #f2f2f2;
    border-bottom: 1rpx solid #f2f2f2;
    position: relative;
    .asset {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
      padding: 4rpx 8rpx;
    }
    .card-col {
      padding: 8rpx 0;
      display: flex;

      // line-height: ;
      .label {
        display: inline-block;
        width: 6em;
        color: #555;
        text-align: right;
        margin-right: 14rpx;
      }
      .content {
        flex: 1;
      }
    }
  }
}
.orderTitle {
  color: #4b7902;
  margin-right: 10rpx;
}
</style>