moxuan_takeaway_user/pages/index/shop/index.vue

<template>
	<view v-if="XCXIsSelect=='是'">
		<view>
			<view class="food_all">
				<!-- banner -->
				<swiper class="swiper" :autoplay="true" interval="2000" duration="500" :circular="true"
					style="width: 100%;height: 300rpx;">
					<swiper-item v-for="(item,index) in shopDet.shopBanner" :key='index'>
						<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
					</swiper-item>
				</swiper>
				<view class="shop padding">
					<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 text-gray">销量 {{shopDet.shopSales?shopDet.shopSales:0}}
								</view>
								<view class="margin-left-xs text-gray" v-if="shopDet.errandTime">
									约{{shopDet.errandTime}}分钟
								</view>
								<view class="margin-left-xs text-gray" v-if="shopDet.minimumDelivery">
									{{shopDet.minimumDelivery}}元起送
								</view>
							</view>
							
							<view class="flex align-center margin-top-xs">
								<!-- <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>
						<view>
							<image :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 class="lable flex justify-center align-center"
								style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;"
								>{{ite.activityName}}
							</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>
							<!-- <view class="flex align-center" style="width: 100%;height: 100%;">
								
							</view> -->

						</scroll-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" style="height:calc(100vh - 590upx)">
							<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
							style="height:calc(100vh - 590rpx)" :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=""
										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">
											<view class="text-sm text-red">
												¥ <text class="text-lg">{{ite.goodsMoney}}</text>
											</view>
											<image @click.stop="selSku(ite)" src="../../../static/images/index/add.png"
												mode="" style="width: 40rpx;height: 40rpx"></image>
										</view>
									</view>
								</view>
								<view style="height: 30px;"></view>
							</view>
						</scroll-view>
						<empty v-if="!dataList.length"></empty>
					</view>
					<view class="" 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="#FCD202"
											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>
						<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=""></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>
						<empty v-if="!EvaluateList.length"></empty>
					</view>
					<view class="margin-lr padding-bottom" v-if="current==3">
						<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()">去结算
					</view>
					<view v-else class="settlement_ri1">去结算</view>
				</view>
				<!-- 购物车弹窗 -->
				<u-popup v-model="popupShow" mode="bottom" border-radius="20">
					<view class="padding">
						<view class="flex justify-between align-center margin-bottom-sm">
							<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 align-center margin-tb-sm">
									<image :src="item.goodsPicture[0]"
										style="width: 96rpx;height: 96rpx;border-radius: 10rpx;">
									</image>
									<view class="margin-left-sm">
										<view>{{item.goodsName}}</view>
										<view v-if="item.skuMessage">{{item.skuMessage}}</view>
									</view>
								</view>
								<view class="flex justify-between align-center">
									<view class="text-bold text-sm">¥<text class="text-lg">{{item.goodsPrice}}</text>
									</view>
									<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>
						</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()">去结算</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 text-black"><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:'../../../static/logo.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'
	export default {
		components: {
			empty
		},
		data() {
			return {
				maskCustomStyle: {
					background: 'rgba(0,0,0,0.1)'
				},
				hdStyle: {
					background: '#F5F5F5',
				},
				customStyle: {
					color: '#333333',
					background: '#FCD202',
					marginRight: '20rpx',
					border: 0
				},
				customStyle1: {
					color: '#333333',
					background: '#F2F2F2',
					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:[],//活动
			}
		},
		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: '加载中'
			})

			// #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() {
			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: {
			//点击店铺公告弹框
			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 => {
					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 => {
					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(',')
						}
						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.checkStateList = []
				this.checkString = ''
				this.attrList = [];
				this.skuId = '';
				this.skuMessage = '';
				this.$Request.get("/app/goods/selectGoodsById?goodsId=" + item.goodsId).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(',')
						}
						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;
						}
					}
				});
				for (var i = 0; i < this.skuList.length; i++) {
					let d = this.skuList[i];
					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
										})
								
									} 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
							})
					
						} else {
							this.$queue.showToast(res.msg);
						}
					})
				}
			},
			// 加入购物车
			orderSel(e) {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				if (this.attrList.length) {
					if (this.checkString == '' || !this.CheckattrValue) {
						this.$queue.showToast('请选择正确的商品规格');
						return;
					}
				}


				// if (this.echoSku.length) {
				// 	this.echoSkuList.forEach(res => {
				// 		if (res.skuMessage == this.skuMessage) {
				// 			this.isEchoSku = res
				// 		}
				// 	})
				// 	if (JSON.stringify(this.isEchoSku) != "{}") {
				// 		let data = {
				// 			orderGoodsId: this.isEchoSku.id,
				// 			type: 1,
				// 			num: this.value,
				// 			shopId: this.shopId,
				// 		}

				// 		this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
				// 			if (res.code == 0) {
				// 				// setTimeout(function() {
				// 			   this.$queue.showToast('添加成功');


				// 				this.skuShow = false
				// 				this.getOrderList()
				// 				// },1000)
				// 			} else {
				// 				this.$queue.showToast(res.msg);
				// 			}
				// 		});
				// 		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'
				}
				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 => {
					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() {
				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]

						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() {
				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
									})
								} else {
									uni.showToast({
										title: "有" + goodstr1 + "个必选商品，请选择后结算",
										icon: "none"
									})
									return
								}

							} else {
								uni.showToast({
									title: "有" + goodstr1 + "个必选商品，请选择后结算",
									icon: "none"
								})
								return
							}
						}
					} else {
						uni.navigateTo({
							url: '/pages/index/shop/confirmOrder?shopId=' + this.shopId + '&orderType=' + this
								.orderType
						})
					}
				} 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() {
				this.$Request.getT('/app/order/selectOrderById?orderId=' + this.orderId).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
							})
						}
					});
				}



			}
		},
		onReachBottom: function() {
			if (this.current == 2) {
				this.evaluatePage = this.evaluatePage + 1;
				this.getEvaluateList()
			}
		},
	}
</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, .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: absolute;
		top: 80rpx;
		left: 0;
		right: 0;
		width: 686rpx;
		margin: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #CCCCCC;
	}

	.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(252, 210, 2, 0.2) !important;
		border: 2px solid #FCD202 !important;
		opacity: 0.6;
	}

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

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

	.tabBtn {
		/* background-color: #f6f6fa; */
		height: 60rpx;
		line-height: 60rpx;
		color: #999999;
		font-size: 38rpx;
	}

	.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, .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;
		white-space: initial;
	}

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

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


	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		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 #FCD202;
	}

	.detail_account_bottom_ri {
		width: 47.5%;
		border-radius: 44rpx;
		text-align: center;
		line-height: 2.8;
		background-color: #FCD202;
	}

	.food_all {
		position: relative;
	}

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

	/* 食物 */
	.food {
		width: 100%;
		overflow: hidden;
		// position: absolute;
		// top: 350rpx;
		// background-color: #FFFFFF;
		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: #FFFFFF;
		// 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%;
		background-color: #000000;
		line-height: 3.4;
		border-radius: 49rpx;
		position: fixed;
		bottom: 10rpx;
		left: 3%;
		display: flex;
		justify-content: space-between;
	}

	.settlement1 {
		width: 94%;
		background-color: #000000;
		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: 48%;
		padding-left: 18%;
		color: #FFFFFF;
		font-size: 30rpx;
	}

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

	.settlement_ri {
		width: 35%;
		background-color: #FCD202;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		border-top-right-radius: 49rpx;
		border-bottom-right-radius: 49rpx;
	}

	.settlement_ri1 {
		width: 35%;
		background-color: #333333;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		text-align: center;
		border-top-right-radius: 49rpx;
		border-bottom-right-radius: 49rpx;
	}

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

	.settlement_img image {
		width: 74rpx;
		height: 81rpx;
	}

	.settlement_hot {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		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;
	}
</style>