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="textContent" class="align-items-center flex-justify-end">
				<view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center">
					<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">
					<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 mb-16">
					{{shopsInfo.shop_name || "山海鲜熬老灶麻辣火锅辣火锅辣火11 世家匠心传承店川"}}
				</view>
				<view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
					公告：{{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">
					桌号：17
				</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 pb-130" v-if="shopType === 1">

				<view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
					<view class="menu-box-left-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 categoryData" :key="i" @click="selectType(item)"
							:class="type ===  item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'"
							:id="'left-scroll'+ item.type">
							{{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">
					<view class="" v-for="(item,i) in categoryData" :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" @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%;" :shopId='shop_id' 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 p-32">
					<view class="buy-card-item display-flex" 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">
							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">
								{{goods.goods_name}}
							</view>
							<view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 mb-18"
								:class="goods.status_str?'fc-FD5C02':'fc-9'">
								{{goods.status_str?goods.status_str:goods.goods_attr}}
							</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/takeout/j.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/takeout/add.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 {
		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
				}],
				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: 0, //分类标识
				typeList: [],
				categoryData: [{
						type: 0,
						name: '测试1',
						list: [{
							goods_id: 1,
							goods_name: '测试商品1-1',
							price: '10',
							spec_type: 1,
							goods_number: 0,
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}, {
							goods_id: 2,
							goods_name: '测试商品1-2',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}, {
							goods_id: 3,
							goods_name: '测试商品1-3',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					}, {
						type: 1,
						name: '测试2',
						list: [{
							goods_id: 4,
							goods_name: '测试商品2-1',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}, {
							goods_id: 5,
							goods_name: '测试商品2-2',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}, {
							goods_id: 6,
							goods_name: '测试商品2-3',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					}, {
						type: 2,
						name: '测试3',
						list: [{
							goods_id: 7,
							goods_name: '测试商品3',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					}, {
						type: 3,
						name: '测试4',
						list: [{
							goods_id: 8,
							goods_name: '测试商品4',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					}, {
						type: 4,
						name: '测试5',
						list: [{
							goods_id: 9,
							goods_name: '测试商品5',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					},
					{
						type: 5,
						name: '测试6',
						list: [{
							goods_id: 10,
							goods_name: '测试商品6',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					},
					{
						type: 6,
						name: '测试7',
						list: [{
							goods_id: 11,
							goods_name: '测试商品7',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					},
					{
						type: 7,
						name: '测试8',
						list: [{
							goods_id: 12,
							goods_name: '测试商品8',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					},
					{
						type: 8,
						name: '测试9',
						list: [{
							goods_id: 13,
							goods_name: '测试商品9',
							price: '10',
							goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
						}]
					},
				],
			}
		},
		onShow() {},
		onLoad(e) {},
		mounted() {},
		onReachBottom(e) {
			console.log(e, '页面触底了');
			// uni.$emit('shopBottom',true)
		},
		// 监听页面滚动
		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: {
			selectType(item, itemTwo) {
				if (this.type != item.type) {
					this.type = item.type;
					this.idMark = 'scroll' + item.type

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

					// 延迟执行滚动
					setTimeout(() => {
						this.scrollToCategorySimple(item.type);
					}, 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('滚动完成');
						}
					});
					// 获取当前滚动位置
					// query.selectViewport().scrollOffset(res => {
					//   // 计算目标滚动位置
					//   // 减去固定元素的高度：导航栏 + 店铺信息 + 分类栏
					//   const navHeight = this.newNavHeight ? uni.upx2px(this.newNavHeight) : 0;
					//   const fixedOffset = navHeight + 200 + 100; // 可以根据实际情况调整

					//   const targetScrollTop = res.scrollTop + rect.top - fixedOffset;

					//   console.log('当前scrollTop:', res.scrollTop, '目标scrollTop:', targetScrollTop);

					//   // 滚动到目标位置
					//   uni.pageScrollTo({
					//     scrollTop: targetScrollTop,
					//     duration: 300,
					//     success: () => {
					//       console.log('滚动完成');
					//     }
					//   });
					// }).exec();
				}).exec();
			},
			addred(type, item) {
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				if (type === 1) {
					// 减
					--item.num;
					if (item.num >= 0) {
						this.addShoppingSave(item, item.num, type)
					} else {
						this.isAjax = false
					}
				} else if (type === 2) {
					// 加
					++item.num;
					if (item.is_infinite === 0 && item.num > item.stock) {
						--item.num
						this.isAjax = false
					} else if (item.is_quota > 0 && item.num > item.quota_num) {
						--item.num
						this.isAjax = false
					} else {
						this.addShoppingSave(item, item.num, type)
					}
			
				} else if (type === 3) {
					// 选规格
					console.log(item, '000000000')
					console.log(this.selectedSpecification, '1111111111111');
					this.selectedSpecification.forEach((v, k) => {
						if (v.goods_id === item.goods_id) {
							v.quota_num = item.quota_num
							v.payNum = item.num
							v.stock = item.stock
						}
					})
					this.popData.is_quota = item.is_quota
					this.popData.quota_num = item.quota_num
					this.popData.is_infinite = item.is_infinite
					this.popData.payNum = item.num
					this.popData.stock = item.stock
					this.getShopGoodsSpec(item)
				} else {
					let data = JSON.parse(JSON.stringify(this.popData))
					this.selectedSpecification.push(data)
					console.log(this.popData, "666666666666666666")
					console.log('1', this.popData.goods_id, this.shop_id, this.popData.goodsItem.category_id, this.popData
						.spec_key, this.popData.num);
					this.setShoppingSave()
					this.isAjax = false
				}
			},
			addShoppingSave(item, num, type) {
				shoppingSave({
					type: 1,
					goods_id: item.goods_id,
					shop_id: this.shop_id,
					category_id: item.category_id,
					goods_spec_id: '',
					number: num
				}).then((res) => {
					if (res.code === 1) {
						if (type === 1) {
							tools.success('操作成功')
						} else {
							tools.success(res.msg)
						}
						this.isAjax = false
						this.getShopIngList()
					} else {
						this.isAjax = false
						tools.error(res.msg)
					}
				})
			},
			getHeight() {
				const query = uni.createSelectorQuery();
				query.select('.shop-info').boundingClientRect(data => {
					this.heightOne = data.height;
					console.log(this.heightOne, '0000000000');
				}).exec();
				query.select('.shop-type-box').boundingClientRect(data => {
					this.heightTwo = data.height;
					this.topHeight = this.heightOne + this.heightTwo + this.newNavHeight
					console.log(this.topHeight, '111111');
				}).exec();
			},
			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({
								'shop_id': this.shop_id,
								'type': 1,
							}).then((res) => {
								if (res.code === 1) {
									tools.success(res.msg)
									this.getShopIngList()
									this.$refs.popupBuy.close()
								} else {
									tools.error(res.msg)
								}
							})
						}
					}
				});
			},
			setShoppingSave(item, type) {
				console.log(item,'11111111');
				if (type === 1) {
					// 加
					item.goods_number = item.goods_number + 1
				} else {
					// 减
					if (item.goods_number < 0) {
						return
					}
					item.goods_number = item.goods_number - 1
				}
				return
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				shoppingSave({
					'type': 1,
					'goods_id': item.goods_id,
					'shop_id': this.shop_id,
					'category_id': item.category_id,
					'goods_spec_id': item.goods_spec_id,
					'number': item.goods_number,
				}).then(res => {
					if (res.code == 1) {
						this.isAjax = false
						this.getShopIngList()
					}
				}).catch(() => {
					this.isAjax = false
				})
			},
			getShopIngList() {
				getShopIngList({
					'shop_id': 111,
				}).then(res => {
					if (res.code === 1) {
						this.cartData = res.data
						if (this.shopType === 1) {
							setTimeout(() => {
								console.log('我的数据执行了')
								// this.$refs.goodsMenu.setShopIngList(this.cartData)
							}, 1000)

						}
					}
				})
			},
			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">
	.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: 920rpx;
		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;

		.menu-type-num {
			position: absolute;
			top: 2rpx;
			right: 8rpx;
			padding: 0 6rpx;
			min-width: 20rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
			background: #FB3D03;
			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: 100rpx;
				height: 44rpx;
				background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
				border-radius: 12rpx;
				line-height: 44rpx;
				position: relative;

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

			.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>