moxuan_takeaway_user/pages/index/shop/index.vue

<template>
	<view v-if="XCXIsSelect == '是'">
		<view>
			<view class="food_all">
				<!-- banner -->
				<view style="width: 100%; padding-bottom: 20rpx; background-color: #fff">
					<!-- <swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true" style="width: 100%; z-index: 1; height: 128px">
						<swiper-item v-for="(item, index) in shopDet.shopBanner" :key="index">
							<image :src="item" mode="scaleToFill" style="width: 100%"></image>
						</swiper-item>
					</swiper>
					<view style="position: relative; height: 34px; z-index: 1; margin-top: -50px"></view> -->
					<view class="shop" style="padding: 26rpx">
						<image style="width: 184rpx; height: 184rpx; border-radius: 32rpx" :src="shopDet.shopCover" mode="aspectFill"></image>

						<view style="margin-left: 34rpx; width: 490rpx; display: flex; flex-direction: column">
							<view class="text-bold">{{ shopDet.shopName }}</view>
							<view style="display: flex; margin: 10rpx 0 20rpx">
								<view style="border-right: 2rpx solid #707070; padding-right: 28rpx; display: flex; flex-direction: column; justify-content: space-between">
									<span style="color: #707070; font-size: 24rpx">评分</span>
									<view class="text-bold">{{ shopDet.shopScore ? shopDet.shopScore : 0 }}分</view>
								</view>
								<view style="border-right: 2rpx solid #707070; padding: 0 28rpx 0 20rpx; display: flex; flex-direction: column; justify-content: space-between">
									<span style="color: #707070; font-size: 24rpx">销量</span>
									<view class="text-bold">{{ shopDet.shopSales ? shopDet.shopSales : 0 }}</view>
								</view>
								<view style="padding-left: 20rpx; display: flex; flex-direction: column; justify-content: space-between">
									<span style="color: #707070; font-size: 24rpx">平台配送</span>
									<view class="text-bold">{{ shopDet.errandTime }}分钟</view>
								</view>
							</view>
							<view class="flex align-center margin-top-xs" v-if="shopDet.shopNotice">
								<text style="width: 90rpx; color: #707070">公告：</text>
								<view style="width: 400rpx">
									<u-notice-bar
										color="#707070"
										:speed="100"
										type="none"
										padding="0rpx 0rpx"
										mode="horizontal"
										:volume-icon="false"
										:list="shopDet.shopNotice.split(',')"
									></u-notice-bar>
								</view>
							</view>
						</view>
						<!-- <view class="flex justify-between">
							<view style="width: 500rpx">
								<view class="text-xl text-bold u-line-1">{{ shopDet.shopName }}</view>
								<view class="flex align-center margin-top-xs">
									<view style="color: #fd6416; font-weight: bold; font-size: 30rpx">
										<u-icon name="star-fill" color="#FD6416" size="28"></u-icon>
										{{ shopDet.shopScore ? shopDet.shopScore : 0 }}
									</view>

									<view class="margin-left-xs">销量 {{ shopDet.shopSales ? shopDet.shopSales : 0 }}</view>
									<view class="margin-left-xs" v-if="shopDet.errandTime">约{{ shopDet.errandTime }}分钟</view>
									<view class="margin-left-xs" v-if="shopDet.minimumDelivery">{{ shopDet.minimumDelivery }}元起送</view>
								</view>

								<view class="flex align-center margin-top-xs">
									<view style="margin-right: 8rpx">{{ shopDet.autoSendOrder == 1 ? '商家配送：' : '平台配送：' }}</view>
									<view style="margin-right: 8rpx">配送费{{ shopDet.errandMoney ? shopDet.errandMoney : 0 }}元</view>
									<view class="lable" v-if="shopDet.enableFullReductionFlag == 0 && shopDet.exemptMinMoney">满{{ shopDet.exemptMinMoney }}元免配送费</view>
								</view>
							</view>
							<view>
								<image mode="aspectFill" :src="shopDet.shopCover" class="radius" style="width: 110rpx; height: 110rpx; margin-top: 30rpx"></image>
							</view>
						</view>
						<view class="flex align-center margin-top-xs" v-if="shopDet.shopNotice">
							<text style="width: 14%">公告：</text>
							<u-notice-bar
								color="#AAAAAA"
								:speed="100"
								border-radius="30"
								padding="0rpx 0rpx"
								bg-color="#f5f5f5"
								style="width: 86%"
								type="none"
								mode="horizontal"
								:volume-icon="false"
								:list="shopDet.shopNotice.split(',')"
							></u-notice-bar>
						</view>
						<view style="display: flex; margin-top: 3px" class="flex flex-wrap align-center" @click="clickGong">
							<view v-for="(ite, ind) in huoListss" :key="ind" v-if="huoListss && ite.activityType != '1'">
								<view class="lable flex justify-center align-center" style="border-radius: 4rpx; background-color: #ffffff; color: red; box-sizing: border-box">
									<text v-if="ite.activityType == '2'">时段</text>
									<text v-if="ite.activityType == '3'">满额</text>
									<text v-if="ite.activityType == '4'">全场</text>
									<text style="margin-left: 3px">|</text>
									<text style="margin-left: 3px">{{ ite.activityName }}</text>
								</view>
							</view>
						</view>

						<view class="margin-top-xs" style="width: 100%; height: 40rpx" v-if="couponList.length > 0">
							<scroll-view scroll-x="true" class="scroll-view_H">
								<view class="coupon-item flex align-center" v-for="(item, index) in couponList" :key="index" @click="coupons = true">
									<text>优惠券</text>
									<text style="margin-left: 3px">|</text>
									<view style="margin-left: 3px">¥</view>
									<view class="" style="font-weight: bold; font-size: 24rpx; margin-right: 10rpx">
										{{ item.money }}
									</view>
									<view style="margin-right: 20rpx">满{{ item.minMoney }}可用</view>
									<view style="font-weight: bold">领</view>
								</view>
							</scroll-view>
						</view> -->
					</view>
				</view>
				<!-- 食品 -->
				<view class="food">
					<!-- 店名地址 -->
					<view class="food_address">
						<view class="flex flex-sub bg justify-between padding-right-xl">
							<view @click="switchTab(1)" :class="current == 1 ? 'select' : ''" class="tabBtn">
								<view class="title">全部商品</view>
								<view :class="current == 1 ? 'active1' : ''"></view>
							</view>
							<view @click="switchTab(2)" :class="current == 2 ? 'select' : ''" class="tabBtn">
								<view class="title">评价</view>
								<view :class="current == 2 ? 'active1' : ''"></view>
							</view>
							<view @click="switchTab(3)" :class="current == 3 ? 'select' : ''" class="tabBtn">
								<view class="title">商家</view>
								<view :class="current == 3 ? 'active1' : ''"></view>
							</view>
						</view>
						<!-- <view class="flex Switch">
							<view @click="tabSwidth(1)" :class="orderType==1?'selSwitch':''">自取</view>
							<view @click="tabSwidth(2)" :class="orderType==2?'selSwitch':''">外卖</view>
						</view> -->
						<view>
							<!-- #ifdef MP-WEIXIN -->
							<!-- <image @click="goPindan()" src="../../../static/images/index/pindan.png"
								style="width: 160rpx;height: 64rpx;" mode=""></image> -->
							<!-- #endif -->
						</view>
					</view>
					<view class="VerticalBox" v-if="current == 1">
						<scroll-view class="VerticalNav nav bg-gray" scroll-y scroll-with-animation :scroll-top="verticalNavTop">
							<view
								style="font-size: 28upx"
								class="cu-item text-lg"
								:class="index == tabCur ? 'cur' : 'text-gray'"
								v-for="(item, index) in dataList"
								:key="index"
								@tap="TabSelect"
								:data-id="index"
							>
								{{ item.classifyName }}
							</view>
						</scroll-view>
						<scroll-view class="VerticalMain" scroll-y scroll-with-animation :scroll-into-view="'main-' + mainCur" @scroll="VerticalMain">
							<view class="bg-white padding-sm margin-bottom-sm" v-for="(item, index) in dataList" v-if="item.goodsList.length" :key="index" :id="'main-' + index">
								<view class="flex justify-between padding-bottom-sm" @click="goDet(ite.goodsId)" v-for="(ite, ind) in item.goodsList" :key="ind">
									<image :src="ite.goodsCover" mode="aspectFill" style="width: 184rpx; height: 184rpx; border-radius: 10rpx"></image>
									<view class="flex-sub margin-left-sm padding-tb-xs flex flex-direction justify-between">
										<view class="text-black text-lg text-bold" style="font-size: 30upx">
											{{ ite.goodsName }}
										</view>
										<view class="text-gray">已售 {{ ite.sales ? ite.sales : 0 }}</view>
										<view class="text-gray text-sm u-line-2" style="overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; width: 100%">
											{{ ite.goodsDescribe ? ite.goodsDescribe : '' }}
										</view>
										<view class="flex justify-between" style="position: relative">
											<view class="text-sm" style="color: #ff0303">
												¥
												<text class="text-lg">{{ ite.goodsMoney }}</text>
											</view>
											<view
												style="width: 80rpx; height: 80rpx; line-height: 80rpx; position: absolute; right: 0; top: -10rpx; text-align: center"
												@click.stop="selSku(ite)"
											>
												<image src="../../../static/images/index/add.png" style="width: 40rpx; height: 40rpx"></image>
											</view>
										</view>
									</view>
								</view>
								<view style="height: 30px"></view>
							</view>
						</scroll-view>
						<empty v-if="!dataList.length"></empty>
					</view>
					<view style="background-color: #fff9ed; overflow-y: auto; height: calc(100%-120rpx)" v-if="current == 2">
						<view class="flex margin-lr padding-tb-sm u-border-bottom" v-if="shopDet.shopScore">
							<view class="flex padding-right">
								<view class="text-sl" style="color: #fd6416">{{ shopDet.shopScore }}</view>
								<view class="flex flex-direction justify-around margin-left-sm">
									<view>商家评分</view>
									<view class="flex">
										<u-icon v-for="ite in shopDet.shopScore1" :key="ite" color="#F2CB51" name="star-fill"></u-icon>
									</view>
								</view>
							</view>
							<view class="flex-sub flex justify-around u-border-left padding-left">
								<view class="flex flex-direction justify-around text-center">
									<view>好评</view>
									<view>{{ EvaluateData.goodReputation ? EvaluateData.goodReputation : 0 }}</view>
								</view>
								<view class="flex flex-direction justify-around text-center">
									<view>中评</view>
									<view>{{ EvaluateData.mediumReview ? EvaluateData.mediumReview : 0 }}</view>
								</view>
								<view class="flex flex-direction justify-around text-center">
									<view>差评</view>
									<view>{{ EvaluateData.negativeComment ? EvaluateData.negativeComment : 0 }}</view>
								</view>
							</view>
						</view>
						<view class="padding-tb-sm margin-lr">
							<u-button
								hover-class="none"
								@click="sel(0)"
								type="primary"
								shape="circle"
								size="mini"
								:plain="false"
								:custom-style="count == 0 ? customStyle : customStyle1"
							>
								全部评论
							</u-button>
							<u-button
								hover-class="none"
								@click="sel(1)"
								type="primary"
								shape="circle"
								size="mini"
								:plain="false"
								:custom-style="count == 1 ? customStyle : customStyle1"
							>
								好评({{ EvaluateData.goodReputation ? EvaluateData.goodReputation : 0 }})
							</u-button>
							<u-button
								hover-class="none"
								@click="sel(2)"
								type="primary"
								shape="circle"
								size="mini"
								:plain="false"
								:custom-style="count == 2 ? customStyle : customStyle1"
							>
								中评({{ EvaluateData.mediumReview ? EvaluateData.mediumReview : 0 }})
							</u-button>
							<u-button
								hover-class="none"
								@click="sel(3)"
								type="primary"
								shape="circle"
								size="mini"
								:plain="false"
								:custom-style="count == 3 ? customStyle : customStyle1"
							>
								差评({{ EvaluateData.negativeComment ? EvaluateData.negativeComment : 0 }})
							</u-button>
						</view>
						<scroll-view v-if="EvaluateList.length" scroll-y style="height: calc(100vh - 590rpx)" @scrolltolower="scrolltolower">
							<view class="padding-tb-sm margin-lr u-border-bottom" v-for="(item, index) in EvaluateList" :key="index">
								<view class="flex justify-between align-center">
									<view class="flex align-center">
										<u-avatar :src="item.avatar" size="65"></u-avatar>
										<view class="margin-left-sm" style="line-height: 46upx">
											{{ item.userName ? item.userName : '匿名' }}
										</view>
										<view class="flex margin-left-sm">
											<u-icon v-for="ite in item.score" :key="ite" color="#FCD202" name="star-fill"></u-icon>
										</view>
									</view>

									<view>{{ item.createTime }}</view>
								</view>
								<view class="margin-top-sm">{{ item.evaluateMessage }}</view>
								<view class="pinglunImg" v-if="item.pictures != undefined && item.pictures">
									<view class="pinglunImg-box flex justify-between flex-wrap">
										<image
											style="margin-bottom: 20rpx"
											@click="yuanlan(item.pictures == undefined ? [] : item.pictures.split(','), index2)"
											v-for="(item2, index2) in item.pictures == undefined ? [] : item.pictures.split(',')"
											:src="item2"
											mode="aspectFill"
										></image>
										<image style="margin-bottom: 20rpx; width: 160rpx; height: 0" src="" mode=""></image>
										<image style="margin-bottom: 20rpx; width: 160rpx; height: 0" src="" mode=""></image>
									</view>
								</view>
								<view class="margin-top-sm" v-if="item.shopReplyMessage">
									<view class="flex align-center">
										<view class="flex align-center text-df" style="color: #999999">
											<view class="text-df">商家回复:</view>
											{{ item.shopReplyMessage }}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>

						<empty v-if="!EvaluateList.length"></empty>
					</view>
					<view style="background-color: #fff9ed" class="padding-bottom" v-if="current == 3">
						<view class="shop_xiang">
							<view class="shopDizhi margin-lr">
								<image :src="Tupian('/shopXiang/address.png')" class="radius" style="width: 44rpx; height: 44rpx; float: left; margin-top: 20rpx"></image>
								<text style="margin-left: 5px">{{ shopDet.detailedAddress }}</text>
								<image
									@click="call(shopDet.phone)"
									:src="Tupian('/shopXiang/phone.png')"
									class="radius"
									style="width: 44rpx; height: 44rpx; float: right; margin-top: 20rpx"
								></image>
							</view>
							<view class="shopLine margin-lr"></view>
							<view class="shopDizhi margin-lr">
								<image :src="Tupian('/shopXiang/22.png')" class="radius" style="width: 44rpx; height: 44rpx; float: left; margin-top: 20rpx"></image>
								<text style="margin-left: 5px">营业时间：{{ shopDet.businessHours }}-{{ shopDet.lockHours }}</text>
							</view>
							<view class="shopLine margin-lr"></view>
							<view class="shopDizhi margin-lr">
								<image :src="Tupian('/shopXiang/33.png')" class="radius" style="width: 44rpx; height: 44rpx; float: left; margin-top: 20rpx"></image>
								<text style="margin-left: 5px">商家品类：{{ shopDet.shopTypeName }}</text>
							</view>
							<view class="shopLine margin-lr"></view>
							<view class="shopDizhi margin-lr">
								<image :src="Tupian('/shopXiang/44.png')" class="radius" style="width: 44rpx; height: 44rpx; float: left; margin-top: 20rpx"></image>
								<text style="margin-left: 5px">配送范围：{{ shopDet.distributionDistance }}以内</text>
							</view>
						</view>
						<view class="shop_zheng">
							<view class="shopDizhi margin-lr">
								<image :src="Tupian('/shopXiang/55.png')" class="radius" style="width: 44rpx; height: 44rpx; float: left; margin-top: 20rpx"></image>
								<text style="margin-left: 5px">营业执照，食品经营许可和健康证</text>
							</view>
							<view class="image-container" v-if="shop_zhizhao.length > 0">
								<image
									v-for="(item, index) in shop_zhizhao"
									:key="index"
									class="image"
									:src="item"
									mode="aspectFill"
									style="margin-left: 10px"
									@click="clickImg(item)"
								></image>
							</view>
						</view>
						<!-- <view class="flex align-center margin-top-sm">
							<view class="flex-sub">
								<view class="text-black text-lg text-bold">{{shopDet.shopName}}</view>
								<view class="margin-top-sm" @click="goMap">
									<u-icon name="map" size="28"></u-icon> {{shopDet.detailedAddress}}
								</view>
							</view>
							<image @click="call(shopDet.phone)" src="../../../static/images/index/phone.png"
								class="radius" style="width: 38rpx;height: 49rpx;">
							</image>
						</view>
						<image :src="shopDet.shopCover" class="radius margin-top-sm"
							style="width: 140rpx;height: 140rpx;">
						</image>
						<view class="text-black text-lg text-bold margin-top-xs">商家信息</view>
						<view class="text-black margin-top-xs text-df">
							营业时间：{{shopDet.businessHours}}-{{shopDet.lockHours}}</view>
						<view class="text-black margin-top-xs text-df">商家品类：{{shopDet.shopTypeName}}</view>
						<view class="text-black margin-top-xs text-df">配送范围：{{shopDet.distributionDistance}}以内</view>
						<view class="text-black margin-top-xs text-df" v-if="shopDet.shopNotice">
							公告：{{shopDet.shopNotice}}</view>
						<view class="text-black margin-top-xs text-df" v-else>公告：店铺开业啦！</view> -->
					</view>
				</view>
				<!-- 结算 -->
				<view class="settlement" @click="isPopupShow" v-if="current == 1">
					<view class="settlement_img">
						<image src="../../../static/images/index/diancan.png" mode=""></image>
						<view class="settlement_hot">{{ goodsNum }}</view>
					</view>
					<view class="settlement_le">
						<text>￥</text>
						{{ totalPrice }}
						<text v-if="shopDet.minimumDelivery" style="margin-left: 10rpx">{{ shopDet.minimumDelivery }}元起送</text>
					</view>
					<view v-if="totalPrice >= shopDet.minimumDelivery" class="settlement_ri" @click.stop="goConfirm_throttle()">去结算</view>

					<view v-else class="settlement_ri1">去结算</view>
				</view>
				<!-- 购物车弹窗 -->
				<u-popup v-model="popupShow" mode="bottom" border-radius="20">
					<view style="padding: 0 0 30rpx">
						<view class="flex justify-between align-center margin-bottom-sm" style="height: 90rpx; background-color: #b2d5c6; padding: 0 30rpx">
							<view class="text-bold text-black text-df">已选餐品</view>
							<view class="flex align-center">
								<image src="../../../static/images/index/delete.png" style="width: 28rpx; height: 31rpx" mode=""></image>
								<text class="margin-left-xs" @click="empty">清空购物车</text>
							</view>
						</view>
						<scroll-view scroll-y="true" class="popup">
							<view v-for="(item, ind) in goodsList.orderGoodsList[0]" :key="ind">
								<view class="flex margin-tb-sm">
									<image mode="aspectFill" :src="item.goodsPicture[0]" style="width: 96rpx; height: 96rpx; border-radius: 10rpx"></image>
									<view class="margin-left-sm" style="display: flex; flex-direction: column; justify-content: space-between">
										<view>{{ item.goodsName }}</view>
										<view v-if="item.skuMessage">{{ item.skuMessage }}</view>
										<view class="text-bold text-sm" style="color: #ff0303">
											¥
											<text class="text-lg">{{ item.goodsPrice }}</text>
										</view>
									</view>

									<view class="flex justify-between align-center" style="margin-left: auto">
										<view class="flex align-center justify-between">
											<view @click.stop="noAdd(item, ind)">
												<image src="../../../static/images/index/jian.png" style="width: 54rpx; height: 54rpx"></image>
											</view>
											<view class="text-center margin-lr-xs">{{ item.goodsNum }}</view>
											<view @click.stop="add(item, ind)">
												<image src="../../../static/images/index/add.png" style="width: 50rpx; height: 50rpx"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="settlement1 margin-top-lg">
						<view class="settlement_img">
							<image src="../../../static/images/index/diancan.png" mode=""></image>
							<view class="settlement_hot">{{ goodsNum }}</view>
						</view>
						<view class="settlement_le">
							<text>￥</text>
							{{ totalPrice }}
							<text v-if="shopDet.minimumDelivery" style="margin-left: 10rpx">{{ shopDet.minimumDelivery }}元起送</text>
						</view>
						<view v-if="totalPrice >= shopDet.minimumDelivery" class="settlement_ri" @click.stop="goConfirm_throttle()">去结算</view>
						<view v-else class="settlement_ri1">去结算</view>
					</view>
				</u-popup>
				<!-- 选择规格弹窗 -->
				<u-popup v-model="skuShow" mode="center" :closeable="true" border-radius="20">
					<view style="width: 700rpx">
						<view class="text-center text-lg text-bold padding-tb">{{ goodsDet.goodsName }}</view>
						<view class="margin-top-sm padding-lr" v-for="(item, index) in attrList" :key="index">
							<view class="text-bold text-black">{{ item.value }}</view>
							<view class="flex margin-tb-sm flex-wrap">
								<view v-for="(ite, ind) in item.detail" :key="ind" @click="skuSel(ite, index, ind)" class="margin-bottom-sm">
									<view class="skuBtn" :class="item.goodsId == index && item.attrId == ind ? 'active' : ''">
										{{ ite.name }}
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-between padding-lr padding-top">
							<view>
								<view class="text-xl text-bold" style="color: #ff0303">
									<text class="text-sm">￥</text>
									{{ price }}
								</view>
								<view class="detail_describe_text2">{{ checkString }}</view>
							</view>
							<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
						</view>
						<view class="detail_account_bottom padding">
							<view class="detail_account_bottom_le" @click="payment()">立即购买</view>
							<view class="detail_account_bottom_ri" @click="orderSel(2)">加入购物车</view>
						</view>
					</view>
				</u-popup>
				<!-- 优惠券弹窗 -->
				<!-- coupons -->
				<u-popup v-model="coupons" height="520rpx" mode="bottom" :closeable="true">
					<view class="yhq flex justify-center align-center">
						<view class="yhq-box">
							<view class="yhq-box-title">优惠券</view>
							<view class="yhq-box-list">
								<scroll-view scroll-y="true" style="width: 100%; height: 100%; padding-bottom: 20rpx">
									<view class="yhq-box-list-item flex justify-center align-center" v-for="(item, index) in couponList" :key="index">
										<view class="yhq-box-list-item-c flex justify-between align-center">
											<view class="yhq-box-list-item-c-l flex align-center">
												<image
													:src="
														item.couponPicture
															? item.couponPicture
															: 'https://mxys.chuanghai-tech.com/wmfile/20250814/fff4dc5d02ea4af881db9685f2e1e61d.png'
													"
													style="width: 80rpx; height: 80rpx; border-radius: 20rpx"
													mode=""
												></image>
												<view class="" style="margin-left: 20rpx">
													<view class="">
														<text style="color: red; margin-right: 10rpx">¥{{ item.money }}</text>
														<text style="font-weight: bold; margin-right: 10rpx">优惠券</text>
														(满{{ item.minMoney }}元可用)
													</view>
													<view class="" style="font-size: 20rpx; color: gray">领取后{{ item.endDate }}天内有效</view>
												</view>
											</view>
											<view class="yhq-box-list-item-c-r" style="color: red" @click="lingqv(item.couponId)">领取</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</u-popup>

				<!-- 点击店铺公告栏弹框 -->
				<u-popup v-model="popupGong" mode="center" border-radius="20">
					<view style="width: 700rpx; height: 592rpx">
						<view style="width: 500rpx; display: flex">
							<view class="gong_img">
								<image :src="shopDet.shopCover" class="radius" style="width: 110rpx; height: 110rpx"></image>
							</view>
							<view class="gong_name">{{ shopDet.shopName }}</view>

							<view class="flex align-center margin-top-xs gong_pei">
								<!-- <view style="color: #FCD202;margin-right: 8rpx;">{{shopDet.autoSendOrder==1?'商家配送':'平台配送'}}</view> -->
								<view style="margin-right: 8rpx">{{ shopDet.autoSendOrder == 1 ? '商家配送：' : '平台配送：' }}</view>
								<view class="text-gray" style="margin-right: 8rpx">配送费{{ shopDet.errandMoney ? shopDet.errandMoney : 0 }}元</view>
								<!-- <view class="lable text-gray" v-if="shopDet.enableFullReductionFlag==1">
										不参与配送费满减</view> -->
								<view class="lable text-gray" v-if="shopDet.enableFullReductionFlag == 0 && shopDet.exemptMinMoney">满{{ shopDet.exemptMinMoney }}元免配送费</view>
							</view>
							<view class="gong_line"></view>
						</view>
						<view class="align-center margin-top-xs" style="margin-top: 35rpx">
							<view v-for="(ite, ind) in gongHuo" :key="ind">
								<view class="flex align-center" style="margin-left: 40rpx; margin-top: 4px" v-for="(ite2, ind2) in ite.activityInGroups" :key="ind2">
									<text
										style="border-radius: 4rpx; background-color: #ffffff; color: red; box-sizing: border-box; border: 1px solid rgba(215, 55, 49, 1)"
										v-if="ite.activityType == '2'"
									>
										时段
									</text>
									<text
										style="border-radius: 4rpx; background-color: #ffffff; color: red; box-sizing: border-box; border: 1px solid rgba(215, 55, 49, 1)"
										v-if="ite.activityType == '3'"
									>
										满额
									</text>
									<text
										style="border-radius: 4rpx; background-color: #ffffff; color: red; box-sizing: border-box; border: 1px solid rgba(215, 55, 49, 1)"
										v-if="ite.activityType == '4'"
									>
										全场
									</text>
									<text style="margin-left: 6px">{{ ite2.activityTitle }}</text>
									<view class="gong_huo" style="margin-left: 6px">
										<text v-if="ite2.suitType == '1'">皆适用</text>
										<text v-if="ite2.suitType == '2'">仅针对第一次下单</text>
										<text v-if="ite2.limitType == '1'">无数量限制</text>
										<text v-if="ite2.limitType == '2'">每天限使用{{ ite2.limitValue }}次</text>
									</view>
								</view>
							</view>
							<!-- <view v-for="(ite,ind) in gongHuo" :key='ind' v-if="ite.activityType=='3'">
								<view class=" flex align-center" style="margin-left: 40rpx;margin-top: 4px;" v-for="(ite2,ind2) in ite2.activityInGroups" :key='ind2'>
									<text style="border-radius: 4rpx;background-color: #ffffff;color: red;box-sizing: border-box;border: 1px solid rgba(215, 55, 49, 1);">时段</text>
									<text style="margin-left: 6px;">{{ite2.activityTitle}}</text>
									<view class="gong_huo" style="margin-left: 6px;">
										<text v-if="ite2.suitType=='1'">无限制</text>
										<text v-if="ite2.suitType=='2'">仅针对第一次下单</text>
									</view>
								</view>
							</view>
							<view v-for="(ite,ind) in gongHuo" :key='ind' v-if="ite.activityType=='4'">
								<view class=" flex align-center" style="margin-left: 40rpx;margin-top: 4px;" v-for="(ite2,ind2) in ite2.activityInGroups" :key='ind2'>
									<text style="border-radius: 4rpx;background-color: #ffffff;color: red;box-sizing: border-box;border: 1px solid rgba(215, 55, 49, 1);">时段</text>
									<text style="margin-left: 6px;">{{ite2.activityTitle}}</text>
									<view class="gong_huo" style="margin-left: 6px;">
										<text v-if="ite2.suitType=='1'">无限制</text>
										<text v-if="ite2.suitType=='2'">仅针对第一次下单</text>
									</view>
								</view>
							</view> -->
						</view>
						<view class="flex align-center margin-top-xs" v-if="shopDet.shopNotice" style="margin-top: 35rpx; margin-left: 40rpx">
							<text style="width: 14%">公告：</text>
							<view>{{ shopDet.shopNotice }}</view>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="hintPopul" v-if="shopDet && shopDet.putawayFlag == 1">
				<view class="content_">
					<image src="../../../static/images/index/shop.png" style="width: 200rpx; height: 180rpx"></image>
					<view class="text-xl text-bold">店铺打烊啦</view>
					<view class="hintText margin-top-sm text-gray">现在店铺已经打烊了,营业时间</view>
					<view class="margin-top-xs text-gray margin-bottom">{{ shopDet.businessHours }}-{{ shopDet.lockHours }}</view>
					<view class="Btns" @click="goBack()">知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import empty from '@/components/empty.vue'
import { throttle } from '@/utils/throttle.js'
export default {
	components: {
		empty
	},
	data() {
		return {
			maskCustomStyle: {
				background: 'rgba(0,0,0,0.1)'
			},
			hdStyle: {
				background: '#F5F5F5'
			},
			customStyle: {
				color: '#333333',
				background: '#568D84',
				marginRight: '20rpx',
				border: 0
			},
			customStyle1: {
				color: '#333333',
				background: '#fff',
				marginRight: '20rpx',
				border: 0
			},
			current: 1,
			loading: false, // 是否显示骨架屏组件
			tabCur: 0,
			mainCur: 0,
			verticalNavTop: 0,
			load: true,
			dataList: [],
			shopDet: {},
			shopList: [],
			city: '西安',
			lat: '',
			lng: '',
			shopName: '',
			page: 1,
			limit: 10,
			evaluatePage: 1,
			evaluateLimit: 10,
			show: true,
			totalPrice: 0,
			goodsNum: 0,
			goodsList: {
				orderGoodsList: [[]]
			},
			popupShow: false,
			skuShow: false,

			popupGong: false, //店铺公告弹框
			gongHuo: [], //店铺公告活动

			userId: '',
			hintShow: true, //
			shouquan: 0,
			orderType: 2,

			value: 1,
			goodsDet: {},
			skuId: '',
			skuMessage: '',
			skuList: [],
			attrList: [],
			checkString: '',
			checkStateList: [],
			CheckattrValue: false,
			price: 0,
			echoSkuList: [],
			echoSku: [],
			isEchoSku: {},
			shopId: '',
			lng: '',
			lat: '',
			commentList: [],
			EvaluateList: [],
			EvaluateData: {},
			grade: '',
			count: 0,
			orderId: '',
			isTrue: false,
			XCXIsSelect: '否',
			couponList: [], //优惠券列表
			coupons: false,
			huoListss: [], //活动

			shop_zhizhao: []
		}
	},
	onLoad(option) {
		if (option.huoListss) {
			this.huoListss = JSON.parse(decodeURIComponent(option.huoListss))
		}
		this.XCXIsSelect = this.$queue.getData('XCXIsSelect')
		if (this.XCXIsSelect == '否') {
			// this.getGuize()
			uni.setNavigationBarTitle({
				title: '隐私政策'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '店铺详情'
			})
		}
		let that = this
		that.shopId = option.shopId

		uni.showLoading({
			title: '加载中',
			mask: true // 是否显示透明蒙层，防止触摸穿透
		})

		// #ifndef H5
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: function (res) {
				that.lat = res.latitude
				that.lng = res.longitude
			}
		})
		that.getData()
		// #endif
		// #ifdef H5
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: function (res) {
				console.log(res, '经纬度')
				that.lat = res.latitude
				that.lng = res.longitude
				that.getData()
			}
		})

		that.getData()
		// #endif
		that.orderId = uni.getStorageSync('orderId') ? uni.getStorageSync('orderId') : ''
	},
	onHide() {
		uni.removeStorageSync('types')
	},
	onShow() {
		// 清空购物车
		let isClear = uni.getStorageSync('isClear')
		if (isClear) {
			uni.setStorageSync('isClear', false)
			this.empty()
		} else {
			this.getOrderList()
		}
		this.orderId = uni.getStorageSync('orderId') ? uni.getStorageSync('orderId') : ''
		if (this.orderId) {
			this.getOrderDetail()
		}
		this.userId = uni.getStorageSync('userId')
		// this.getOrderList()
		this.getcouponList()
	},
	onShareAppMessage(res) {
		//发送给朋友
		return {
			title: this.shopDet.shopName,
			path: '/pages/index/index?shopId=' + this.shopDet.shopId,
			imageUrl: this.shopDet.shopCover
		}
	},
	onShareTimeline(res) {
		//分享到朋友圈
		return {
			title: this.shopDet.shopName,
			path: '/pages/index/index?shopId=' + this.shopDet.shopId,
			imageUrl: this.shopDet.shopCover
		}
	},
	methods: {
		scrolltolower() {
			if (this.EvaluateData.pageUtils.totalCount > this.EvaluateList.length) {
				this.evaluatePage++
				this.getEvaluateList()
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				})
			}
		},
		//营业执照点击放大
		clickImg(img) {
			uni.previewImage({
				urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function (res) {},
				fail: function (res) {},
				complete: function (res) {}
			})
		},
		//点击店铺公告弹框
		clickGong() {
			this.getHuoList()
			this.popupGong = true
		},
		//获取店铺活动信息
		getHuoList() {
			let data = {
				shopId: this.shopId
			}
			this.$Request.get(`/app/activity-shop/shop-activity-group/${this.shopId}`, data).then((res) => {
				if (res.code == 0) {
					this.gongHuo = res.data.activityTypeGroups
				}
			})
		},
		//领取优惠券
		lingqv(couponId, needIntegral) {
			let that = this
			let data = {
				couponId: couponId
			}
			that.$Request.postT('/app/coupon/buyCoupon', data).then((res) => {
				if (res.code == 0) {
					uni.showToast({
						title: '领取成功'
					})
					that.coupons = false
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		//获取商家优惠券
		getcouponList() {
			// couponList
			let data = {
				shopId: this.shopId
			}
			this.$Request.get('/app/coupon/seleteAllCoupon', data).then((res) => {
				if (res.code == 0 && res.data) {
					this.couponList = res.data
				}
			})
		},
		// 预览图片
		yuanlan(arr, index) {
			uni.previewImage({
				urls: arr,
				current: index
			})
		},
		goBack() {
			uni.navigateBack({})
		},
		goNav(url) {
			uni.navigateTo({
				url
			})
		},
		switchTab(e) {
			// this.page = 1
			this.current = e

			if (this.current == 1) {
				this.getData()
			} else if (this.current == 2) {
				this.evaluatePage = 1
				this.getEvaluateList()
			} else if (this.current == 3) {
			}
		},
		sel(e) {
			this.grade = e
			this.count = e
			this.evaluatePage = 1
			this.getEvaluateList()
		},
		// 获取评论列表
		getEvaluateList() {
			let data = {
				shopId: this.shopId,
				page: this.evaluatePage,
				limit: this.evaluateLimit,
				grade: this.grade
			}
			this.$Request.get('/app/goods/selectEvaluateByShopId', data).then((res) => {
				// console.log(res)
				if (res.code == 0 && res.data) {
					this.EvaluateData = res.data
					if (this.evaluatePage == 1) {
						this.EvaluateList = res.data.pageUtils.list
					} else {
						this.EvaluateList = [...this.EvaluateList, ...res.data.pageUtils.list]
					}
				}
			})
		},
		// 获取店铺信息
		getData() {
			let data = {
				shopId: this.shopId,
				lng: this.lng,
				lat: this.lat
			}
			this.$Request.get('/app/goods/selectGoodsList', data).then((res) => {
				console.log(res, '999')
				if (res.code == 0 && res.data) {
					this.dataList = res.data.list
					this.shopDet = res.data.goodsShop

					for (var i = 0; i < this.dataList.length; i++) {
						this.dataList[i].id = i
					}

					this.shopDet.shopScore1 = Math.floor(this.shopDet.shopScore)
					this.shopDet.errandTime = Math.round(this.shopDet.errandTime)
					if (this.shopDet.shopBanner) {
						this.shopDet.shopBanner = this.shopDet.shopBanner.split(',')
					}
					console.log(this.shopDet, 'kkkkkk')
					if (this.shopDet.businessLicense) {
						this.shop_zhizhao = this.shopDet.businessLicense.split(',')
					}

					this.shopDet.shopScore = this.shopDet.shopScore.toFixed(2)
					if (this.shopDet.distributionDistance < 1000) {
						this.shopDet.distributionDistance = '<1000m'
					} else {
						this.shopDet.distributionDistance = Number(this.shopDet.distributionDistance / 1000) + 'km'
					}

					uni.setNavigationBarTitle({
						title: this.shopDet.shopName
					})
				}
				uni.hideLoading()
			})
		},
		getEchoOrder() {
			let data = {
				shopId: this.shopId,
				goodsId: this.goodsDet.goodsId
			}
			this.$Request.get('/app/order/echoOrder', data).then((res) => {
				if (res.code == 0 && res.data.length) {
					this.echoSkuList = res.data
					if (res.data[0].skuMessage) {
						this.echoSku = res.data[0].skuMessage.split(',')
					}
				}
			})
		},
		// 弹窗展示商品详情
		selSku(item) {
			this.value = 1
			this.checkStateList = []
			this.checkString = ''
			this.attrList = []
			this.skuId = ''
			this.skuMessage = ''
			let data = {
				goodsId: item.goodsId
			}
			console.log(data)
			this.$Request.get('/app/goods/selectGoodsById', data).then((res) => {
				uni.hideLoading()
				if (res.code == 0) {
					this.goodsDet = res.data
					if (this.goodsDet.goodsLabel) {
						this.goodsDet.goodsLabel = this.goodsDet.goodsLabel.split(',')
					}
					if (this.goodsDet.goodsPicture) {
						this.goodsDet.goodsPicture = this.goodsDet.goodsPicture.split(',')
					}
					console.log(this.goodsDet, '商品')
					this.price = this.goodsDet.goodsMoney
					this.skuList = this.goodsDet.sku
					this.getEchoOrder()

					if (!this.skuList.length) {
						let that = this
						setTimeout(function () {
							that.orderSel(2)
						}, 500)
					} else {
						if (this.goodsDet.attr.length) {
							this.attrList = this.goodsDet.attr[0] ? this.goodsDet.attr[0].attrValue : []
						} else {
							this.skuId = this.goodsDet.sku[0].id
						}
						this.attrList.forEach((res) => {
							let data = {
								name: ''
							}
							this.checkStateList.push(data)
							let detail = []
							if (res.detail.length > 0) {
								res.detail.split(',').forEach((d) => {
									let data = {
										name: '',
										state: ''
									}
									data.name = d
									detail.push(data)
								})
								res.detail = detail
							}
						})

						this.skuShow = true
					}
				}
			})
		},
		// 选择规格
		skuSel(item, index, ind) {
			this.attrList[index].goodsId = index
			this.attrList[index].attrId = ind
			this.checkStateList[index].name = item.name
			this.checkString = ''

			this.checkStateList.forEach((d) => {
				if (d.name) {
					if (this.checkString) {
						this.checkString = this.checkString + ',' + d.name
					} else {
						this.checkString = d.name
					}
				}
			})
			console.log(this.checkString)
			console.log(this.skuList)
			for (var i = 0; i < this.skuList.length; i++) {
				let d = this.skuList[i]
				// console.log(this.skuList[i], 'l')
				if (d.detailJson == this.checkString) {
					console.log(d.detailJson, this.checkString)
					// if (d.stock > 0) {
					this.skuId = d.id
					this.skuMessage = d.detailJson
					this.price = d.skuPrice
					this.CheckattrValue = true
					// } else {
					// 	this.$queue.showToast('库存不足请选择其他规格')
					// }

					break
				} else {
					this.CheckattrValue = false
				}
			}
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
			this.value = e.value
		},
		// 立即购买
		payment() {
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}

			if (this.attrList.length) {
				if (this.checkString == '' || !this.CheckattrValue) {
					this.$queue.showToast('请选择正确的商品规格')
					return
				}
			}

			let goodstr1 = 0 //商品库的 必须次数
			let goodstr2 = 0 //购物车的 必须次数
			let regex = new RegExp('必选', 'g')
			let dataList = JSON.stringify(this.dataList)
			if (dataList.match(regex)) {
				goodstr1 = dataList.match(regex).length
				if (dataList.indexOf('必选') != -1) {
					//检测商品是否存在必选
					let goodsList = JSON.stringify(this.goodsDet)
					if (goodsList.match(regex)) {
						goodstr2 = goodsList.match(regex).length
						if (goodstr1 == goodstr2) {
							//检查购物车商品是否存在必须
							let data = {
								goodsId: this.goodsDet.goodsId,
								skuMessage: this.skuMessage,
								skuId: this.skuId,
								num: this.value,
								orderType: this.orderType,
								shopId: this.shopId
							}
							this.$Request.post('/app/order/buyGoods', data).then((res) => {
								if (res.code == 0) {
									this.skuShow = false
									uni.navigateTo({
										url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this.orderType + '&shopId=' + this.shopId
									})
								} else {
									this.$queue.showToast(res.msg)
								}
							})
						} else {
							uni.showToast({
								title: '有' + goodstr1 + '个必选商品，请选择后结算',
								icon: 'none'
							})
							return
						}
					} else {
						uni.showToast({
							title: '有' + goodstr1 + '个必选商品，请选择后结算',
							icon: 'none'
						})
						return
					}
				}
			} else {
				let data = {
					goodsId: this.goodsDet.goodsId,
					skuMessage: this.skuMessage,
					skuId: this.skuId,
					num: this.value,
					orderType: this.orderType,
					shopId: this.shopId
				}
				this.$Request.post('/app/order/buyGoods', data).then((res) => {
					if (res.code == 0) {
						this.skuShow = false
						uni.navigateTo({
							url: '/pages/index/shop/payOrder?orderId=' + res.data + '&orderType=' + this.orderType + '&shopId=' + this.shopId
						})
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			}
		},
		// 加入购物车
		orderSel(e) {
			if (this.value < 1) {
				uni.showToast({
					title: '数量不能小于1',
					icon: 'none'
				})
				return
			}
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}
			if (this.attrList.length) {
				if (this.checkString == '' || !this.CheckattrValue) {
					this.$queue.showToast('请选择正确的商品规格')
					return
				}
			}

			let data = {
				goodsId: this.goodsDet.goodsId,
				skuMessage: this.skuMessage,
				skuId: this.skuId,
				num: this.value,
				shopId: this.shopId
			}
			// let url = ''
			// if (this.types == 1) {
			// 	url = '/app/order/joinOrder'
			// } else {
			// 	url = '/app/order/insertOrder'
			// }
			// console.log(data, '参数')
			this.$Request.post('/app/order/insertOrder', data).then((res) => {
				if (res.code == 0) {
					this.$queue.showToast('添加成功')
					this.skuShow = false
					this.getOrderList()
				} else {
					this.$queue.showToast(res.msg)
				}
			})
		},
		// 切换外卖/自提
		tabSwidth(e) {
			this.orderType = e
			this.getOrderList()
		},
		// 展示购物车弹窗
		isPopupShow() {
			if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0].length > 0) {
				this.popupShow = true
			} else {
				uni.showToast({
					title: '请先添加商品',
					icon: 'none'
				})
			}
		},
		// 添加数量
		add(item, index) {
			// this.count++;
			this.goodsList.orderGoodsList[0][index].goodsNum++

			let data = {
				orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
				type: 1,
				num: 1,
				shopId: this.shopId
			}
			this.$Request.get('/app/order/updateGoodsNum', data).then((res) => {
				if (res.code == 0) {
					this.getOrderList()
				} else {
					this.$queue.showToast(res.msg)
					this.goodsList.orderGoodsList[0][index].goodsNum--
				}
			})
		},
		// 减少数量
		noAdd(item, index) {
			this.goodsList.orderGoodsList[0][index].goodsNum--
			// this.count--;
			let data = {
				orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
				type: 2,
				num: 1,
				shopId: this.shopId
			}
			this.$Request.get('/app/order/updateGoodsNum', data).then((res) => {
				if (res.code == 0) {
					this.getOrderList()
				}
			})
		},
		// 清空购物车
		empty() {
			let data = {
				shopId: this.shopId
			}
			this.$Request.post('/app/order/emptyShoppingTrolley', data).then((res) => {
				console.log(res)
				if (res.code == 0) {
					this.totalPrice = 0
					this.goodsNum = 0
					this.goodsList = {
						orderGoodsList: [[]]
					}
					this.echoSkuList = []
					this.echoSku = []
					this.getOrderList()
					this.popupShow = false
					this.getEchoOrder()
				}
			})
		},
		// 获取购物车商品列表
		getOrderList() {
			// 显示加载提示
			uni.showLoading({
				title: '加载中', // 加载提示文本
				mask: true // 是否显示透明蒙层，防止触摸穿透
			})
			let data = {
				shopId: this.shopId,
				page: 1,
				limit: 1000,
				status: 1
				// orderType: this.orderType
			}
			this.$Request.get('/app/order/selectAllOrderList', data).then((res) => {
				if (res.code == 0 && res.data.pageUtils.list.length) {
					this.goodsList = res.data.pageUtils.list[0]
					console.log(this.goodsList, '888')

					if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0]) {
						this.totalPrice = res.data.money
						this.goodsNum = 0

						this.goodsList.orderGoodsList[0].forEach((res) => {
							if (res.goodsPicture) {
								res.goodsPicture = res.goodsPicture.split(',')
							}
							this.goodsNum += res.goodsNum
						})
						if (!this.goodsList.orderGoodsList[0].length) {
							this.popupShow = false
						}
					}
				}
				// 加载提示关闭
				uni.hideLoading()
			})
		},
		// 跳转商品详情
		goDet(id) {
			uni.navigateTo({
				url: '/pages/index/shop/goodsDet?goodsId=' + id + '&shopId=' + this.shopId + '&orderType=' + this.orderType
			})
		},

		goConfirm_throttle: throttle(function () {
			this.goConfirm()
		}, 1000),
		// 去结算
		goConfirm() {
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}

			let goodstr1 = 0 //商品库的 必须次数
			let goodstr2 = 0 //购物车的 必须次数
			// let aa=[]
			// let bb=[]
			let regex = new RegExp('必选', 'g')
			if (this.goodsList && this.goodsList.orderGoodsList[0].length > 0) {
				// aa=this.dataList.map(item => item.goodsList)
				// bb=aa.map(item => item)
				let dataList = JSON.stringify(this.dataList)
				if (dataList.match(regex)) {
					goodstr1 = dataList.match(regex).length
					if (dataList.indexOf('必选') != -1) {
						//检测商品是否存在必选
						let goodsList = JSON.stringify(this.goodsList.orderGoodsList)
						if (goodsList.match(regex)) {
							goodstr2 = goodsList.match(regex).length
							if (goodstr1 == goodstr2) {
								//检查购物车商品是否存在必须
								uni.navigateTo({
									url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this.orderType + '&shopTypeName=' + this.shopDet.shopTypeName
								})
							} else {
								uni.showToast({
									title: '有' + goodstr1 + '个必选商品，请选择后结算',
									icon: 'none'
								})
								return
							}
						} else {
							uni.showToast({
								title: '有' + goodstr1 + '个必选商品，请选择后结算',
								icon: 'none'
							})
							return
						}
					}
				} else {
					console.log('3333fd', this.shopDet)
					uni.navigateTo({
						url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this.orderType + '&shopTypeName=' + this.shopDet.shopTypeName
					})
				}
			} else {
				uni.showToast({
					title: '请先添加商品',
					icon: 'none'
				})
			}
		},
		TabSelect(e) {
			this.tabCur = e.currentTarget.dataset.id
			this.mainCur = e.currentTarget.dataset.id
			this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
		},
		VerticalMain(e) {
			let that = this
			let tabHeight = 0
			if (this.load) {
				for (let i = 0; i < this.dataList.length; i++) {
					let view = uni.createSelectorQuery().select('#main-' + this.dataList[i].id)
					view.fields(
						{
							size: true
						},
						(data) => {
							this.dataList[i].top = tabHeight
							tabHeight = tabHeight + data.height
							this.dataList[i].bottom = tabHeight
						}
					).exec()
				}
				this.load = false
			}
			let scrollTop = e.detail.scrollTop
			for (let i = 0; i < this.dataList.length; i++) {
				if (scrollTop > this.dataList[i].top && scrollTop < this.dataList[i].bottom) {
					this.verticalNavTop = (this.dataList[i].id - 1) * 50
					this.tabCur = this.dataList[i].id
					return false
				}
			}
		},
		// 打电话
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e
			})
		},
		// 点击调起地图查看位置
		goMap() {
			//查看位置需要传经纬度才能执行
			let that = this
			uni.authorize({
				scope: 'scope.userLocation',
				success(res) {
					uni.openLocation({
						latitude: that.shopDet.shopLat,
						longitude: that.shopDet.shopLng,
						success: function () {}
					})
				},
				fail(err) {}
			})
		},
		getOrderDetail() {
			let data = {
				orderId: this.orderId
			}
			this.$Request.getT('/app/order/selectOrderById', data).then((res) => {
				if (res.code == 0 && res.data) {
					if (res.data.isPay && res.data.isPay == 1) {
						this.orderId = ''
						uni.removeStorageSync('orderId')
					}
				}
			})
		},
		goPindan() {
			if (!this.userId) {
				uni.navigateTo({
					url: '/pages/public/login'
				})
				return
			}

			if (uni.getStorageSync('orderId')) {
				uni.navigateTo({
					url: '/pages/index/shop/pindanDet?shopId=' + this.shopId + '&orderId=' + uni.getStorageSync('orderId')
				})
			} else {
				let data = {
					shopId: this.shopId
				}
				this.$Request.post('/app/order/shareTheBill', data).then((res) => {
					if (res.code == 0) {
						uni.navigateTo({
							url: '/pages/index/shop/pindanDet?shopId=' + this.shopId + '&orderId=' + res.data
						})
					}
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
page {
	background-color: #ffffff;
}

.yhq {
	width: 100%;
	height: 520rpx;
	background-color: #f5f5f5;
	overflow-y: hidden;

	.yhq-box {
		width: 686rpx;
		height: 500rpx;

		// background-color: red;
		.yhq-box-title {
			width: 100%;
			text-align: center;
			font-weight: bold;
		}

		.yhq-box-list {
			width: 100%;
			height: auto;
			height: 460rpx;
			margin-top: 30rpx;

			.yhq-box-list-item {
				width: 100%;
				height: 120rpx;
				border-radius: 24rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
			}

			.yhq-box-list-item-c {
				width: 646rpx;
				height: 100%;
			}
		}
	}
}

.scroll-view_H {
	width: 100%;

	white-space: nowrap;
}

.coupon-item {
	display: inline-block;
	height: 46rpx;
	margin-right: 20rpx;
	border: 1px solid red;
	border-radius: 10rpx;
	padding: 0rpx 10rpx 0rpx 10rpx;
	font-size: 20rpx;
	color: red;
	line-height: 44rpx;

	view {
		display: inline-block;
	}
}

.pinglunImg {
	width: 100%;
	margin-top: 10rpx;
}

.pinglunImg-box {
	width: 100%;

	image {
		// margin-left: 10rpx;
		width: 160upx;
		height: 160upx;
		border-radius: 10rpx;
	}
}

.hintPopul {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
}

.content_ {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	width: 500rpx;
	height: 400rpx;
	border-radius: 20rpx;
	background-color: #fff;
	padding-top: 120rpx;
}

.content_ image {
	position: absolute;
	top: -50rpx;
	left: 0;
	right: 0;
	margin: auto;
}

.hintText {
	font-size: 30rpx;
}

.Btns {
	width: 460rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background: #fcd202;
	font-size: 28rpx;
	border: 2rpx solid #fcd202;
	color: #333333;
	border-radius: 50rpx;
	font-weight: 700;
	margin: auto;
}

.bg1 {
	background: #ffffff;
}

.sticky-tabs {
	z-index: 990;
	position: sticky;
	top: var(--window-top);
	// background-color: #fff;
}

/* // 使用mescroll-uni,则top为0 */
.mescroll-uni,
/deep/.mescroll-uni {
	.sticky-tabs {
		top: 0;
	}
}

.shop {
	// position: relative;
	// z-index: 2;
	// margin-top: -80rpx;
	// left: 0;
	// right: 0;
	display: flex;
	width: 100%;
	margin: auto;
	border-radius: 40rpx;
	box-shadow: 0 0 20rpx #cccccc;
	background: linear-gradient(135deg, #81bdb3 0%, #ecf6ce 100%);
}

.skuBtn {
	padding: 10rpx 30rpx;
	border-radius: 10rpx;
	text-align: center;
	margin: 10rpx 20rpx;
	font-size: 28rpx;
	color: #333333;
	border: 2px solid #f2f2f2;
}

.active {
	background: rgba(129, 189, 179, 0.2) !important;
	border: 2px solid rgba(129, 189, 179, 1) !important;
	opacity: 0.6;
}

.active1 {
	/* width: 82rpx; */
	height: 6rpx;
	background: #568d84;
	position: relative;
	top: -10rpx;
	z-index: 9;
}

.popup {
	/* height: 500rpx; */
	max-height: 500rpx;
	padding: 0 30rpx;
	/* overflow-y: auto; */
}

.tabBtn {
	height: 60rpx;
	line-height: 60rpx;
	color: #999999;
	font-size: 38rpx;

	.title {
		background-color: #fff9ed;
	}
}

.Switch {
	width: 164rpx;
	height: 62rpx;
	color: #ffffff;
	background: #fcd202;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	padding: 2rpx;
}

.Switch > view {
	/* flex: 1; */
	width: 80rpx;
	text-align: center;
	line-height: 62rpx;
	height: 58rpx;
}

.selSwitch {
	color: #333333;
	background: #ffffff;
	border-radius: 30rpx;
}

.hintPopul {
	width: 100%;
	height: 100vh;

	position: absolute;
	top: 0;
	background: rgba(0, 0, 0, 0.4);
}

.content {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	width: 500rpx;
	height: 400rpx;
	border-radius: 20rpx;
	background-color: #fff;
	padding-top: 120rpx;
}

.content image {
	position: absolute;
	top: -50rpx;
	left: 0;
	right: 0;
	margin: auto;
}

.hintText {
	font-size: 30rpx;
}

.VerticalNav.nav {
	width: 200upx;
	height: calc(100% - 120rpx);
	white-space: initial;
	background-color: #fff;
}

.VerticalNav.nav .cu-item {
	width: 100%;
	text-align: center;
	background-color: #fff;
	margin: 0;
	border: none;
	height: 50px;
	line-height: 25px;
	position: relative;
}

.VerticalNav.nav .cu-item.cur {
	background-color: #fff9ed;
	line-height: 25px;
}

.VerticalBox {
	display: flex;
	height: calc(100% - 120rpx);
	background-color: #fff9ed;
}

.VerticalMain {
	height: calc(100% - 120rpx);
	background-color: #fff9ed;
	flex: 1;
}

.detail_describe_text2 {
	font-weight: 500;
	margin-top: 2%;
	color: #999999;
}

.detail_account_bottom {
	margin-top: 20rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	/* margin: 4% 0 3%; */
}

.detail_account_bottom_le {
	width: 47.5%;
	/* margin-right: 5%; */
	border-radius: 44rpx;
	text-align: center;
	line-height: 2.8;
	border: 2rpx solid rgba(129, 189, 179, 1);
	background-color: rgba(129, 189, 179, 0.4);
}

.detail_account_bottom_ri {
	width: 47.5%;
	border-radius: 44rpx;
	text-align: center;
	line-height: 2.8;
	background-color: rgba(129, 189, 179, 1);
}

.food_all {
	position: relative;
}

.text-through {
	text-decoration: line-through;
}

/* 食物 */
.food {
	width: 100%;
	height: calc(100vh - 260rpx);
	overflow: hidden;
	// position: absolute;
	// top: 350rpx;
	background-color: #fff9ed;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
}

.food_address {
	// margin: 3% 3% 0 3%;
	// margin: 3%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// margin-top: 190rpx;
	background-color: #fff9ed;
	// padding-bottom: 3%;
	padding: 3%;
}

.food_address_le {
	width: 75%;
}

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

.food_address_le_top_le {
	width: 40rpx;
	height: 37rpx;
}

.food_address_le_top_le image {
	width: 40rpx;
	height: 37rpx;
}

.food_address_le_top_ce {
	line-height: 1.6;
	font-size: 38rpx;
	font-weight: 600;
	color: #333333;
}

.food_address_le_top_ce_ri {
	width: 14rpx;
	/* margin: 1% 0 0 2%; */
	height: 24rpx;
	margin-left: 2%;
}

.food_address_le_top_ce_ri image {
	width: 14rpx;
	height: 24rpx;
}

.food_address_text {
	font-weight: 500;
	font-size: 24rpx;
	color: #999999;
}

.food_address_ri {
	width: 24%;
	height: 55rpx;
	display: flex;
	padding: 0.5% 1%;
	background-color: #fcd202;
	border-radius: 31rpx;
	color: #ffffff;
}

.food_address_ri_sty {
	flex: 1;
	text-align: center;
	padding-top: 4%;
	font-size: 24rpx;
}

.food_address_ri_sty_active {
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 31rpx;
	color: #333333;
	text-align: center;
}

/* 结算 */
.settlement {
	width: 94%;
	line-height: 3.4;
	position: fixed;
	bottom: 10rpx;
	left: 3%;
	display: flex;
	justify-content: space-between;
}

.settlement1 {
	width: 94%;
	background-color: rgba(129, 189, 179, 0.4);
	line-height: 2.8;
	border-radius: 49rpx;
	position: relative;

	/* bottom: 10rpx; */
	left: 0;
	right: 0;
	/* left: 3%; */
	display: flex;
	justify-content: space-between;
	margin: 20rpx auto;
}

.settlement_le {
	width: 552rpx;
	padding-left: 18%;
	color: #000;
	font-size: 30rpx;
	background-image: url(@/static/images/index/1.png);
	background-size: 100% 100%;
}

.settlement_le text {
	font-size: 22rpx;
}

.settlement_ri {
	margin-left: -8rpx;
	width: 180rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
	text-align: center;
	background-image: url(@/static/images/index/2.png);
	background-size: 100% 100%;
}

.settlement_ri1 {
	margin-left: -8rpx;
	width: 180rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
	text-align: center;
	background-image: url(@/static/images/index/2.png);
	background-size: 100% 100%;
}

.settlement_img {
	width: 91rpx;
	height: 96rpx;
	position: absolute;
	// bottom: 30rpx;
	left: 5%;
}

.settlement_img image {
	margin-top: 10rpx;
	width: 74rpx;
	height: 81rpx;
}

.settlement_hot {
	width: 35rpx;
	height: 35rpx;
	line-height: 35rpx;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: 5rpx;
	right: 0;
	background-color: #ff130a;
	color: #ffffff;
	font-size: 20rpx;
	font-weight: bold;
	color: #ffffff;
}

.select_all {
	width: 100%;
	position: relative;
}

/* 餐厅 */
.select {
	color: #000000;
	font-weight: bold;
	background-color: #fff;
	z-index: 10;
}

.select_line {
	width: 15%;
	height: 6rpx;
	margin: 0 auto 4%;
	background: #e6e6e6;
	border-radius: 4rpx;
}

.select_search {
	width: 100%;
	margin: 2% 0;
	display: flex;
	align-items: center;
}

.select_search_le {
	/* width: 10%; */
	font-size: 30rpx;
	line-height: 2.5;
	margin-right: 1%;
}

.select_search_ce {
	/* width: 5%; */
	/* margin-top: 1%; */
	margin-right: 20rpx;
	margin-left: 6rpx;
	/* margin: 0 20rpx; */
	width: 20rpx;
	height: 10rpx;
}

.select_search_ri {
	/* width: 84%; */
	height: 72rpx;
	flex: 1;
	display: flex;
}

.select_search_ri input {
	flex: 1;
	/* width: 100%; */
	height: 72rpx;
	background: #f5f5f5;
	color: #999999;
	border-radius: 36rpx;
	text-decoration: 42rpx;
	text-align: center;
}

/* 附近 */
.nearby {
	width: 100%;
	position: relative;
}

.nearby_text {
	width: 18%;
	font-size: 30rpx;
	font-weight: 800;
	color: #333333;
	text-align: center;
	border-bottom: 16rpx solid #fcd202;
	/* line-height: 20rpx; */
	margin-top: 10rpx;
}

.nearby_address_active {
	border: 2rpx solid #fcd202;
	width: 100%;
	padding: 3%;
	margin-top: 3%;
	border-radius: 10upx;
	display: flex;
}

.nearby_address {
	width: 100%;
	padding: 3%;
	margin-top: 3%;
	border-radius: 10upx;
	display: flex;
}

.nearby_address_le {
	flex: 1;
}

.nearby_address_ri {
	line-height: 2.5;
	text-align: right;
	/* flex: 1; */
}

.nearby_text2 {
	/* line-height: 1.5; */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nearby_text2_ {
	font-size: 30rpx;
	font-weight: 800;
	color: #333333;
}

.nearby_text3 {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	margin-top: 2%;
}

/* 添加地址 */
.goorder {
	width: 100%;
	padding: 2% 3%;
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1rpx solid #999999;
}

.goorder_but {
	width: 100%;
	line-height: 2.5;
	text-align: center;
	background: #fcd202;
	border-radius: 36rpx;
}

.lable {
	border: 1rpx solid #ffe6d9;
	height: 40rpx;
	padding: 0 14rpx;
	background: #ffe6d9;
	border-radius: 4rpx;
	font-weight: 500;
	color: #fd6416;
	font-size: 20rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
//店铺公告弹框
.gong_img {
	margin: 40rpx 0 0 40rpx;
	width: 46px;
	height: 46px;
}
.gong_name {
	position: absolute;
	margin: 41rpx 0 0 163rpx;
	font-size: 28rpx;
	font-weight: 700;
	color: rgba(0, 0, 0, 1);
}
.gong_pei {
	position: absolute;
	margin: 87rpx 0 0 163rpx;
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
}
.gong_line {
	position: absolute;
	margin: 161rpx 0 0 1rpx;
	width: 635.5rpx;
	border: 1rpx solid rgba(230, 230, 230, 1);
}
.gong_huo {
	width: 151rpx;
	height: 34rpx;
	border-radius: 5rpx;
	background: rgba(230, 74, 69, 1);
	font-size: 16rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: rgba(255, 255, 255, 1);
	text-align: center;
}

//下方店铺详情
.shop_xiang {
	width: 100%;
	margin-top: 8px;
}
.shopDizhi {
	// height: 80rpx;
	font-size: 34rpx;
	color: #000;
	line-height: 80rpx;
}
.shopLine {
	width: 100%;
	height: 1rpx;
	background-color: rgba(242, 242, 242, 1);
	// border: 1rpx solid rgba(242,242,242,0.5);
}
.shop_zheng {
	width: 100%;
	margin-top: 8px;
	height: 100%;
	overflow: hidden;
}
.image-container {
	width: 350px;
	overflow-x: auto;
	padding: 10rpx 0 10rpx 0;
	white-space: nowrap;
	// transition: transform 0.3s; /* 可以添加平滑滑动的效果 */
}

.image {
	display: inline-block;
	width: 180rpx; /* 三张图片平分宽度 */
	height: 135rpx;
}
</style>