924 lines
28 KiB
Vue
924 lines
28 KiB
Vue
<template>
|
||
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
||
<view>
|
||
<view class="image-box">
|
||
<image style="width: 100%;height: 100%;" :src="dashesData.dishesImgUrl"></image>
|
||
</view>
|
||
<view class="menuContent">
|
||
<view class="menuInfo">
|
||
<view style="margin-bottom: 10px;margin-left: 20px;display: flex;justify-content: space-between;">
|
||
<view style="color:#DD7D3C;font-size: 36rpx;font-weight: 600;">
|
||
￥{{(menuData.dishesDetailList[0].prefPrice/100).toFixed(2)}}
|
||
</view>
|
||
|
||
<view style="display: flex;align-items: center;" v-if="dashesData.remanentNum>0">
|
||
<u-icon
|
||
v-if="dashesData.quantity>0"
|
||
name="../../static/images/delete.png"
|
||
size="18"
|
||
@click="handleFoodNum(1, dashesData)"
|
||
/>
|
||
<span style="margin: 0 10px;font-size: 28rpx;">{{ dashesData.quantity || 0 }}</span>
|
||
<u-icon
|
||
v-if="dashesData.quantity < dashesData.limitNum"
|
||
name="../../static/images/add.png"
|
||
size="18"
|
||
@click="handleFoodNum(2, dashesData)"
|
||
/>
|
||
<u-icon v-if="dashesData.quantity == dashesData.limitNum" name="../../static/images/no-add.png" size="16" />
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;height: 30px;display: flex;align-items: center;justify-content: space-between;">
|
||
<view style="font-size: 36rpx;font-weight: 600;margin-left: 20px;">{{dashesData.dishesName}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tab-navigation">
|
||
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
||
</view>
|
||
<view class="tab-content">
|
||
<view class="info-box" v-if="hIndex==0">
|
||
<view style="margin-bottom: 20px;word-break: break-all;">
|
||
<text style="color: #959FA4;margin-right: 20px;">菜品简介</text>
|
||
<text style="word-break: break-all;">{{dashesData.intro||'-'}}</text>
|
||
</view>
|
||
<view style="margin-bottom: 20px;word-break: break-all;">
|
||
<text style="color: #959FA4;margin-right: 20px;">主料</text>
|
||
<text>
|
||
{{dashesData.mainMaterialStr||'-'}}
|
||
</text>
|
||
</view>
|
||
<view style="margin-bottom: 20px;word-break: break-all;">
|
||
<text style="color: #959FA4;margin-right: 20px;">辅料</text>
|
||
<text>
|
||
{{dashesData.subMaterialStr||'-'}}
|
||
</text>
|
||
</view>
|
||
<!-- <view style="margin-bottom: 20px;">
|
||
<text style="color: #959FA4;">口味</text>
|
||
<text style="margin-left: 20px;word-break: break-all;">-</text>
|
||
</view> -->
|
||
</view>
|
||
<view class="nutrition-box" v-if="hIndex==1">
|
||
<view class="nutrition-box-item">
|
||
<view>项目(份)</view>
|
||
<view>热量(份)</view>
|
||
<view>蛋白质(份)</view>
|
||
<view>脂肪(份)</view>
|
||
<view>碳水化合物(份)</view>
|
||
<view>膳食纤维(份)</view>
|
||
<view>胆固醇(份)</view>
|
||
<view>钙(份)</view>
|
||
<view>钠(份)</view>
|
||
</view>
|
||
<view class="nutrition-box-item">
|
||
<view>含量</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.calories||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.protein||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.fat||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.carbohydrate||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.dietaryFiber||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.cholesterol||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.carotene||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.calcium||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.sodium||'-'}}</view>
|
||
</view>
|
||
<view class="nutrition-box-item">
|
||
<view>NRV%</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.caloriesNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.proteinNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.fatNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.carbohydrateNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.dietaryFiberNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.cholesterolNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.caroteneNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.calciumNrv||'-'}}</view>
|
||
<view>{{dashesData.dishesDetailList[0].nutritionInfo.sodiumNrv||'-'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="evaluate-box" v-if="hIndex==2">
|
||
<view style="width: 100%;height: 30vh;display: flex;justify-content: center;align-items: center;" v-if="totalCount==0">
|
||
暂无评论...
|
||
</view>
|
||
<view style="width: 92%;height: 30px;margin: 10rpx auto; display: flex;justify-content: space-between;align-items: center;" v-if="totalCount>0">
|
||
<text style="font-size: 28rpx;font-weight: bold;margin-left: 20rpx;">评价</text>
|
||
<text style="font-size: 24rpx;margin-left: 20rpx;" @click="goAllEvaluate">查看全部{{totalCount}}个></text>
|
||
</view>
|
||
<view style="width: 100%;height: 40vh;padding: 20rpx;" v-if="totalCount>0">
|
||
<view v-for="(item,index) in evaluaList" :key="index" v-if="index<3" style="width: 100%;height: auto;border-bottom: 1px solid #ccc;">
|
||
<view style="width: 94%;margin: 10rpx auto;display: flex;">
|
||
<view style="width: 100rpx;height: 100rpx;margin: 10rpx;">
|
||
<image :src="item.custPhotoUrl? item.custPhotoUrl:'../../static/images/user.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
||
</view>
|
||
<view style="width: 80%;height: 100rpx;">
|
||
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;padding-top: 10rpx;">
|
||
<text>{{item.userName}}</text>
|
||
<text>{{item.evaluaTime}}</text>
|
||
</view>
|
||
<view style="display: flex;margin-bottom: 10rpx;">
|
||
<u-icon v-for="n in 5" :key="n" :name="n <= item.starLevel ? 'star-fill' : 'star-fill'"
|
||
:color="n <= item.starLevel ? '#ff9933' : '#ccc'" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;display: flex;align-items: center;" v-if="item.pictureList&&item.pictureList.length>0">
|
||
<view v-for="(imgItem,imgIndex) in item.pictureList" :key="imgIndex" style="margin-bottom: 10rpx;">
|
||
<image :src="item" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;">
|
||
{{item.description||"该用户没做评价"}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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%;">
|
||
{{ menuData.canteenName }}/{{menuData.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')}">
|
||
<span style="margin-right: 5px">{{ '库存' + food.remanentNum }}</span>
|
||
<span>{{ '限购' + food.limitNum }}</span>
|
||
</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"
|
||
size="18"
|
||
/>
|
||
</view>
|
||
<span class="cont-num">{{ food.quantity || 0 }}</span>
|
||
<view style="width: 40rpx;" @click="handleFoodNum(2, food)">
|
||
<u-icon
|
||
v-if="food.quantity<food.limitNum"
|
||
name="../../static/images/add2.png"
|
||
size="18"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view v-if="food.isDfficacy==0">已失效</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 { getMenudishesDetailAPI,getMenuEvaluaorderAPI,getMenuEvaluaCountAPI } from '../../api/week-menu/index'
|
||
import { 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,
|
||
menuData:{},
|
||
dashesData:{},
|
||
tabList: ["菜品信息","营养信息","评价"],//tab列表
|
||
hIndex:0,
|
||
evaluaList:[],
|
||
totalCount:0,
|
||
newDate2:"",
|
||
menuList:[],
|
||
shoppingCartList:[],
|
||
// 总价格
|
||
totalPrice: 0,
|
||
showCar: false, // 购物车
|
||
showModal: false, // 清空购物车
|
||
// 添加的菜品
|
||
addFood: [],
|
||
options: [{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c'
|
||
}
|
||
}],
|
||
canteenType: '自取',
|
||
isHandle:false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
options = JSON.parse(options.params)
|
||
console.log(options)
|
||
this.menuData = options
|
||
this.newDate2 = this.menuData.orderDate
|
||
this.getMenudishesDetail()
|
||
// this.getMenuEvaluaorderList()
|
||
// this.getMenuEvaluaCount()
|
||
this.getMenuListData()
|
||
},
|
||
methods: {
|
||
//获取菜品详情
|
||
async getMenudishesDetail(){
|
||
// let param = {
|
||
// "userId": uni.getStorageSync('userId') ,
|
||
// "detailId": this.menuData.recipeDetailId,
|
||
// "baseDishesId": this.menuData.baseDishesId,
|
||
// // "delFlag": 2
|
||
// }
|
||
// const res = await getMenudishesDetailAPI(param)
|
||
// if(res.code==200){
|
||
// this.dashesData = res.data;
|
||
this.dashesData = this.menuData;
|
||
if(this.dashesData.materialList&&this.dashesData.materialList.length>0){
|
||
let arr1=[]
|
||
let arr2=[]
|
||
this.dashesData.materialList.forEach(item=>{
|
||
if(item.materialType==1){ arr1.push(item.materialName) }
|
||
if(item.materialType==2){ arr2.push(item.materialName) }
|
||
})
|
||
this.dashesData.mainMaterialStr = arr1.join("、")
|
||
this.dashesData.subMaterialStr = arr2.join("、")
|
||
}else{
|
||
this.dashesData.mainMaterialStr = ""
|
||
this.dashesData.subMaterialStr = ""
|
||
}
|
||
this.$set(this.dashesData, 'quantity', 0)
|
||
this.$set(this.dashesData, 'monthlySales', this.dashesData.dishesDetailList[0].monthlySales)
|
||
this.$set(this.dashesData, 'goodProbability', this.dashesData.dishesDetailList[0].goodProbability)
|
||
this.$set(this.dashesData, 'remanentNum', this.dashesData.dishesDetailList[0].remanentNum)
|
||
this.$set(this.dashesData, 'limitNum', this.dashesData.dishesDetailList[0].limitNum)
|
||
this.$set(this.dashesData, 'dishesPrice', this.dashesData.dishesDetailList[0].dishesPrice)
|
||
this.$set(this.dashesData, 'prefPrice', this.dashesData.dishesDetailList[0].prefPrice)
|
||
this.$set(this.dashesData, 'dishesId', this.dashesData.dishesDetailList[0].dishesId)
|
||
this.$forceUpdate()
|
||
// }
|
||
// console.log(res,'获取菜品详情')
|
||
},
|
||
async getMenuEvaluaCount() {
|
||
let param = {
|
||
"dishesId": this.menuData.baseDishesId,
|
||
}
|
||
const res = await getMenuEvaluaCountAPI(param)
|
||
this.totalCount = res.totalCount
|
||
},
|
||
//获取菜品评价
|
||
async getMenuEvaluaorderList(){
|
||
let param = {
|
||
// "current": 1,
|
||
// "size": 10,
|
||
"mealId": this.menuData.baseDishesId,
|
||
// "mealId": "383143288183459840",
|
||
"shopstallId": this.menuData.stallId,
|
||
// "shopstallId": "379082300370980864",
|
||
"searchType": "0",
|
||
"mealType": "1"
|
||
}
|
||
const res = await getMenuEvaluaorderAPI(param)
|
||
if(res.code==200){
|
||
this.evaluaList = res.data.evaluaList||[]
|
||
}
|
||
},
|
||
goAllEvaluate(){
|
||
uni.navigateTo({
|
||
url: `/pages/weeklyMenu/evaluateCenter?params=${JSON.stringify(this.menuData)}`
|
||
})
|
||
},
|
||
changeTab(index) {
|
||
this.hIndex=index
|
||
},
|
||
// 获取菜谱
|
||
async getMenuListData() {
|
||
let param = {
|
||
"recipeId":this.menuData.recipeId,
|
||
"applyDate":this.newDate2,
|
||
}
|
||
const res = await getAdvanceDetailListAPI(param)
|
||
console.log(res, '预订餐菜谱')
|
||
if(res.code==200){
|
||
if(res.rows&&res.rows.length>0){
|
||
this.menuList = res.rows;
|
||
this.menuList.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)
|
||
this.$set(food, 'remanentNum', food.dishesDetailList[0].remanentNum)
|
||
this.$set(food, 'limitNum', food.dishesDetailList[0].limitNum)
|
||
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()
|
||
}else{
|
||
this.menuList = [];
|
||
}
|
||
}else{
|
||
uni.$u.toast(res.msg)
|
||
this.menuList = [];
|
||
}
|
||
},
|
||
// 处理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 '夜宵'
|
||
}
|
||
},
|
||
//获取预定购物车（订单）
|
||
async getShoppingCartList(){
|
||
this.$set(this.dashesData, 'quantity', 0)
|
||
let param = {
|
||
"orderType":"2",
|
||
"userId":uni.getStorageSync('userId'),
|
||
"canteenId":this.menuData.canteenId,
|
||
"stallId":this.menuData.stallId,
|
||
"menuDateList":[this.newDate2]
|
||
}
|
||
const res = await getShoppingCartListAPI(param)
|
||
console.log(res, '预订餐预定')
|
||
if(res.code==200){
|
||
this.shoppingCartList = res.data;
|
||
this.shoppingCartList.forEach(item => {
|
||
item.isDfficacy = 0
|
||
item.remanentNum = 0
|
||
item.limitNum = 0
|
||
item.prefPrice = 0
|
||
item.monthlySales = 0
|
||
})
|
||
this.menuList.forEach(menuItem => {
|
||
menuItem.typeList.forEach(detail => {
|
||
detail.dishesList.forEach(food => {
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(food.dishesId==cartItem.goodsId){
|
||
let obj = {
|
||
"detailType": food.detailType,
|
||
"goodsId": cartItem.goodsId,
|
||
"goodsImgUrl": food.dishesImgUrl,//图片地址
|
||
"goodsName": cartItem.goodsName,
|
||
"mealtimeName": food.mealtimeName,
|
||
"mealtimeType": food.mealtimeType,
|
||
"recipeDetailId": food.recipeDetailId,
|
||
"recipeId": cartItem.recipeId,
|
||
"quantity": cartItem.quantity,
|
||
"salePrice": food.dishesDetailList[0].dishesPrice,
|
||
"discountPrice": food.dishesDetailList[0].prefPrice,
|
||
"finalPrice": food.dishesDetailList[0].prefPrice,
|
||
"salesMode": 1,
|
||
"orderDate": cartItem.orderDate,
|
||
"orderType": cartItem.orderType,
|
||
"prefPrice": food.dishesDetailList[0].prefPrice,
|
||
"limitNum": food.dishesDetailList[0].limitNum,
|
||
"cartId": cartItem.cartId,
|
||
"sizeType": cartItem.sizeType,
|
||
"remanentNum": cartItem.remanentNum
|
||
}
|
||
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)
|
||
this.$set(cartItem, 'recipeDetailId', food.recipeDetailId)
|
||
this.$set(cartItem, 'detailType', food.detailType)
|
||
this.$set(cartItem, 'dishesId', food.dishesDetailList[0].dishesId)
|
||
this.$set(cartItem, 'remanentNum', food.dishesDetailList[0].remanentNum)
|
||
this.$set(cartItem, 'limitNum', food.dishesDetailList[0].limitNum)
|
||
this.$set(cartItem, 'prefPrice', food.dishesDetailList[0].prefPrice)
|
||
if(cartItem.orderDate == this.newDate2){//存在且时间一致
|
||
if(cartItem.recipeId==this.menuData.recipeId){
|
||
this.$set(food, 'quantity', cartItem.quantity)
|
||
this.$set(cartItem,'isDfficacy', 1) //有效
|
||
}else{
|
||
this.$set(food, 'quantity', 0)
|
||
this.$set(cartItem,'isDfficacy', 0) //失效
|
||
}
|
||
}else{//日期不一致
|
||
this.$set(food, 'quantity', 0)
|
||
this.$set(cartItem,'isDfficacy', 0) //失效
|
||
}
|
||
}
|
||
if(cartItem.dishesId==this.dashesData.dishesId){
|
||
if(cartItem.orderDate == this.newDate2){
|
||
if(cartItem.recipeId==this.menuData.recipeId){
|
||
this.$set(this.dashesData, 'quantity', cartItem.quantity)
|
||
}else{
|
||
this.$set(this.dashesData, 'quantity', 0)
|
||
}
|
||
}else{
|
||
this.$set(this.dashesData, 'quantity', 0)
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
})
|
||
|
||
this.isHandle = false
|
||
//计算总价
|
||
this.handleTotalPrice()
|
||
}else{
|
||
this.shoppingCartList = []
|
||
this.isHandle = false
|
||
}
|
||
},
|
||
//菜谱加减操作
|
||
handleFoodNum(type, food) {
|
||
console.log(food)
|
||
if (type === 1) {
|
||
if (food.quantity > 0) {
|
||
if(!this.isHandle){
|
||
food.quantity--
|
||
this.delShopCart(food)
|
||
}
|
||
}
|
||
} else {
|
||
if (food.quantity < food.limitNum) {
|
||
if(!this.isHandle){
|
||
this.addShopCart(food)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async addShopCart(item){
|
||
console.log('?? ~ handleFoodNum ~ type', "新增")
|
||
console.log(this.menuData)
|
||
console.log(item)
|
||
this.isHandle = true
|
||
let param = {
|
||
"userId":uni.getStorageSync('userId'),
|
||
"orderType": 2,
|
||
"orderDate":this.newDate2,
|
||
"canteenId":this.menuData.canteenId,
|
||
"stallId":this.menuData.stallId,
|
||
"mealtimeType":this.menuData.mealtimeType,
|
||
"recipeId":this.menuData.recipeId,
|
||
"goodsId":item.dishesId,
|
||
"goodsName":item.goodsName||item.dishesName,
|
||
"recipeDetailId":this.menuData.recipeDetailId,
|
||
"detailType":this.menuData.detailType,
|
||
"quantity":item.quantity+1
|
||
}
|
||
|
||
console.log(this.shoppingCartList)
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(item.dishesId==cartItem.goodsId){
|
||
param.cartId=cartItem.cartId
|
||
}
|
||
})
|
||
console.log(param)
|
||
const res = await addAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
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'),
|
||
"cartId":'',
|
||
"quantity":item.quantity
|
||
}
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(item.dishesId==cartItem.goodsId){
|
||
param.cartId=cartItem.cartId
|
||
}
|
||
})
|
||
console.log(param)
|
||
const res = await updateAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
}else{
|
||
let param = {
|
||
"userId":uni.getStorageSync('userId'),
|
||
"cartIds":[],
|
||
}
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
if(item.dishesId==cartItem.goodsId){
|
||
param.cartIds=[cartItem.cartId]
|
||
}
|
||
})
|
||
const res = await clearAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
}
|
||
},
|
||
//购物车滑动删除按钮
|
||
async delFood(e,item){
|
||
let param = {
|
||
"userId":uni.getStorageSync('userId'),
|
||
"cartIds":[item.cartId],
|
||
}
|
||
console.log(param)
|
||
const res = await clearAdvancehoppingCartAPI(param)
|
||
if(res.code==200){
|
||
this.getShoppingCartList()
|
||
}
|
||
},
|
||
//购物车-清空按钮
|
||
clearCar(){
|
||
let arr = []
|
||
this.shoppingCartList.forEach(cartItem=>{
|
||
arr.push(cartItem.cartId)
|
||
})
|
||
if(arr.length==0){
|
||
uni.showToast({
|
||
title: "购物车中暂无菜品",
|
||
icon: 'none'
|
||
})
|
||
}else{
|
||
try {
|
||
let param = {
|
||
"userId":uni.getStorageSync('userId'),
|
||
"cartIds":arr,
|
||
}
|
||
// console.log(param)
|
||
clearAdvancehoppingCartAPI(param).then(res => {
|
||
if(res.code==200){
|
||
console.log(res)
|
||
this.menuList.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.menuData.canteenId}&stallId=${this.menuData.stallId}&canteenName=${this.menuData.canteenName}&stallName=${this.menuData.stallName}&totalPrice=${this.totalPrice}&orderDate=${this.newDate2}`
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
.image-box{
|
||
width: 90%;
|
||
height: 40vh;
|
||
margin: 0 auto;
|
||
border-radius: 20px;
|
||
// background-color: #666;
|
||
}
|
||
.menuContent{
|
||
width: 100%;
|
||
height: 64vh;
|
||
background-color: #fff;
|
||
// border-top-right-radius: 20px;
|
||
// border-top-left-radius: 20px;
|
||
// background-color: #DD7D3C;
|
||
// z-index: 999;
|
||
// margin-top: -2.5vh;
|
||
}
|
||
.menuInfo{
|
||
width: 94%;
|
||
margin: 10rpx auto;
|
||
height: auto;
|
||
}
|
||
.star-icon {
|
||
padding: 8px;
|
||
}
|
||
|
||
|
||
.tab-navigation {
|
||
display: flex;
|
||
background-color: white;
|
||
padding: 0px 16px 0 16px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.tab-content{
|
||
width: 94%;
|
||
margin: 10rpx auto;
|
||
height: 50vh;
|
||
.info-box{
|
||
width: 94%;
|
||
margin: 10rpx auto;
|
||
height: 100%;
|
||
}
|
||
.nutrition-box{
|
||
width: 94%;
|
||
margin: 10rpx auto;
|
||
height: 100%;
|
||
color: #959FA4;
|
||
// background-color: #DD7D3C;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.nutrition-box-item{
|
||
width: 28%;
|
||
margin: 0 2%;
|
||
height: 100%;
|
||
text-align: center;
|
||
// background-color: #DD7D3C;
|
||
view{
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
.content-left{
|
||
width: 20%;
|
||
height: 82vh;
|
||
}
|
||
.active2 {
|
||
color: #DD7D3C;
|
||
font-weight: bolder;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.content-right{
|
||
width: 80%;
|
||
height: 82vh;
|
||
}
|
||
.scroll-right-item{
|
||
width: 100%;
|
||
height: 300rpx;
|
||
// background-color: #959FA4;
|
||
}
|
||
.image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 10rpx;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.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>
|