618 lines
17 KiB
Vue
618 lines
17 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<view style=" padding: 10rpx;">
|
||
<view class="title">基础台费 </view>
|
||
<nut-form>
|
||
<!-- <nut-form-item>
|
||
<template v-slot:label>房间</template>
|
||
<template v-slot:default>
|
||
<view style="color: black;" @click="visibleRoomsPopup = true">
|
||
<text>{{form.room_name}}</text>
|
||
</view>
|
||
</template>
|
||
</nut-form-item> -->
|
||
|
||
|
||
<!-- 台费类型、套餐、支付状态 三者在同一行布局 -->
|
||
<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.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 {
|
||
fetchGoods,
|
||
} from '@/api/index';
|
||
|
||
|
||
// // 选择房间弹窗
|
||
// 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);
|
||
visibleFeeTypePopup.value = false
|
||
}
|
||
|
||
// 选择套餐弹窗
|
||
const visibleCombosPopup = ref(false);
|
||
// 选中的套餐
|
||
const popupCombosVal = ref([])
|
||
// 套餐列表
|
||
const combos = [{
|
||
value: 1,
|
||
label: '美团中包套餐'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '美团小包套餐'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '美团小包套餐'
|
||
},
|
||
];
|
||
|
||
|
||
// 选择套餐
|
||
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.payment_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({
|
||
// room_id: 0,
|
||
// room_name: '选择房间',
|
||
|
||
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
|
||
// };
|
||
console.log('提交的订单数据:', orderGoods.value);
|
||
};
|
||
</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;
|
||
}
|
||
|
||
|
||
// .inline-goods-form {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// gap: 10rpx;
|
||
// /* 在元素之间添加间距 */
|
||
// }
|
||
// .inline-goods-form {
|
||
// display: flex;
|
||
// flex-wrap: nowrap;
|
||
// /* 防止换行 */
|
||
// align-items: flex-start;
|
||
// gap: 10rpx;
|
||
// margin-bottom: 20rpx;
|
||
// padding: 20rpx;
|
||
// background-color: #f8f9fa;
|
||
// border-radius: 16rpx;
|
||
// box-sizing: border-box;
|
||
// overflow: hidden;
|
||
// /* 防止溢出 */
|
||
// }
|
||
|
||
// /* 关键：为每个表单项设置适当的flex属性 */
|
||
// .inline-goods-form .nut-form-item {
|
||
// flex: 1; /* 平均分配空间 */
|
||
// min-width: 0; /* 重要：允许内容收缩 */
|
||
// max-width: 100%; /* 防止溢出 */
|
||
// word-break: break-word; /* 文本换行 */
|
||
// overflow: hidden; /* 隐藏溢出内容 */
|
||
// }
|
||
|
||
// /* 确保内部元素不会撑开 */
|
||
// .inline-goods-form .nut-form-item__body {
|
||
// width: 100%;
|
||
// overflow: hidden;
|
||
// }
|
||
|
||
// /* 调整按钮大小 */
|
||
// .inline-goods-form .nut-button {
|
||
// max-width: 100%;
|
||
// white-space: nowrap;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
// }
|
||
|
||
// .inline-goods-form {
|
||
// display: flex;
|
||
// flex-wrap: wrap; /* 确保元素在不足的宽度时换行 */
|
||
// justify-content: space-between;
|
||
|
||
// gap: 10rpx; /* 设置每个表单项之间的间距 */
|
||
// width: 100%;
|
||
// // box-sizing: border-box;
|
||
// }
|
||
// .inline-goods-form-item-50 {
|
||
// flex: 0 0 50% !important; /* 第一个表单项占 50% */
|
||
// }
|
||
|
||
// .inline-goods-form-item-25 {
|
||
// flex: 0 0 25% !important; /* 其他两个表单项各占 25% */
|
||
// }
|
||
|
||
// .inline-item {
|
||
// flex: 1;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// }
|
||
</style> |