626 lines
18 KiB
Vue
626 lines
18 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<view style=" padding: 10rpx;">
|
|
<view class="title">基础台费 </view>
|
|
<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>
|
|
</nut-form>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="title">超时收费 </view>
|
|
<nut-form>
|
|
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
|
|
<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>
|
|
<view class="top-bar">
|
|
<nut-button type="primary" plain size="small" @click="addGoods">新增商品</nut-button>
|
|
</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="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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
<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="visibleFeeTypePopup" position="bottom" safe-area-inset-bottom>
|
|
<nut-picker :columns="feeTypes" :field-names="{text:'label',value:'value'}" title="选择结算方式"
|
|
@confirm="onConfirmFeeType" @cancel="visibleFeeTypePopup = 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,
|
|
fetchRoomOrder,
|
|
} from '@/api/index';
|
|
|
|
onLoad(options => {
|
|
console.log('onLoad');
|
|
// 获取房间ID
|
|
form.room_id = options.roomId
|
|
|
|
getRoomOrder()
|
|
|
|
|
|
console.log(form);
|
|
console.log(options);
|
|
})
|
|
|
|
|
|
const getRoomOrder = () => {
|
|
fetchRoomOrder(form.room_id).then(res => {
|
|
console.log(res);
|
|
form.room_id = res.room_id
|
|
form.order_type = res.order_type
|
|
|
|
form.fee_type = res.fee_type.value
|
|
form.fee_type_name = res.fee_type.text
|
|
form.fee_combo_id = res.fee_combo_id
|
|
form.fee_combo_name = res.fee_combo_name
|
|
form.fee_amount = res.fee_amount
|
|
form.fee_pay_status = res.fee_pay_status.value
|
|
form.fee_pay_status_txt = res.fee_pay_status.text
|
|
|
|
form.over_often = res.over_often
|
|
form.over_amount = res.over_amount
|
|
form.over_pay_status = res.over_pay_status.value
|
|
form.over_pay_status_txt = res.over_pay_status.text
|
|
|
|
// is_show_edit.value = true;
|
|
// console.log("====>", res);
|
|
// form.goods_id = res.goods_id
|
|
// form.goods_name = res.goods_name
|
|
// form.goods_no = res.goods_no
|
|
// form.goods_price = res.goods_price
|
|
// // form.goods_stock = res.goods_stock
|
|
// form.content = res.content
|
|
// form.details_content = res.details_content
|
|
// form.status = res.status.value.toString()
|
|
|
|
// form.degree_id = res.degree?.degree_id ?? 0
|
|
// form.degree_name = res.degree?.degree_name ?? '未选择'
|
|
// form.type_id = res.type?.type_id ?? 0
|
|
// form.type_name = res.type?.name ?? '未选择'
|
|
// form.brand_id = res.brand?.brand_id ?? 0
|
|
// form.brand_name = res.brand?.name ?? '未选择'
|
|
// form.product_id = res.product?.product_id ?? 0
|
|
// form.product_name = res.product?.name ?? '未选择'
|
|
// popup_degree_val.value = [res.degree?.degree_id ?? 0]
|
|
// cascader_product_val.value = [res.type?.type_id ?? 0, res.brand?.brand_id ?? 0, res.product
|
|
// ?.product_id ?? 0
|
|
// ]
|
|
// form.images = []
|
|
// res.image?.forEach(item => {
|
|
// form.images.push({
|
|
// id: item.image_id,
|
|
// file_path: item.file_path,
|
|
// })
|
|
// })
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // 选择房间弹窗
|
|
// const visibleRoomsPopup = ref(false);
|
|
// // 选中的房间
|
|
// const popupRoomsVal = ref([])
|
|
// // 房间列表
|
|
// const rooms = [{
|
|
// value: 1,
|
|
// label: '房间 101'
|
|
// },
|
|
// {
|
|
// value: 2,
|
|
// label: '房间 102'
|
|
// },
|
|
// {
|
|
// value: 3,
|
|
// label: '房间 103'
|
|
// }
|
|
// ];
|
|
// // 选择房间
|
|
// const onConfirmRoom = (selectedValue) => {
|
|
// console.log(selectedValue);
|
|
// form.room_name = selectedValue.selectedOptions[0].label
|
|
// form.room_id = selectedValue.selectedOptions[0].value
|
|
// console.log(form);
|
|
// visibleRoomsPopup.value = false
|
|
// }
|
|
|
|
// 选择房间弹窗
|
|
const visibleFeeTypePopup = ref(false);
|
|
// 台费结算类型
|
|
// const popupFeeTypeVal = ref([])
|
|
// 台费类型选择列表
|
|
const feeTypes = [{
|
|
value: 1,
|
|
label: '美团'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '抖音'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '线下'
|
|
}
|
|
];
|
|
|
|
|
|
// 选择房间
|
|
const onConfirmFeeType = (selectedValue) => {
|
|
console.log(selectedValue);
|
|
form.fee_type_name = selectedValue.selectedOptions[0].label
|
|
form.fee_type = selectedValue.selectedOptions[0].value
|
|
console.log(form);
|
|
if (form.fee_type !== 3) {
|
|
getCombos();
|
|
}
|
|
|
|
visibleFeeTypePopup.value = false
|
|
}
|
|
|
|
const getCombos = () => {
|
|
console.log("获取套餐");
|
|
fetchCombos({
|
|
type: form.fee_type
|
|
}).then(res => {
|
|
console.log(res);
|
|
combos.value = res;
|
|
})
|
|
}
|
|
|
|
|
|
|
|
// 选择套餐弹窗
|
|
const visibleCombosPopup = ref(false);
|
|
// 选中的套餐
|
|
const popupCombosVal = ref([])
|
|
// 套餐列表
|
|
const combos = ref([]);
|
|
// 选择套餐
|
|
const onConfirmCombos = (selectedValue) => {
|
|
console.log(selectedValue);
|
|
form.fee_combo_name = selectedValue.selectedOptions[0].label
|
|
form.fee_combo_id = selectedValue.selectedOptions[0].value
|
|
console.log(form);
|
|
visibleCombosPopup.value = false
|
|
}
|
|
// 支付状态弹窗
|
|
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
|
|
goodsPayIndex.value = index // 只有type = goods 生效
|
|
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
|
|
}
|
|
if (popupPaymentTypeVal.value == 'over') {
|
|
form.over_pay_status_txt = selectedValue.selectedOptions[0].label
|
|
form.over_pay_status = selectedValue.selectedOptions[0].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
|
|
}
|
|
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: 0,
|
|
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: 1, // 开台订单
|
|
room_id: 0,
|
|
fee_type: 0,
|
|
fee_type_name: '请选择',
|
|
fee_combo_id: 0, // 套餐费用ID
|
|
fee_combo_name: '请选择', // 套餐费用名称
|
|
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, // 优惠金额
|
|
|
|
|
|
})
|
|
|
|
|
|
// 商品列表
|
|
const selectGoods = ref([])
|
|
onMounted(() => {
|
|
fetchGoods().then(res => {
|
|
selectGoods.value = res;
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 提交表单
|
|
const submitForm = () => {
|
|
// const formData = {
|
|
// room: room.value,
|
|
// feeType: feeType.value,
|
|
// selectedPackage: selectedPackage.value,
|
|
// amount: amount.value,
|
|
// paymentStatus: paymentStatus.value
|
|
// };
|
|
let data = {
|
|
order_goods: orderGoods.value,
|
|
order: form
|
|
}
|
|
console.log('提交的订单数据:', data);
|
|
// console.log('提交的订单数据:', form);
|
|
fetchAddOrder(data).then(res => {
|
|
console.log(res);
|
|
// selectGoods.value = res;
|
|
})
|
|
|
|
};
|
|
</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> |