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 class="fs_fw">{{ 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 fs_fw">
				<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 fs_fw" style="float: right;">
				查看详情
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import itemConfig from './config.js'
	// import dictMixins from '@/mixins/dictMixins'
	export default {
		// mixinexportctMixins],
		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 28rpx;
		}

		.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 {
				margin-top: 10rpx;
				display: flex;

				.label {
					// text-align: right;
					width: 30%;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 38rpx;
					word-wrap: break-word;
				}

				.content {
					flex: 1;
					width: 70%;
				}
			}
		}
	}

	.orderTitle {
		color: #4b7902;
		margin-right: 10rpx;
	}

	.fs_fw {
		font-size: 28rpx;
		line-height: 38rpx;
	}
</style>