Dining_Hall/pages/advanceOrder/index.vue

<template>
  <view>
    <div class="top-wrap">
      <div class="top-cont flex justify-between align-center">
        <div class="flex align-center">
          <u-icon name="../../static/images/time.png" size="16"></u-icon>
          <span style="margin-left: 5px">{{ newDate }}</span>
        </div>
		<!-- <div 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>
        </div> -->
      </div>
    </div>  
	<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%;">
						<image class="image" :src="item.dishesImgUrl"></image>
					</view>
					<view style="width: 65%;height: 100%; display: flex;position: relative;">
						<view class="center-cont">
							<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> 

    <!-- 购物车 -->
    <div style="height: 60px"></div>
    <div class="shop-car">
      <div class="car-cont">
        <div 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>
        </div>

        <div>
          <u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder">结算</u-button>
        </div>
      </div>
    </div>

    <!-- 购物车-pop -->
    <u-popup :show="showCar" position="bottom" :round="12" @close="showCar = false">
      <div class="popup-cont">
        <div class="flex justify-between align-center">
          <div style="font-weight: 500; font-size: 14px">已加购菜品</div>
          <div style="font-weight: 400; font-size: 12px; color: #ff6816" @click="showModal = true">清空</div>
        </div>

        <div class="flex justify-between align-center" style="margin: 20.5px 0 12.5px">
          <div class="flex align-center">
            {{ canteenName }}/{{stallName}}
            <span class="name-type">{{ canteenType }}</span>
          </div>

          <div>
            {{ newDate2 }}
          </div>
        </div>

        <div class="list-wrap">
          <div class="cont-list" v-for="(food, foodIndex) in addFood">
            <div>
              <u-image :src="food.dishesImgUrl" showLoading width="80px" height="80px" />
            </div>

            <div class="center-cont">
              <div class="meal-name">{{ food.dishesName }}</div>
              <div class="sale-num">月销 {{ food.monthlySales||0 }}</div>
              <div class="num-cont">
                <span style="margin-right: 5px">{{ '库存' + food.dishesDetailList[0].surplusNum }}</span>
                <span>{{ '限购' + food.dishesDetailList[0].restrictNum }}</span>
              </div>
              <div class="sale-price">
                <span style="font-size: 11px">￥</span>
                {{ (food.dishesDetailList[0].prefPrice/100).toFixed(2) }}
              </div>
            </div>

            <div class="right-cont">
              <div 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)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </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,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: [],
		
      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()
	//获取预定餐菜谱
	this.getMenuListData()
  },
  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 '夜宵'
      }
    },
	//获取预定购物车（订单）
	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)
						}
				    })
				  })
				})
			})
			//计算总价
			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 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,
		}
		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()
		}
	},
    // 打开购物车
    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(1)
      this.addFood = addFood
      if (this.addFood.length == 0) this.showCar = false
      console.log('🚀 ~ handleTotalPrice ~ total', this.totalPrice)
      console.log('🚀 ~ handleTotalPrice ~ addFood', this.addFood)
    },
	//购物车-清空按钮
    clearCar(){
		this.shoppingCartList.forEach(cartItem=>{
			try {
				let param = {
					"custId":uni.getStorageSync('custId'),
					"shoppingCartId":cartItem.shoppingCartId,
					"quantity":0
				}
				console.log(param)
				updateAdvancehoppingCartAPI(param).then(res => {
					if(res.code==200){
						console.log(res)
					}
				})
			} catch (error) {
				console.log(error)
			}
			
		})
		this.menuData.forEach(menuItem => {
		  menuItem.typeList.forEach(detail => {
		    detail.dishesList.forEach(food => { 
				this.$set(food, 'num', 0) 
		    })
		  })
		})
		this.getShoppingCartList()  
		this.showModal = false
    },
    // 订单结算
    handleOrder() {
      console.log('结算')
      // 购物车为空 不可结算
      if (this.totalPrice == 0) {
        uni.showToast({
          title: '请添加菜品',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: `/pages/advanceOrder/orderDetails?canteenId=${this.canteenId}&stallId=${this.stallId}&canteenName=${this.canteenName}&stallName=${this.stallName}`
      })
    },
	//垂直定位锚点
	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>