cashier_app/pagesCreateOrder/index/components/taocanModel.vue

<template>
	<my-model ref="model" borderRadius="12" :title="datas.title">
		<template #desc>
			<scroll-view scroll-y="true" style="height: 50vh;" class="u-p-30 guigeModel">
				<view class="u-m-b-40" v-for="(item,index) in datas.skus" :key="index">
					<view class="u-text-left">
						<view class="color-333">{{item.title}} <text
								style="color:#999">({{item.count}}选{{item.number}})</text> </view>
					</view>
					<view class="u-flex u-m-t-20 u-flex-wrap">
						<view class="item" @tap="chooseSkd(skd,item)" :class="{active:skd.select==true}"
							v-for="(skd,skdIndex) in item.goods" :key="skdIndex">
							{{skd.proName}}
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template #btn>
			<view class="u-p-30 border-top ">
				<view class="u-flex  u-p-b-30 u-row-between">
					<view class="price">
						<text>￥</text>
						<text>{{datas.price}}</text>
					</view>
				</view>
				<view class="u-m-t-10">
					<my-button @tap="confirm">添加</my-button>
				</view>
			</view>
		</template>
	</my-model>
	<uni-popup ref="popup" type="message">
		<uni-popup-message type="info" message="请选择套餐" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script setup>
	import { computed, reactive, ref, watch } from 'vue';
	import infobox from '@/commons/utils/infoBox.js'
	import myModel from '@/components/my-components/my-model.vue'
	import myButton from '@/components/my-components/my-button.vue'
	import { onShow } from '@dcloudio/uni-app';
	const props = defineProps({
		goodsData: {
			type: Object,
			default: () => {}
		},
	})
	const model = ref(null)
	const popup = ref()
	let datas = reactive({
		item: "",
		title: "",
		price: "",
		skus: [],
		// 几选几,的和
		selectNumber: 0,
	})
	
	watch(() => props.goodsData, (newval) => {
		newval.groupSnap.forEach(ele => {
			ele.selectData = []
		})
		datas.item = newval
		datas.title = newval.name
		datas.price = newval.price
		datas.skus = newval.groupSnap
	})
	
	const selectNumber = computed(() => {
		return datas.skus.reduce((prve, cur) => {
			console.log(prve)
			return 0 + cur.number
		}, 0)
	})
	
	const emits = defineEmits(['confirm', 'updateSku'])
	
	function confirm() {
		// 将数据保存进对应的值
		let arr = []
		let arrlength = 0
		datas.selectNumber = 0
		datas.skus.map(ele => {
			let group = {
				...ele,
				goods: [],
			}
			if(ele.goods&&ele.goods.length>0){
				ele.goods.map(item=>{
					if(item.select){
						group.goods.push(item)
						arrlength++
					}
				})
			}
			arr.push(group)
			datas.selectNumber += ele.number
		})
		console.log(arrlength)
		console.log(datas.selectNumber)
		if (arrlength == datas.selectNumber) {
			emits('confirm', arr, datas.item)
			close()
		} else {
			popup.value.open()
		}
	}
	
	/**
	 * 套餐选择处理
	 * @param {Object} skd
	 * @param {Object} item
	 */
	function chooseSkd(skd, item) {
		if (item.selectData.includes(skd.proId)) {
			skd.select = false
			let indexs = item.selectData.indexOf(skd.proId)
			item.selectData.splice(indexs, 1)
		} else {
			if (item.selectData.length < item.number) {
				skd.select = true
				item.selectData.push(skd.proId)
			}
		}

	}

	function open() {
		model.value.open()
	}

	function close() {
		datas.selectNumber = 0
		model.value.close()
	}
	
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.border-top {}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.guigeModel {
		.item {
			color: #666;
			font-size: 24rpx;
			padding: 4rpx 28rpx;
			border: 1px solid #E5E5E5;
			border-radius: 8rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			transition: all .2s ease-in-out;

			&.active {
				border-color: $my-main-color;
				color: $my-main-color;
			}

			&.disabled {
				color: #ccc;
				border-color: #eee;
			}
		}
	}

	.price {
		color: #EB4F4F;
	}

	.border-top {
		border-top: 1px solid #E5E5E5;
	}
</style>