338 lines
9.0 KiB
Vue
338 lines
9.0 KiB
Vue
<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"
|
|
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> |