czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车历史订单增加，代码优化

Browse Source
This commit is contained in:
GaoHao
2025-04-02 09:20:26 +08:00
parent 5a655ba09e
commit 5e6646b574
31 changed files with 418 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
pagesCreateOrder/index/components/car.vue
View File

@@ -9,7 +9,7 @@
<view>已添加{{goodsNumber.toFixed(0)}}件商品</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear',true)">清空</text>
<text class="u-m-l-10" @tap="setModalShow('clear',true,'cart','是否清空全部已添加的商品')">清空购物车</text>
</view>
</view>
<scroll-view scroll-y="true" class="tranistion" :style="{height:switchGoods?'50vh':0 }">
@@ -45,9 +45,44 @@
</view>
</view>
<my-empty v-if="!data.length" text="暂未有添加商品"></my-empty>
<view style="margin: 50rpx auto 110rpx auto;" v-if="!data.length">
<my-empty text="暂未有添加商品"></my-empty>
</view>
<!-- 历史订单 -->
<view v-if="historyOrder.length > 0"
class="u-p-t-32 u-p-b-32 u-p-r-28 u-p-l-28 u-m-t-40 bg-fff u-flex u-row-between">
<view class="color-333" style="font-weight: bold;">历史订单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear',true,'allHistoryOrder','清空历史订单')">清空历史订单</text>
</view>
</view>
<view v-for="(item,index) in historyOrder" :key="index">
<view v-if="historyOrder.length > 0"
class="u-p-t-32 border-top bg-fff u-p-r-28 u-p-b-32 u-p-l-28 u-flex u-row-between">
<view class="color-333" style="font-size: 30rpx;">第{{item.placeNum}}次下单</view>
<view class="color-666">
<uni-icons color="#666" type="trash"></uni-icons>
<text class="u-m-l-10" @tap="setModalShow('clear',true,item.placeNum,'清空第'+item.placeNum+'次下单历史订单')">清空</text>
</view>
</view>
<view class="color-333 item border-top u-flex u-row-center u-row-between"
v-for="(v,i) in item.info" :key="i">
<view style="display: flex;align-items: center;">
<view class="up-line-1" style="margin-right: 10rpx;">{{v.productName}}</view>
<uni-tag v-if="v.returnNum>0" :text="'退菜X'+v.returnNum"
custom-style="background-color: #EB4F4F; border-color: #EB4F4F; color: #fff;">
</uni-tag>
</view>
<view class="u-flex" style="flex-shrink: 0;">
<view class="font-bold red u-m-r-32">￥{{formatPrice(v.price*(v.num - v.returnNum)) }}</view>
<view class="u-m-l-30 u-m-r-30 color-333"> X{{v.num.toFixed(2)}} </view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="icon-car-box" @tap="toggleGoods">
<image src="/pagesCreateOrder/static/images/icon-car.svg" class="icon-car" />
@@ -63,15 +98,15 @@
</view>
<up-modal title="提示" content="是否清空全部已添加的商品?" :show="modal.clear" showCancelButton closeOnClickOverlay
<up-modal title="提示" :content="modal.title" :show="modal.clear" showCancelButton closeOnClickOverlay
@confirm="confirmModelConfirm" @cancel="setModalShow('clear',false)" @close="setModalShow('clear',false)"
width="300px"></up-modal>
</view>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import myButton from '@/components/my-components/my-button.vue'
import go from '@/commons/utils/go.js';
import infoBox from '@/commons/utils/infoBox.js';
import { formatPrice } from '@/commons/utils/format.js';
@@ -83,10 +118,24 @@
return []
}
},
historyOrder: {
type: Array,
default: () => {
return []
}
},
isCreateOrderToDetail: {
type: Boolean,
default: false
},
orderInfo: {
type: Object,
default: () => {
return {
id: ''
}
}
},
table: {
type: Object,
default: () => {
@@ -96,8 +145,43 @@
}
}
})
let allHistoryOrder = ref([]);
const allPrice = computed(() => {
let cartPrice = props.data.reduce((prve, cur) => {
let price = Math.floor((cur.lowPrice * cur.number)*100)/100
return prve + price
}, 0)
let historyOrderPrice = allHistoryOrder.value.reduce((prve, cur) => {
let price = Math.floor((cur.price * (cur.num-cur.returnNum))*100)/100
return prve + price
}, 0)
return (cartPrice + historyOrderPrice).toFixed(2)
})
const goodsNumber = computed(() => {
let result = 0
let cart = props.data.reduce((prve, cur) => {
return prve + cur.number
}, 0)
let historyOrderNum = allHistoryOrder.value.reduce((prve, cur) => {
return prve + cur.num
}, 0)
result = cart + historyOrderNum
result = result > 0 ? result.toFixed(2) : 0
return result >= 99 ? 99 : parseFloat(result)
})
watch(() => props.historyOrder, (newval) => {
allHistoryOrder.value = [];
newval.forEach(item=>{
allHistoryOrder.value = [...allHistoryOrder.value,...item.info]
})
})
const modal = reactive({
key: '',
title: '',
type: '',
clear: false
})
@@ -107,10 +191,12 @@
}
}
function setModalShow(key = 'show', show = true) {
function setModalShow(key = 'show',show = true, type = '' , title = '') {
// if (key == 'clear' && show && props.data.length <= 0) {
// return infoBox.showToast('购物车是空的！')
// }
if( title ){ modal.title = title }
if( type ){ modal.type = type }
modal.key = key
modal[key] = show
console.log(modal);
@@ -134,12 +220,19 @@
}
function toConfimOrder() {
if (props.data.length <= 0) {
if ( props.data.length <= 0 && allHistoryOrder.value.length <= 0 ) {
return infoBox.showToast('还没有选择商品')
}
const { name, status, type } = props.table
console.log(props.table)
if (props.table.id == ''&&props.table.tableCode == '') {
if ( props.data.length <= 0 && allHistoryOrder.value.length > 0 ) {
go.to('PAGES_ORDER_PAY', {
orderId: props.orderInfo.id,
})
return
}
if (props.table.id == '' && props.table.tableCode == '') {
go.to('PAGES_CONFIRM_ORDER', {
isCreateOrderToDetail: props.isCreateOrderToDetail ? 1 : 0
})
@@ -155,21 +248,7 @@
})
}
const allPrice = computed(() => {
return props.data.reduce((prve, cur) => {
let price = Math.floor((cur.lowPrice * cur.number)*100)/100
return prve + price
}, 0).toFixed(2)
})
const goodsNumber = computed(() => {
let result = 0
result = props.data.reduce((prve, cur) => {
return prve + cur.number
}, 0)
result = result > 0 ? result.toFixed(2) : 0
return result >= 99 ? 99 : parseFloat(result)
})
function updateNumber(isAdd, index, goods) {
const step = isAdd ? 1 : -1
@@ -183,12 +262,13 @@
}
function clear() {
if ( modal.type == 'cart') {
hideGoods()
}
setModalShow('clear', false)
edmits('clear')
hideGoods()
edmits('clear',modal.type)
}
import myButton from '@/components/my-components/my-button.vue'
</script>
<style lang="scss" scoped>

6
pagesCreateOrder/index/components/taocanModel.vue
View File

@@ -36,7 +36,7 @@
</template>
<script setup>
import { computed, getCurrentInstance, reactive, ref, watch } from 'vue';
import { computed, reactive, ref, watch } from 'vue';
import infobox from '@/commons/utils/infoBox.js'
import myModel from '@/components/my-components/my-model.vue'
import myButton from '@/components/my-components/my-button.vue'
@@ -48,6 +48,7 @@
},
})
const model = ref(null)
const popup = ref()
let datas = reactive({
item: "",
title: "",
@@ -75,7 +76,6 @@
})
const emits = defineEmits(['confirm', 'updateSku'])
const instance = getCurrentInstance();
function confirm() {
// 将数据保存进对应的值
@@ -104,7 +104,7 @@
emits('confirm', arr, datas.item)
close()
} else {
instance.ctx.$refs.popup.open()
popup.value.open()
}
}

67
pagesCreateOrder/index/index.vue
View File

@@ -97,7 +97,7 @@
<view class="bottom w-full">
<my-car :isCreateOrderToDetail="isCreateOrderToDetail" @updateNumber="carsNumberChange"
:table="data.table" :data="cars" @clear="cleaCart"></my-car>
:table="data.table" :data="cars" :orderInfo="data.orderInfo" :historyOrder="data.historyOrder" @clear="cleaCart"></my-car>
</view>
<!-- 套餐选择规格 -->
<taocanModel ref="taocanModelRef" @confirm="taocanConfirm" :goodsData="selGoods"></taocanModel>
@@ -132,7 +132,7 @@
import { getProductList } from '@/http/api/product.js'
import { categoryPage } from '@/http/api/cateGory.js'
import { getShopInfo } from '@/http/api/shop.js'
import { getHistoryOrder, cancelOrder, rmPlaceOrder } from '@/http/api/order.js'
const modal = reactive({
key: '',
@@ -178,6 +178,8 @@
orderId: null,
isGoodsAdd: true,
goodsData: null,
orderInfo: null,
historyOrder: [],
})
const guigeModelData = reactive({
title: '',
@@ -192,12 +194,12 @@
let option = {
type: ''
}
const taocanModelRef = ref()
const websocketUtil = inject('websocketUtil'); // 注入 WebSocket 工具类实例
onLoad((opt) => {
option = opt
Object.assign(data.table, opt)
console.log(opt)
uni.setNavigationBarTitle({
title: (opt && opt.type == 'add') ? '顾客加菜' : '代客下单'
})
@@ -296,6 +298,21 @@
initCart()
}
/**
* 获取订单详情
*/
async function getHistoryOrderDetail(){
data.historyOrder = [];
let res = await getHistoryOrder({tableCode:data.table.tableCode});
data.orderInfo = res;
if( res ){
data.historyOrder = Object.entries(data.orderInfo.detailMap).map(([key, value]) => ({
info: value,
placeNum: key
}))
}
}
/**
* 监听socket是否连接正常
*/
@@ -361,6 +378,7 @@
delCart(cartItem.id)
}
})
getHistoryOrderDetail()
uni.hideLoading()
break;
case 'onboc_add':
@@ -388,6 +406,7 @@
data.tabbar[i].foods[k].chooseNumber = 0
}
}
getHistoryOrderDetail()
break;
case 'init':
case 'rottable':
@@ -402,6 +421,9 @@
break;
case 'product_update':
init()
break;
case 'clearOrder':
getHistoryOrderDetail()
break;
}
@@ -458,14 +480,35 @@
/**
* 清除购物车
*/
function cleaCart () {
let params = {
...data.socketData,
operate_type:'cleanup',
table_code: data.table.tableCode,
async function cleaCart (e) {
if( e == 'cart' ){
let params = {
...data.socketData,
operate_type:'cleanup',
table_code: data.table.tableCode,
}
console.log('购物车清空菜品参数===',params)
websocketUtil.send(JSON.stringify(params))
} else if ( e == 'allHistoryOrder' ) {
await cancelOrder({orderId: data.orderInfo.id, shopId: uni.getStorageSync("shopInfo").id })
let params = {
...data.socketData,
operate_type:'clearOrder',
table_code: data.table.tableCode,
}
websocketUtil.send(JSON.stringify(params))
initCart()
} else {
await rmPlaceOrder({orderId: data.orderInfo.id, placeNum: e, shopId: uni.getStorageSync("shopInfo").id })
let params = {
...data.socketData,
operate_type:'clearOrder',
table_code: data.table.tableCode,
}
websocketUtil.send(JSON.stringify(params))
initCart()
}
console.log('购物车清空菜品参数===',params)
websocketUtil.send(JSON.stringify(params))
}
@@ -755,7 +798,7 @@
selGoods.value = $goods
if ($goods.groupType == 1) {
data.goodsData = $goods
instance.ctx.$refs.taocanModelRef.open()
taocanModelRef.value.open()
} else {
guigeModelData.title = $goods.name
const skuMap = returnSelGoodsSkuMap($goods.skuList)