iuu/cmgd-mini-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理多选套餐

Browse Source
This commit is contained in:
建超
2026-01-27 19:40:07 +08:00
parent e04cf17a37
commit 28d58bd38b
6 changed files with 399 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
pages/index/orderAdd.vue
View File

@@ -17,27 +17,17 @@
<nut-form v-if="form.fee_type==1">
<view class="inline-combo-form" v-for="(item, index) in orderCombos" :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="visibleComboTypePopup = true">
<text v-if="item.combo_type_name">{{item.combo_type_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;" @click="visibleCombosPopup = true">
<text v-if="item.combo_name">{{item.combo_name}}</text>
<text v-else>选择套餐</text>
<view style="color: black;" @click="visibleCombosCascader = true;combosIndex = index">
<text v-if="item.combo_type_name && item.combo_name">
{{ item.combo_type_name }} - {{ item.combo_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>
@@ -46,20 +36,18 @@
</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('combo',index)">
<view style="color: black;" @click="openPayStatusPopup('combos',index)">
<text>{{item.combo_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
<nut-form-item label-position="top">
<template v-slot:label> </template>
<template v-slot:label>操作</template>
<template v-slot:default>
<view>
<nut-button type="danger" size="mini" @click="removeCombos(index)">删除套餐</nut-button>
@@ -68,45 +56,6 @@
</nut-form-item>
</view>
</view>
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
<!-- <view class="inline-form" v-for="(item, index) in orderCombos" :key="index"> -->
<!-- 台费类型选择 -->
<!-- <nut-form-item label-position="top">
<template v-slot:label>套餐平台</template>
<template v-slot:default>
<view style="color: black;" @click="visibleComboTypePopup = true">
<text>{{form.combo_type_name}}</text>
</view>
</template>
</nut-form-item> -->
<!-- 套餐选择 -->
<!-- <nut-form-item label-position="top" v-if="form.fee_type === 1 || form.fee_type === 2">
<template v-slot:label>选择团购</template>
<template v-slot:default>
<view style="color: black;" @click="visibleCombosPopup = true">
<text>{{form.fee_combo_name}}</text>
</view>
</template>
</nut-form-item> -->
<!-- 金额输入框 -->
<!-- <nut-form-item label-position="top" v-else>
<template v-slot:label>线下收款</template>
<template v-slot:default>
<nut-input v-model="form.fee_amount" placeholder="请输入金额" type="number" />
</template>
</nut-form-item> -->
<!-- 支付状态选择 -->
<!-- <nut-form-item label-position="top">
<template v-slot:label>支付状态</template>
<template v-slot:default>
<view style="color: black;" @click="openPayStatusPopup('fee')">
<text>{{form.fee_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
</view> -->
<view class="top-bar">
<nut-button type="primary" plain size="small" @click="addCombos">新增套餐</nut-button>
</view>
@@ -131,45 +80,6 @@
</nut-form>
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
<!-- <view class="inline-form"> -->
<!-- 台费类型选择 -->
<!-- <nut-form-item label-position="top">
<template v-slot:label>结算方式</template>
<template v-slot:default>
<view style="color: black;" @click="visibleFeeTypePopup = true">
<text>{{form.fee_type_name}}</text>
</view>
</template>
</nut-form-item> -->
<!-- 套餐选择 -->
<!-- <nut-form-item label-position="top" v-if="form.fee_type === 1 || form.fee_type === 2">
<template v-slot:label>选择团购</template>
<template v-slot:default>
<view style="color: black;" @click="visibleCombosPopup = true">
<text>{{form.fee_combo_name}}</text>
</view>
</template>
</nut-form-item> -->
<!-- 金额输入框 -->
<!-- <nut-form-item label-position="top" v-else>
<template v-slot:label>线下收款</template>
<template v-slot:default>
<nut-input v-model="form.fee_amount" placeholder="请输入金额" type="number" />
</template>
</nut-form-item> -->
<!-- 支付状态选择 -->
<!-- <nut-form-item label-position="top">
<template v-slot:label>支付状态</template>
<template v-slot:default>
<view style="color: black;" @click="openPayStatusPopup('fee')">
<text>{{form.fee_pay_status_txt}}</text>
</view>
</template>
</nut-form-item>
</view> -->
<view class="title" v-if="form.fee_type==1">超时收费</view>
<nut-form v-if="form.fee_type==1 ">
@@ -243,10 +153,11 @@
</nut-form-item>
</view>
</view>
<view class="top-bar">
<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
</view>
</nut-form>
<view class="top-bar">
<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
</view>
<view class="title">订单优惠 </view>
@@ -279,6 +190,13 @@
@close="onCloseGoodsCascader"></nut-cascader>
<nut-cascader title="套餐选择" v-model:visible="visibleCombosCascader" v-model="cascaderCombosValue"
@change="onCombosChange" @pathChange="onCombosPathChange" text-key="label" value-key="value"
children-key="children" :options="selectCombos" :title-ellipsis="false" @open="onOpenCombosCascader"
@close="onCloseCombosCascader"></nut-cascader>
<!-- v-model="popupPaymentStatusVal" -->
<nut-popup v-model:visible="visiblePaymentStatusPopup" position="bottom" safe-area-inset-bottom>
@@ -287,19 +205,19 @@
</nut-picker>
</nut-popup>
<nut-popup v-model:visible="visibleCombosPopup" position="bottom" safe-area-inset-bottom>
<!-- <nut-popup v-model:visible="visibleCombosPopup" position="bottom" safe-area-inset-bottom>
<nut-picker v-model="popupCombosVal" :columns="combos" :field-names="{text:'label',value:'value'}"
title="选择团购套餐" @confirm="onConfirmCombos" @cancel="visibleCombosPopup = false">
</nut-picker>
</nut-popup>
</nut-popup> -->
<!-- v-model="popupFeeTypeVal" -->
<nut-popup v-model:visible="visibleComboTypePopup" position="bottom" safe-area-inset-bottom>
<!-- <nut-popup v-model:visible="visibleComboTypePopup" position="bottom" safe-area-inset-bottom>
<nut-picker :columns="comboTypes" :field-names="{text:'label',value:'value'}" title="选择套餐平台"
@confirm="onConfirmComboType" @cancel="visibleComboTypePopup = false">
</nut-picker>
</nut-popup>
</nut-popup> -->
<!-- <nut-popup v-model:visible="visibleRoomsPopup" position="bottom" safe-area-inset-bottom>
@@ -332,104 +250,28 @@
} from '@/api/index';
onLoad(options => {
console.log('onLoad');
// 获取房间ID
form.room_id = options.roomId
console.log(form);
console.log(options);
console.log('onLoad - options', options);
form.room_id = options.roomId // 获取房间ID
console.log('onLoad - form', form);
})
// 订单套餐
const orderCombos = ref([
// {
// combo_type_name: null,
// combo_type_id: null,
// combo_name: null,
// goods_id: null,
// goods_price: null,
// goods_pay_status: 0,
// goods_pay_status_txt: "请选择",
// cascader_val: []
// },
])
// 新增套餐
const addCombos = () => {
console.log(orderCombos.value);
orderCombos.value.push({
combo_type_name: null,
combo_type_id: null,
combo_id: null,
combo_name: null,
combo_price: null,
combo_pay_status: 0,
combo_pay_status_txt: "请选择",
// goods_price: null,
// cascader_val: []
const selectGoods = ref([]) // 商品列表
const selectCombos = ref([]) // 套餐列表
onMounted(() => {
fetchGoods().then(res => {
selectGoods.value = res;
})
}
// 删除套餐
const removeCombos = (index) => {
orderCombos.value.splice(index, 1)
}
// 选择套餐平台弹窗
const visibleComboTypePopup = ref(false);
// 套餐平台
const comboTypes = [{
value: 1,
label: '美团'
},
{
value: 2,
label: '抖音'
},
];
// 选择套餐平台
const onConfirmComboType = (selectedValue) => {
console.log(selectedValue);
form.fee_type_name = selectedValue.selectedOptions[0].label
form.fee_type = selectedValue.selectedOptions[0].value
console.log(form);
getCombos();
visibleComboTypePopup.value = false // 关闭选择套餐弹窗
}
const getCombos = () => {
console.log("获取套餐");
fetchCombos({
type: form.fee_type
}).then(res => {
console.log(res);
combos.value = res;
fetchCombos().then(res => {
selectCombos.value = res;
})
}
})
// 选择套餐弹窗
const visibleCombosPopup = ref(false);
// 选中的套餐
const popupCombosVal = ref([])
// 套餐列表
const combos = ref([]);
// 选择套餐
const onConfirmCombos = (selectedValue) => {
console.log('selectedValue', selectedValue);
form.fee_combo_name = selectedValue.selectedOptions[0].label
form.fee_combo_id = selectedValue.selectedOptions[0].value
form.fee_combo_price = selectedValue.selectedOptions[0].combo_price
console.log(form);
visibleCombosPopup.value = false
}
// 支付状态弹窗
const visiblePaymentStatusPopup = ref(false);
// 选中的支付状态
const popupPaymentStatusVal = ref([])
// 支付类型
const popupPaymentTypeVal = ref('')
const visiblePaymentStatusPopup = ref(false); // 支付状态弹窗
// const popupPaymentStatusVal = ref([]) // 选中的支付状态
const popupPaymentTypeVal = ref('') // 支付类型
// 支付状态
const paymentStatuses = [{
value: 1,
@@ -444,55 +286,150 @@
label: '赠送'
}
];
// 支付弹窗
const openPayStatusPopup = (type, index = -1) => {
popupPaymentTypeVal.value = type
goodsPayIndex.value = index // 只有type = goods 生效
if (type === 'combos') {
// 套餐
combosPayIndex.value = index
} else if (type === 'goods') {
// 商品
goodsPayIndex.value = index
} else {
}
// 展示支付弹窗
visiblePaymentStatusPopup.value = true
console.log(type);
}
// 选中支付状态
const onConfirmPaymentStatus = (selectedValue) => {
if (popupPaymentTypeVal.value == 'fee') {
form.fee_pay_status_txt = selectedValue.selectedOptions[0].label
form.fee_pay_status = selectedValue.selectedOptions[0].value
let label = selectedValue.selectedOptions[0].label
let value = selectedValue.selectedOptions[0].value
if (popupPaymentTypeVal.value == 'fee') {
// 线下支付
form.fee_pay_status_txt = label
form.fee_pay_status = value
}
if (popupPaymentTypeVal.value == 'over') {
form.over_pay_status_txt = selectedValue.selectedOptions[0].label
form.over_pay_status = selectedValue.selectedOptions[0].value
// 处理超时
form.over_pay_status_txt = label
form.over_pay_status = value
}
if (popupPaymentTypeVal.value == 'combos' && combosPayIndex.value >= 0) {
// 处理套餐
console.log("处理套餐支付状态", combosPayIndex.value);
orderCombos.value[combosPayIndex.value].combo_pay_status_txt = label
orderCombos.value[combosPayIndex.value].combo_pay_status = value
}
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
orderGoods.value[goodsPayIndex.value].goods_pay_status_txt = label
orderGoods.value[goodsPayIndex.value].goods_pay_status = value
}
console.log(form);
visiblePaymentStatusPopup.value = false
popupPaymentTypeVal.value = ''
goodsPayIndex.value = -1
visiblePaymentStatusPopup.value = false // 关闭支付弹窗
popupPaymentTypeVal.value = '' // 清空支付类型
goodsPayIndex.value = -1
combosPayIndex.value = -1
}
const orderCombos = ref([]) // 订单套餐
const combosPayIndex = ref(-1) // 当前操作的套餐
const combosIndex = ref(-1) // 当前操作的套餐
const visibleCombosCascader = ref(false) // 显示套餐选择
// 新增套餐
const addCombos = () => {
console.log(orderCombos.value);
orderCombos.value.push({
combo_type_name: null,
combo_type_id: null,
combo_id: null,
combo_name: null,
combo_price: null,
combo_pay_status: 0,
combo_pay_status_txt: "请选择",
cascader_val: []
})
}
// 删除套餐
const removeCombos = (index) => {
orderCombos.value.splice(index, 1)
}
// 套餐选中
const cascaderCombosValue = computed(() => {
let cascader_val = [];
if (combosIndex.value >= 0) {
return orderCombos.value[combosIndex.value]?.cascader_val ?? []
} else {
return cascader_val;
}
});
// 选择套餐
const onCombosPathChange = (args) => {
console.log("onCombosPathChange", args);
console.log("combosIndex", combosIndex.value);
console.log("orderCombos.value[combosIndex.value]", orderCombos.value[combosIndex.value]);
orderCombos.value[combosIndex.value].combo_type_name = null
orderCombos.value[combosIndex.value].combo_type_id = null
orderCombos.value[combosIndex.value].combo_id = null
orderCombos.value[combosIndex.value].combo_name = null
orderCombos.value[combosIndex.value].combo_price = null
if (args.length >= 1 && args[0] !== null) {
orderCombos.value[combosIndex.value].combo_type_name = args[0].text
orderCombos.value[combosIndex.value].combo_type_id = args[0].value
}
if (args.length >= 2 && args[1] !== null) {
orderCombos.value[combosIndex.value].combo_name = args[1].text
orderCombos.value[combosIndex.value].combo_id = args[1].value
orderCombos.value[combosIndex.value].combo_price = args[1].combo_price
}
console.log("orderCombos.value[combosIndex.value]", orderCombos.value[combosIndex.value]);
}
// 订单商品列表
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 onOpenCombosCascader = () => {
console.log("onOpenCombosCascader");
console.log("combosIndex.value", combosIndex.value);
}
// 关闭选择套餐
const onCloseCombosCascader = () => {
console.log("onCloseCombosCascader");
console.log("combosIndex.value", combosIndex.value);
if (orderCombos.value[combosIndex.value].combo_type_id && orderCombos.value[combosIndex.value].combo_id) {
orderCombos.value[combosIndex.value].cascader_val = [
orderCombos.value[combosIndex.value].combo_type_id,
orderCombos.value[combosIndex.value].combo_id
]
}
combosIndex.value = -1
console.log("combosIndex.value", combosIndex.value);
}
const onCombosChange = (...args) => {
console.log("onCombosChange", args);
}
const orderGoods = ref([]) // 订单商品列表
const goodsPayIndex = ref(-1)// 当前操作的商品
const goodsIndex = ref(-1)// 当前操作的商品
const visibleGoodsCascader = ref(false) // 显示商品选择
// 添加商品
const addGoods = () => {
console.log(orderGoods.value);
orderGoods.value.push({
@@ -510,8 +447,6 @@
const removeGoods = (index) => {
orderGoods.value.splice(index, 1)
}
// 显示商品选择
const visibleGoodsCascader = ref(false)
// 商品选中
const cascaderGoodsValue = computed(() => {
let cascader_val = [];
@@ -555,7 +490,7 @@
orderGoods.value[goodsIndex.value].goods_id
]
}
goodsIndex.value = 0
goodsIndex.value = -1
console.log("goodsIndex.value", goodsIndex.value);
}
const onOpenGoodsCascader = () => {
@@ -571,12 +506,6 @@
room_id: 0, // 房间ID
fee_type: "1", // 默认是团购
// fee_combo_id: 0, // 套餐ID
// fee_combo_name: '请选择', // 套餐名称
// fee_combo_price: null,
fee_amount: null, // 线下支付费用
fee_pay_status: 0, // 费用支付状态
fee_pay_status_txt: '请选择', // 费用支付状态
@@ -591,14 +520,6 @@
})
// 商品列表
const selectGoods = ref([])
onMounted(() => {
fetchGoods().then(res => {
selectGoods.value = res;
})
})
@@ -606,6 +527,7 @@
const submitForm = () => {
let data = {
order_goods: orderGoods.value,
order_combos: orderCombos.value,
order: form
}
console.log('提交的订单数据:', data);
@@ -665,11 +587,22 @@
// z-index: 999;
}
.inline-combo-form {}
.inline-combo-form {
border-bottom: 2rpx solid #909ca4;
}
.inline-combo-form:last-child {
border-bottom: none;
}
/* 每个商品项容器 */
.inline-goods-form {
// box-sizing: border-box;
border-bottom: 2rpx solid #909ca4;
}
.inline-goods-form:last-child {
border-bottom: none;
}
/* 行容器 */
@@ -678,6 +611,6 @@
justify-content: space-between;
align-items: flex-start;
gap: 20rpx;
margin-bottom: 20rpx;
// margin-bottom: 20rpx;
}
</style>