增加转桌功能，删除部分图片，修复订单列表显示价格不对问题
This commit is contained in:
239
components/change-table.vue
Normal file
239
components/change-table.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view>
|
||||
<up-popup :show="show" mode="center">
|
||||
|
||||
<view class="bg-fff u-p-30 box">
|
||||
<scroll-view direction="vertical" scroll-y style="max-height: 80vh;">
|
||||
<view class="u-flex gap-20">
|
||||
<view>转桌到</view>
|
||||
<view>
|
||||
<chooseTable v-model="form.mewTable"></chooseTable>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex gap-20 u-m-t-32 u-col-baseline">
|
||||
<view>转入类型</view>
|
||||
<up-radio-group v-model="form.type" placement="column">
|
||||
<up-radio label="转桌(可将部分商品转入)" :name="1" :key="1"></up-radio>
|
||||
<up-radio label="并桌(并台会将全部购物车商品转入)" :name="2" :key="2"></up-radio>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
<template v-if="form.type==1">
|
||||
<view class=" u-m-t-32 ">
|
||||
<view class="u-m-b-24">购物车商品</view>
|
||||
<u-table2 :data="nowCartData" :columns="columnsCheck1" row-key="id"
|
||||
@selection-change="handleSelectionChange($event,'now')" />
|
||||
|
||||
</view>
|
||||
<view class=" u-m-t-50 ">
|
||||
<view class="u-m-b-24">历史订单商品</view>
|
||||
<view v-for="(order,orderIndex) in goodsList" class="u-m-t-32" :key="index">
|
||||
<view>第{{ orderIndex }}次下单</view>
|
||||
<u-table2 :data="order" :columns="columnsCheck" row-key="id"
|
||||
@selection-change="handleSelectionChange($event,'old')" />
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</scroll-view>
|
||||
|
||||
<view class="u-flex gap-20 u-p-t-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button @click="confirm">确认</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</up-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import chooseTable from './choose-table.vue'
|
||||
import {
|
||||
mergeOrder
|
||||
} from '@/http/api/order/order.js'
|
||||
const show = defineModel(false)
|
||||
const allChecked = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
goodsList: {},
|
||||
order: {
|
||||
id: ''
|
||||
},
|
||||
nowCartData: []
|
||||
})
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
const form = reactive({
|
||||
mewTable: {
|
||||
id: ''
|
||||
},
|
||||
type: 1,
|
||||
now: [],
|
||||
old: []
|
||||
})
|
||||
|
||||
const columnsCheck = ref([
|
||||
// 复选框列
|
||||
{
|
||||
type: 'selection',
|
||||
width: '50px'
|
||||
},
|
||||
// 普通列
|
||||
{
|
||||
title: '商品',
|
||||
key: 'productName'
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
key: 'num'
|
||||
}
|
||||
]);
|
||||
|
||||
const columnsCheck1 = ref([
|
||||
// 复选框列
|
||||
{
|
||||
type: 'selection',
|
||||
width: '50px'
|
||||
},
|
||||
// 普通列
|
||||
{
|
||||
title: '商品',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
key: 'number'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
const handleSelectionChange = (selection, key) => {
|
||||
if (key === 'old') {
|
||||
form.old = selection
|
||||
}
|
||||
if (key === 'now') {
|
||||
form.now = selection
|
||||
}
|
||||
};
|
||||
|
||||
const emits = defineEmits('update', 'confirm')
|
||||
|
||||
function confirm() {
|
||||
if (!form.mewTable.id) {
|
||||
return uni.showToast({
|
||||
title: '请选择目标台桌',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
if (form.type == 1) {
|
||||
if (form.old.length <= 0 && form.now.length <= 0) {
|
||||
return uni.showToast({
|
||||
title: '请选择转桌商品',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
if (form.type == 2) {
|
||||
if (props.nowCartData.length <= 0) {
|
||||
mergeOrder({
|
||||
allMerge: 1,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
|
||||
prve.push(...cur.map(v => v.id))
|
||||
return prve
|
||||
}, [])
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '转桌成功',
|
||||
icon: 'none'
|
||||
})
|
||||
close()
|
||||
emits('update', 1)
|
||||
|
||||
})
|
||||
} else {
|
||||
close()
|
||||
emits('confirm', {
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
old: {
|
||||
allMerge:1,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: Object.entries(props.goodsList).reduce((prve, cur) => {
|
||||
prve.push(...cur.map(v => v.id))
|
||||
return prve
|
||||
}, [])
|
||||
},
|
||||
now: {
|
||||
allMerge:1,
|
||||
cart_id: props.nowCartData.map(v=>v.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
console.log(form);
|
||||
let allOldLen = 0;
|
||||
for (let key in props.goodsList) {
|
||||
allOldLen += props.goodsList[key].length
|
||||
}
|
||||
|
||||
const allMerge = form.old.length === allOldLen ? 1 : 0
|
||||
if (props.nowCartData.length <= 0) {
|
||||
mergeOrder({
|
||||
allMerge,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: form.old.map(v => v.id)
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '转桌成功',
|
||||
icon: 'none'
|
||||
})
|
||||
close()
|
||||
emits('update', allMerge)
|
||||
|
||||
})
|
||||
} else {
|
||||
close()
|
||||
emits('confirm', {
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
old: {
|
||||
allMerge,
|
||||
sourceOrderId:props.order? props.order.id:'',
|
||||
targetTableCode: form.mewTable.tableCode,
|
||||
detailIds: form.old.map(v => v.id)
|
||||
},
|
||||
now: {
|
||||
allMerge: props.nowCartData.length == form.now.length,
|
||||
cart_id: form.now.map(v => v.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 690rpx;
|
||||
border-radius: 18rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
150
components/choose-table.vue
Normal file
150
components/choose-table.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-flex input-box u-row-between" @click="openPopup">
|
||||
<template v-if="!modelValue||!modelValue.id">
|
||||
<text class="color-999">请选择转桌到</text>
|
||||
<up-icon name="arrow-down" color="#999"></up-icon>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="color-333">{{modelValue.name}}</text>
|
||||
<up-icon name="arrow-down" color="#999"></up-icon>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
<up-popup :show="show" mode="bottom">
|
||||
<view class="box bg-fff u-p-30">
|
||||
<up-search v-model="query.name" @search="search" @clear="search" @custom="search"></up-search>
|
||||
<scroll-view direction="vertical" scroll-y style="max-height: 50vh;">
|
||||
<view class="u-m-t-30 list">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" :class="{active:selIndex==index}"
|
||||
@click="selIndex=index">
|
||||
<text> {{item.name}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<up-loadmore status="nomore"></up-loadmore>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="u-flex gap-20 u-p-l-30 u-p-r-30 u-p-b-30">
|
||||
<view class="u-flex-1">
|
||||
<my-button type="default" @click="close">取消</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button @click="confirm">确认</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
getShopTable
|
||||
} from '@/http/api/table.js'
|
||||
|
||||
const modelValue = defineModel({
|
||||
default:{id:''}
|
||||
})
|
||||
const list = ref([])
|
||||
const show = ref(false)
|
||||
const selIndex = ref(-1)
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
selIndex.value = -1;
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
if (selIndex.value < 0) {
|
||||
return uni.showToast({
|
||||
title: '请选择桌台',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
modelValue.value = list.value[selIndex.value]
|
||||
close()
|
||||
}
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 999,
|
||||
// status: 'idle',
|
||||
name: ''
|
||||
})
|
||||
/**
|
||||
* 获取桌台列表
|
||||
*/
|
||||
async function getTable() {
|
||||
let res = await getShopTable(query)
|
||||
list.value = res.records
|
||||
|
||||
}
|
||||
|
||||
function search() {
|
||||
selIndex.value = -1;
|
||||
getTable()
|
||||
}
|
||||
|
||||
function openPopup() {
|
||||
const index = list.value.findIndex(v => v.id === modelValue.value.id)
|
||||
if (index != -1) {
|
||||
selIndex.value = index
|
||||
}
|
||||
show.value = true
|
||||
}
|
||||
onMounted(() => {
|
||||
getTable()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-box {
|
||||
padding: 20rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #dedede;
|
||||
min-width: 300rpx;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 20rpx;
|
||||
|
||||
.item {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid #dedede;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
border-color: $my-main-color;
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user