dingdong-mall/components/goods-card/product-picked.vue

<template>
	<view>
		<view class="bg-white padding-bottom">
			<horizontal-goods-card v-if="product" :ifShowServArea="true" :product="product"></horizontal-goods-card>
			<view v-if="columnTitleArr.length" class="flex justify-between margin-tb-sm">
				<view class="basis-df">{{columnTitleArr[0]}}</view>
				<view class="flex justify-end text-center basis-sm">
					<view v-for="(title, index) in columnTitleArr" :key="index" v-if="index >= 1" class="basis-df">{{title}}</view>
				</view>
			</view>
			<view class="certern-height-with-scroll">
				<view class="flex justify-between margin-tb-xs align-center" v-for="(item,index) in pickedList" :key="item.id">
					<view class='cu-tag padding line-main-color basis-df'>{{item.name}}</view>
					<view v-if="numberBox" class="flex justify-end basis-xs">
						<uni-number-box :min="0" :max="item.maxPieces" :value="item.pickedNum"
							@change="changePiecesNum($event, item)">
						</uni-number-box>
					</view>
					<view v-else-if="item.valColArr && item.valColArr.length > 0" class="flex justify-end basis-sm text-center">
						<uni-number-box class="basis-df" v-for="(valCol, index0) in item.valColArr" :key="index0" v-if="valCol.numberBox"
							:min="0" :max="valCol.max" :value="valCol.value" @change="changePiecesNum($event, item)">
						</uni-number-box>
						<view class="basis-df" v-else>{{valCol.value}}</view>
					</view>
					<view v-else class="flex justify-end basis-sm text-center">
						<view class="basis-df"><text v-if="!showToServNum">×</text>{{item.pickedNum}}</view>
						<view class="basis-df" v-if="showToServNum">
							{{item.toServNum == undefined || item.toServNum == null ? item.secondColumnNum : item.toServNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';

	export default {
		name: "product-picked",
		props: {
			product: {
				type: Object,
				default: null
			},
			pickedList: {
				type: Array,
				default: () => []
			},
			columnTitleArr: {
				type: Array,
				default: () => []
			},
			showToServNum: {
				type: Boolean,
				default: false
			},
			numberBox: {
				type: Boolean,
				default: false
			}
		},
		components: {
			horizontalGoodsCard
		},
		methods: {
			changePiecesNum(curNum, curItem) {
				uni.$emit('changePickedNum', curNum, curItem)
			}
		},
	}
</script>

<style scoped>
	.certern-height-with-scroll {
		max-height: 300rpx;
		overflow: scroll;
	}
</style>