616 lines
18 KiB
Vue
616 lines
18 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<view style=" padding: 10rpx;">
|
|
<view class="title">基础台费 </view>
|
|
<nut-form>
|
|
<nut-form-item label="结算方式">
|
|
<nut-radio-group v-model="form.fee_type" direction="horizontal">
|
|
<nut-radio label="1">团购</nut-radio>
|
|
<nut-radio label="2">线下</nut-radio>
|
|
</nut-radio-group>
|
|
</nut-form-item>
|
|
</nut-form>
|
|
|
|
|
|
|
|
|
|
<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="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>
|
|
<view style="color: black;">
|
|
<text>{{item.combo_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('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:default>
|
|
<view>
|
|
<nut-button type="danger" size="mini" @click="removeCombos(index)">删除套餐</nut-button>
|
|
</view>
|
|
</template>
|
|
</nut-form-item>
|
|
</view>
|
|
</view>
|
|
<view class="top-bar">
|
|
<nut-button type="primary" plain size="small" @click="addCombos">新增套餐</nut-button>
|
|
</view>
|
|
</nut-form>
|
|
<nut-form v-else>
|
|
<view class="inline-form">
|
|
<nut-form-item label-position="top">
|
|
<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>
|
|
</nut-form>
|
|
|
|
|
|
|
|
<view class="title" v-if="form.fee_type==1">超时收费</view>
|
|
<nut-form v-if="form.fee_type==1 ">
|
|
<view class="inline-form">
|
|
<nut-form-item label-position="top">
|
|
<template v-slot:label>时长(小时)</template>
|
|
<template v-slot:default>
|
|
<nut-input v-model="form.over_often" placeholder="请输入小时" type="number" />
|
|
</template>
|
|
</nut-form-item>
|
|
|
|
<nut-form-item label-position="top">
|
|
<template v-slot:label>超时金额</template>
|
|
<template v-slot:default>
|
|
<nut-input v-model="form.over_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('over')">
|
|
<text>{{form.over_pay_status_txt}}</text>
|
|
</view>
|
|
</template>
|
|
</nut-form-item>
|
|
</view>
|
|
</nut-form>
|
|
|
|
|
|
<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>
|
|
<view class="top-bar">
|
|
<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
|
|
</view>
|
|
</nut-form>
|
|
|
|
|
|
<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" 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>
|
|
|
|
|
|
<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>
|
|
<nut-picker :columns="paymentStatuses" :field-names="{text:'label',value:'value'}" title="选择支付状态"
|
|
@confirm="onConfirmPaymentStatus" @cancel="visiblePaymentStatusPopup = false">
|
|
</nut-picker>
|
|
</nut-popup>
|
|
|
|
<!-- <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> -->
|
|
|
|
|
|
<!-- v-model="popupFeeTypeVal" -->
|
|
<!-- <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 v-model:visible="visibleRoomsPopup" position="bottom" safe-area-inset-bottom>
|
|
<nut-picker v-model="popupRoomsVal" :columns="rooms" :field-names="{text:'label',value:'value'}"
|
|
title="选择房间" @confirm="onConfirmRoom" @cancel="visibleRoomsPopup = 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('onLoad - options', options);
|
|
form.room_id = options.roomId // 获取房间ID
|
|
console.log('onLoad - form', form);
|
|
})
|
|
const selectGoods = ref([]) // 商品列表
|
|
const selectCombos = ref([]) // 套餐列表
|
|
onMounted(() => {
|
|
fetchGoods().then(res => {
|
|
selectGoods.value = res;
|
|
})
|
|
fetchCombos().then(res => {
|
|
selectCombos.value = res;
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const visiblePaymentStatusPopup = ref(false); // 支付状态弹窗
|
|
// const popupPaymentStatusVal = ref([]) // 选中的支付状态
|
|
const popupPaymentTypeVal = ref('') // 支付类型
|
|
// 支付状态
|
|
const paymentStatuses = [{
|
|
value: 1,
|
|
label: '已付'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '未付'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '赠送'
|
|
}
|
|
];
|
|
// 支付弹窗
|
|
const openPayStatusPopup = (type, index = -1) => {
|
|
popupPaymentTypeVal.value = type
|
|
if (type === 'combos') {
|
|
// 套餐
|
|
combosPayIndex.value = index
|
|
} else if (type === 'goods') {
|
|
// 商品
|
|
goodsPayIndex.value = index
|
|
} else {
|
|
|
|
}
|
|
// 展示支付弹窗
|
|
visiblePaymentStatusPopup.value = true
|
|
console.log(type);
|
|
}
|
|
|
|
// 选中支付状态
|
|
const onConfirmPaymentStatus = (selectedValue) => {
|
|
|
|
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 = 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 = label
|
|
orderGoods.value[goodsPayIndex.value].goods_pay_status = value
|
|
}
|
|
console.log(form);
|
|
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 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({
|
|
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 removeGoods = (index) => {
|
|
orderGoods.value.splice(index, 1)
|
|
}
|
|
// 商品选中
|
|
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 = -1
|
|
console.log("goodsIndex.value", goodsIndex.value);
|
|
}
|
|
const onOpenGoodsCascader = () => {
|
|
console.log("onOpenGoodsCascader");
|
|
console.log("goodsIndex.value", goodsIndex.value);
|
|
}
|
|
|
|
|
|
|
|
|
|
const form = reactive({
|
|
order_type: 1, // 开台订单
|
|
room_id: 0, // 房间ID
|
|
fee_type: "1", // 默认是团购
|
|
|
|
fee_amount: null, // 线下支付费用
|
|
fee_pay_status: 0, // 费用支付状态
|
|
fee_pay_status_txt: '请选择', // 费用支付状态
|
|
|
|
over_often: null, // 超时小时
|
|
over_amount: null, // 超时金额
|
|
over_pay_status: 0, // 超时支付状态
|
|
over_pay_status_txt: "请选择", // 超时支付状态
|
|
|
|
discount_amount: null, // 优惠金额
|
|
remarks: null
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 提交表单
|
|
const submitForm = () => {
|
|
let data = {
|
|
order_goods: orderGoods.value,
|
|
order_combos: orderCombos.value,
|
|
order: form
|
|
}
|
|
console.log('提交的订单数据:', data);
|
|
// console.log('提交的订单数据:', form);
|
|
// 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-combo-form {
|
|
border-bottom: 2rpx solid #909ca4;
|
|
|
|
}
|
|
|
|
.inline-combo-form:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 每个商品项容器 */
|
|
.inline-goods-form {
|
|
border-bottom: 2rpx solid #909ca4;
|
|
}
|
|
|
|
.inline-goods-form:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 行容器 */
|
|
.form-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20rpx;
|
|
// margin-bottom: 20rpx;
|
|
}
|
|
</style> |