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-12 19:28:35 +08:00
parent a14a51d575
commit 8d4e899c08
23 changed files with 916 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
pages/index/goodsOrderAdd.vue Normal file
View File

@@ -0,0 +1,338 @@
<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>

6
pages/index/index.vue
View File

@@ -2,7 +2,7 @@
<view class="page-content">
<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
<view class="top-bar">
<nut-button type="primary" block @click="navigateTo('/pages/index/orderAdd')">
<nut-button type="primary" block @click="navigateTo('/pages/index/goodsOrderAdd')">
新增商品订单
</nut-button>
</view>
@@ -43,7 +43,7 @@
</view>
<!-- 弹出 -->
<nut-popup :custom-style="{ height: '60%' }" v-model:visible="visiblePopup" position="bottom"
<nut-popup :custom-style="{ height: '75%' }" v-model:visible="visiblePopup" position="bottom"
safe-area-inset-bottom :close-on-click-overlay="true" @close="onClosePopup">
<view>
<view class="title">{{tempRoom?.room_name}} </view>
@@ -52,7 +52,7 @@
<nut-input v-model="form.tel" placeholder="请输入尾号"></nut-input>
</nut-form-item>
<nut-form-item label="备注">
<nut-textarea v-model="form.remarks" :rows="3" :adjust-keyboard-to="bottom"
<nut-textarea v-model="form.remarks" :rows="3" :adjust-keyboard-to="bottom"
placeholder="请输入备注"></nut-textarea>
</nut-form-item>
</nut-form>

55
pages/index/orderAdd.vue
View File

@@ -160,6 +160,10 @@
<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>
@@ -239,34 +243,6 @@
// // 选择房间弹窗
// 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);
// 台费结算类型
@@ -296,7 +272,6 @@
if (form.fee_type !== 3) {
getCombos();
}
visibleFeeTypePopup.value = false
}
@@ -486,6 +461,8 @@
discount_amount: null, // 优惠金额
remarks: null
})
@@ -502,13 +479,6 @@
// 提交表单
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
@@ -517,7 +487,18 @@
// console.log('提交的订单数据:', form);
fetchAddOrder(data).then(res => {
console.log(res);
// selectGoods.value = res;
uni.showToast({
icon: 'none',
title: '开台成功'
})
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
});
// uni.navigateBack({
// delta: 1 // 返回上一页
// });
}, 500)
})
};

78
pages/index/orderEdit.vue
View File

@@ -151,14 +151,22 @@
<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="success" block @click="submitForm">
仅保存账单
</nut-button>
</view>
<view style="align-items: center;text-align: center; padding: 20rpx 60rpx;">
<nut-button type="primary" block @click="submitForm">
开台
<nut-button type="danger" block @click="submitForm">
保存账单并结束该房间
</nut-button>
</view>
</view>
@@ -253,36 +261,10 @@
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.discount_amount = res.discount_amount
form.remarks = res.remarks
// 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,
// })
// })
orderGoods.value = res.goods
})
}
@@ -291,33 +273,6 @@
// // 选择房间弹窗
// 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);
// 台费结算类型
@@ -405,8 +360,8 @@
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
@@ -414,7 +369,8 @@
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