jsh_erp_app/components/good-item/good-item.vue

<template>
	<view class="good-item" @click="toDetail">
		<view class="good-msg">
			<u-image
				:src="item.src"
				width="128rpx"
				height="128rpx"
			></u-image>
			<view class="ss-m-l-16">
				<view class="good-msg-name">{{item.materialName}}</view>
				<view class="good-msg-txm">条形码：{{item.barCode}}</view>
			</view>
		</view>
		<view class="good-cont">
			<view class="good-cont-item">
				<view class="item-label">规格</view>
				<view class="item-value">{{item.materialStandard || '-'}}</view>
			</view>
			<view class="good-cont-item">
				<view class="item-label">批次号</view>
				<view class="item-value">{{item.batchNumber || '-'}}</view>
			</view>
			<view class="good-cont-item">
				<view class="item-label">生产日期</view>
				<view class="item-value">{{item.productionDate || '-'}}</view>
			</view>
			<view class="good-cont-item">
				<view class="item-label">库存</view>
				<view class="item-value">{{item.inventory || '0'}}{{item.commodityUnit || ''}}</view>
			</view>
			<view class="good-cont-item">
				<view class="item-label">库位</view>
				<view class="item-value">{{item.position || '-'}}</view>
			</view>
			<view class="good-cont-item">
				<view class="item-label">订单数量</view>
				<view class="item-value">{{item.operNumber || '0'}}{{item.materialUnit || ''}}</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			toDetail() {
				this.$emit('toDetail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-item {
		padding: 24rpx 0;
		border-bottom: 4rpx solid #F0F6FB;
		.good-msg {
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			&-name {
				color: #333;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 16rpx;
			}
			&-txm {
				color: #999;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 400;
			}
		}
		.good-cont {
			display: grid;
			grid-template-columns: 20% 40% 40%;
			margin-top: 16rpx;
			padding: 0 24rpx;
			&-item {
				font-family: "PingFang SC";
				font-weight: 400;
				margin-bottom: 24rpx;
				.item-label {
					color: #999;
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}
				.item-value {
					color: #000;
					font-size: 28rpx;
				}
			}
		}
	}
	
</style>