bonus
/
jyy-smart-canteen-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
jyy-smart-canteen-h5/pages/advanceOrder/index.vue

969 lines
27 KiB
Vue
Raw Normal View History

代码提交
2025-05-27 10:30:44 +08:00
<template>
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
<view>
<u-loading-page :loading="showLoading" loading-text="正在加载..."></u-loading-page>
<view class="top-wrap">
<view class="top-cont flex justify-between align-center">
<view class="flex align-center">
<u-icon name="../../static/images/time.png" size="16"></u-icon>
<span style="margin-left: 5px">{{ newDate }}</span>
</view>
<!-- <view class="top-right-cont">
<span class="right-item" :class="{ active: active == 1 }" @click="active = 1">自取</span>
<span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
</view> -->
</view>
</view>
<view class="tab-navigation">
<Tabs :tabList="tabList" @changeTab="changeTab" />
</view>
<view class="menuContent">
<scroll-view class="content-left" scroll-y="true">
<view class="scroll-view-item" v-for="(item,index) in typeList" :key="index" :class="tIndex == index ? 'active2' : ''" @click="changeModel(item,index)">
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
<view>{{item.typeName}}</view>
</view>
</view>
</scroll-view>
<scroll-view class="content-right" scroll-y="true" :scroll-top="scrollLeftTop" scroll-with-animation="true">
<view v-for="(typeitem,typeindex) in typeList":key="typeindex">
<view :id="'scroll'+typeitem.typeId" style="margin: 20rpx 10rpx;font-weight: bold;font-size: 32rpx;">{{typeitem.typeName}}</view>
<view class="scroll-right-item" v-for="(item,index) in typeitem.dishesList" :key="index">
<view style="width: 100%;display: flex;align-items: center;height: 100%;">
接口替换
2025-06-03 11:23:21 +08:00
<view style="width: 160rpx;height: 160rpx;" @click="goMenuDetail(item)" v-if="item.remanentNum>0">
代码提交
2025-05-27 10:30:44 +08:00
<image class="image" :src="item.dishesImgUrl"></image>
</view>
<view style="width: 160rpx;height: 160rpx;position: relative;background: rgba(0,0,0,0.1);" @click="goMenuDetail(item)" v-else>
<image class="image" :src="item.dishesImgUrl" style="opacity: 0.5;"></image>
<view class="wait-btn">已售罄</view>
</view>
<view style="width: 65%;height: 100%; display: flex;position: relative;">
<view class="center-cont" @click="goMenuDetail(item)">
接口替换
2025-06-03 11:23:21 +08:00
<view class="meal-name" style="margin-bottom: 10rpx;font-weight: bold;" :style="{color:(item.remanentNum==0? '#747474':'#000')}">{{ item.dishesName }}</view>
代码提交
2025-05-27 10:30:44 +08:00
<view class="sale-num" style="margin-bottom: 10rpx;">
<text>月销 {{ item.monthlySales||0 }}</text>
<text style="margin-left: 20rpx;">好评率{{ item.goodProbability||0 }}%</text>
</view>
接口替换
2025-06-03 11:23:21 +08:00
<view class="num-cont" style="margin-bottom: 10rpx;" :style="{color:(item.remanentNum==0? '#ffbe89':'#ff6816')}">
<span style="margin-right: 5px;" :style="{borderColor:(item.remanentNum==0? '#ffbe89':'#ff6816')}">{{ '库存' + item.remanentNum }}</span>
<span :style="{borderColor:(item.remanentNum==0? '#ffbe89':'#ff6816')}">{{ '限购' + item.limitNum }}</span>
代码提交
2025-05-27 10:30:44 +08:00
</view>
接口替换
2025-06-03 11:23:21 +08:00
<view class="sale-price" style="margin-bottom: 10rpx;" :style="{color:(item.remanentNum==0? '#ffbe89':'#ff6816')}">
代码提交
2025-05-27 10:30:44 +08:00
<span style="font-size: 20rpx">￥</span>
<span style="font-size: 32rpx">{{ (item.dishesDetailList[0].prefPrice/100).toFixed(2) }}</span>
<span style="font-size: 20rpx;color: #666;font-weight: 400;text-decoration: line-through;margin-left: 10rpx;">￥{{ (item.dishesDetailList[0].dishesPrice/100).toFixed(2) }}</span>
</view>
</view>
接口替换
2025-06-03 11:23:21 +08:00
<view class="right-cont" v-if="item.remanentNum!=0">
代码提交
2025-05-27 10:30:44 +08:00
<u-icon v-if="item.quantity > 0"
name="../../static/images/delete.png"
预定餐参数修改
2025-06-04 10:10:33 +08:00
size="18"
代码提交
2025-05-27 10:30:44 +08:00
@click="handleFoodNum(1, item)"
/>
<span style="margin: 0 10px;font-size: 28rpx;">{{ item.quantity || 0 }}</span>
<u-icon
接口替换
2025-06-03 11:23:21 +08:00
v-if="item.quantity < item.limitNum"
代码提交
2025-05-27 10:30:44 +08:00
name="../../static/images/add.png"
预定餐参数修改
2025-06-04 10:10:33 +08:00
size="18"
代码提交
2025-05-27 10:30:44 +08:00
@click="handleFoodNum(2, item)"
/>
接口替换
2025-06-03 11:23:21 +08:00
<u-icon v-if="item.quantity == item.limitNum" name="../../static/images/no-add.png" size="16" />
代码提交
2025-05-27 10:30:44 +08:00
</view>
</view>
</view>
</view>
</view>
<view v-if="typeList.length == 0&&!showLoading" class="flex justify-center align-center" style="height: 50vh">
<u-empty icon="../../static/images/not_order.png" text="暂无数据" textColor="#000" />
</view>
</scroll-view>
</view>
<!-- 购物车 -->
<view style="height: 60px"></view>
<view class="shop-car">
<view class="car-cont">
<view class="flex align-center" @click="openCar">
<u-icon name="../../static/images/shop-car.png" size="25"></u-icon>
<span class="money">
<span style="font-size: 20rpx">￥</span>
{{ totalPrice }}
</span>
</view>
<view>
<u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder">结算</u-button>
</view>
</view>
</view>
<!-- 购物车-pop -->
<u-popup :show="showCar" position="bottom" :round="12" @close="showCar = false">
<view class="popup-cont">
<view class="flex justify-between align-center">
<view style="font-weight: 500; font-size: 28rpx">已加购菜品</view>
<view style="font-weight: 400; font-size: 24rpx; color: #ff6816" @click="showModal = true">清空</view>
</view>
<view class="flex justify-between align-center" style="margin: 20.5px 0 12.5px">
<view class="flex align-center" style="font-size: 28rpx;width: 75%;">
{{ canteenName }}/{{stallName}}
<span class="name-type">{{ canteenType }}</span>
</view>
<view style="font-size: 28rpx;">
{{ newDate2 }}
</view>
</view>
<view class="list-wrap">
<view class="cont-list" v-for="(food, foodIndex) in shoppingCartList">
<u-swipe-action>
<u-swipe-action-item :options="options" @click="delFood($event, food)">
<view style="width: 100%;display: flex;height: auto;">
<view v-if="food.orderDate==newDate2">
<u-image :src="food.goodsImgUrl" width="80px" height="80px" />
</view>
<view style="width: 160rpx;height: 160rpx;position: relative;background: rgba(0,0,0,0.1);" v-else>
<u-image :src="food.goodsImgUrl" width="80px" height="80px" style="opacity: 0.5;"/>
<view class="wait-btn">已失效</view>
</view>
<view class="center-cont">
<view class="meal-name" :style="{color:(food.orderDate!=newDate2? '#747474':'#000')}">{{ food.goodsName }} （{{ food.mealtimeName }}）</view>
<view class="sale-num" :style="{color:(food.orderDate!=newDate2? '#747474':'#000')}">月销 {{ food.monthlySales||0 }}</view>
<view class="num-cont" :style="{color:(food.orderDate!=newDate2? '#ffbe89':'#ff6816')}">
接口替换
2025-06-03 11:23:21 +08:00
<span style="margin-right: 5px">{{ '库存' + food.remanentNum }}</span>
<span>{{ '限购' + food.limitNum }}</span>
代码提交
2025-05-27 10:30:44 +08:00
</view>
<view class="sale-price" :style="{color:(food.orderDate!=newDate2? '#ffbe89':'#ff6816')}">
<span style="font-size: 20rpx">￥</span>
{{ (food.prefPrice/100).toFixed(2) }}
</view>
</view>
<view class="right-cont">
<view class="num-wrap" v-if="food.isDfficacy==1">
<view style="width: 40rpx;" @click="handleFoodNum(1, food)">
<u-icon
v-if="food.quantity > 0"
name="../../static/images/del.png"
预定餐参数修改
2025-06-04 10:10:33 +08:00
size="18"
代码提交
2025-05-27 10:30:44 +08:00
/>
</view>
<span class="cont-num">{{ food.quantity || 0 }}</span>
<view style="width: 40rpx;" @click="handleFoodNum(2, food)">
<u-icon
接口替换
2025-06-03 11:23:21 +08:00
v-if="food.quantity<food.limitNum"
代码提交
2025-05-27 10:30:44 +08:00
name="../../static/images/add2.png"
size="18"
/>
</view>
</view>
<view v-if="food.isDfficacy==0" v-else>已失效</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</view>
</view>
</view>
</u-popup>
<u-modal :show="showModal" showCancelButton title="提示" @cancel="showModal = false" @confirm="clearCar">
<view class="slot-content" style="text-align: center">
<span>是否确认清空购物车?</span>
</view>
</u-modal>
</view>
</template>
<script>
import { getlistReserveDateAPI,getAdvanceDetailListAPI,addAdvancehoppingCartAPI,updateAdvancehoppingCartAPI,clearAdvancehoppingCartAPI,getShoppingCartListAPI } from '@/api/advanceOrder/index.js'
import Tabs from '@/pages/components/Tabs.vue'
export default {
components: { Tabs },
data() {
return {
fontValue:uni.getStorageSync('fontSize') || 8,
showLoading:true,
newDate: '',
newDate2: '',
canteenId:"",
canteenName:"",
stallId:"",
stallName:"",
recipeId:"",
tabList:[],
menuData:[],
typeList:[],//菜品类型数据
typeNameList:[],
tIndex:0,
shoppingCartList:[],
// 总价格
totalPrice: 0,
showCar: false, // 购物车
showModal: false, // 清空购物车
// 添加的菜品
addFood: [],
options: [{
text: '删除',
style: {
backgroundColor: '#f56c6c'
}
}],
scrollLeftTop:0,//滚动位置
current: 0,
active: 1, // 1 自取 2 外卖
// canteenName: '宏源工业园/本周菜谱',
canteenType: '自取', // 1 自取 2 外卖
isHandle:false
}
},
onLoad(options) {
options = JSON.parse(options.params)
this.canteenId = options.canteenId
this.canteenName = options.canteenName
// console.log(options)
this.stallId=options.stallId;
this.stallName=options.stallName;
this.recipeId=options.recipeId;
},
onShow() {
setTimeout(()=>{
//获取预定日期
this.getReserveDate()
},200)
},
methods: {
//获取预定日期
async getReserveDate(){
接口替换
2025-06-03 11:23:21 +08:00
// let param = {
// "reserveLimitDayNum": "1",
// "ifAllowReserveToday": "1"
// }
// const res = await getlistReserveDateAPI(param)
// this.getNowFormatDate(res.data[0])
// this.getNowFormatDate2(res.data[0])
this.getNowFormatDate()
this.getNowFormatDate2()
代码提交
2025-05-27 10:30:44 +08:00
//获取预定餐菜谱
this.getMenuListData()
},
// 获取当前时间
getNowFormatDate(data) {
接口替换
2025-06-03 11:23:21 +08:00
// let date = new Date(data)
let date = new Date()
代码提交
2025-05-27 10:30:44 +08:00
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
this.newDate = `${month}-${day} 星期${weeks[week]}`
},
// 当前时间 2025-01-03
getNowFormatDate2(data) {
接口替换
2025-06-03 11:23:21 +08:00
// let date = new Date(data)
let date = new Date()
代码提交
2025-05-27 10:30:44 +08:00
let year = date.getFullYear()
let month = (date.getMonth() + 1).toString().padStart(2, '0')
let day = date.getDate().toString().padStart(2, '0')
this.newDate2 = `${year}-${month}-${day}`
},
// 获取菜谱
async getMenuListData() {
let param = {
"recipeId":this.recipeId,
"applyDate":this.newDate2,
// "applyDate":"2025-04-18",
}
const res = await getAdvanceDetailListAPI(param)
console.log(res, '预订餐菜谱')
if(res.code==200){
if(res.rows&&res.rows.length>0){
this.menuData = res.rows;
this.menuData.forEach(item => {
item.typeList.forEach(detail => {
detail.dishesList.forEach(food => {
this.$set(food, 'mealtimeType', item.mealtimeType)
this.$set(food, 'mealtimeName', this.handleRecipeType(item.mealtimeType))
this.$set(food, 'quantity', 0)
this.$set(food, 'monthlySales', food.dishesDetailList[0].monthlySales)
this.$set(food, 'goodProbability', food.dishesDetailList[0].goodProbability)
接口替换
2025-06-03 11:23:21 +08:00
this.$set(food, 'remanentNum', food.dishesDetailList[0].remanentNum)
this.$set(food, 'limitNum', food.dishesDetailList[0].limitNum)
代码提交
2025-05-27 10:30:44 +08:00
this.$set(food, 'dishesPrice', food.dishesDetailList[0].dishesPrice)
this.$set(food, 'prefPrice', food.dishesDetailList[0].prefPrice)
this.$set(food, 'dishesId', food.dishesDetailList[0].dishesId)
})
})
})
//获取购物车
this.getShoppingCartList()
this.tabList=[]
//处理数据
this.menuData.forEach(item=>{//渲染类型
this.tabList.push(this.handleRecipeType(item.mealtimeType))
})
this.changeTab(0)
}else{
this.menuData = [];
this.tabList=[];
this.typeList=[]
this.typeNameList=[]
this.tIndex=0
}
this.showLoading=false
}else{
uni.$u.toast(res.msg)
this.menuData = [];
this.tabList=[];
this.typeList=[]
this.typeNameList=[]
this.tIndex=0
this.showLoading=false
}
},
//菜品类型（1-早餐 2-午餐 3-下午茶 4-晚餐 5-夜宵）
changeTab(index) {
this.typeList = this.menuData[index].typeList;
//左侧类别列表
this.typeNameList=[]
this.typeList.forEach(item=>{
this.typeNameList.push(item)
})
//右侧菜列表
this.tIndex=0;
},
//菜品类型（面点，粗粮，精品菜，卤菜...）
changeModel(item,index){
this.tIndex=index;
var len = 0
if(index==0){
len=0
}else{
this.typeList.forEach((ite,i)=>{
console.log(i)
console.log(index)
if(i<index){
len = len+ite.dishesList.length
}
})
}
setTimeout(()=>{
uni.createSelectorQuery().in(this).select('#scroll'+item.typeId).boundingClientRect(res => {
console.log(res)
this.scrollLeftTop = 80 * len; // 设置滚动条距离左侧的距离
}).exec()
},100)
// this.dishesList = this.typeList[index].dishesList;
},
// 处理recipeType
handleRecipeType(type) {
if (type === 1) {
return '早餐'
} else if (type === 2) {
return '午餐'
} else if (type === 3) {
return '下午茶'
} else if (type === 4) {
return '晚餐'
}else if (type === 5) {
return '夜宵'
}
},
goMenuDetail(item){
uni.navigateTo({
url: `/pages/advanceOrder/dishDetail?params=${JSON.stringify({"orderDate":this.newDate2,"recipeId":this.recipeId,...item})}`
})
},
//获取预定购物车（订单）
async getShoppingCartList(){
let param = {
"orderType":"2",
"userId":uni.getStorageSync('userId'),
"canteenId":this.canteenId,
"stallId":this.stallId,
"menuDateList":[this.newDate2]
}
const res = await getShoppingCartListAPI(param)
console.log(res, '预订餐预定')
if(res.code==200){
this.shoppingCartList = res.data;
// console.log(this.shoppingCartList)
this.shoppingCartList.forEach(item => {
item.isDfficacy = 0
接口替换
2025-06-03 11:23:21 +08:00
item.remanentNum = 0
item.limitNum = 0
代码提交
2025-05-27 10:30:44 +08:00
item.prefPrice = 0
item.monthlySales = 0
})
// console.log(this.menuData)
this.menuData.forEach(menuItem => {
menuItem.typeList.forEach(detail => {
detail.dishesList.forEach(food => {
this.$set(food, 'quantity', 0)
this.shoppingCartList.forEach(cartItem=>{
if(food.dishesId==cartItem.goodsId){
if(food.mealtimeType==cartItem.mealtimeType){
参数修改-预定餐
2025-06-03 14:14:49 +08:00
let obj = {
参数调整
2025-06-03 17:23:21 +08:00
"detailType": food.detailType,
代码提交
2025-05-27 10:30:44 +08:00
"goodsId": cartItem.goodsId,
"goodsImgUrl": food.dishesImgUrl,//图片地址
"goodsName": cartItem.goodsName,
"mealtimeName": food.mealtimeName,
参数调整
2025-06-03 17:23:21 +08:00
"mealtimeType": food.mealtimeType,
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"recipeDetailId": food.recipeDetailId,
参数调整
2025-06-03 17:23:21 +08:00
"recipeId": cartItem.recipeId,
"quantity": cartItem.quantity,
代码提交
2025-05-27 10:30:44 +08:00
"salePrice": food.dishesDetailList[0].dishesPrice,
"discountPrice": food.dishesDetailList[0].prefPrice,
参数调整
2025-06-03 17:23:21 +08:00
"finalPrice": food.dishesDetailList[0].prefPrice,
"salesMode": 1,
代码提交
2025-05-27 10:30:44 +08:00
"orderDate": cartItem.orderDate,
参数调整
2025-06-03 17:23:21 +08:00
"orderType": cartItem.orderType,
"prefPrice": food.dishesDetailList[0].prefPrice,
"limitNum": food.dishesDetailList[0].limitNum,
"cartId": cartItem.cartId,
代码提交
2025-05-27 10:30:44 +08:00
"sizeType": cartItem.sizeType,
接口替换
2025-06-03 11:23:21 +08:00
"remanentNum": cartItem.remanentNum
代码提交
2025-05-27 10:30:44 +08:00
}
this.$set(cartItem, 'orderDetailList', [obj])
this.$set(cartItem, 'mealtimeName', food.mealtimeName)
this.$set(cartItem, 'goodsImgUrl', food.dishesImgUrl)
this.$set(cartItem, 'monthlySales', food.dishesDetailList[0].monthlySales)
参数修改-预定餐
2025-06-03 14:14:49 +08:00
this.$set(cartItem, 'recipeDetailId', food.recipeDetailId)
代码提交
2025-05-27 10:30:44 +08:00
this.$set(cartItem, 'detailType', food.detailType)
this.$set(cartItem, 'dishesId', food.dishesDetailList[0].dishesId)
接口替换
2025-06-03 11:23:21 +08:00
this.$set(cartItem, 'remanentNum', food.dishesDetailList[0].remanentNum)
this.$set(cartItem, 'limitNum', food.dishesDetailList[0].limitNum)
代码提交
2025-05-27 10:30:44 +08:00
this.$set(cartItem, 'prefPrice', food.dishesDetailList[0].prefPrice)
if(cartItem.orderDate == this.newDate2){//存在且时间一致
预定餐参数修改
2025-06-04 10:10:33 +08:00
if(cartItem.recipeId==this.recipeId){
this.$set(food, 'quantity', cartItem.quantity)
this.$set(cartItem,'isDfficacy', 1) //有效
}else{
this.$set(food, 'quantity', 0)
this.$set(cartItem,'isDfficacy', 0) //失效
}
代码提交
2025-05-27 10:30:44 +08:00
}else{//日期不一致
this.$set(food, 'quantity', 0)
this.$set(cartItem,'isDfficacy', 0) //失效
}
console.log(cartItem)
}
}
})
})
})
})
console.log(this.shoppingCartList)
this.isHandle = false
//计算总价
this.handleTotalPrice()
}else{
this.isHandle = false
this.shoppingCartList = []
}
},
//菜谱加减操作
handleFoodNum(type, food) {
if (type === 1) {
if (food.quantity > 0) {
if(!this.isHandle){
food.quantity--
this.delShopCart(food)
}
}
} else {
接口替换
2025-06-03 11:23:21 +08:00
if (food.quantity < food.limitNum) {
代码提交
2025-05-27 10:30:44 +08:00
if(!this.isHandle){
this.addShopCart(food)
}
}
}
},
async addShopCart(item){
console.log('?? ~ handleFoodNum ~ type', "新增")
console.log(item)
this.isHandle = true
let param = {
"userId":uni.getStorageSync('userId'),
"orderType": 2,
"orderDate":this.newDate2,
"canteenId":this.canteenId,
"stallId":this.stallId,
"mealtimeType":item.mealtimeType,
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"recipeId":this.recipeId,
代码提交
2025-05-27 10:30:44 +08:00
"goodsId":item.dishesId,
"goodsName":item.goodsName||item.dishesName,
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"recipeDetailId":item.recipeDetailId,
代码提交
2025-05-27 10:30:44 +08:00
"detailType":item.detailType,
"quantity":item.quantity+1
}
this.shoppingCartList.forEach(cartItem=>{
if(item.dishesId==cartItem.goodsId){
if(item.mealtimeType==cartItem.mealtimeType){
参数修改-预定餐
2025-06-03 14:14:49 +08:00
param.cartId=cartItem.cartId
代码提交
2025-05-27 10:30:44 +08:00
}
}
})
console.log(param)
const res = await addAdvancehoppingCartAPI(param)
if(res.code==200){
this.getShoppingCartList()
// this.getMenuListData()
}
console.log(res, '添加')
},
async delShopCart(item){
console.log('?? ~ handleFoodNum ~ type', "减少")
console.log(item)
this.isHandle = true
if(item.quantity>0){
let param = {
"userId":uni.getStorageSync('userId'),
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"cartId":'',
代码提交
2025-05-27 10:30:44 +08:00
"quantity":item.quantity
}
this.shoppingCartList.forEach(cartItem=>{
if(item.dishesId==cartItem.goodsId){
参数修改-预定餐
2025-06-03 14:14:49 +08:00
param.cartId=cartItem.cartId
代码提交
2025-05-27 10:30:44 +08:00
}
})
console.log(param)
const res = await updateAdvancehoppingCartAPI(param)
if(res.code==200){
this.getShoppingCartList()
}
}else{
let param = {
"userId":uni.getStorageSync('userId'),
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"cartIds":[],
代码提交
2025-05-27 10:30:44 +08:00
}
this.shoppingCartList.forEach(cartItem=>{
if(item.dishesId==cartItem.goodsId){
参数修改-预定餐
2025-06-03 14:14:49 +08:00
param.cartIds=[cartItem.cartId]
代码提交
2025-05-27 10:30:44 +08:00
}
})
const res = await clearAdvancehoppingCartAPI(param)
if(res.code==200){
this.getShoppingCartList()
}
}
},
//购物车滑动删除按钮
async delFood(e,item){
let param = {
"userId":uni.getStorageSync('userId'),
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"cartIds":[item.cartId],
代码提交
2025-05-27 10:30:44 +08:00
}
console.log(param)
const res = await clearAdvancehoppingCartAPI(param)
if(res.code==200){
this.getShoppingCartList()
}
},
//购物车-清空按钮
clearCar(){
let arr = []
this.shoppingCartList.forEach(cartItem=>{
参数修改-预定餐
2025-06-03 14:14:49 +08:00
arr.push(cartItem.cartId)
代码提交
2025-05-27 10:30:44 +08:00
})
if(arr.length==0){
uni.showToast({
title: "购物车中暂无菜品",
icon: 'none'
})
}else{
try {
let param = {
"userId":uni.getStorageSync('userId'),
参数修改-预定餐
2025-06-03 14:14:49 +08:00
"cartIds":arr,
代码提交
2025-05-27 10:30:44 +08:00
}
// console.log(param)
clearAdvancehoppingCartAPI(param).then(res => {
if(res.code==200){
console.log(res)
this.menuData.forEach(menuItem => {
menuItem.typeList.forEach(detail => {
detail.dishesList.forEach(food => {
this.$set(food, 'quantity', 0)
})
})
})
this.getShoppingCartList()
this.showModal = false
}else{
this.getShoppingCartList()
this.showModal = false
}
})
} catch (error) {
console.log(error)
}
}
},
// 打开购物车
openCar() {
// if (this.totalPrice == 0) return
this.showCar = true
},
// 计算总价格与添加的菜品-购物车-每次添加删减菜品都得计算
handleTotalPrice() {
let total = 0
this.shoppingCartList.forEach(item => {
if(item.isDfficacy == 1){//有效
total +=item.quantity *(item.prefPrice/100).toFixed(2)
}
})
this.totalPrice = total.toFixed(2)
if (this.shoppingCartList.length == 0) this.showCar = false
},
// 订单结算
handleOrder() {
console.log('结算')
// 购物车为空 不可结算
console.log(this.shoppingCartList)
let arr = []
this.shoppingCartList.forEach(item=>{
if(item.isDfficacy == 1){//有效
arr.push(item)
}
})
if (arr.length == 0) {
uni.showToast({
title: '请添加菜品',
icon: 'none'
})
return
}
console.log(arr)
uni.navigateTo({
url: `/pages/advanceOrder/orderDetails?carList=${JSON.stringify(arr)}&canteenId=${this.canteenId}&stallId=${this.stallId}&canteenName=${this.canteenName}&stallName=${this.stallName}&totalPrice=${this.totalPrice}&orderDate=${this.newDate2}`
})
},
//垂直定位锚点
scrollToDetail(index) {
console.log('?? ~ scrollToDetail ~ index', index)
if (this.current != 0 && this.current == index) return
this.current = index
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query
.select(`#detail-${index}`)
.boundingClientRect(rect => {
console.log('?? ~ scrollToDetail ~ rect', rect)
if (rect) {
setTimeout(() => {
console.log('?? ~ scrollToDetail ~ rect.top', rect.top)
uni.pageScrollTo({
scrollTop: rect.top - 55,
duration: 300
})
}, 100)
}
})
.exec()
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .u-transition {
z-index: 10090 !important;
}
page {
background: #f9fbff;
position: relative;
}
.scroll-view {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
display: inline-block;
width: 160rpx;
height: 100rpx;
// line-height: 100rpx;
text-align: center;
color: #959FA4;
font-size: 24rpx;
.activeLine{
background: #DD7D3C;
border-radius: 10upx;
width: 100rpx;
height: 6upx;
}
}
.active {
color: #DD7D3C;
font-weight: bolder;
font-size: 30rpx;
}
.tab-navigation {
display: flex;
background-color: white;
padding: 0px 16px 0 16px;
}
.menuContent{
width: 100%;
display: flex;
height: 74vh;
// background-color: #DD7D3C;
}
.content-left{
width: 20%;
height: 74vh;
}
.active2 {
color: #DD7D3C;
font-weight: bolder;
font-size: 28rpx;
}
.content-right{
width: 80%;
height: 74vh;
// height: auto !important;
}
.scroll-right-item{
width: 100%;
height: auto;
margin-bottom: 20rpx;
// background-color: #959FA4;
}
.image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.top-wrap {
// position: fixed;
// top: 0;
// width: 100vw;
// z-index: 999;
}
.top-cont {
height: 55px;
padding: 0 16px;
background: #fff;
.top-right-cont {
background: rgba(15, 39, 75, 0.05);
border-radius: 11px 11px 11px 11px;
display: flex;
justify-content: space-around;
color: #0f274b;
font-size: 24rpx;
.right-item {
padding: 3px 10px;
border-radius: 11px 11px 11px 11px;
cursor: pointer;
&.active {
background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
color: #fff;
}
}
}
}
.footer-cont {
/* height: calc(100vh - 115px); */
overflow: auto;
}
.left-wrap {
position: fixed;
// top: 55px;
height: calc(100vh - 115px);
overflow: auto;
.left-balance {
width: 88px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 28rpx;
color: #0f274b;
&.active {
background: #fff;
}
}
}
.right-wrap {
margin-left: 88px;
width: calc(100vw - 88px);
overflow: auto;
.right-balance {
padding: 0 8px;
background-color: #fff;
.top-name {
height: 44px;
font-weight: 400;
font-size: 24rpx;
color: rgba(15, 39, 75, 0.6);
display: flex;
align-items: center;
}
}
}
.cont-list {
// display: flex;
padding: 8px;
// position: relative;
/* border-bottom: 1px solid #f0f0f0; */
}
.center-cont {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 8px;
.meal-name {
font-weight: 500;
font-size: 28rpx;
color: #0f274b;
}
.sale-num {
font-weight: 400;
font-size: 24rpx;
color: rgba(15, 39, 75, 0.6);
line-height: 14px;
}
.num-cont {
display: flex;
align-items: center;
font-size: 20rpx;
color: #ff6816;
span {
border: 1px solid #ff6816;
padding: 0 2px;
border-radius: 2px;
}
}
.sale-price {
font-size: 32rpx;
font-weight: bold;
color: #ff6816;
}
}
.right-cont {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
align-items: center;
span {
font-weight: 400;
font-size: 24rpx;
color: #0f274b;
}
.num-wrap {
padding: 0 4px;
display: flex;
justify-content: space-between;
align-items: center;
width: 63px;
height: 20px;
border-radius: 13px 13px 13px 13px;
border: 1px solid rgba(15, 39, 75, 0.2);
.cont-num {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #0f274b;
// 第二个展示左右边框
&:nth-child(2) {
border-left: 1px solid rgba(15, 39, 75, 0.2);
border-right: 1px solid rgba(15, 39, 75, 0.2);
}
}
}
}
.shop-car {
height: 60px;
background: #fff;
box-shadow: 0px -1px 4px 0px rgba(0, 102, 204, 0.1);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999999;
.car-cont {
margin: 15px 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
.money {
margin-left: 8px;
font-weight: 600;
font-size: 36rpx;
color: #0f274b;
}
}
}
.popup-cont {
height: 380px;
padding: 16px;
color: #0f274b;
.name-type {
width: 100rpx;
text-align: center;
margin-left: 4px;
font-weight: 400;
font-size: 20rpx;
color: #fff;
padding: 2px 5px;
background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
border-radius: 11px 11px 11px 11px;
}
}
.list-wrap {
height: 240px;
padding-bottom: 160rpx;
overflow: auto;
}
.wait-btn {
width: 160rpx;
height: 50rpx;
line-height: 50rpx;
position: absolute;
top: 50%;
left: 50%;
margin-left: -80rpx;
margin-top: -25rpx;
text-align: center;
color: #fff;
font-size: 26rpx;
font-weight: bold;
}
</style>