aiot-app/pages/home/wt/components/common/commonProductList.vue

<template>
	<view>
		<view v-for="(item, index) in list" :key="index">
			<view class="product-card">
				<view class="card-header">
					<text class="product-name">{{ item.productName || '物品' + (index + 1) }}</text>
					<text class="product-price">{{ item.productCode || '-' }}</text>
				</view>
				<view class="card-body">
					<view class="info-row" v-for="(field, idx) in tableField" :key="idx">
						<text class="info-label">{{ field.label }}：</text>
						<text class="info-value">{{ formatValue(item, field) }} {{ field.unit || '' }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="!list || list.length === 0" text="暂无物品清单" marginTop="100"></u-empty>
	</view>
</template>

<script>
import {transactionMethodsOp,shippingModeOp,shippingModePurchaseOp, pricingWayList, levelList, quoteTypeOp} from '@/enum/dict.js'
import { mapGetters } from 'vuex'
export default {
	name: 'common-product-list',
	computed: {
		...mapGetters(['getDictValue'])
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		tableField: {
			type: Array,
			default: () => [
				{ label: '类型', field: 'productCategoryName' },
				{ label: '批次号', field: 'batchNo' },
				// { label: '名称', field: 'productName' },
				{ label: '计价方式', field: 'pricingWay', type: 'pricingWay' },
				// { label: '编码', field: 'productCode' },
				{ label: '规格', field: 'specification' },
				{ label: '牌号', field: 'brandNo' },
				{ label: '客户代号', field: 'customerMark' },
				{ label: '包装规格', field: 'packingSpecification' },
				{ label: '机型', field: 'modelKey' },
				{ label: '颜色', field: 'colorKey' },
				{ label: '价格类型', field: 'goodsPriceType', type: 'dict', dictName: '商品价格类型' },
				{ label: '单价', field: 'singlePrice' },
				{ label: '折让单价', field: 'discountSinglePrice' },
				{ label: '单重', field: 'singleWeight' },
				{ label: '总重', field: 'totalWeight' },
				{ label: '增重重量', field: 'increaseTotalWeight' },
				{ label: '数量', field: 'saleCount' },
				{ label: '计量数量', field: 'totalCount' },
				{ label: '税率', field: 'taxRate', unit: '%'},
				{ label: '合计', field: 'totalPrice' },
				{ label: '折让合计金额', field: 'discountTotalPrice' },
			]
		}
	},
	data() {
		return {
			pricingWayList
		}
	},
	methods: {
		// 格式化字段值
		formatValue(item, field) {
			let value = item[field.field]
			// 数量字段显示单位
			if (field.field === 'saleCount') {
				const unit = item.saleUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			// 计量数量字段显示单位
			if (field.field === 'totalCount') {
				const unit = item.measuringUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			// 单重字段显示单位
			if (field.field === 'singleWeight') {
				const unit = item.weightUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			// 总重字段显示单位
			if (field.field === 'totalWeight') {
				const unit = item.weightUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			// 增重重量字段显示单位
			if (field.field === 'increaseTotalWeight') {
				const unit = item.weightUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			// 计价方式特殊处理
			if (field.type === 'pricingWay') {
				const found = this.pricingWayList.find(p => p.id === value)
				return found ? found.name : '-'
			}
			// 收货状态特殊处理
			if (field.field === 'isException') {
				return value == 1 ? '有异常' : '无异常'
			}
			if (field.field === 'packingQuantity') { 
				const unit = item.packingUnit || ''
				return value ? value + (unit ? ' ' + unit : '') : '-'
			}
			if (field.field === 'type') {
				return value == 1 ? '已回收' : '未回收'
			}
			// 字典类型处理
			if (field.type === 'dict') {
				return this.getDictValue(field.dictName, value) || '-'
			}
			return value || '-'
		}
	}
}
</script>

<style scoped>
.product-card {
	margin: 20rpx;
	padding: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #eee;
	margin-bottom: 16rpx;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.product-price {
	font-size: 26rpx;
	/* color: #157a2c; */
	/* font-weight: bold; */
}

.card-body {
	display: flex;
	flex-wrap: wrap;
}

.info-row {
	width: 50%;
	display: flex;
	padding: 8rpx 0;
	box-sizing: border-box;
}

.info-label {
	color: #666;
	font-size: 26rpx;
	flex-shrink: 0;
}

.info-value {
	color: #333;
	font-size: 26rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>