ydd_front/mer_uniapp/pages/goods_cate/index.vue

<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="showSkeleton"></tui-skeleton>
		
		<view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">		
			<!-- 头部 -->
			<view class="box-top" :style="{ 'marginTop': sysHeight*2 + 90 + 'rpx'}">
				<view class="box-top1">
					<text class="box-txt">{{merchanInfo.name}}</text>
					<!-- 收藏图片 -->
					<view>
						<!-- 未收藏icon -->
						<image class='icon-img' src="../../static/img/收藏-灰.png" 
						@click='getMerCollectAddApi' v-if="!merchanInfo.isCollect"/> 
						<!-- 已经收藏 -->
						<image class='icon-img' src="../../static/img/收藏-亮.png" 
						@click='getMerCollectCancelApi' v-else />
					</view>
				</view>
				<!-- 月销 -->
				<view class="box-pin">
					<text class="box-txt2">{{ merchanInfo.starLevel }}分</text>
					<text class="box-txt3">销量 {{merchanInfo.sales || 0 }}</text>
				</view>
				<!-- 商家地址 -->
				<view class="box-shopp">商家地址：{{merchanInfo.addressDetail}}</view>
				<!-- 新品上新的 -->
				<view class="box-newtxt">
				
					<swiper style="height: 40rpx; width:100%;" :indicator-dots="false" :autoplay="true" interval="2500" :duration="500" vertical="true" circular="true">
						<block v-for="(item,index) in merchanInfo.headline" :key='index'>
							<swiper-item catchtouchmove='catchTouchMove'>
								<view class='text acea-row row-between-wrapper'>
									<view class='newsTitle'>
										<text class='iconfont icon-laba ' style="font-size: 24rpx;margin-right: 10rpx;"></text>
										<text>{{item.title}}</text>
									</view>
								</view>
							</swiper-item>
						</block>
					</swiper>
					</view>
			</view>
		
			<!-- #ifdef APP -->
			<view class='header acea-row row-center-wrapper' >
			<!-- #endif -->
			<!-- #ifndef APP -->
			<view class='header acea-row row-center-wrapper header-box boxcolor' 
			>
			 <view class="back-button-1" @tap="handBack()"></view>
			<!-- #endif -->
				<!-- #ifdef MP -->
				<!-- 导航栏 -->
				<view :style="{ height: `${navigationBarHeight*2+90}rpx`,lineHeight: `${navigationBarHeight*2+110}rpx`}" class="order-nav">
				
					<text class="box-color-txt">{{merchanInfo.name}}</text>
				</view>
				<!-- #endif -->
			</view>
			<!-- #ifdef APP -->
			<view class="con-box">
			<!-- #endif -->
			<!-- #ifndef APP -->
			
			<!--切换点餐还是评价  -->
			<view class="let-box">
				<view @click="Tabnex(0)" class="let-box1">
					<text :class="{ 'actave1': tabindex == 0 }" class="let-txt">点菜</text>
					<view :class="{ 'actave': tabindex == 0 }" class="let-line"></view>
				</view>
				<view @click="Tabnex(1)" class="let-box1">
					<text :class="{ 'actave1': tabindex == 1 }" class="let-txt">评价</text>
					<view :class="{ 'actave': tabindex == 1 }" class="let-line"></view>
				</view>
			</view>
			<!-- 点餐页面  0是点餐 1是评价-->
			<view class="con-box" v-if="tabindex==0">
			<!-- #endif -->
				<view class='aside'>
					<!-- 左侧数据 -->
					<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true' :scroll-into-view="intoindex">
						<view v-for="(item,index) in productList" :key="item.id">
							<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' 
							 :key="item.id" @click='tap(index,"b"+item.id)' :id='"sort"+index'><text class="item_text skeleton-rect">
							 {{item.name}}
							 </text>
							 </view>
						</view>
					</scroll-view>
				</view>
				<!-- 右侧数据 -->
				<view class='conter'>
					<scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;" @scroll="scroll" scroll-with-animation='true'>
						
						<view v-for="(p,i) in productList" :key="p.id" class="nexbox">
							
							<view @click="getOrderdetils(item)" class='listw' :id="'b'+p.id+index" v-for="(item,index) in p.childList" :key="item.id">	
								<view class='list acea-row'>
									<!-- 粘性定位的大类标题 -->
									<view v-if="index==0" class="nexbox-txt">{{p.name}}</view>
									<block>
										<view class='xbox1 row-middle item'
										>
											<view class='picture skeleton-rect'>
												<image class="neximg" mode='aspectFill'  :src="item.icon"/>
											</view>
											<view class='nexbox1'>
												<text class="nexbox1-txt">{{item.name}}</text>
												<view class="nexbox2">
													<text>销量 {{item.sales}}</text>
													<text>好评率 {{ item.replyChance*100}}%</text>
												</view>
												<!-- 价格 加 -->
												<view class="nexbox3">
													<text class="nexbox-txt3">￥ {{item.price}}</text>
													  
													  <view class="nexbox4">
														  <!-- 减 -->
														  <view v-if="item.sum>0" @click.stop="letloke(item)" class="neximg1">-</view>   
														  <text>{{item.sum}}</text>
														  <!-- 加 -->
														  <image   @click.stop="Addsum(item)" 
														   class="nexbox-img3"	  
															referrerpolicy="no-referrer"
															src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/2eb30a58d13a4d218392389a0a61bee4_mergeImage.png"
														/>
													</view>
												</view>
											</view>
										</view>
									</block>
								</view>
							</view>
						</view>
						<view :style='"height:"+(bottomheight-600)+"rpx;"'></view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		
		<!-- 打开的购物车 -->
		<view class="mode" v-if="lockcatble">
			<view class="mode-1">
				<!-- 判断数量大于0显示 -->
				<view class="mode-clear" v-if="getCartGoodsNumber>0">
					<text class="mode-txt">数量：<text style="color: #FD6716 ;">({{getCartGoodsNumber}})</text></text>
					<text @click="Clery" class="mode-txt1">清空</text>
				</view>
				<view class="mode-box">
					 <view class="mode-2" v-for="(item,index) in cart" :key="index">
						<image class="mode-img" mode='aspectFill'  :src="item.icon"/>
						<view class='nexbox1'>
							<text class="nexbox1-txt">{{item.name}}</text>
							<view class="nexbox2">
								<text>销量 {{item.sales}}</text>
								<text>好评率 {{ item.replyChance*100}}%</text>
							</view>
							<!-- 价格 加 -->
							<view class="nexbox3">
								<text class="nexbox-txt3">￥ {{item.price}}</text>
								  
								  <view class="nexbox4">
									  <!-- 减 -->
									  <view v-if="item.sum>0" @click="letloke(item)" class="neximg1">-</view>   
									  <text>{{item.sum}}</text>
									  <!-- 加 -->
									  <image   @click="Addsum(item)" 
									   class="nexbox-img3"	  
										referrerpolicy="no-referrer"
										src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/2eb30a58d13a4d218392389a0a61bee4_mergeImage.png"
									/>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 200rpx;">
					</view>
				</view>
				
				
				
				
				
			</view>
		</view>
		<!-- 购物车栏 begin -->
		<view v-if="tabindex==0" class="cart-box" style="bottom: 77rpx">
			<view class="mark" @click="lockcatble=!lockcatble">
				<image src="/static/img/ic-security-settings.png" class="cart-img" @tap=""></image>
				<view class="tag" v-if="cart.length > 0">{{ getCartGoodsNumber }}</view>
			</view>
			<view style="font-weight: 500;font-size: 27rpx;color: #999999;" class="price" v-if="cart.length === 0">配送费2元</view>
			<view style="font-weight: 600;font-size: 27rpx;color: #FFFFFF;" class="price" v-else>￥{{ getCartGoodsPrice || 0 }}</view>
			<button :style="{backgroundColor: disabledPay ? '#000' : ''}" type="primary" class="pay-btn bg-color" @tap="toPay"
			 :disabled="disabledPay">
				{{ disabledPay ? `差${spread}元起送` : '去结算' }}
			</button>
		</view>
	</view>
</template>
<script>

	let app = getApp();
	import { getCategoryList } from '@/api/product.js';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	import { mapGetters } from "vuex";
	import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import pageFooter from "@/components/pageFooter/index.vue";
	import animationType from '@/utils/animationType.js'
	// #ifdef MP

	
	
	import {
	getCategoryCacheTree,
	getMerchantInfo
	} from '../../api/merchant.js'
	import {
		getMerCollectAddApi,
		getMerCollectCancelApi
	} from '@/api/merchant.js';
	// #endif
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			easyLoadimage,
			tuiSkeleton,
			pageFooter,
			// #ifdef MP

			// #endif
		},
		computed:{
			getCartGoodsNumber() { //计算购物车总数
				return this.cart.reduce((acc, cur) => acc + cur.sum, 0)
			},
			getCartGoodsPrice() { //计算购物车总价
				return this.cart.reduce((acc, cur) => acc + cur.sum * cur.price, 0).toFixed(2)
			},
			disabledPay() { //是否达到起送价
				return this.orderType == 'takeout' && (this.getCartGoodsPrice < this.store.min_price) ? true : false
			},
			spread() { //差多少元起送
				if (this.orderType != 'takeout') return
				return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
			}
		},
		data() {
			let active = 0;
			// #ifdef H5
			active = location.hash.substr(1);
			// #endif
			return {
				theme:app.globalData.theme,
				showSkeleton: true, //骨架屏显示隐藏
				navlist: [],
				hotList: [], //推荐分类
				sysHeight:sysHeight,
				productList: [	  //菜品数据		
				],
				navActive: 0,
				activceCate: active,
				number: "",
				bottomheight: 0,
				hightArr: [],
				toView: "",
				winHeight: 0,
				pidIndex: 0,
				intoindex: "",
				pid: '',
				newData: {},
				activeRouter: '',
				
			
				page:1,//当前页
				limit:9999,//每页条
				Item:'',//跳转这一项数据
				merchanInfo:'',//商家信息
				navigationBarHeight: '',//导航栏高度
				cart: [], //购物车
				store: {  //起送
					min_price: 0.01
				},
				orderType: 'takeout',
				lockcatble:false,//打开的购物车弹窗
				navigateUrl:'',//跳转详情路径
				tabindex:0,//点菜评价切换
			}
		},
		onLoad(options) {
			console.log('options',options)
			  // 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			console.log('设备信息',systemInfo)
			    // 设置导航栏高度
			this.navigationBarHeight = systemInfo.safeArea.top;
			  
			
			let that = this
			that.Item=JSON.parse(options.item)
			 console.log('数据',that.Item)
			 
			that.getMerchantInfo()//商家信息 
			that.getCategoryCacheTree()// // 商家页面-点菜分类
		
			
			
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			// #ifdef H5
			document.body.addEventListener('touchmove', function(event) {
				if (that.$route.path == '/pages/goods_cate/goods_cate') {
					event.preventDefault();
				}
			}, {
				passive: false
			});
			
			
			// #endif
			
		},
		onShow() {
			let that = this
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route;
			this.activeRouter = '/' + curRoute;
			if(uni.getStorageSync('cateNavActive')){
				this.navActive = uni.getStorageSync('cateNavActive')-1;
				uni.removeStorageSync('cateNavActive');
			}
			if(uni.getStorageSync('categoryId')){
				this.pid= uni.getStorageSync('categoryId');
				uni.removeStorageSync('categoryId');
			}
			this.pid && this.navActive && setTimeout(()=>this.tap(this.navActive, 'b' + this.pid), 200);
			setTimeout(() => {
				uni.removeStorageSync('categoryId');
				uni.removeStorageSync('cateNavActive');
			}, 300);

		},
		methods: {
			// 收藏接口
			getMerCollectAddApi(){
				getMerCollectAddApi(this.merchanInfo.id).then(res=>{
					console.log('收藏',res)
					if(res.code==200){
						this.$util.Tips({
							title: "收藏成功",
						});
						this.getMerchantInfo()//商家信息 
					}
				})
			},
			// 取消收藏
			getMerCollectCancelApi(){
				getMerCollectCancelApi(this.merchanInfo.id).then(res=>{
					console.log()
					if(res.code==200){
						this.$util.Tips({
							title: "取消收藏",
						});
						this.getMerchantInfo()//商家信息 
					}
				})
			},
			// 点菜评价切换
			Tabnex(index){
				this.tabindex=index
			},
			
			// 跳转详情
			getOrderdetils(item){
				console.log(item)
			},
			// 去结算
			toPay() {				
				uni.showLoading({
					title: '加载中'
				})
				let cartList=JSON.stringify(this.cart)
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
			
				uni.navigateTo({
					url: `/pages/goods/order_confirm/index?cartList=${cartList}`
				})
				uni.hideLoading()
			},
			// 购物车清空
			Clery(){
				this.cart=[]  //清空购物车数组
				// 重新获取
				this.getCategoryCacheTree()// // 商家页面-点菜分类
			},
			// 减少
			letloke(item){	
				 console.log('购物车', item);
				 // 查找 cart 中是否已经有该 item，根据 id 判断
				  const existingItem = this.cart.find(cartItem => cartItem.id === item.id);			  
				  if (existingItem) {
				    // 如果找到相同 id 的 item，减少数量
				    if (existingItem.sum > 1) {
				      existingItem.sum -= 1;  // 减少数量
				    } else {
				      // 如果数量为 1，则移除该项
					   existingItem.sum = 0 //赋值0; 
				      const index = this.cart.indexOf(existingItem);
				      this.cart.splice(index, 1);
				    }
				  }
				
				  console.log('购物车', this.cart);
			},
			//商品数量加入购物车
			Addsum(item){		
			  // 查找 cart 中是否已经有该 item，根据 id 判断
			  const existingItem = this.cart.find(cartItem => cartItem.id === item.id); 
			  console.log('这一项',existingItem)
			  if (existingItem) {
			    // 如果找到相同 id 的 item，增加数量
			    existingItem.sum += 1;	    
			  } else {
			    // 如果没有找到该 item，添加到 cart 数组
			    item.sum = 1; // 初始化数量为 1
			    this.cart.push(item);		   
			  }	
			   console.log('购物车',this.cart)
			},
			// 减
			// 返回
			handBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取高度
			infoScroll: function() {
				let that = this;
				//设置商品列表高度
				uni.getSystemInfo({
					success: function(res) {
						that.bottomheight = (res.windowHeight) * (750 / res.windowWidth) - 98;
					},
				});
				let hightArr = [];
				for (let i = 0; i < that.productList.length; i++) {
					let item = that.productList[i]
					if(!that.productList[i].childList){
						continue;
					}
					for (let j = 0; j < that.productList[i].childList.length; j++) {
						//获取元素所在位置
						let query = uni.createSelectorQuery().in(this);
						let idView = "#b" + item.id + j;
						query.select(idView).boundingClientRect();
						query.exec(function(res) {
							if(res[0]){
								let top = res[0].top;
								hightArr.push({top,i});
							}
						});
					};
				};
				that.hightArr = hightArr;
			},
			// 左侧点击
			tap: function(index, id) {
				this.toView = ''+id+0;
				this.navActive = index;
				setTimeout(()=>{
					uni.$emit('scroll');
				}, 300);
			},
			
			// 获取商家信息
			getMerchantInfo(){
				getMerchantInfo(this.Item.id).then(res => {
					console.log('商家信息',res)
					this.merchanInfo = res.data
				});
			},
			
			// 商家页面-点菜分类
			getCategoryCacheTree(){
				getCategoryCacheTree(this.Item.id).then(res => {
					// console.log('点菜分类数据',res.data)										
						  // 遍历 data 数组
						  let data=res.data
						  data.forEach(category => {
						    if (category.childList && Array.isArray(category.childList)) {
						      // 给 childList 数组中的每个元素加上 sum 字段
						      category.childList.forEach(item => {
						        item.sum = 0;  // 你可以根据需要设置sum的初始值
						      });
						    }
						  });
						
						  this.productList =data
						  console.log('处理的数据',this.productList )
						//调取滚动
						this.$nextTick(function(){
							this.infoScroll();
						})
						this.showSkeleton = false
				})
			},
		
			// 滚动
			scroll: function(e) {
				uni.$emit('scroll');
				let scrollTop = e.detail.scrollTop + 10;
				let scrollArr = this.hightArr;
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
						this.navActive = scrollArr[i].i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
						this.navActive = scrollArr[scrollArr.length - 1].i
					}
				}
			},
		
		}
	}
</script>
<style scoped lang="scss">
	/deep/.origin-img{
		border-radius: 50%;
	}
	.productSort {
		display: flex;
		flex-direction: column;
		width: 100%;
		.con-box {
			flex: 1;
			display: flex;
			overflow: hidden;
		}
	}
	.productSort .header {
		width: 100%;
		/* #ifndef MP */
		height: 96rpx;
		/* #endif */
		// background-color: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.productSort .header .input {
		width: 700rpx;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.productSort .header .input .iconfont {
		font-size: 28rpx;
		color: #555;
	}
	.productSort .header .input .placeholder {
		color: #999;
	}
	.productSort .header .input input {
		font-size: 28rpx;
		height: 100%;
		width: 597rpx;
	}
	.productSort .header .input .input-box {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		height: 100%;
		width: 597rpx;
		color: #999999;
	}
	.productSort .aside {
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		width: 200rpx;
		height: 100%;
		overflow: hidden;
	}
	.productSort .aside .item {
		height: 100rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}
	.productSort .aside .item_text {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.productSort .aside .item.on {
		background-color: #f7f7f7;
		color: #333;
		border-left: 4rpx solid var(--view-theme);
		width: 100%;
		text-align: center;
		@include main_color(theme);
		font-weight: bold;
	}
	.productSort .conter {
		flex: 1;
		height: 100%;
		padding: 0 14rpx;
		background-color: #f7f7f7;
	}
	.productSort .conter .listw .title {
		height: 100rpx;
		align-items: center;
	}
	.productSort .conter .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #f0f0f0;
	}
	.productSort .conter .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}
  .productSort .conter .listw .title .list_title,
	.productSort .conter .listw .title uni-image,
	.productSort .conter .listw .title image{
		width: 110rpx;
		height: 26rpx;
		border-radius: 0;
	}
	.productSort .conter .list {
		flex-wrap: wrap;
		background: #fff;
		border-radius: 16rpx;
		padding-bottom: 26rpx;
	}
	.productSort .conter .list .item {
		// width: 174rpx;
		margin-top: 26rpx;
		display: flex;
		align-items: center;
	}
	.productSort .conter .list .item .picture,
	.productSort .conter uni-image,
	.productSort .conter .list .item image,
	/deep/.easy-loadimage{
		width: 110rpx;
		height: 110rpx;
	
	}
	.productSort .conter .list .item .name {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}

	.header-box{
		position: fixed;
		z-index: 9999;
	}
	
	
	// 新的功能板块
	
	
	.box-top{
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		background-color: #fff;
		border-top-left-radius:30rpx ;
		border-top-right-radius: 30rpx;
	}
	.box-top1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.box-txt{
		  overflow-wrap: break-word;
		  color: rgba(20, 20, 20, 1);
		  font-size: 36rpx;
		  font-family: PingFangSC-Semibold;
		  font-weight: 600;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 50rpx;
	}
	.box-pin{
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	.box-txt2{
		 overflow-wrap: break-word;
		  color: rgba(253, 103, 22, 1);
		  font-size: 28rpx;
		  font-family: PingFangSC-Semibold;
		  font-weight: 600;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 40rpx;
	}
	.box-txt3{
		 overflow-wrap: break-word;
		  color: rgba(153, 153, 153, 1);
		  font-size: 22rpx;
		  font-family: PingFangSC-Medium;
		  font-weight: 500;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 32rpx;
		  margin-top: 6rpx;
	}
	.box-shopp{
		overflow-wrap: break-word;
		  color: rgba(20, 20, 20, 1);
		  font-size: 24rpx;
		  font-family: PingFangSC-Regular;
		  font-weight: normal;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 34rpx;
	}
	.box-newtxt{
		background: #F8F9FB ;
		padding: 10rpx;
		box-sizing: border-box;
		overflow-wrap: break-word;
		color: rgba(133, 134, 135, 1);
		font-size: 22rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		gap: 6rpx;
		height: 60rpx;
		position: relative;
	}
	
	.boxcolor{
		background-color: #FF6702;
	}
	.box-color-txt{
		  overflow-wrap: break-word;
		  color: rgba(255, 255, 255, 1);
		  font-size: 36rpx;
		  font-family: PingFangSC-Medium;
		  font-weight: 500;
		  text-align: center;
		  white-space: nowrap;
		  
	}
	.back-button-1 {
		  position: absolute;
		  left: 20rpx;
		  font-size: 30px;       /* 设置箭头的大小 */
		  color: #000;           /* 设置箭头颜色 */
		  width: 40px;           /* 按钮的宽度 */
		  height: 40px;          /* 按钮的高度 */
		  background-color: transparent; /* 背景透明 */
		  border-radius: 50%;    /* 圆形按钮 */
		  cursor: pointer;      /* 鼠标悬停时显示手指 */
		
	}
	.back-button-1::before {
	  content: '<';          /* 设置按钮的内容为 "<" */
	  font-size: 30px;       /* 设置箭头符号的大小 */
	  color: #000;           /* 设置箭头颜色 */
	}
	.nexbox{
		background: #FFF;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	.nexbox-txt{
		width: 100%;
		position: sticky;
		top: -2rpx;
		z-index: 99;
		background: #fff;
		box-sizing: border-box;
		height: 50rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		color: #fd6716;
	}
	.row-middle{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.nexbox1{
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		width: 70%;
	}
	.neximg{
		width: 25%;
		height: 100%;
		flex-shrink: 0;
		object-fit: contain;  /* 保持图片等比例缩放，并且不会裁切 */
	}
	.nexbox1-txt{
		 overflow-wrap: break-word;
		  color: rgba(20, 20, 20, 1);
		  font-size: 32rpx;
		  font-family: PingFangSC-Semibold;
		  font-weight: 600;	
		  white-space: nowrap;
		  line-height: 44rpx;
	
	}
	.nexbox2{
		display: flex;
		align-items: center;
		gap: 20rpx;
		overflow-wrap: break-word;
		  color: rgba(100, 100, 100, 1);
		  font-size: 22rpx;
		  font-family: PingFangSC-Regular;
		  font-weight: normal;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 32rpx;
	}
	.nexbox3{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nexbox-txt3{
		overflow-wrap: break-word;
		  color: rgba(255, 152, 5, 1);
		  font-size: 28rpx;
		  font-family: PingFangSC-Semibold;
		  font-weight: 600;
		 
		  white-space: nowrap;
		  line-height: 40rpx;
	}
	.nexbox-img3{
	    width: 36rpx !important;
	    height: 36rpx !important;
		
	}
	.nexbox4{
		display: flex;
		align-items: center;
		gap: 20rpx;
		line-height: 18rpx;
	}
	.neximg1{
		  width: 36rpx;
		  height: 36rpx;
		  background: #FFFFFF;
		  border: 1px solid #FF6702;
		  color:  #FF6702;
		  border-radius: 60%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	}
	
	// 购物车
	.cart-box {
		position: absolute;
		// bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
		background-color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9999;
	
		.cart-img {
			width: 50rpx;
			height: 47rpx;
			position: relative;
			// margin-top: -48rpx;
		}
	
		.pay-btn {
			height: 100%;
			padding: 0 30rpx;
			color: #FFFFFF;
			border-radius: 0 50rpx 50rpx 0;
			display: flex;
			align-items: center;
			font-size: $font-size-base;
		}
	
		.mark {
			padding-left: 46rpx;
			margin-right: 30rpx;
			position: relative;
	
			.tag {
				background-color: $color-warning;
				color: $text-color-white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-size-sm;
				position: absolute;
				right: -13rpx;
				top: -20rpx;
				border-radius: 100%;
				padding: 4rpx;
				width: 27rpx;
				height: 27rpx;
				opacity: .9;
			}
		}
	
		.price {
			flex: 1;
			color: $text-color-base;
		}
	}
	
	.cart-popup {
		.top {
			background-color: $bg-color-primary;
			color: $color-primary;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
			text-align: right;
		}
	
		.cart-list {
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			min-height: 1vh;
			max-height: 60vh;
	
			.wrapper {
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				margin-bottom: 156rpx;
	
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx 0;
					position: relative;
	
					&::after {
						content: ' ';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: $border-color;
						height: 2rpx;
						transform: scaleY(.6);
					}
	
					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						margin-right: 30rpx;
	
						.name {
							font-size: $font-size-sm;
							color: $text-color-base;
						}
	
						.props {
							color: $text-color-assist;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
	
					.center {
						margin-right: 120rpx;
						font-size: $font-size-base;
					}
	
					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;
	
						.btn {
							width: 46rpx;
							height: 46rpx;
							border-radius: 100%;
							padding: 0;
							text-align: center;
							line-height: 46rpx;
						}
	
						.number {
							font-size: $font-size-base;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;
						}
					}
				}
			}
		}
	}
	
	.back-button {
	
		width: 30rpx;
	
		height: 30rpx;
	
		border-right: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
	
		transform: rotate(135deg);
	
		margin-left: 10rpx;
	
		display: inline-block;
	
		position: relative;
	}
	
	.newsTitle {
		display: flex;
		align-items: center;
	}
	
	// 购物车弹窗
	.mode{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(33, 33, 33, 0.8);
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}
	.mode-1{
		width: 100%;
		height: 840rpx;
		background: #FFF;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		// padding: 30rpx;
		box-sizing: border-box;
		overflow: auto;  /* 添加这个属性使容器可以滚动 */
	}
	.mode-box{
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.mode-2{
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		
	}
	.mode-img{
		border-radius: 5%;
		width: 25%;
		height: 150rpx;
		flex-shrink: 0;
		 object-fit: contain;  /* 保持图片等比例缩放，并且不会裁切 */
	}
	.mode-clear{
		padding: 30rpx;
		box-sizing: border-box;
		position: sticky;
		z-index: 99;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
		border-bottom: 1px solid burlywood;
	}
	.mode-txt{
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	.mode-txt1{
		font-weight: 500;
		font-size: 32rpx;
	}
	
	
	// 盒子
	.xbox1{
		    margin-top: 26rpx;
		    display: flex;
		    align-items: center;
			width: 100%;
			justify-content: space-between;
	}
	
	
	// 点菜评价切换
	.let-box{
		display: flex;
		align-items: center;
		gap: 60rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.let-box1{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}
	.let-line{	
		  border-radius: 6rpx;
		  width: 40rpx;
		  height: 10rpx;
	}
	.let-txt{
		  overflow-wrap: break-word;
		  color: rgba(20, 20, 20, 1);
		  font-size: 28rpx;
		  font-weight: normal;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 40rpx;
	}
	.actave{
		 background-color: rgba(255, 103, 2, 1);
	}
	.actave1{
		color: rgba(255, 103, 2, 1);
	}
	.icon-img{
		  width: 40rpx;
		  height: 40rpx;
		  flex-shrink: 0;
	}
</style>