1006 lines
28 KiB
Vue
1006 lines
28 KiB
Vue
<template>
|
||
<view>
|
||
<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 typeNameList" :key="index" :class="tIndex == index ? 'active2' : ''" @click="changeModel(index)">
|
||
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
|
||
<view>{{item}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view class="content-right" scroll-y="true">
|
||
<view class="scroll-right-item" v-for="(item,index) in dishesList" :key="index">
|
||
<view style="width: 100%;display: flex;align-items: center;">
|
||
<view style="width: 30%;height: 100%;" @click="goMenuDetail(item)">
|
||
<image class="image" :src="item.dishesImgUrl"></image>
|
||
</view>
|
||
<view style="width: 65%;height: 100%; display: flex;position: relative;">
|
||
<view class="center-cont" @click="goMenuDetail(item)">
|
||
<view class="meal-name" style="margin-bottom: 10rpx;font-weight: bold;">{{ item.dishesName }}</view>
|
||
<view class="sale-num" style="margin-bottom: 10rpx;">月销 {{ item.monthlySales||0 }}</view>
|
||
<view class="num-cont" style="margin-bottom: 10rpx;">
|
||
<span style="margin-right: 5px">{{ '库存' + item.dishesDetailList[0].surplusNum }}</span>
|
||
<span>{{ '限购' + item.dishesDetailList[0].restrictNum }}</span>
|
||
</view>
|
||
<view class="sale-price" style="margin-bottom: 10rpx;">
|
||
<span style="font-size: 11px">￥</span>
|
||
{{ (item.dishesDetailList[0].prefPrice/100).toFixed(2) }}
|
||
</view>
|
||
</view>
|
||
<view class="right-cont">
|
||
<u-icon v-if="item.num > 0"
|
||
name="../../static/images/delete.png"
|
||
size="16"
|
||
@click="handleFoodNum(1, item)"
|
||
/>
|
||
<span style="margin: 0 10px">{{ item.num || 0 }}</span>
|
||
<u-icon
|
||
v-if="item.num < item.dishesDetailList[0].restrictNum"
|
||
name="../../static/images/add.png"
|
||
size="16"
|
||
@click="handleFoodNum(2, item)"
|
||
/>
|
||
<u-icon v-if="item.num == item.dishesDetailList[0].restrictNum" name="../../static/images/no-add.png" size="16" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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: 11px">￥</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: 14px">已加购菜品</view>
|
||
<view style="font-weight: 400; font-size: 12px; 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">
|
||
{{ canteenName }}/{{stallName}}
|
||
<span class="name-type">{{ canteenType }}</span>
|
||
</view>
|
||
<view>
|
||
{{ newDate2 }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-wrap">
|
||
<view class="cont-list" v-for="(food, foodIndex) in addFood">
|
||
<u-swipe-action>
|
||
<u-swipe-action-item :options="options" @click="delFood($event, food)">
|
||
<view style="width: 100%;display: flex;height: auto;">
|
||
<view>
|
||
<u-image :src="food.dishesImgUrl" showLoading width="80px" height="80px" />
|
||
</view>
|
||
<view class="center-cont">
|
||
<view class="meal-name">{{ food.dishesName }}</view>
|
||
<view class="sale-num">月销 {{ food.monthlySales||0 }}</view>
|
||
<view class="num-cont">
|
||
<span style="margin-right: 5px">{{ '库存' + food.dishesDetailList[0].surplusNum }}</span>
|
||
<span>{{ '限购' + food.dishesDetailList[0].restrictNum }}</span>
|
||
</view>
|
||
<view class="sale-price">
|
||
<span style="font-size: 11px">￥</span>
|
||
{{ (food.dishesDetailList[0].prefPrice/100).toFixed(2) }}
|
||
</view>
|
||
</view>
|
||
<view class="right-cont">
|
||
<view class="num-wrap">
|
||
<u-icon
|
||
v-if="food.num > 0"
|
||
name="../../static/images/del.png"
|
||
size="16"
|
||
@click="handleFoodNum(1, food)"
|
||
/>
|
||
<span class="cont-num">{{ food.num || 0 }}</span>
|
||
<u-icon
|
||
:disabled="food.num < food.restrictNum"
|
||
name="../../static/images/add2.png"
|
||
size="16"
|
||
@click="handleFoodNum(2, food)"
|
||
/>
|
||
</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 {
|
||
newDate: '',
|
||
newDate2: '',
|
||
canteenId:"",
|
||
canteenName:"",
|
||
stallId:"",
|
||
stallName:"",
|
||
recipeId:"",
|
||
tabList:[],
|
||
menuData:[],
|
||
typeList:[],//菜品类型数据
|
||
typeNameList:[],
|
||
tIndex:0,
|
||
dishesList:[],
|
||
shoppingCartList:[],
|
||
// 总价格
|
||
totalPrice: 0,
|
||
showCar: false, // 购物车
|
||
showModal: false, // 清空购物车
|
||
// 添加的菜品
|
||
addFood: [],
|
||
options: [{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c'
|
||
}
|
||
}],
|
||
|
||
|
||
current: 0,
|
||
active: 1, // 1 自取 2 外卖
|
||
// canteenName: '宏源工业园/本周菜谱',
|
||
canteenType: '自取', // 1 自取 2 外卖
|
||
|
||
// 菜谱
|
||
cookbook: [
|
||
{
|
||
recipeType: 1, // 菜谱类型(1默认,2按天,3按周,4按月)
|
||
// 菜谱详情
|
||
recipeDetailList: [
|
||
{
|
||
intervalName: '午餐', // 餐次名称
|
||
// 菜品列表
|
||
mealList: [
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
recipeType: 2, // 菜谱类型(1默认,2按天,3按周,4按月)
|
||
// 菜谱详情
|
||
recipeDetailList: [
|
||
{
|
||
intervalName: '晚餐', // 餐次名称
|
||
// 菜品列表
|
||
mealList: [
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
recipeType: 3, // 菜谱类型(1默认,2按天,3按周,4按月)
|
||
// 菜谱详情
|
||
recipeDetailList: [
|
||
{
|
||
intervalName: '默认', // 餐次名称
|
||
// 菜品列表
|
||
mealList: [
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
},
|
||
{
|
||
mealName: '西红柿炒鸡蛋', // 菜品名称
|
||
imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
|
||
saleNum: 100,
|
||
supplyNum: 100, // 库存
|
||
restrictNum: 2, // 限购数量
|
||
salePrice: 10.2 // 菜品价格
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
],
|
||
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.canteenId = options.canteenId
|
||
this.canteenName = options.canteenName
|
||
options = JSON.parse(options.params)
|
||
// console.log(options)
|
||
this.stallId=options.stallId;
|
||
this.stallName=options.stallName;
|
||
this.recipeId=options.recipeId;
|
||
//获取预定日期
|
||
this.getReserveDate()
|
||
setTimeout(()=>{
|
||
//获取预定餐菜谱
|
||
this.getMenuListData()
|
||
},1000)
|
||
},
|
||
methods: {
|
||
//获取预定日期
|
||
async getReserveDate(){
|
||
let param = {
|
||
"canteenId":this.canteenId,
|
||
"stallId":this.stallId
|
||
}
|
||
const res = await getlistReserveDateAPI(param)
|
||
this.getNowFormatDate(res.data[0])
|
||
this.getNowFormatDate2(res.data[0])
|
||
console.log(res, '预订餐预定')
|
||
},
|
||
// 获取当前时间
|
||
getNowFormatDate(data) {
|
||
let date = new Date(data)
|
||
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) {
|
||
let date = new Date(data)
|
||
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":"2024-11-11"
|
||
}
|
||
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, 'num', 0)
|
||
})
|
||
})
|
||
})
|
||
//获取购物车
|
||
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.dishesList=[]
|
||
}
|
||
}else{
|
||
uni.$u.toast(res.msg)
|
||
this.menuData = [];
|
||
this.tabList=[];
|
||
this.typeList=[]
|
||
this.typeNameList=[]
|
||
this.tIndex=0
|
||
this.dishesList=[]
|
||
}
|
||
},
|
||
//菜品类型（1-早餐 2-午餐 3-下午茶 4-晚餐 5-夜宵）
|
||
changeTab(index) {
|
||
this.typeList = this.menuData[index].typeList;
|
||
//左侧类别列表
|
||
this.typeNameList=[]
|
||
this.typeList.forEach(item=>{
|
||
this.typeNameList.push(item.typeName)
|
||
})
|
||
//右侧菜列表
|
||
this.tIndex=0;
|
||
this.dishesList = this.typeList[0].dishesList;
|
||
},
|
||
//菜品类型（面点，粗粮，精品菜，卤菜...）
|
||
changeModel(index){
|
||
this.tIndex=index
|
||
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/weeklyMenu/menuDetail?params=${JSON.stringify(item)}`
|
||
})
|
||
},
|
||
//获取预定购物车（订单）
|
||
async getShoppingCartList(){
|
||
let param = {
|
||
"custId":uni.getStorageSync('custId'),
|
||
"canteenId":this.canteenId,
|
||
"stallId":this.stallId,
|
||
}
|
||
const res = await getShoppingCartListAPI(param)
|
||
console.log(res, '预订餐预定')
|
||
if(res.code==200){
|
||
this.shoppingCartList = res.data;
|
||
console.log(this.shoppingCartList)
|
||
console.log(this.menuData)
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
this.menuData.forEach(menuItem => {
|
||
menuItem.typeList.forEach(detail => {
|
||
detail.dishesList.forEach(food => {
|
||
// console.log(food)
|
||
// console.log(cartItem)
|
||
if(food.baseDishesId==cartItem.goodsDishesId){
|
||
// food.num = food.num+1
|
||
this.$set(food, 'num', cartItem.quantity)
|
||
let obj = {
|
||
"canteenId":this.canteenId,
|
||
"canteenName":this.canteenName,
|
||
"costModelList":food.costModelList,
|
||
"custId": uni.getStorageSync('custId'),
|
||
"detailType": food.detailType,
|
||
"extParam": null,
|
||
"goodsDishesId": cartItem.goodsDishesId,
|
||
"goodsDishesImgUrl": food.dishesImgUrl,
|
||
"goodsDishesName": cartItem.goodsDishesName,
|
||
"ifExpired": cartItem.ifExpired,
|
||
"inventoryId": cartItem.inventoryId,
|
||
"mealtimeName": cartItem.mealtimeName,
|
||
"mealtimeType": cartItem.mealtimeType,
|
||
"menuDetailId": cartItem.menuDetailId,
|
||
"menuId": cartItem.menuId,
|
||
// "orderDate": cartItem.orderDate,
|
||
"orderDate": this.newDate2,
|
||
"orderType": cartItem.orderType,
|
||
"dishesDetailList":food.dishesDetailList,
|
||
"prefPrice": food.dishesDetailList[0].prefPrice,
|
||
"quantity": cartItem.quantity,
|
||
"restrictNum": cartItem.restrictNum,
|
||
"salePrice": cartItem.salePrice,
|
||
"salesMode": cartItem.salesMode,
|
||
"shoppingCartId": cartItem.shoppingCartId,
|
||
"sizeJson": cartItem.sizeJson,
|
||
"sizeName": cartItem.sizeName,
|
||
"sizeType": cartItem.sizeType,
|
||
"stallId": this.stallId,
|
||
"stallName": this.stallName,
|
||
"surplusNum": cartItem.surplusNum,
|
||
"unitName": null,
|
||
"weightUnit": null
|
||
}
|
||
this.$set(cartItem, 'orderDetailList', [obj])
|
||
}
|
||
})
|
||
})
|
||
})
|
||
})
|
||
//计算总价
|
||
this.handleTotalPrice()
|
||
}else{
|
||
this.shoppingCartList = []
|
||
}
|
||
},
|
||
//菜谱加减操作
|
||
handleFoodNum(type, food) {
|
||
console.log('🚀 ~ handleFoodNum ~ food:', food)
|
||
console.log('🚀 ~ handleFoodNum ~ type', type)
|
||
if (type === 1) {
|
||
console.log('减少')
|
||
if (food.num > 0) {
|
||
food.num--
|
||
this.delShopCart(food)
|
||
}
|
||
} else {
|
||
console.log('增加')
|
||
if (food.num < food.dishesDetailList[0].restrictNum) {
|
||
// food.num++;
|
||
this.addShopCart(food)
|
||
}
|
||
console.log('food', food)
|
||
}
|
||
|
||
},
|
||
//删除按钮
|
||
async delFood(e,item){
|
||
console.log(e)
|
||
console.log(item)
|
||
console.log(this.shoppingCartList)
|
||
let param = {
|
||
"custId":uni.getStorageSync('custId'),
|
||
"shoppingCartId":"",
|
||
"quantity":0
|
||
}
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(item.baseDishesId==cartItem.goodsDishesId){
|
||
param.shoppingCartId=cartItem.shoppingCartId
|
||
}
|
||
})
|
||
this.menuData.forEach(menuItem => {
|
||
menuItem.typeList.forEach(detail => {
|
||
detail.dishesList.forEach(food => {
|
||
if(food.baseDishesId==item.baseDishesId){
|
||
this.$set(food, 'num', 0)
|
||
}
|
||
})
|
||
})
|
||
})
|
||
console.log(param)
|
||
const res = await updateAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
},
|
||
|
||
async addShopCart(item){
|
||
console.log(item)
|
||
let param = {
|
||
"orderType": 2,
|
||
"orderDate":this.newDate2,
|
||
// "orderDate":"2024-11-11",
|
||
"mealtimeType":item.mealtimeType,
|
||
"custId":uni.getStorageSync('custId'),
|
||
"menuId":this.recipeId,
|
||
"canteenId":this.canteenId,
|
||
"stallId":this.stallId,
|
||
"goodsDishesId":item.baseDishesId,
|
||
"goodsDishesName":item.dishesName,
|
||
"quantity":1,
|
||
"prefPrice":item.prefPrice
|
||
}
|
||
const res = await addAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
console.log(res, '添加')
|
||
},
|
||
async delShopCart(item){
|
||
console.log(item)
|
||
let param = {
|
||
"custId":uni.getStorageSync('custId'),
|
||
"shoppingCartId":'',
|
||
"quantity":item.num
|
||
}
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(item.baseDishesId==cartItem.goodsDishesId){
|
||
param.shoppingCartId=cartItem.shoppingCartId
|
||
}
|
||
})
|
||
this.menuData.forEach(menuItem => {
|
||
menuItem.typeList.forEach(detail => {
|
||
detail.dishesList.forEach(food => {
|
||
if(food.baseDishesId==item.goodsDishesId){
|
||
this.$set(food, 'num', item.num)
|
||
}
|
||
})
|
||
})
|
||
})
|
||
console.log(param)
|
||
const res = await updateAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
},
|
||
//购物车-清空按钮
|
||
clearCar(){
|
||
let arr = []
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
arr.push(cartItem.shoppingCartId)
|
||
})
|
||
try {
|
||
let param = {
|
||
"custId":uni.getStorageSync('custId'),
|
||
"shoppingCartIds":arr,
|
||
}
|
||
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, 'num', 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
|
||
let addFood = []
|
||
this.menuData.forEach(item => {
|
||
item.typeList.forEach(detail => {
|
||
detail.dishesList.forEach(food => {
|
||
if (food.num > 0) {
|
||
total += food.num * (food.dishesDetailList[0].prefPrice/100).toFixed(2)
|
||
addFood.push(food)
|
||
}
|
||
})
|
||
})
|
||
})
|
||
this.totalPrice = total.toFixed(2)
|
||
this.addFood = addFood
|
||
if (this.addFood.length == 0) this.showCar = false
|
||
console.log('🚀 ~ handleTotalPrice ~ total', this.totalPrice)
|
||
console.log('🚀 ~ handleTotalPrice ~ addFood', this.addFood)
|
||
},
|
||
|
||
// 订单结算
|
||
handleOrder() {
|
||
console.log('结算')
|
||
// 购物车为空 不可结算
|
||
if (this.totalPrice == 0) {
|
||
uni.showToast({
|
||
title: '请添加菜品',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/advanceOrder/orderDetails?carList=${JSON.stringify(this.shoppingCartList)}&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;
|
||
|
||
.activeLine{
|
||
background: #DD7D3C;
|
||
border-radius: 10upx;
|
||
width: 100rpx;
|
||
height: 6upx;
|
||
}
|
||
}
|
||
.active {
|
||
color: #DD7D3C;
|
||
font-weight: bolder;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.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: 26rpx;
|
||
}
|
||
|
||
.content-right{
|
||
width: 80%;
|
||
height: 74vh;
|
||
}
|
||
.scroll-right-item{
|
||
width: 100%;
|
||
height: auto;
|
||
// background-color: #959FA4;
|
||
}
|
||
.image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 10rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.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: 12px;
|
||
.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: 14px;
|
||
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: 12px;
|
||
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: 14px;
|
||
color: #0f274b;
|
||
}
|
||
.sale-num {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: rgba(15, 39, 75, 0.6);
|
||
line-height: 14px;
|
||
}
|
||
.num-cont {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #ff6816;
|
||
span {
|
||
border: 1px solid #ff6816;
|
||
padding: 0 2px;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
.sale-price {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #ff6816;
|
||
}
|
||
}
|
||
.right-cont {
|
||
position: absolute;
|
||
right: 8px;
|
||
bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
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: 12px;
|
||
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: 18px;
|
||
color: #0f274b;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-cont {
|
||
height: 330px;
|
||
padding: 16px;
|
||
color: #0f274b;
|
||
|
||
.name-type {
|
||
margin-left: 5px;
|
||
font-weight: 400;
|
||
font-size: 10px;
|
||
color: #fff;
|
||
padding: 2px 7px;
|
||
background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
|
||
border-radius: 11px 11px 11px 11px;
|
||
}
|
||
}
|
||
.list-wrap {
|
||
height: 200px;
|
||
overflow: auto;
|
||
}
|
||
</style>
|