cmgd-mini-app/pages/index/goodsOrderAdd.vue

<template>
	<view class="page-content">
		<view style=" padding: 10rpx;">
			<view class="title">商品 </view>
		
			<nut-form>
				<view class="inline-goods-form" v-for="(item, index) in orderGoods" :key="index">
					<view class="form-row">
						<nut-form-item label-position="top">
							<template v-slot:label>商品</template>
							<template v-slot:default>
								<view style="color: black;" @click="visibleGoodsCascader = true;goodsIndex = index">
									<text v-if="item.goods_type_name && item.goods_name">
										{{ item.goods_type_name }} - {{ item.goods_name }}
									</text>
									<text v-else>请选择商品</text>
								</view>
							</template>
						</nut-form-item>

						<nut-form-item label-position="top">
							<template v-slot:label>售价</template>
							<template v-slot:default>
								<view style="color: black;">
									<text>{{item.goods_price}}</text>
								</view>
							</template>
						</nut-form-item>
					</view>
					<view class="form-row">
						<nut-form-item label-position="top">
							<template v-slot:label>支付状态</template>
							<template v-slot:default>
								<view style="color: black;" @click="openPayStatusPopup('goods',index)">
									<text>{{item.goods_pay_status_txt}}</text>
								</view>
							</template>
						</nut-form-item>
						<nut-form-item label-position="top">
							<template v-slot:label>操作</template>
							<template v-slot:default>
								<view>
									<nut-button type="danger" size="mini" @click="removeGoods(index)">删除商品</nut-button>
								</view>
							</template>
						</nut-form-item>
					</view>
				</view>
			</nut-form>
			<view class="top-bar">
				<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
			</view>
			<view class="title">订单优惠 </view>
			<nut-form>
				<nut-form-item>
					<template v-slot:label>优惠金额</template>
					<template v-slot:default>
						<nut-input v-model="form.discount_amount" placeholder="请输入金额" type="number" />
					</template>
				</nut-form-item>
				<nut-form-item label="备注">
					<nut-textarea v-model="form.remarks" :rows="3" adjust-keyboard-to="bottom"
						placeholder="请输入备注"></nut-textarea>
				</nut-form-item>
			</nut-form>




			<view style="align-items: center;text-align: center; padding: 20rpx 60rpx;">
				<nut-button type="primary" block @click="submitForm">
					提交订单
				</nut-button>
			</view>
		</view>


		<nut-cascader title="商品选择" v-model:visible="visibleGoodsCascader" v-model="cascaderGoodsValue"
			@change="onGoodsChange" @pathChange="onGoodsPathChange" text-key="label" value-key="value"
			children-key="children" :options="selectGoods" :title-ellipsis="false" @open="onOpenGoodsCascader"
			@close="onCloseGoodsCascader"></nut-cascader>



		<!-- v-model="popupPaymentStatusVal" -->
		<nut-popup v-model:visible="visiblePaymentStatusPopup" position="bottom" safe-area-inset-bottom>
			<nut-picker :columns="paymentStatuses" :field-names="{text:'label',value:'value'}" title="选择支付状态"
				@confirm="onConfirmPaymentStatus" @cancel="visiblePaymentStatusPopup = false">
			</nut-picker>
		</nut-popup>



	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		toValue
	} from 'vue';

	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import {
		// fetchCombos,
		fetchGoods,
		fetchAddOrder,
	} from '@/api/index';

	onLoad(options => {
		console.log(options);
	})



	// 支付状态弹窗
	const visiblePaymentStatusPopup = ref(false);
	// 选中的支付状态
	// const popupPaymentStatusVal = ref([])
	// 支付类型
	const popupPaymentTypeVal = ref('')
	// 支付状态
	const paymentStatuses = [{
			value: 1,
			label: '已付'
		},

	];

	const openPayStatusPopup = (type, index = -1) => {
		popupPaymentTypeVal.value = type
		goodsPayIndex.value = index // 只有type = goods 生效
		visiblePaymentStatusPopup.value = true
		console.log(type);
	}
	const onConfirmPaymentStatus = (selectedValue) => {
		if (popupPaymentTypeVal.value == 'goods' && goodsPayIndex.value >= 0) {
			console.log("处理商品支付状态", goodsPayIndex.value);
			orderGoods.value[goodsPayIndex.value].goods_pay_status_txt = selectedValue.selectedOptions[0].label
			orderGoods.value[goodsPayIndex.value].goods_pay_status = selectedValue.selectedOptions[0].value
		}
		console.log(form);
		visiblePaymentStatusPopup.value = false
		popupPaymentTypeVal.value = ''
		goodsPayIndex.value = -1
	}



	// 订单商品列表
	const orderGoods = ref([
		// 	{
		// 	goods_type_name: null,
		// 	goods_type_id: null,
		// 	goods_name: null,
		// 	goods_id: null,
		// 	goods_price: null,
		// 	goods_pay_status: 0,
		// 	goods_pay_status_txt: "请选择",
		// 	cascader_val: []
		// },
	])
	// 当前操作的商品
	const goodsPayIndex = ref(0)
	// 当前操作的商品
	const goodsIndex = ref(0)
	// 添加规则
	const addGoods = () => {
		console.log(orderGoods.value);
		orderGoods.value.push({
			goods_type_name: null,
			goods_type_id: null,
			goods_name: null,
			goods_id: null,
			goods_price: null,
			goods_pay_status: 1,
			goods_pay_status_txt: "已付",
			cascader_val: []
		})
	}
	// 删除商品
	const removeGoods = (index) => {
		orderGoods.value.splice(index, 1)
	}
	// 显示商品选择
	const visibleGoodsCascader = ref(false)
	// 商品选中
	const cascaderGoodsValue = computed(() => {
		let cascader_val = [];
		if (goodsIndex.value >= 0) {
			return orderGoods.value[goodsIndex.value]?.cascader_val ?? []
		} else {
			return cascader_val;
		}
	});
	const onGoodsChange = (...args) => {
		console.log("onGoodsChange", args);
	}
	// 选择商品
	const onGoodsPathChange = (args) => {
		console.log("onGoodsPathChange", args);
		console.log("goodsIndex", goodsIndex.value);
		console.log("orderGoods.value[goodsIndex.value]", orderGoods.value[goodsIndex.value]);
		orderGoods.value[goodsIndex.value].goods_type_name = null
		orderGoods.value[goodsIndex.value].goods_type_id = null
		orderGoods.value[goodsIndex.value].goods_name = null
		orderGoods.value[goodsIndex.value].goods_id = null
		orderGoods.value[goodsIndex.value].goods_price = null
		if (args.length >= 1 && args[0] !== null) {
			orderGoods.value[goodsIndex.value].goods_type_name = args[0].text
			orderGoods.value[goodsIndex.value].goods_type_id = args[0].value
		}
		if (args.length >= 2 && args[1] !== null) {
			orderGoods.value[goodsIndex.value].goods_name = args[1].text
			orderGoods.value[goodsIndex.value].goods_id = args[1].value
			orderGoods.value[goodsIndex.value].goods_price = args[1].goods_price

		}
		console.log("orderGoods.value[goodsIndex.value]", orderGoods.value[goodsIndex.value]);
	}
	const onCloseGoodsCascader = () => {
		console.log("onCloseGoodsCascader");
		console.log("goodsIndex.value", goodsIndex.value);
		if (orderGoods.value[goodsIndex.value].goods_type_id && orderGoods.value[goodsIndex.value].goods_id) {
			orderGoods.value[goodsIndex.value].cascader_val = [
				orderGoods.value[goodsIndex.value].goods_type_id,
				orderGoods.value[goodsIndex.value].goods_id
			]
		}
		goodsIndex.value = 0
		console.log("goodsIndex.value", goodsIndex.value);
	}
	const onOpenGoodsCascader = () => {
		console.log("onOpenGoodsCascader");
		console.log("goodsIndex.value", goodsIndex.value);
	}


	const form = reactive({
		order_type: 2, // 开台订单
		discount_amount: null, // 优惠金额
		remarks: null
	})


	// 商品列表
	const selectGoods = ref([])
	onMounted(() => {
		fetchGoods().then(res => {
			selectGoods.value = res;
		})
	})



	// 提交表单
	const submitForm = () => {
		let data = {
			order_goods: orderGoods.value,
			order: form
		}
		console.log('提交的订单数据:', data);
		fetchAddOrder(data).then(res => {
			console.log(res);
			uni.showToast({
				icon: 'none',
				title: '商品订单记录成功'
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				});
				// uni.navigateBack({
				// 	delta: 1 // 返回上一页
				// });
			}, 500)
		})

	};
</script>


<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		background-color: #f2f3f5;

	}


	.title {
		padding: 0 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		// font-weight: 400;
		color: #909ca4;
	}

	.inline-form {
		display: flex;
		justify-content: space-between;
		gap: 10rpx;
		/* 在元素之间添加间距 */
	}

	.top-bar {
		background: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #eee;
		// position: sticky;
		// bottom: 0;
		// z-index: 999;
	}

	/* 每个商品项容器 */
	.inline-goods-form {
		// box-sizing: border-box;
	}

	/* 行容器 */
	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}
</style>