zh_order_food_xcx/pages-takeout/new-shop.vue

<template>
	<view class="shop-index iPhone-bottom flex-direction box-border-box">

		<image v-show="!navBgType" class="bg-img" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
			:class="scrollTop > newNavHeight?'z-4':'z-3'"></image>
		<image v-show="navBgType" class="bg-img-type z-4" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
			:style="{height:newNavHeight+'rpx',opacity:opacity}"></image>

		<newNav :leftShow="false" :textType='false' class="z-4 mb-32" @navHeight='navHeight'>
			<view slot="textContentSlot" class="align-items-center flex-justify-end">
				<view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center z-4" @click.stop="goSearch">
					<image class="shop-search" src="@/static/img/order-food/shop-search.png" mode=""></image>
				</view>
				<view class="dd-box align-items-center flex-justify-center b-rad-200 mr-24 z-4" @click="goToOrder">
					<image class="shp-list-img mr-8" src="@/static/img/order-food/shp-list.png" mode=""></image>
					<view class="fs-28 fc-f">
						订单
					</view>
				</view>
			</view>
		</newNav>

		<view class="bgc-f box-border-box plr-32 mb-32 shop-info">
			<view class="shop-info-box bgc-f box-border-box p-24 z-3 b-rad-20">
				<view class="fs-40 fw-600 text-overflow-ellipsis">
					{{shopsInfo.shop_name}}
				</view>
				<view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one pt-15" v-if="shopsInfo.notice">
					公告：{{shopsInfo.notice || '暂无公告'}}
				</view>
			</view>
		</view>

		<view class="b-b-eee bgc-f box-border-box p-0-32-12 align-items-center flex-justify-space z-3 shop-type-box">
			<view class="align-items-center shop-type-list">
				<view class="shop-item fs-36 mb-8 mr-64" @click="seletShopType(item)"
					:class="shopType === item.id?'fc-3 fw-600':'fc-6'" v-for="(item,i) in shopTypeList" :key="i">
					{{item.name}}
				</view>
				<view class="shop-item-bs bgc-FF3333" :style="{left:shopTypeBsLeft+'rpx'}"></view>
			</view>
			<view class="align-items-center">
				<image class="zh-icon mr-8" src="@/static/img/order-food/zh-icon.png" mode="aspectFill"></image>
				<view class="fw-600 fs-32 fc-3">
					桌号：{{table_number}}
				</view>
			</view>
		</view>

		<!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx - ${48}rpx)`:'auto'}"> -->
		<view class="bgc-F7F8FA">
			<view class="menu-box box-border-box align-items-flex-start" v-if="shopType === 1">

				<view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
					<view class="menu-box-left-box pb-130 box-border-box"
						:style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
						<view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
							v-for="(item,i) in categoryList" :key="i" @click="selectType(item)"
							:class="type ===  item.category_id?'bgc-f fc-3 fw-600':'fc-6 fw-400'"
							:id="'left-scroll'+ item.category_id">
							{{item.name}}
							<view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}
							</view>
						</view>
					</view>
				</view>

				<view class="menu-box-only bgc-f pb-130 box-border-box">
					<view class="" v-for="(item,i) in goodsList" :key="i" :id="'scroll'+ item.type">
						<view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box"
							:style="{top: newNavHeight + 'rpx'}">
							{{item.name}}
						</view>
						<view class="menu-list flex-justify-space box-border-box" v-for="(info,k) in item.list" :key="k"
							:id="'goods_id'+ info.goods_id">
							<image class="flex-shrink0 goods_img" :src="info.goods_image" mode="scaleToFill"></image>
							<view class="menu-list-right flex-direction flex-justify-space">
								<view class="mb-8">
									<view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">
										{{info.goods_name}}
									</view>
									<view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name"
										v-if="info.spec_type == 1">
										{{info.goods_desc?info.goods_desc:''}}
									</view>
								</view>
								<view class="flex-justify-space align-items-flex-end">
									<view class="">
										<span class="fs-24 fw-400 fc-FB3D03">￥</span>
										<span
											class="fs-40 fw-b fc-FB3D03">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
									</view>
									<view class="display-flex align-items-center" v-if="info.spec_type == 1">
										<image v-show="info.num > 0" class="wh-44" @click="addred(1,info)"
											src="@/static/img/order-food/reduce-img.png" mode=""></image>
										<view v-show="info.num > 0"
											class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}
										</view>
										<image class="wh-44" src="@/static/img/order-food/add-img.png"
											@click="addred(2,info)" mode=""></image>
									</view>
									<view v-else class="right-only-right text-align-center b-rad-200"
										@click="addred(3,info)">
										<view class="fw-600 fs-28 fc-f">
											选规格
										</view>
										<view class="selectedNum" v-if="info.num>0">
											{{info.num}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<ShopInfo style="height: 100%;" v-else-if="shopType === 2"></ShopInfo>

		</view>

		<view v-if="shopType === 1" class="shop-buttom-money box-border-box" @click="openBuyCrad()">
			<view
				class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
				<view class="align-items-center">
					<image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill"></image>
					<view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}</view>
					<view class="align-items-baseline">
						<view class="fw-600 fs-28 fc-3 mr-4">￥</view>
						<view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
					</view>
				</view>

				<view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
					:class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
				</view>
			</view>
		</view>

		<uni-popup ref="popupBuy" type="bottom" background-color="transparent" borderRadius='20px 20rpx 0 0'>
			<view class="buy-card flex-index-css">
				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center b-rad-20-20-0-0">
					<view class="">
						<span class="fs-32 fc-3 mr-12">已选商品</span>
					</view>
					<view class="fs-28 fw-400 fc-9 align-items-center" @click.stop="setShopIngDel">
						<view class="">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
						</view>
						<view class="fs-28 fw-400 fc-9">清空</view>
					</view>
				</view>
				<view class="scroll-view-css bgc-ECECEC box-border-box car-scroll-box">
					<view class="buy-card-item bgc-f b-rad-20 display-flex p-20 box-border-box"
						v-for="(goods,i) in cartData.goods_list" :key="i">
						<image class="goods_img" :src="goods.goods_image" mode="scaleToFill"></image>
						<view class="flex-1 flex-direction flex-justify-space">
							<view class="">
								<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-8">
									{{goods.goods_name}}
								</view>
								<view class="fc-6">
									{{goods.goods_attr}}
								</view>
							</view>
							<view class="flex-justify-space">
								<view class="">
									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
									<span class="fs-40 fc-FB3D03 fw-b">{{goods.price}}</span>
								</view>
								<view class="display-flex align-items-center">
									<image class="wh-44" @click.stop="setShoppingSave(goods,2)"
										src="@/static/img/order-food/reduce-img.png" mode="">
									</image>
									<view class="right-only-right-2 text-align-center fs-28 fw-400">
										{{goods.goods_number}}
									</view>
									<image class="wh-44" src="/static/img/order-food/add-img.png"
										@click.stop="setShoppingSave(goods,1)" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<en-blank navBackgroundColor='#ECECEC' v-if="cartData.goods_list.length<=0"
						message="快去选购商品吧！~"></en-blank>
				</view>
				<view class="pop-shop-buttom-money box-border-box" @click="openBuyCrad()">
					<view
						class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
						<view class="align-items-center">
							<image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill">
							</image>
							<view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}
							</view>
							<view class="align-items-baseline">
								<view class="fw-600 fs-28 fc-3 mr-4">￥</view>
								<view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
							</view>
						</view>

						<view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
							:class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import newMenu from './shop-mod/new-menu.vue';
	import ShopInfo from './shop-mod/info.vue';
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		getGoodsCategory,
		getGoodsGoods
	} from '@/api/goods.js'
	import {
		receiveCoupon
	} from "@/api/coupon.js"
	import {
		shopInfo
	} from "@/api/shop.js"
	import {
		getDeliveryMoney
	} from "@/api/common";
	import {
		getShopIngList,
		setShopIngDel,
		shoppingSave
	} from "@/api/shopping";
	export default {
		components: {
			newMenu,
			ShopInfo,
			EnBlank
		},
		data() {
			return {
				domHeigjt: 0,
				shopTypeList: [{
					name: "点单",
					id: 1
				}, {
					name: "商家",
					id: 2
				}],
				table_number: '',
				shopType: 1, //组件类型
				shopTypeBsLeft: 12,
				shop_id: '',
				operate_id: '',
				shopsInfo: {},
				cartData: {
					total_price: 0,
					total_num: 0,
					total_goods_money: 0,
					pack_price: 0,
					must_category: 0,
					is_place_order: 0,
					err_msg: 0,
					goods_list: [],
				},
				isAjax: false,
				newNavHeight: '',
				navBgType: false,
				menuLeftType: false,
				scrollTop: 0,
				opacity: 0,
				heightOne: '',
				heightTwo: '',
				topHeight: '',
				idMark: '', //滚动自适应参数
				idMarkTwo: '', //滚动自适应参数
				type: '', //默认分类标识
				categoryList: [],
				goodsList: []
			}
		},
		onShow() {
			this.getShopIngList()
		},
		onLoad(e) {
			this.getshopInfo()
		},
		mounted() {},
		onReachBottom(e) {},
		// 监听页面滚动
		onPageScroll(e) {
			// e.scrollTop 获取滚动条距离页面顶部的距离
			this.scrollTop = e.scrollTop
			this.opacity = (Number(this.scrollTop) - 30)
			// 可以根据滚动位置执行相应逻辑
			if (e.scrollTop > 25) {
				this.navBgType = true
			} else {
				this.navBgType = false
			}
			if (e.scrollTop > (Number(this.newNavHeight) - 4)) {
				this.menuLeftType = true
			} else {
				this.menuLeftType = false
			}
		},
		methods: {
			shopInfo() {
				// 获取商家详情
				shopInfo().then((res) => {
					if (res.code === 1) {
						this.shopsInfo = res.data
					}
				})
			},
			getGoodsCategory() {
				//获取商家分类
				getGoodsCategory().then((res) => {
					if (res.code === 1) {
						this.categoryList = res.data
						this.type = res.data[0].category_id
					}
				})
			},
			getGoodsGoods() {
				//获取商家商品列表
				getGoodsGoods().then((res) => {
					if (res.code === 1) {
						// 初始化商品列表
						this.goodsList = res.data
						// 从购物车数据中回显每个商品的数量
						this.updateGoodsNumFromCart()
					}
				})
			},
			getShopIngList() {
				// 获取购物车列表
				getShopIngList().then(res => {
					if (res.code === 1) {
						this.cartData = res.data
						// 同步更新商品列表中的数量
						this.updateGoodsNumFromCart()
					}
				})
			},
			getshopInfo() {
				this.table_number = uni.getStorageSync('table_number')
				this.shopInfo()
				this.getGoodsCategory()
				this.getGoodsGoods()
			},
			updateGoodsNumFromCart() {
				// 从购物车数据同步商品数量
				if (!this.goodsList || !this.cartData.goods_list) {
					return
				}

				// 创建购物车商品的映射，按goods_id分组，累加数量
				  const cartGoodsMap = {}
				  this.cartData.goods_list.forEach(cartItem => {
				    const goodsId = cartItem.goods_id
				    if (!cartGoodsMap[goodsId]) {
				      cartGoodsMap[goodsId] = 0
				    }
				    // 累加同一个商品不同规格的数量
				    cartGoodsMap[goodsId] += cartItem.goods_number || 0
				  })
				  
				  // 更新商品列表中的数量
				  this.goodsList.forEach(category => {
				    if (category.list && category.list.length > 0) {
				      category.list.forEach(goods => {
				        // 从购物车映射中获取该商品的总数量
				        goods.num = cartGoodsMap[goods.goods_id] || 0
				      })
				    }
				  })

				// 更新分类列表中的商品数量
				this.updateCategoryNum()
			},
			updateCategoryNum() {
				// 更新分类的商品总数
				if (!this.categoryList || !this.goodsList) {
					return
				}

				this.categoryList.forEach(categoryItem => {
					// 找到对应的商品分类
					const goodsCategory = this.goodsList.find(
						category => category.type === categoryItem.category_id
					)

					if (goodsCategory && goodsCategory.list) {
						// 计算该分类下所有商品的总数量
						const totalNum = goodsCategory.list.reduce((sum, goods) => {
							return sum + (goods.num || 0)
						}, 0)
						categoryItem.num = totalNum
					} else {
						categoryItem.num = 0
					}
				})
			},
			goToOrder() {
				uni.navigateTo({
					url: 'pages/order/index'
				})
			},
			goSearch() {
				uni.navigateTo({
					url: 'pages/index/search-record'
				})
			},
			selectType(item, itemTwo) {
				if (this.type != item.category_id) {
					this.type = item.category_id;
					this.idMark = 'scroll' + item.category_id

					// 立即更新
					this.$forceUpdate();

					// 延迟执行滚动
					setTimeout(() => {
						this.scrollToCategorySimple(item.category_id);
					}, 100);
				}
			},

			// 滚动方法
			scrollToCategorySimple(type) {
				const query = uni.createSelectorQuery();
				const selector = `#scroll${type}`;
				uni.pageScrollTo({
					selector: selector,
					duration: 300,
				});
				return
				let targetScrollTop = 0
				query.select('.shop-info').boundingClientRect(rect => {
					console.log('商家详情', rect);
					targetScrollTop += rect.height
				})
				query.select('.shop-type-box').boundingClientRect(rect => {
					console.log('详情切换', rect);
					targetScrollTop += rect.height + this.newNavHeight
					console.log('固定上部分位置', targetScrollTop);
				})
				query.select(selector).boundingClientRect(rect => {
					console.log('id找到元素，top:', rect);
					uni.pageScrollTo({
						scrollTop: targetScrollTop,
						duration: 300,
						success: () => {
							console.log('滚动完成');
						}
					});
				}).exec();
			},
			addred(type, item) {
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				if (type === 1) {
					// 减
					--item.num;
					if (item.num >= 0) {
						this.shoppingSave(item, item.num)
					} else {
						this.isAjax = false
					}
				} else if (type === 2) {
					// 加
					++item.num;
					this.shoppingSave(item, item.num)
				} else if (type === 3) {
					// 选规格
					this.isAjax = false
					uni.navigateTo({
						url: `pages-takeout/new-specs-info?goods_id=${item.goods_id}&category_id=${item.category_id}`
					})
				}
			},
			shoppingSave(item, num) {
				shoppingSave({
					goods_id: item.goods_id,
					category_id: item.category_id,
					goods_spec_id: item.goods_spec_id,
					number: num
				}).then((res) => {
					if (res.code === 1) {
						tools.success(res.msg)
						this.isAjax = false
						// 直接更新当前商品的数量（即时反馈）
						const goods = this.findGoodsInList(item.goods_id)
						if (goods) {
							goods.num = num
						}
						this.getShopIngList()
					} else {
						this.isAjax = false
						tools.error(res.msg)
					}
				})
			},
			findGoodsInList(goodsId) {
				// 在商品列表中查找指定商品
				for (let category of this.goodsList) {
					if (category.list) {
						const goods = category.list.find(item => item.goods_id === goodsId)
						if (goods) {
							return goods
						}
					}
				}
				return null
			},
			navHeight(e) {
				this.newNavHeight = e
			},
			mustBut() {
				// 未点必选品
				const item = {
					type: this.cartData.must_category
				}
				this.$refs.goodsMenu.selectType(item)
			},
			setShopIngDel() {
				uni.showModal({
					title: '提示',
					content: '是否清除购物车商品？',
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							setShopIngDel().then((res) => {
								if (res.code === 1) {
									tools.success(res.msg)
									this.getShopIngList()
									this.$refs.popupBuy.close()
								} else {
									tools.error(res.msg)
								}
							})
						}
					}
				});
			},
			setShoppingSave(item, type) {
				if (type === 1) {
					// 加
					item.goods_number = item.goods_number + 1
				} else {
					// 减
					item.goods_number = item.goods_number - 1
				}
				this.shoppingSave(item, item.goods_number)
			},
			setCartData(cartData) {
				this.cartData = cartData
				this.getDeliveryMoney()
			},
			getDeliveryMoney() {
				getDeliveryMoney({
					'school_id': this.operate_id,
					'shop_id': this.shop_id,
				}).then(res => {
					if (res.code === 1) {
						this.delivery_money = res.data.delivery_money * 1
					}
				})
			},
			toBack() {
				tools.leftClick()
			},
			getDomH(num) {
				this.$nextTick(() => {
					let info = uni.createSelectorQuery().select('#shopInfoBox');
					info.boundingClientRect((data) => {
						if (num === 1) {
							this.domHeigjt = data.height + 72
						} else {
							this.domHeigjt = data.height + 72 + 48
						}
					}).exec()
				})
				// setTimeout(() => {

				// }, 500)
			},
			seletShopType(item) {
				if (this.shopType != item.id) {
					this.shopType = item.id;
					if (this.shopType == 1) {
						this.shopTypeBsLeft = 12
					} else if (this.shopType == 2) {
						this.shopTypeBsLeft = 150
					} else {
						this.shopTypeBsLeft = 160 * 2
					}
				}
			},
			openBuyCrad() {
				this.$refs.popupBuy.open()
			},
			createOrder() {
				this.$refs.popupBuy.close()
			},
			openCoupon() {
				this.$refs.popupCoupon.open()
			},
			closeCoupon() {
				this.$refs.popupCoupon.close()
			},
			toConfirmOrder() {
				uni.navigateTo({
					url: '/pages-takeout/goods-order?shop_id=' + this.shop_id
				})
			},
			shopInfo() {
				const operate_id = uni.getStorageSync('operate_id')
				shopInfo({
					operate_id: operate_id,
					shop_id: this.shop_id
				}).then((res) => {
					if (res.code == 1) {
						this.shopsInfo = res.data
					} else {
						tools.error(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.car-scroll-box {
		padding: 12rpx 24rpx calc(env(safe-area-inset-bottom) + 48rpx);
	}

	.zh-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.shp-list-img {
		width: 40rpx;
		height: 40rpx;
	}

	.dd-box {
		width: 144rpx;
		padding: 12rpx 0;
		background: rgba(0, 0, 0, 0.14);
	}

	.ss-box {
		width: 64rpx;
		height: 64rpx;
		background: rgba(0, 0, 0, 0.14);
	}

	.shop-search {
		width: 40rpx;
		height: 40rpx;
	}

	.wh-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.blank-text {
		line-height: 32vh;
	}

	.box-title {
		position: relative;
	}

	.box-close {
		position: absolute;
		right: 22rpx;
	}

	.pop-coupon {
		width: 100%;
		height: 42vh;
		background-color: #F5F4F9;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-top: 32rpx !important;
		display: flex;
		flex-direction: column;
	}

	.item-right {
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx 0 0 20rpx;
		position: relative;
	}

	.item-hr {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #FB7850;
	}

	.item-hr-two {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #999;
	}

	.item-left {
		width: 220rpx;
		height: auto;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 0 20rpx 20rpx 0;
	}

	.but-box {
		width: 152rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
		border-radius: 200rpx;
	}

	.ball {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		top: -12rpx;
		left: -12rpx;
		background: #F5F5F5;
		z-index: 2;
	}

	.ball-two {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		background: #F5F5F5;
		z-index: 10;
		bottom: -12rpx;
		left: -12rpx;
	}

	.shop-index {
		width: 100%;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	.right-only-right-red {
		width: 44rpx;
		height: 44rpx;
		line-height: 40rpx;
		border-radius: 12rpx;
		border: 1rpx solid #41ABF5;
		color: #41ABF5;
	}

	.right-only-right-add {
		width: 44rpx;
		height: 44rpx;
		line-height: 40rpx;
		background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
		border-radius: 12rpx;
	}

	.right-only-right-2 {
		min-width: 50rpx;
	}

	.w-514 {
		width: 514rpx;
	}

	.bg-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		transition: linear .3s all;
		// height: 300rpx;
	}

	.bg-img-type {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		// opacity: 100;
		transition: linear .3s all;
	}

	.mb-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		z-index: -1;
	}


	.nav-img {
		width: 56rpx;
		height: 56rpx;
	}

	.shop-buttom-money {
		width: 100%;
		// height: 140rpx;
		background: rgba(255, 255, 255, 0.8);
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
		padding-top: 22rpx;
		// padding: 20rpx 24rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
	}

	.pop-shop-buttom-money {
		width: 100%;
		// height: 140rpx;
		background: #ECECEC;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
		padding-top: 22rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
	}

	.shop-buttom-num {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 50%;
		position: absolute;
		top: 0rpx;
		left: 85rpx;
		border: 1rpx solid #FFFFFF;
	}

	.shop-buttom-money-2 {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
	}

	.info-box-top {}

	.box-top-right {
		width: 100rpx;
		height: 100rpx;
		border-radius: 12rpx;
	}

	.box-top-left {}

	.top-left-1 {
		width: 480rpx;
		margin-bottom: 8rpx;
	}

	.img-x {
		width: 24rpx;
		height: 24rpx;
	}

	.buy-card {
		height: 60vh;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.buy-card-top {
		width: 100%;
		height: 92rpx;
		background: #FCF5DB;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.buy-card-item {
		width: 100%;
		// height: 176rpx;
		margin-bottom: 32rpx;
	}

	.goods_img {
		width: 152rpx;
		height: 152rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.shop-buttom-money-1 {
		width: 100%;
		height: 96rpx;
		position: relative;
	}

	.gwc-img {
		width: 88rpx;
		height: 88rpx;
	}

	.head-box {
		width: 100%;
		position: relative;
	}

	.shop-info-box {
		box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
	}

	.info-box-quan-list {
		width: 164rpx;
		height: 48rpx;
		margin: 0 8rpx 8rpx 0;
		position: relative;

		image {
			width: 164rpx;
			height: 48rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}

	.quan-list-1 {
		position: absolute;
		top: 3rpx;
		left: 8rpx;
		z-index: 2;
	}

	.quan-list-2 {
		position: absolute;
		top: 8rpx;
		right: 22rpx;
		z-index: 2;
	}

	.shop-type-list {
		// height: 88rpx;
		position: relative;
	}

	.shop-item {
		position: relative;
	}

	.pj-num {
		position: absolute;
		right: -80rpx;
		top: 0;
		text-align: left;
		width: 80rpx;
	}

	.shop-item-bs {
		position: absolute;
		bottom: 0;
		width: 40rpx;
		height: 6rpx;
		border-radius: 20rpx;
		transition: left 0.5s;
	}

	.sticky-nav {
		width: 100%;
		position: sticky;
		z-index: 3;
	}

	.wh-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.menu-box-left-f {
		position: sticky;
		// transition: all .3s ease;
		// overflow: auto;
	}

	.menu-box-left {
		width: 160rpx;
		height: auto;
		position: sticky;
		overflow: auto;
		// transition: all .3s ease;
		// height: 100%;
		// background-color: #F7F8FA;
		// position: absolute;
		// left: 0;
		// top: 0;
		// border-radius: 0rpx 20rpx 0 0rpx;
	}

	.menu-box-left-box {
		overflow-y: auto;
		
	}

	.menu-type-list {
		width: 160rpx;
		min-height: 108rpx;
		padding: 18rpx 28rpx;
		position: relative;
		z-index: 10;
		border-radius: 0rpx 20rpx 20rpx 0rpx;

		.menu-type-num {
			position: absolute;
			top: 2rpx;
			right: 8rpx;
			padding: 0 6rpx;
			min-width: 20rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
			background: #FE6B2C;
			border-radius: 50%;
		}
	}

	.menu-type-list-f {
		// width: 160rpx;
		background-color: #007AFF;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		/* 如果分类项很多，允许内部滚动 */
		-webkit-overflow-scrolling: touch;
		/* 改善移动端滚动体验 */
		// height: 100%;
	}

	.menu-box-only {
		// flex: 1;
		width: calc(100% - 160rpx);
	}

	.menu-box-right {
		// flex: 1;
		width: 100%;
		height: 100%;
		// padding: 16rpx 0;
		// box-sizing: border-box;
		// position: relative;
	}

	.menu-list {
		width: 100%;
		padding: 0 20rpx 40rpx;
		// height: 200rpx;
		// margin-bottom: 40rpx;

		.goods_img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.menu-list-right {
			flex: 1;

			.right-only-right {
				width: 116rpx;
				height: 44rpx;
				background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
				line-height: 44rpx;
				position: relative;

				.selectedNum {
					position: absolute;
					right: -10rpx;
					top: -22rpx;
					font-size: 24rpx;
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: #FE6B2C;
					border-radius: 50%;
					border: 1rpx solid #FFFFFF;
				}
			}

			.right-only-right-red {
				width: 44rpx;
				height: 44rpx;
				line-height: 40rpx;
				border-radius: 12rpx;
				border: 1rpx solid #41ABF5;
				color: #41ABF5;
			}

			.right-only-right-add {
				width: 44rpx;
				height: 44rpx;
				line-height: 40rpx;
				background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
				border-radius: 12rpx;
			}

			.right-only-right-2 {
				min-width: 50rpx;
			}
		}
	}
</style>