Dining_Hall/pages/advanceOrder/index.vue

<template>
  <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%;">
						<view style="width: 160rpx;height: 160rpx;" @click="goMenuDetail(item)" v-if="item.surplusNum>0">
							<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)">
								<view class="meal-name" style="margin-bottom: 10rpx;font-weight: bold;" :style="{color:(item.surplusNum==0? '#747474':'#000')}">{{ item.dishesName }}</view>
								<view class="sale-num" style="margin-bottom: 10rpx;">
									<text>月销 {{ item.monthlySales||0 }}</text>
									<text style="margin-left: 20rpx;">好评率{{ item.goodProbability||0 }}%</text>
								</view>
								<view class="num-cont" style="margin-bottom: 10rpx;" :style="{color:(item.surplusNum==0? '#ffbe89':'#ff6816')}">
								  <span style="margin-right: 5px;" :style="{borderColor:(item.surplusNum==0? '#ffbe89':'#ff6816')}">{{ '库存' + item.surplusNum }}</span>
								  <span :style="{borderColor:(item.surplusNum==0? '#ffbe89':'#ff6816')}">{{ '限购' + item.restrictNum }}</span>
								</view>
								<view class="sale-price" style="margin-bottom: 10rpx;" :style="{color:(item.surplusNum==0? '#ffbe89':'#ff6816')}">
								  <span style="font-size: 11px">￥</span>
								  <span style="font-size: 16px">{{ (item.dishesDetailList[0].dishesPrice/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>
							<view class="right-cont" v-if="item.surplusNum!=0">
								<u-icon v-if="item.quantity > 0"
								  name="../../static/images/delete.png"
								  size="16"
								  @click="handleFoodNum(1, item)"
								/>
								<span style="margin: 0 10px">{{ item.quantity || 0 }}</span>
								<u-icon
								  v-if="item.quantity < item.restrictNum"
								  name="../../static/images/add.png"
								  size="16"
								  @click="handleFoodNum(2, item)"
								/>
								<u-icon v-if="item.quantity == item.restrictNum" name="../../static/images/no-add.png" size="16" />
							</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: 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 shoppingCartList">
				<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.goodsDishesImgUrl" width="80px" height="80px" />
					</view>  
					<view class="center-cont">
					  <view class="meal-name">{{ food.goodsDishesName }}</view>
					  <view class="sale-num">月销 {{ food.monthlySales||0 }}</view>
					  <view class="num-cont">
						<span style="margin-right: 5px">{{ '库存' + food.surplusNum }}</span>
						<span>{{ '限购' + food.restrictNum }}</span>
					  </view>
					  <view class="sale-price">
						<span style="font-size: 11px">￥</span>
						{{ (food.prefPrice/100).toFixed(2) }}
					  </view>
					</view> 
					<view class="right-cont">
						<view class="num-wrap" v-if="food.isDfficacy==1">
							<view style="width: 26rpx;">
								<u-icon
								  v-if="food.quantity > 0"
								  name="../../static/images/del.png"
								  size="16"
								  @click="handleFoodNum(1, food)"
								/>
							</view>
							<span class="cont-num">{{ food.quantity || 0 }}</span>
							<view  style="width: 26rpx;">
								<u-icon
								  v-if="food.quantity<food.restrictNum"
								  name="../../static/images/add2.png"
								  size="16"
								  @click="handleFoodNum(2, food)"
								/>
							</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 { 
		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 外卖
    }
  },
  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()
	},200)	
  },
  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]) 
	},
    // 获取当前时间
    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, 
		}
		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, 'quantity', 0)
							this.$set(food, 'monthlySales', food.dishesDetailList[0].monthlySales)
							this.$set(food, 'goodProbability', food.dishesDetailList[0].goodProbability)
							this.$set(food, 'surplusNum', food.dishesDetailList[0].surplusNum)
							this.$set(food, 'restrictNum', food.dishesDetailList[0].restrictNum)
							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/weeklyMenu/menuDetail?params=${JSON.stringify(item)}`
		})
	},
	//获取预定购物车（订单）
	async getShoppingCartList(){
		let param = {
			"orderType":"2",
			"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.menuData.forEach(menuItem => {
			  menuItem.typeList.forEach(detail => {
				detail.dishesList.forEach(food => {
					this.$set(food, 'quantity', 0)
					this.shoppingCartList.forEach(cartItem=>{
						if(food.dishesId==cartItem.goodsDishesId){
							let obj = {
								"canteenId":this.canteenId, 
								"canteenName":this.canteenName, 
								"costModelList":food.costModelList,
								"custId": uni.getStorageSync('custId'),
								"detailId": food.detailId,
								"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": cartItem.orderDate,
								"orderType": cartItem.orderType,
								"dishesDetailList":food.dishesDetailList,
								"prefPrice": food.dishesDetailList[0].prefPrice,
								"quantity": cartItem.quantity,
								"restrictNum": food.dishesDetailList[0].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.$set(cartItem, 'goodsDishesImgUrl', food.dishesImgUrl)
							this.$set(cartItem, 'monthlySales', food.dishesDetailList[0].monthlySales)
							this.$set(cartItem, 'detailId', food.detailId)
							this.$set(cartItem, 'detailType', food.detailType)
							this.$set(cartItem, 'dishesId', food.dishesDetailList[0].dishesId)
							this.$set(cartItem, 'surplusNum', food.dishesDetailList[0].surplusNum)
							this.$set(cartItem, 'restrictNum', food.dishesDetailList[0].restrictNum)
							this.$set(cartItem, 'prefPrice', food.dishesDetailList[0].prefPrice) 
							
							if(cartItem.orderDate == this.newDate2){//存在且时间一致
								this.$set(food, 'quantity', cartItem.quantity)
								this.$set(cartItem,'isDfficacy', 1) //有效
							}else{//日期不一致
								this.$set(food, 'quantity', 0)
								this.$set(cartItem,'isDfficacy', 0) //失效
							}
						}
				    })
					})
				})
			}) 
				
			console.log(this.shoppingCartList)
			
			//计算总价
			this.handleTotalPrice()
		}else{
			this.shoppingCartList = []
		}
	},
    //菜谱加减操作
    handleFoodNum(type, food) {
      console.log(food)
      if (type === 1) {
        if (food.quantity > 0) {
			food.quantity--
			this.delShopCart(food)
        }
      } else {
        if (food.quantity < food.restrictNum) {
		  this.addShopCart(food)
        } 
      }
    },
	async addShopCart(item){
		console.log('🚀 ~ handleFoodNum ~ type', "新增")
		console.log(item)
		let param = {
			"custId":uni.getStorageSync('custId'),
			"orderType": 2,
			"orderDate":this.newDate2, 
			"canteenId":this.canteenId,
			"stallId":this.stallId, 
			"mealtimeType":item.mealtimeType, 
			"menuId":this.recipeId,
			"goodsDishesId":item.dishesId,
			"goodsDishesName":item.goodsDishesName||item.dishesName,
			"detailId":item.detailId,
			"detailType":item.detailType,
			"quantity":1,
		}
		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)
		let param = {
			"custId":uni.getStorageSync('custId'),
			"shoppingCartId":'',
			"quantity":item.quantity
		} 
		this.shoppingCartList.forEach(cartItem=>{
			if(item.dishesId==cartItem.goodsDishesId){
				param.shoppingCartId=cartItem.shoppingCartId
			}
		})
		console.log(param)
		const res = await updateAdvancehoppingCartAPI(param)
		if(res.code==200){
			this.getShoppingCartList()
			// this.getMenuListData()
		}
	},
	//购物车滑动删除按钮
	async delFood(e,item){
		let param = {
			"custId":uni.getStorageSync('custId'),
			"shoppingCartId":item.shoppingCartId,
			"quantity":0
		}
		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, '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 => {
		  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;

	.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;
	// 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: 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-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: 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: 28rpx;
  font-weight: bold;
}

</style>