ydd_front/mer_uniapp/pages/goods_cate/index.vue

<template>
	<view :data-theme="theme">
		<!-- #ifdef MP -->
		<view class="cart_nav">
			<nav-bar iconColor='#fff' ref="navBarRef" :navTitle="merchanInfo.name" backgroundColor="#FF6702" :isBackgroundColor="false">
			</nav-bar>
		</view>
		<!-- #endif -->
		<tui-skeleton v-if="showSkeleton"></tui-skeleton>

		<view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<!-- 头部 -->
			<view class="box-top">
				<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'>
				<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>
					<!-- 温馨提示 -->
					<view class="cboxtxt">———— 温馨提示：适度选择，避免浪费 ———— </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='nbox 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>
										<text v-if="calculateSum(item.childList)>0" style="top:8rpx; " class="xun-txt">{{ calculateSum(item.childList) }}</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 @click.stop="Selectpox(item)" class="xu-btn">选规格
																<text v-if="item.sum>0" class="xun-txt">{{item.sum}}</text>
															</view>

															<!-- <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&&!selectble" 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 class="mode" v-if="selectble">
					<view class="sel-mode-1">
						<view class="close" @click="Close">X</view>
						<view class="sel-2">
							<image class="neximg" :src="specifications.icon" />
							<view class="nexbox1">
								<text>销量 {{specifications.sales}}</text>
								<text>好评率 {{ specifications.replyChance*100}}%</text>
								<text class="nexbox-txt3">￥ {{specifications.price}}</text>
							</view>

						</view>
						<!--规格数组  -->
						<view class="sel-3">
							<text>规格</text>
							<view class="sel-4">
								<view class="sel-5" @click="xubox(item.productId)" :style="{background: item.productId == productid ? '#ff9805' : ''}"
								 v-for="(item,index) in productValue" :key="index">
									{{item.optionName}}
								</view>
							</view>
						</view>
						<!-- 数量 -->
						<view class="sel-6">
							<text>数量</text>
							<view class="nexbox4">
								<!-- 减 -->
								<view v-if="specifications.sum>0" @click="selectletloke()" class="neximg1">-</view>
								<text>{{specifications.sum}}</text>
								<!-- 加 -->
								<image @click="selectAddsum()" 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 class="sel-btn">
							<view @click="Addshoppcat" class="sel-btn1">加入购物车</view>
						</view>
					</view>
				</view>
			</view>
</template>
<script>
	let app = getApp();
	import {
		getCategoryList,
		getProductDetail
	} from '@/api/product.js';
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	import {
		mapGetters
	} from "vuex";
	import navBar from '@/components/navBar';
	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';
	// 订单创建

	import {
		orderCreate,
		preOrderApi
	} from '@/api/order.js';
	// #endif
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			easyLoadimage,
			tuiSkeleton,
			pageFooter,
			navBar
			// #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, //点菜评价切换

				specifications: '', //点击的这一项菜品信息
				selectble: false, //规格弹窗
				productValue: [], //规格数组
				productid: '', //选中规格的id
			}
		},
		onLoad(options) {
			console.log('options', options)
			// 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			console.log('设备信息', systemInfo)
			// 设置导航栏高度
			this.navigationBarHeight = systemInfo.safeArea.top;

			let that = this
			that.Item = options.id
			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: {
			// 方法用于计算 childList 数组中的 sum 总和
			calculateSum(childList) {
				return childList.reduce((total, item) => total + (item.sum || 0), 0);
			},

			// 收藏接口
			getMerCollectAddApi() {
				// 商户id
				getMerCollectAddApi(this.merchanInfo.merId).then(res => {
					console.log('收藏', res)
					if (res.code == 200) {
						this.$util.Tips({
							title: "收藏成功",
						});
						this.getMerchantInfo() //商家信息 
					}
				})
			},
			// 取消收藏
			getMerCollectCancelApi() {
				getMerCollectCancelApi(this.merchanInfo.merId).then(res => {
					console.log()
					if (res.code == 200) {
						this.$util.Tips({
							title: "取消收藏",
						});
						this.getMerchantInfo() //商家信息 
					}
				})
			},
			// 点菜评价切换
			Tabnex(index) {
				this.tabindex = index
			},

			// 跳转详情
			getOrderdetils(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/goods/goods_details/index?id=${item.id}&mt=0`
				})

			},
			// 去结算
			toPay() {
				uni.showLoading({
					title: '加载中'
				})
				let orderDetails = this.cart.map((item) => {
					return {
						attrValueId: 2819, //商品规格属性id（立即购买、活动购买必填）
						groupBuyActivityId: null, //拼团活动id（拼团下单时必填）
						groupBuyRecordId: 0, // 拼团记录id，营销类型2=拼团 时必填 0=开团 实际
						productId: item.id, //商品id
						productNum: item.sum //商品数量
					};
				});
				preOrderApi({
					"preOrderType": 'buyNow',
					//类型 预下单类型（“shoppingCart”:购物车下单,“buyNow”:
					// 立即购买,“video”: 视频号商品下单,“seckill”:秒杀下单,“group”:拼团下单）
					"orderDetails": orderDetails //购物车信息
				}).then(res => {
					console.log('预下单接口', res)
					if (res.code == 200) {
						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}`
							url: '/pages/goods/order_confirm/index?orderNo=' + res.data.orderNo
						})
					}
				})
				uni.hideLoading() //关闭动画
			},
			// 购物车清空
			Clery() {
				this.cart = [] //清空购物车数组
				// 重新获取
				this.getCategoryCacheTree() // // 商家页面-点菜分类
			},
			// 选规格打开
			Selectpox(item) {
				this.specifications = item //这一项信息
				this.selectble = true
				getProductDetail(
					item.id,
					0, 0, ''
				).then((res) => {
					console.log('规格', res)
					if (res.code == 200) {
						this.productValue = res.data.productAttr[0].optionList //规格数组
						this.productid = res.data.productValue.默认.productId //默认选择的id
						console.log('id', this.productid)
					}
				})
			},
			// 关闭规格
			Close() {
				console.log(11)
				this.selectble = false
				this.cart = [] //清空购物车
				// 重新获取
				this.getCategoryCacheTree() // // 商家页面-点菜分类
			},
			// 规格选择
			xubox(id) {
				if (this.productid == '') {
					this.productid = id
				} else {
					this.productid = ''
				}
			},
			// 规格加
			selectAddsum() {
				this.specifications.sum += 1
			},
			// 规格减少
			selectletloke() {
				this.specifications.sum -= 1
			},
			// 规格加入购物车
			Addshoppcat() {
				if (this.productid == '') {
					uni.showToast({
						title: '请选择规格', // 提示的文本
						icon: 'none', // 不显示图标
						duration: 2000 // 提示框显示的时间，单位是毫秒
					});
					return; // 阻止继续执行
				}
				if (this.specifications.sum == 0) {
					uni.showToast({
						title: '请加入商品数量', // 提示的文本
						icon: 'none', // 不显示图标
						duration: 2000 // 提示框显示的时间，单位是毫秒
					});
					return; // 阻止继续执行
				}
				// 便利数组
				// 遍历 productList，筛选出 sum > 0 的项并推入 cart 数组
				this.productList.forEach(item => {
					item.childList.forEach(child => {
						if (child.sum > 0 && !this.cart.some(cartItem => cartItem.id === child.id)) {
							this.cart.push(child); // 将 sum > 0 且 id 不重复的项推入 cart
						}
					});
				})
				console.log('购物车数组', this.cart)
				this.selectble = false
			},
			// 减少
			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() {
				const pages = getCurrentPages(); // 获取当前页面栈
				if (pages.length <= 1) {
					// 如果页面栈中只有一个页面（即当前页面），跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					// 如果页面栈有多个页面，返回上一页
					uni.navigateBack({
						detail: 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).then(res => {
					console.log('商家信息', res)
					this.merchanInfo = res.data
				});
			},

			// 商家页面-点菜分类
			getCategoryCacheTree() {
				getCategoryCacheTree(this.Item).then(res => {
					// console.log('点菜分类数据',res.data)										
					// 遍历 data 数组
					let data = res.data
					data.forEach(category => {
						// 给 category 添加 sum 字段，表示 childList 的 sum 总和
						category.sumber = 1;
						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;
	}

	.cboxtxt {
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.xu-btn {
		width: 120rpx;
		border-radius: 10rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 103, 2, 1);
		color: #FFF;
		font-size: 24rpx;
		position: relative;
	}

	.nbox {
		position: relative;
	}

	.xun-txt {
		position: absolute;
		right: 0;
		top: -10rpx;
		border-radius: 30%;
		width: 30rpx;
		height: 30rpx;
		background: rgba(255, 103, 2, 1);
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 规格弹窗
	.sel-mode-1 {
		width: 100%;
		height: 440rpx;
		background: #FFF;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		box-sizing: border-box;
		overflow: auto;
		z-index: 9999;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.close {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 30rpx;
	}

	.sel-2 {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.sel-3 {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.sel-4 {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.sel-5 {
		width: 80prx;
		height: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		background: #999999;
		color: #FFF;
		padding: 8rpx;
		border-radius: 8rpx;
	}

	.sel-6 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sel-btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.sel-btn1 {
		width: 110px;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 103, 2, 1);
		color: #FFF;
		font-size: 30rpx;
		border-radius: 10rpx;
	}
</style>