<template>
	<view v-if="shop" class="hm-wrap">
		<view class="hm-header-xian"></view>
		<!-- 门店信息展示 -->
		<view class="head">
			<!-- 点餐模式-->
			<view class="food-mode">
				<view v-if="table_id">
					<view class="table">
						{{tableName}}
						<view @click="del_table" class="del">
							<u-icon name="close" color="#999" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view v-else>
					<u-subsection @change="setFoodMode" :list="shop.food_mode.tab" :current="foodModeIndex"
						bgColor="#f3f4f6" inactiveColor="#909193" activeColor="#303133" mode="button"
						keyName="text"></u-subsection>
				</view>
			</view>
			<!-- 门店名称 -->
			<view class="shop-name">
				<view class="hm-dis-block-inline hm-m-r-10">
					<u-icon name="star" size="20" color="#303133" bold></u-icon>
				</view>
				{{shop.shop_name}}
			</view>
			<!-- 距店距离 -->
			<view class="distance">
				距离您{{shop.location}}
				<view class="hm-dis-block-inline hm-m-l-20" v-if="applet.shop_mode.value == 20"
					@click="goTo('shop/list')">
					切换门店
					<view class="hm-dis-block-inline">
						<u-icon name="arrow-right" size="15" color="#999" bold></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部导航条 -->
		<view class="hm-p-lr-20 hm-bg-f hm-border-b">
			<u-tabs :list="menu" :current="cut" @click="menuTab" :itemStyle="{height:'35px'}" lineColor="#ff9900"
				:activeStyle="{color:'#ff9900'}"></u-tabs>
		</view>
		<!-- 点单界面 -->
		<!-- #ifdef MP-WEIXIN || H5 -->
		<block v-if="cut==0">
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view v-if="cut==0">
		<!-- #endif -->
			<view v-if="category.length" class="menu-wrap">
				<!-- 左侧菜单 -->
				<scroll-view scroll-y scroll-with-animation class="tab-view menu-scroll-view" :scroll-top="scrollTop"
					:scroll-into-view="itemId">
					<view v-for="(item,index) in category" :key="index" class="tab-item"
						:class="[current == index ? 'tab-item-active' : '']" @tap.stop="swichMenu(index)">
						<text class="hm-line-1">{{item.name}}</text>
					</view>
					<view v-if="order_total_num > 0 && shop.status.value == 1" class="hm-h-100"></view>
				</scroll-view>
				<!-- 右侧商品列表 -->
				<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
					@scroll="rightScroll">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in category" :key="index">
						<view class="item-title">{{item.name}}</view>
						<view class="item-goods" v-for="(item1, index1) in item.goods" :key="index1">
							<image @click="setGoodsDetailShow(index,index1)" :src="item1.image[0].url"></image>
							<div v-if="applet.other.is_stock == 1 && item1.stock < 1" class="tag">
								售罄
							</div>
							<div v-else-if="item1.goods_status.value == 20" class="tag">
								{{item1.goods_status.text}}
							</div>
							<view class="title hm-line-1">{{item1.goods_name}}</view>
							<view class="selling hm-line-1">
								<text v-if="item1.selling_point">{{item1.selling_point}}</text>
							</view>
							<!-- 选购工具 -->
							<view v-if="item1.goods_status.value == 10" class="cart-but">
								<view
									v-if="applet.other.is_stock == 0 || (applet.other.is_stock == 1 && item1.stock > 1)">
									<view v-if="item1.spec_type == 10 || item1.total_num > 0">
										<view class="but add" @click="addCount(index,index1)">
											<view class="icon">
												<u-icon name="plus" color="#fff" bold></u-icon>
											</view>
										</view>
										<view v-if="item1.total_num>0" class="total-num">
										<u--input @focus="cart_focus(index,index1)" @input="cart_input" :value="item1.total_num" inputAlign="center" border="none" type="number"></u--input>
										</view>
										<view class="but minus" v-if="item1.total_num>0"
											@click="minusCount(index,index1)">
											<view class="icon">
												<u-icon name="minus" color="#FF9900"></u-icon>
											</view>
										</view>
									</view>
									<view v-else>
										<view class="spec" @click="addCount(index,index1)">选择</view>
									</view>
								</view>
							</view>
							<view class="sold">
								<text v-if="item1.start_sale>1" class="hm-col-warning">{{item1.start_sale}}个起售</text> 月售{{item1.month_sales}}
							</view>
							<view class="price">￥{{item1.spec[0].goods_price}}</view>
						</view>
					</view>
					<!-- 技术支持 -->
					<view class="hm">
						{{applet.copyright}} <text class="v">V{{applet.version}}</text>
					</view>
					<view v-if="order_total_num > 0 && shop.status.value == 1" class="hm-h-100"></view>
				</scroll-view>
			</view>
			<view v-else class="hm">
				<img :src="applet.domain + '/addons/food/img/empty/data.png'" />
				<view class="text">暂无数据</view>
				<!-- 技术支持 -->
				<view class="hm">
					{{applet.copyright}} <text class="v">V{{applet.version}}</text>
				</view>
			</view>
			<!-- 门店休息提醒 -->
			<view v-if="shop.status.value == 0" class="shop-rest" @click="shopRest = true">
				当前门店已经休息
				<view class="icon">
					<u-icon name="arrow-up" color="#fff"></u-icon>
				</view>
			</view>
			<!-- 门店休息弹窗 -->
			<u-popup :show="shopRest" round="10" @close="shopRest = false" closeable>
				<view class="hm-p-20">
					<view class="hm-col-tips hm-border-b hm-p-b-20">当前门店已休息</view>
					<view class="hm-p-t-20 hm-text-center">
						<view class="hm-dis-block-inline">
							<u-button @click="shopRestTpl" size="small" text="营业提醒" plain></u-button>
						</view>
					</view>
					<view class="hm-font-28 hm-col-tips hm-p-20 hm-text-center">门店营业时间：周一至周日 {{shop.shop_hours}}</view>
				</view>
			</u-popup>
			<!-- 门店选择 -->
			<u-popup :show="chooseShop" round="10" @close="chooseShop = false" closeable safeAreaInsetBottom>
				<view class="hm-p-20">
					<view class="hm-p-b-20 hm-border-b">附近门店</view>
					<view v-for="(item, index) in shopList" :key="index"
						:class="index == shopIndex?'choose-shop-active':'choose-shop'">
						<view class="choose-shop-checked">
							<radio-group @change="shopIndex = index">
								<label>
									<radio :checked="index == shopIndex" color="#ff9900" :value="toString(index)">
									</radio>
								</label>
							</radio-group>
						</view>
						<view class="hm-font-30 hm-col-content">
							{{item.shop_name}}
							<text class="hm-m-l-10 hm-font-22">{{item.location}}</text>
							<view class="hm-dis-block-inline hm-m-l-10">
								<u-tag :text="item.status.text" :type="item.status.value?'success':'error'" size="mini"
									plain></u-tag>
							</view>
						</view>
						<view class="hm-line-1 hm-font-26 hm-col-tips">
							{{item.city + item.district + item.address}}
						</view>
					</view>
					<view class="hm-m-t-50 hm-text-center">
						<view class="choose-shop-but">
							<u-button @click="goTo('shop/list')" type="warning" color="#ff9900" text="切换门店" plain>
							</u-button>
						</view>
						<view class="choose-shop-but hm-m-l-50">
							<u-button @click="setChooseShop" type="warning" text="确认选择"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 商品详情 -->
			<u-popup :show="goods_detail_show" @close="setGoodsDetailClose" mode="center" round="10" :closeable="true">
				<view v-if="goods_detail" class="goods-detail">
					<view class="title">
						{{goods_detail.goods_name}}
						<!-- #ifndef H5 || APP-PLUS -->
						<view class="share">
							<button class="hm-btn-normal" open-type="share">
								<u-icon name="share-square" color="#999" size="25"></u-icon>
							</button>
						</view>
						<!-- #endif -->
					</view>
					<view class="goods">
						<image :src="goods_detail.image[0].url" />
						<view class="hm-p-t-10">
							<text class="hm-col-error hm-font-b">
								￥{{goods_detail.spec[0].goods_price}}
							</text>
							<text class="hm-font-zhx hm-col-tips hm-m-l-20" v-if="goods_detail.spec[0].line_price>0">
								￥{{goods_detail.spec[0].line_price}}
							</text>
							<text class="hm-col-tips hm-fr">
								月售 {{goods_detail.month_sales}}
							</text>
						</view>
					</view>
					<view class="hm-p-t-20">
						<view v-if="shop.status.value" class="cart-but">
							<view v-if="goods_detail.spec_type == 10 || goods_detail.total_num > 0">
								<view class="but add" @click="addCount(goods_index,goods_index1)">
									<view class="icon">
										<u-icon name="plus" color="#fff" bold></u-icon>
									</view>
								</view>
								<view v-if="goods_detail.total_num>0" class="total-num">
								<u--input @focus="cart_focus(goods_index,goods_index1)" @input="cart_input" :value="goods_detail.total_num" inputAlign="center" border="none" type="number"></u--input>
								</view>
								<view class="but minus" v-if="goods_detail.total_num>0"
									@click="minusCount(goods_index,goods_index1)">
									<view class="icon">
										<u-icon name="minus" color="#FF9900"></u-icon>
									</view>
								</view>
							</view>
							<view v-else>
								<view class="spec" @click="addCount(goods_index,goods_index1)">选择</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 多规格选择框 -->
			<u-popup :show="show" round="10" zIndex='10100' @close="show = false" closeable>
				<view v-if="goods" class="spec-box">
					<view class="goods">
						<image :src="goods_img"></image>
						<view class="goods-name">{{goods.goods_name}}</view>
						<view class="spec-name">{{spec_name}}</view>
						<view class="hm-col-error">
							￥{{goods_price}}
							<text class="hm-font-zhx hm-col-tips hm-m-l-10" v-if="line_price>0">￥{{line_price}}</text>
						</view>
					</view>
					<view v-for="(attr, attr_idx) in specData.spec_attr" :key="attr_idx">
						<view class="title" :data-id="attr.group_id">{{attr.group_name}}</view>
						<view class="hm-cf hm-p-b-20">
							<view v-for="(item, item_idx) in attr.spec_items" :key="item_idx" class="but"
								:class="item.checked?'but-ok':'but-no'" @click="specTap(attr_idx,item_idx)">
								{{item.spec_value}}
							</view>
						</view>
					</view>
					<view class="hm-p-b-20">
						<view class="title">购买数量</view>
						<view class="selectNumber">
							<view @click="down"
								:class="'default left  ' + (goods.spec[spec_index].sell_num>=1?'':' default-active')">-
							</view>
							<view class="num">{{goods.spec[spec_index].sell_num}}</view>
							<view @click="up" class="default right">+</view>
							<view v-if="applet.other.is_stock==1 && stock_num < 1"
								class="hm-dis-block-inline hm-m-l-10">
								<u-badge value="库存不足" shape="horn"></u-badge>
							</view>
						</view>
					</view>
					<view class="hm-p-lr-b25 hm-m-t-20">
						<u-button @click="show = false;" type="warning" text="加入购物车"></u-button>
					</view>
				</view>
			</u-popup>
			<!-- 底部购物车工具栏 -->
			<view v-if="order_total_num > 0 && shop.status.value == 1">
				<!-- #ifdef H5 -->
				<view class="hm-footer-fixed-h5">
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
				<view class="hm-footer-fixed">
				<!-- #endif -->
					<view class="bottom-cart">
						<view class="cart" @click="cart_show = true">
							<view class="icon">
								<u-icon name="shopping-cart-fill" color="#FF9900" size="40"></u-icon>
							</view>
							<view class="count">{{order_total_num}}</view>
						</view>
						<view class="total">
							<view class="text">￥{{order_total_price}}</view>
							<view class="min-price" v-if="foodMode == 10">支持扫码与排号点单</view>
							<view class="min-price" v-if="foodMode == 20">
								<text v-if="min_price > 0">外卖起送差{{min_price}}元</text>
								<text v-else>预计30分钟内送达</text>
							</view>
							<view class="min-price" v-if="foodMode == 30">支持预约下单</view>
						</view>
						<view class="but">
							<u-button @click="gotoCart()" type="warning"
								:customStyle="{height:'100rpx',width:'200rpx'}"
								:disabled="foodMode == 20 && min_price != 0" text="确认订单"></u-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部购物车列表 -->
			<u-popup :show="cart_show" round="10" @close="cart_show = false" closeable>
				<view class="cart-list">
					<view class="title">
						购物车列表
						<view class="cler">
							<u-button size="small" @click="cartCler()" text="清空" icon="trash"></u-button>
						</view>
					</view>
					<view class="item" v-for="(item, index) in goodslist" :key="index">
						<image v-if="item.spec_type == 10" :src="item.image[0].url"></image>
						<image v-if="item.spec_type == 20"
							:src="item.goods_sku.image.url ?item.goods_sku.image.url:item.image[0].url"></image>
						<view class="cart-but">
							<view class="but add" @click="cartUp(index)">
								<view class="icon">
									<u-icon name="plus" color="#fff" bold></u-icon>
								</view>
							</view>
							<view class="total-num">{{item.total_num}}</view>
							<view class="but minus" @click="cartDown(index)">
								<view class="icon">
									<u-icon name="minus" color="#FF9900"></u-icon>
								</view>
							</view>
						</view>
						<view class="goods-name">
							{{item.goods_name}}
							<view class="goods-attr">{{item.goods_sku.goods_attr}}</view>
						</view>
						<view class="goods-price">
							￥{{item.goods_sku.goods_price}}
							<text class="hm-font-zhx hm-col-tips hm-m-l-10"
								v-if="item.goods_sku.line_price>0">￥{{item.goods_sku.line_price}}</text>
						</view>
					</view>
				</view>
			</u-popup>
		<!-- #ifdef MP-WEIXIN || H5 -->
		</block>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		</view>
		<!-- #endif -->
		<!-- 评价界面 -->
		<!-- #ifdef MP-WEIXIN || H5 -->
		<block v-if="cut==1">
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view v-if="cut==1">
		<!-- #endif -->
			<!-- 评分展示 -->
			<view class="score-detail hm-m-t-20">
				<view class="left">
					<view class="score">{{score.all}}</view>
					<view class="hm-font-24">商家评分</view>
				</view>
				<view class="right">
					<view class="hm-p-tb-10">
						口味
						<view class="hm-dis-block-inline">
							<u-rate :value="score.flavor" activeColor="#ff9900" inactiveColor="#999" readonly
								allowHalf></u-rate>
						</view>
					</view>
					<view class="hm-p-tb-10">
						卫生
						<view class="hm-dis-block-inline">
							<u-rate :value="score.ambient" activeColor="#ff9900" inactiveColor="#999" readonly
								allowHalf></u-rate>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="hm-p-tb-10">
						服务
						<view class="hm-dis-block-inline">
							<u-rate :value="score.serve" activeColor="#ff9900" inactiveColor="#999" readonly
								allowHalf></u-rate>
						</view>
					</view>
					<view class="hm-p-tb-10">
						速度
						<view class="hm-dis-block-inline">
							<u-rate :value="score.speed" activeColor="#ff9900" inactiveColor="#999" readonly
								allowHalf></u-rate>
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="hm-w-h" @scrolltolower="cmtReachBottom">
				<!-- 评分列表 -->
				<view v-if="(cmt_list.data).length">
					<view class="hm-m-t-20">
						<view v-for="(item, index) in cmt_list.data" :key="index">
							<view v-if="item.is_show.value == 1" class="score-list hm-border-b">
								<view class="left">
									<image :src="item.user.avatar.url"></image>
								</view>
								<view class="right">
									<view class="hm-font-30 hm-p-l-10">
										{{item.user.nickname}}
										<text
											class="hm-fr hm-col-tips hm-font-22">{{$u.timeFormat(item.create_time)}}</text>
									</view>
									<view class="hm-p-b-10">
										<u-rate :value="item.total" activeColor="#ff9900" inactiveColor="#909399"
											readonly allowHalf></u-rate>
									</view>
									<view class="hm-p-tb-20 hm-font-28 hm-border-t">{{item.content}}</view>
									<view v-if="item.reply" class="hm-bg hm-p-20 hm-br-8 hm-col-tips hm-font-26">
										{{item.reply}}
									</view>
								</view>
							</view>
						</view>
						<view class="hm-p-20">
							<u-loadmore :status="loadStatus" bgColor="#f3f4f6"></u-loadmore>
						</view>
					</view>
				</view>
				<view v-else class="hm">
					<img :src="applet.domain + '/addons/food/img/empty/comment.png'" />
					<view class="text">暂无评论记录</view>
				</view>
				<view class="hm">
					{{applet.copyright}} <text class="v">V{{applet.version}}</text>
				</view>
			</scroll-view>
		<!-- #ifdef MP-WEIXIN || H5 -->
		</block>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		</view>
		<!-- #endif -->
		<!-- 门店详情 -->
		<view v-if="cut==2">
			<view class="hm-p-lr-20 hm-m-t-20">
				<view class="menu hm-col-tips hm-font-26">
					<view class="navbar-list" @click="openLocation()">
						<image src="/static/user/address.png"></image>
						{{shop.city + shop.district + shop.address}}
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="navbar-list" @click="phone(shop.phone)">
						<image src="/static/user/phone.png"></image>
						{{shop.phone}}
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="navbar-list">
						<image src="/static/user/growup.png"></image>
						营业时间：{{shop.shop_hours}}
					</view>
					<view class="navbar-list" @click="shopRestTpl()">
						<image src="/static/user/equity.png"></image>
						工商营业执照
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="navbar-list" @click="shopRestTpl()">
						<image src="/static/user/cas.png"></image>
						食品经营许可证
						<view class="arrow-right">
							<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
		</view>
		<u-modal :show="scanCodeShow" title="友情提示" content="当前为扫码模式，扫桌码后才可以下单" confirmText="扫一扫" confirmColor="#19be6b"
			@confirm="scanCode" @cancel="scanCodeShow = false" showCancelButton></u-modal>
		<u-popup :show="authBox" zIndex="900000" mode="center" round="10">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b">权限设置</view>
				<view class="hm-p-20 hm-col-tips hm-text-center">
					你未开启获取位置权限！
				</view>
				<view class="hm-p-lr-b25">
					<u-button type="success" openType="openSetting" text="去开启"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	const App = getApp();
	export default {
		data() {
			return {
				scanCodeShow: false, //扫一扫提示
				authBox: false, //授权弹窗
				applet: {
					shop_mode: {
						value: 10
					}
				},
				shop_id:'',//门店参数
				table_id: '', //扫码参数
				tableName: '', //餐桌名称
				foodMode: 10, //10=堂食，20=外卖，30=外带
				foodModeIndex: 0, //点单模式 - 默认选项
				menu: [{
					"name": "点单"
				}, {
					"name": "评价"
				}, {
					"name": "详情"
				}],
				cut: 0,
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				itemId: '', // 栏目右边scroll-view用于滚动的id
				arr: [],
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度

				//购物车数据
				goodslist: {}, //购物车商品列表
				category: {}, //分类+商品列表
				order_total_num: 0, //购物车商品总数
				order_total_price: 0, //购物车商品总价
				min_price: 0, //起送价
				cart_show: false,

				//多规格商品数据
				show: false, //是否显示
				goods_spec_arr: [],
				goods: null, //商品详情
				specData: {}, //商品规格
				goods_sku_id: '',
				goods_price: '',
				line_price: '',
				spec_index: 0,
				spec_name: '',
				goods_img: '',
				stock_num: 0,

				//门店数据
				chooseShop: false, //选择门店
				shopRest: false, //门店歇业提醒
				shopList: {}, //门店列表
				shopIndex: 0, //门店列表默认选项
				shop: null,
				score: {}, //门店评分
				cmt_list: {
					data: [] //评论列表
				},
				page: 1,
				loadStatus: 'loadmore',

				//商品详情数据
				goods_detail: null, //商品详情
				goods_detail_show: false, //是否显示商品详情
				goods_index: 0, //多规格商品在列表中所在的分类索引
				goods_index1: 0, //多规格商品在列表中所在的商品索引
				
				index:0,
				index1:0,
			}
		},
		async onLoad(options) {
			let _this = this,
			scene = decodeURIComponent(options.scene),
			q = decodeURIComponent(options.q);
			//#ifndef H5
			await _this.$onLaunched;
			//#endif
			_this.applet = App.getApplet();
			//进入方式
			if (q != 'undefined' && q != '') {
				_this.getQrcode(q);//普通二维码进入
			}else if (scene != undefined && scene != '') {
				_this.getQrcode(scene,false);//小程序码进入
			}else{
				_this.shop_id = uni.getStorageSync('shop_id') || '';
				_this.table_id = uni.getStorageSync('table_id') || '';
				uni.removeStorageSync('shop_id');
				uni.removeStorageSync('table_id');
				_this.showPage();
			}
		},
		onShow() {
			let _this = this;
			// #ifdef MP-WEIXIN
			let systemSetting = uni.getSystemSetting();
			if (!systemSetting.locationEnabled) {
				App.showError('手机定位模块未开启');
				return false;
			}
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					_this.showPage();
				},
				fail() {
					_this.authBox = true;
				}
			})
			// #endif
			// #ifndef MP-WEIXIN
			_this.showPage();
			// #endif
		},
		onReady() {
			this.getMenuItemTop()
		},
		onShareTimeline(res) {
			//分享到朋友圈，仅微信小程序可用
			if (res.from === 'button') { // 来自页面内分享按钮
				//console.log(res.target)
			}
			return {
				title: _this.shop.shop_name,
				path: '/pages/shop/index'
			}
		},
		methods: {
			
			/**
			 * 小程序处理普通二维码数据
			 * is_q 是否是普通二维码进入
			 */
			getQrcode: function(scene,is_q=true) {
				let _this = this;
				if(is_q){
					let q = scene.split('/food/' + App.globalData.applet_id + '/');
					scene = q[1];
				}
				scene = scene.split("-");
				// #ifdef MP-WEIXIN || MP-ALIPAY
				//如果是线下发的优惠券码
				if (scene[0] == 'coupon') {
					uni.showModal({
						title: "提示",
						content: "是否要领取优惠券？",
						success: function(o) {
							if (o.confirm) {
								_this._get('market.coupon/offline', {
									id: scene[1]
								}, function(result) {
									App.showSuccess(result.msg, function() {
										_this.goTo('user/index');
									});
								}, false, false);
								return true;
							}
						}
					});
				}
				//如果是小程序码
				if (scene[0] == 'applet') {
					_this.goTo('index/index');
					return true;
				}
				//如果是自定义二维码码
				if (scene[0] == 'sn') {
					_this.scanQrcode(scene[1]);//识别预生成二维码
					return true;
				}
				// #endif
				if(scene[0] == 'shop'){
					_this.shop_id = scene[1];
					_this.showPage();
					return true;
				}
				if(scene[0] == 'table'){
					_this.shop_id = scene[1];
					_this.table_id = scene[2];
					_this.showPage();
					return true;
				}
				if(scene[0] == 'paybill'){
					_this.goTo('order/pay_bill?shop_id='+scene[1]);
					return true;
				}
				if(scene[0] == 'wifi'){
					_this.goTo('shop/wifi?shop_id='+scene[1]);
					return true;
				}
			},
			/**
			 * 识别预生成普通二维码
			 */
			scanQrcode:function(id){
				let _this = this,
					q = '';
				_this._get('qrcode/detail', {
					id: id
				}, function(result) {
					let detail = result.data.detail;
					//小程序码
					if (detail.type.value == 10) {
						q = 'applet-' + detail.applet_id;
					}
					//门店码
					if (detail.type.value == 20) {
						q = 'shop-' + detail.shop_id;
					}
					//餐桌码
					if (detail.type.value == 30) {
						q = 'table-' + detail.shop_id + '-' + detail.table_id;
					}
					//WIFI链接码
					if (detail.type.value == 40) {
						q = 'wifi-' + detail.shop_id;
					}
					//买单码
					if (detail.type.value == 40) {
						q = 'paybill-' + detail.shop_id;
					}
					_this.getQrcode(q,false);
				});
			},
			
			/**
			 * 购物车输入获取焦点
			 */
			cart_focus(index,index1){
				let _this = this,
				goods = _this.category[index].goods[index1]; // 后端同步更新
				_this.index = index;
				_this.index1 = index1;
				
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				//判断是否为多规格
				if (goods.spec_type == 20) {
					_this.specShow(goods);
					return true;
				}
				//判断单规格商品库存
				if (_this.applet.other.is_stock == 1) {
					if (goods.total_num >= goods.spec[0].stock_num) {
						App.showError('库存不足');
						return false;
					}
				}
			},
			/**
			 * 购物车输入数值
			 */
			cart_input(value){
				let _this = this,
				index = _this.index,
				index1 = _this.index1,
				goods = _this.category[index].goods[index1]; // 后端同步更新
				App._post_form('cart/edit', {
					goods_id: goods.goods_id,
					goods_num: value,
					goods_sku_id: goods.spec[0].spec_sku_id,
					table_id: _this.table_id
				}, () => {
					_this.getGoods();
				});
			},
			/**
			 * 删除餐桌
			 */
			del_table() {
				let _this = this;
				_this.table_id = '';
				_this.showPage();
			},
			/**
			 * 设置点餐模式
			 */
			setFoodMode: function(index) {
				let _this = this;
				_this.foodModeIndex = index;
				_this.foodMode = _this.shop.food_mode.tab[index].value;
			},
			/**
			 * 获取页面数据，验证是否已经自动登录
			 */
			showPage() {
				let _this = this;
				_this.authBox = false; //授权弹窗
				_this.cart_show = false; //购物车列表
				_this.chooseShop = false; //选择门店
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.setStorageSync('location', res.latitude + ',' + res.longitude);
						let data = {};
						//如果是扫码进入
						if(_this.shop_id != ''){
							data.shop_id = _this.shop_id;
						}
						App._get('shop/detail', data, function(result) {
							_this.shop = result.data.detail;
							let food_mode = uni.getStorageSync('food_mode') || '';
							uni.removeStorageSync('food_mode');
							//如果是首页点单组件进入
							if (food_mode != '') {
								for (let n = 0; n < _this.shop.food_mode.tab.length; n++) {
									if (_this.shop.food_mode.tab[n].value == food_mode) {
										_this.foodModeIndex = n;
										break;
									}
								}
							}
							//如果是扫桌码进入
							if (_this.table_id != '') {
								_this.getTable();
								_this.foodMode = 10; //扫码点单
								_this.foodModeIndex = 0;
							}
							//默认点单模式为
							_this.foodMode = _this.shop.food_mode.tab[_this.foodModeIndex].value;
							//是否显示选择门店框
							if (_this.applet.other.open_shop == 1 && _this.applet.shop_mode.value ==
								20 && _this.shop_id == '') {
								_this.getShopList(); //获取门店列表
							}
							uni.setStorageSync('shop', result.data.detail);
							//门店分享参数
							uni.$u.mpShare.title = result.data.detail.shop_name;
							uni.$u.mpShare.imageUrl = result.data.detail.logo;
							_this.getGoods(); //获取商品信息
						});
					}
				});
			},
			/**
			 * 手动选择门店
			 */
			setChooseShop: function() {
				let _this = this;
				_this.shop = _this.shopList[_this.shopIndex];
				uni.setStorageSync('shop', _this.shopList[_this.shopIndex]);
				_this.chooseShop = false; //选择门店
				_this.getGoods();
			},
			/**
			 * 获取分类列表
			 */
			getShopList: function() {
				let _this = this;
				App._get('shop/lists', {}, function(result) {
					_this.chooseShop = true;
					_this.shopList = result.data.list;
				});
			},

			/**
			 * 购物车 - 清空
			 */
			cartCler: function() {
				let _this = this;
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				uni.showModal({
					title: "提示",
					content: "确定要清空购物车？",
					success: function(o) {
						if (o.confirm) {
							App._get('cart/clearAll', {
								table_id: _this.table_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.cart_show = false;
									_this.getGoods();
								});
							});
						}
					}
				});
			},

			/**
			 * 购物车 - 递增
			 */
			cartUp: function(index) {
				let _this = this,
					goods = _this.goodslist[index]; // 后端同步更新
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				//判断单规格商品库存
				if (_this.applet.other.is_stock == 1) {
					if (goods.total_num >= goods.goods_sku.stock_num) {
						App.showError('库存不足');
						return false;
					}
				}
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				App._post_form('cart/add', {
					goods_id: goods.goods_id,
					goods_num: 1,
					goods_sku_id: goods.goods_sku_id,
					table_id: _this.table_id
				}, () => {
					_this.getGoods();
				});
			},

			/**
			 * 购物车 - 递减
			 */
			cartDown: function(index) {
				let _this = this,
					goods = _this.goodslist[index]; // 后端同步更新
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				App._post_form('cart/sub', {
					goods_id: goods.goods_id,
					goods_sku_id: goods.goods_sku_id,
					table_id: _this.table_id
				}, () => {
					_this.getGoods();
				});
			},

			//转到订单确认页面
			gotoCart: function() {
				let _this = this,
					url = '?food_mode=' + _this.foodMode + '&table_id=' + _this.table_id;
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				App.goTo('flow/checkout' + url);
				return false;
			},
			/**
			 * 拨打电话
			 */
			phone: function(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/**
			 * 查看门店位置
			 */
			openLocation: function() {
				let _this = this,
					location = _this.shop.coordinate;
				location = location.split(',');
				uni.openLocation({
					latitude: Number(location[0]),
					longitude: Number(location[1]),
					name: _this.shop.shop_name,
					address: _this.shop.address,
					success: function() {}
				});
			},

			/**
			 * 递增 - 多规格
			 */
			up: function() {
				let _this = this,
					spec_index = _this.spec_index,
					goods = _this.goods; // 后端同步更新
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				//判断单规格商品库存
				if (_this.applet.other.is_stock == 1) {
					if (goods.spec[spec_index].sell_num >= goods.spec[spec_index].stock_num) {
						App.showError('库存不足');
						return false;
					}
				}
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				App._post_form('cart/add', {
					goods_id: goods.goods_id,
					goods_num: 1,
					goods_sku_id: goods.spec[spec_index].spec_sku_id,
					table_id: _this.table_id
				}, () => {
					goods.spec[spec_index].sell_num++;
					_this.goods = goods;
					_this.getGoods();
				});
			},

			/**
			 * 递减指定的商品数量
			 */
			down: function() {
				let _this = this,
					spec_index = _this.spec_index,
					goods = _this.goods;
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				if (goods.spec[spec_index].sell_num > 1) {
					// 后端同步更新
					App._post_form('cart/sub', {
						goods_id: goods.goods_id,
						goods_sku_id: goods.spec[spec_index].spec_sku_id,
						table_id: _this.table_id
					}, () => {
						goods.spec[spec_index].sell_num--;
						_this.goods = goods;
						_this.getGoods();
					});
				}
				if (goods.spec[spec_index].sell_num == 1) {
					// 后端同步更新
					App._post_form('cart/delete', {
						goods_id: goods.goods_id,
						goods_sku_id: goods.spec[spec_index].spec_sku_id,
						table_id: _this.table_id
					}, function(result) {
						goods.spec[spec_index].sell_num--;
						_this.goods = goods;
						_this.getGoods();
					});
				}
			},
			/**
			 * 获取商品列表
			 */
			getGoods: function() {
				let _this = this;
				App._get('goods/lists', {
					table_id: _this.table_id,
					food_mode: _this.foodMode
				}, function(result) {
					_this.setData(result.data);
					if (_this.goods_detail_show == true) {
						_this.goods_detail = result.data.category[_this.goods_index].goods[_this
							.goods_index1];
					}
				});
			},
			//显示底部弹出框
			specShow: function(goods) {
				let _this = this,
					specData = null;
				for (let i = 0; i < goods.specData.spec_attr.length; i++) {
					for (let j = 0; j < goods.specData.spec_attr[i].spec_items.length; j++) {
						if (j == 0) {
							goods.specData.spec_attr[i].spec_items[0].checked = true;
							this.goods_spec_arr[i] = goods.specData.spec_attr[i].spec_items[0].item_id;
						} else {
							goods.specData.spec_attr[i].spec_items[j].checked = false;
						}
					}
				}
				specData = goods.specData;
				let spec_list = specData.spec_list[0];
				_this.setData({
					show: true,
					goods: goods,
					specData: specData,
					goods_sku_id: spec_list.goods_spec_id,
					spec_name: spec_list.spec_name,
					goods_price: spec_list.form.goods_price,
					line_price: spec_list.form.line_price,
					goods_img: spec_list.form.image_url,
					stock_num: spec_list.form.stock_num
				});
			},
			/**
			 * 点击切换不同规格
			 */
			specTap: function(attrIdx, itemIdx) {
				let specData = this.specData;
				for (let i in specData.spec_attr) {
					for (let j in specData.spec_attr[i].spec_items) {
						if (attrIdx == i) {
							specData.spec_attr[i].spec_items[j].checked = false;
							if (itemIdx == j) {
								specData.spec_attr[i].spec_items[itemIdx].checked = true;
								this.goods_spec_arr[i] = specData.spec_attr[i].spec_items[itemIdx].item_id;
							}
						}
					}
				}
				this.specData = specData; // 更新商品规格信息
				this.updateSpecGoods();
			},

			/**
			 * 更新商品规格信息
			 */
			updateSpecGoods: function() {
				let spec_sku_id = this.goods_spec_arr.join('_'),
					spec_list = this.specData.spec_list,
					spec_name = '',
					stock_num = 0,
					spec_index = 0,
					goods_img = '',
					skuItem;
				for (let i = 0; i < spec_list.length; i++) {
					if (spec_list[i].spec_sku_id == spec_sku_id) {
						skuItem = spec_list[i];
						spec_index = i;
						break;
					}
				}
				//规格图片
				if (skuItem.form.image_url == '') {
					goods_img = this.goods.image[0].url;
				} else {
					goods_img = skuItem.form.image_url;
				}
				// 记录goods_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						spec_name: skuItem.spec_name,
						goods_price: skuItem.form.goods_price,
						line_price: skuItem.form.line_price,
						spec_index: spec_index,
						goods_img: goods_img,
						stock_num: skuItem.form.stock_num
					});
				}
			},
			/**
			 * 递增指定的商品数量
			 */
			addCount: function(index, index1) {
				let _this = this,
					goods = _this.category[index].goods[index1]; // 后端同步更新
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				//判断是否为多规格
				if (goods.spec_type == 20) {
					_this.specShow(goods);
					return true;
				}
				//判断单规格商品库存
				if (_this.applet.other.is_stock == 1) {
					if (goods.total_num >= goods.spec[0].stock_num) {
						App.showError('库存不足');
						return false;
					}
				}
				App._post_form('cart/add', {
					goods_id: goods.goods_id,
					goods_num: 1,
					goods_sku_id: goods.spec[0].spec_sku_id,
					table_id: _this.table_id
				}, () => {
					_this.getGoods();
				});
			},
			/**
			 * 递减指定的商品数量
			 */
			minusCount: function(index, index1) {
				let _this = this,
					goods = _this.category[index].goods[index1]; // 后端同步更新
				// #ifdef H5
				if (!App.checkIsLogin()) {
					App.showLogin();
					return false;
				}
				// #endif
				if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
					_this.scanCodeShow = true;
					return false;
				}
				//判断是否为多规格
				if (goods.spec_type == 20) {
					_this.specShow(goods);
					return true;
				}
				if (goods.total_num > 1) {
					// 后端同步更新
					App._post_form('cart/sub', {
						goods_id: goods.goods_id,
						goods_sku_id: goods.spec[0].spec_sku_id,
						table_id: _this.table_id
					}, () => {
						_this.getGoods();
					});
				}
				if (goods.total_num == 1) {
					// 后端同步更新
					App._post_form('cart/delete', {
						goods_id: goods.goods_id,
						goods_sku_id: goods.spec[0].spec_sku_id,
						table_id: _this.table_id
					}, function(result) {
						_this.getGoods();
					});
				}
			},
			/**
			 * 商品详情 - 显示
			 */
			setGoodsDetailShow: function(index, index1) {
				let _this = this,
					goods = _this.category[index].goods[index1];
				_this.goods_detail = goods;
				_this.goods_index = index;
				_this.goods_index1 = index1;
				_this.goods_detail_show = true;
				//商品分享参数
				uni.$u.mpShare.title = goods.goods_name + ' - ' + _this.shop.shop_name;
				uni.$u.mpShare.imageUrl = goods.image[0].url;
			},
			/**
			 * 商品详情 - 关闭
			 */
			setGoodsDetailClose: function() {
				let _this = this;
				_this.goods_detail_show = false;
				//恢复门店分享参数
				uni.$u.mpShare.title = _this.shop.shop_name;
				uni.$u.mpShare.imageUrl = _this.shop.front;
			},
			/**
			 * 点击顶部菜单
			 */
			menuTab: function(e) {
				let _this = this;
				_this.cut = e.index;
				if (e.index == 1) {
					_this.getScore(); //获取门店评分
					_this.getCmtList(false, 1); //获取门店评分列表
				}
			},
			/**
			 * 获取门店评分
			 */
			getScore: function() {
				let _this = this;
				App._get('comment/score', {}, function(result) {
					_this.setData(result.data);
				});
			},
			/**
			 * 获取评分和评论列表
			 */
			getCmtList: function(isPage, page) {
				let _this = this;
				App._get('comment/lists', {
					page: page || 1
				}, function(result) {
					let resList = result.data.list,
						dataList = _this.cmt_list;
					if (isPage == true) {
						_this.cmt_list.data = dataList.data.concat(resList.data);
					} else {
						_this.cmt_list = resList;
					}
					_this.loadStatus = 'loadmore';
				});
			},
			/**
			 * 触底加载
			 */
			cmtReachBottom: function() {
				let _this = this;
				_this.loadStatus = "loading"; //加载中
				setTimeout(() => {
					// 已经是最后一页
					if (_this.page >= _this.cmt_list.last_page) {
						_this.loadStatus = "nomore"; //没有数据
						return false;
					}
					// 加载下一页列表
					_this.getCmtList(true, ++_this.page);
				}, 1500);
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				let _this = this;
				if (_this.arr.length == 0) {
					await _this.getMenuItemTop();
				}
				if (index == _this.current) return;
				_this.scrollRightTop = _this.oldScrollTop;
				_this.$nextTick(function() {
					_this.scrollRightTop = _this.arr[index];
					_this.current = index;
					_this.leftMenuStatus(index);
				})
			},
			// 观测元素相交状态
			async observer() {
				this.tabbar.map((val, index) => {
					let observer = uni.createIntersectionObserver(this);
					// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
					// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
					observer.relativeTo('.right-box', {
						top: 0
					}).observe('#item' + index, res => {
						if (res.intersectionRatio > 0) {
							let id = res.id.substring(4);
							this.leftMenuStatus(id);
						}
					})
				})
			},
			// 设置左边菜单的滚动状态
			async leftMenuStatus(index) {
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('tab-item', 'menuItemHeight');
				}
				// 将菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 右边菜单滚动
			async rightScroll(e) {
				let _this = this;
				_this.oldScrollTop = e.detail.scrollTop;
				if (this.arr.length == 0) {
					await this.getMenuItemTop();
				}
				if (!this.menuHeight) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
				}
				setTimeout(() => { // 节流
					// scrollHeight为右边菜单垂直中点位置
					let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
					for (let i = 0; i < this.arr.length; i++) {
						let height1 = this.arr[i];
						let height2 = this.arr[i + 1];
						// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
						if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
							this.leftMenuStatus(i);
							return;
						}
					}
				}, 10)
			},
			// 获取右边菜单每个item到顶部的距离
			getMenuItemTop() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return;
						}
						rects.forEach((item) => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(item.top - rects[0].top);
							resolve();
						})
					}).exec()
				})
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
						resolve();
					}).exec();
				})
			},
			/**
			 * 验证堂食餐桌
			 */
			getTable: function() {
				let _this = this;
				App._get('table/detail', {
					table_id: _this.table_id
				}, result => {
					let table = result.data.detail,
						content = '';
					_this.tableName = table.table_name;
					if (table.status.value > 10) {
						if (table.status.value == 20) {
							content = '当前餐桌（' + table.table_name + '），正在用餐，你是要加餐吗？';
						} else {
							content = '当前餐桌（' + table.table_name + '），已被预定，你是要提前点餐吗？'
						}
						App.showError(content);
					}
				});
			},
			/**
			 * 扫一扫
			 */
			scanCode: function() {
				let _this = this;
				// #ifndef H5
				_this.scanCodeShow = false;
				uni.scanCode({
					onlyFromCamera: true,// 只允许通过相机扫码
					scanType: ['qrCode'],// 只允许识别二维码
					success: function(res) {
						//如果扫码成功
						if (res.errMsg == 'scanCode:ok') {
							
							// #ifdef MP-WEIXIN
							let scene = decodeURIComponent(res.path),
								q = '';
							if (scene != 'undefined') {
								//如果是普通二维码
								if (res.scanType == 'QR_CODE') {
									q = scene.split('/food/' + App.globalData.applet_id + '/');
									scene = q[1];
									q = scene.split('&');
									scene = q[0];
								}else{
									//如果是小程序码
									q = scene.split('=');
									scene = q[1];
									//res.scanType == 'WX_CODE' //微信小程序码
									//res.scanType == 'QR' //支付宝小程序码
								}
							} else {
								App.showError('二维码不合法');
							}
							// #endif
							// #ifdef MP-ALIPAY
							let scene = res.qrCode,
								q = '';
							if (scene == 'fake_code') {
								
							} else {
								//普通二维码
								//https://demo.hemaphp.com/food/10001/table-10003-10070
								q = scene.split('/food/' + App.globalData.applet_id + '/');
								scene = q[1];
							}
							// #endif
							scene = scene.split('-');
							if (scene[0] == 'table') {
								_this.shop_id = scene[1];
								_this.table_id = scene[2];
								_this.showPage();
							}else if (scene[0] == 'sn') {
								App._get('qrcode/detail', {
									id: scene[1]
								}, function(result) {
									let detail = result.data.detail;
									//餐桌码
									if (detail.type.value == 30) {
										_this.shop_id = detail.shop_id;
										_this.table_id = detail.table_id;
										_this.showPage();
									}else{
										App.showError('不是合法的餐桌码');
									}
								});
							}else{
								App.showError('不是合法的餐桌码');
							}
						}else{
							App.showError('扫码失败');
						}
					}
				});
				// #endif
				// #ifdef H5
				App.showError('无法调起扫一扫，请直接用微信扫码');
				// #endif
			},
			goTo: function(url) {
				App.goTo(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*头部内容*/
	.head {
		padding: 20rpx;
		background-color: #fff;

		.shop-name {
			font-size: 35rpx;
			font-weight: 700;
			color: #303133;
		}

		.distance {
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #999;
		}

		.food-mode {
			float: right;
			margin-top: 15rpx;
			height: 70rpx;
			width: 300rpx;
			text-align: center;

			.table {
				display: inline-block;
				color: #f3f4f6;
				background-color: #303133;
				padding: 15rpx 25rpx;
				border-radius: 50rpx;
				font-size: 26rpx;

				.del {
					display: inline-block;
					float: right;
					margin-top: -30rpx;
					margin-right: -60rpx;
				}
			}
		}
	}

	/*主体内容*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.menu-wrap {
		display: flex;
		overflow: hidden;

		.tab-view {
			width: 220rpx;
			height: 100%;
			font-size: 26rpx;

			.tab-item {
				height: 150rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #909193;
			}

			.tab-item-active {
				position: relative;
				color: #303133;
				font-weight: 600;
				background: #fff;
			}

			.tab-item-active::before {
				content: "";
				position: absolute;
				border-left: 4rpx solid #ff9900;
				height: 70rpx;
				left: 0;
				top: 40rpx;
			}
		}
	}

	.right-box {
		background-color: #FFF;

		.class-item {
			padding: 15rpx;

			.item-title {
				font-size: 28rpx;
				color: #909399;
				border-bottom: 1rpx solid #f3f4f6;
				padding: 0rpx 0rpx 15rpx 20rpx;
			}

			.item-goods {
				padding: 15rpx;
				height: 180rpx;
				position: relative;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					float: left;
					margin-right: 20rpx;
				}

				.tag {
					display: inline-block;
					z-index: 1;
					position: absolute;
					top: 15rpx;
					left: 15rpx;
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					line-height: 180rpx;
					text-align: center;
					font-size: 26rpx;
				}

				.title {
					padding-top: 10rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: #000;
				}

				.selling {
					height: 30rpx;
					padding-top: 5rpx;
					color: #999;
					font-size: 22rpx;
				}

				.sold {
					padding-top: 10rpx;
					color: #303133;
					font-size: 24rpx;
				}

				.price {
					padding-top: 5rpx;
					color: #fa3534;
					font-size: 28rpx;
					font-weight: 900;
				}
			}
		}
	}

	/*选购工具样式*/
	.cart-but {
		display: inline-block;
		float: right;
		margin-top: 10rpx;

		.but {
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			vertical-align: middle;
			float: right;
			border-radius: 50%;

			.icon {
				margin: 12rpx 0rpx 0rpx 12rpx;
			}
		}

		.add {
			background-color: #FF9900;
		}

		.minus {
			border: 1rpx solid #FF9900;
		}

		.total-num {
			
			font-size: 25rpx;
			font-weight: 700;
			color: #606266;
			border-bottom: 1rpx solid #f3f4f6;
			float: right;
			text-align: center;
			height: 45rpx;
			line-height: 45rpx;
			margin-top: 5rpx;
			width: 50rpx;
		}

		.spec {
			height: 50rpx;
			line-height: 50rpx;
			background-color: #FF9900;
			padding: 2rpx 25rpx;
			font-size: 26rpx;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	/*门店列表*/
	.choose-shop {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx solid #f3f4f6;
	}

	.choose-shop-active {
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ff9900;
	}

	.choose-shop-checked {
		display: inline-block;
		float: right;
		margin-top: 15rpx;
	}

	.choose-shop-but {
		display: inline-block;
		width: 300rpx;
	}

	/*底部购物车工具条*/
	.bottom-cart {
		width: 100%;
		height: 100rpx;
		background-color: #c0c4cc;

		.cart {
			display: inline-block;
			float: left;
			margin-top: -20rpx;
			margin-left: 40rpx;
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			border-radius: 50%;
			background-color: #FFF;

			.icon {
				margin: 15rpx 0rpx 0rpx 10rpx;
				display: inline-block;
				float: left;
			}

			.count {
				position: absolute;
				left: 110rpx;
				top: -18rpx;
				font-size: 30rpx;
				line-height: 40rpx;
				padding: 0 12rpx;
				color: #fff;
				background: #ff495e;
				border-radius: 20rpx;
			}
		}

		.total {
			display: inline-block;
			float: left;
			margin-left: 20rpx;
			height: 100rpx;

			.text {
				margin-top: -15rpx;
				height: 30rpx;
				color: #000;
				font-size: 32rpx;
				font-weight: 900;
			}

			.min-price {
				margin-top: 5rpx;
				color: #666;
				font-size: 24rpx;
			}
		}

		.but {
			display: inline-block;
			float: right;

			button {
				height: 100rpx;
				width: 200rpx;
			}
		}
	}

	/*购物车列表*/
	.cart-list {
		padding: 20rpx 20rpx 0rpx 20rpx;

		.title {
			padding-bottom: 20rpx;

			.cler {
				display: inline-block;
				float: right;
				margin-top: -8rpx;
				padding-right: 100rpx;
			}
		}

		.item {
			height: 100rpx;
			padding: 10rpx 0;
			border-top: 1rpx solid #f3f4f6;
			font-size: 25rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
				float: left;
				margin-right: 20rpx;
			}

			.goods-name {
				padding-top: 10rpx;
				font-weight: 900;
				color: #000;

				.goods-attr {
					margin-left: 15rpx;
					color: #999;
					display: inline-block;
				}
			}

			.goods-price {
				padding-top: 10rpx;
				color: #ff495e;
				display: inline-block;
			}
		}
	}

	/* 多规格选项框 */
	.spec-box {
		padding: 20rpx;

		.goods {
			height: 150rpx;
			padding-bottom: 20rpx;

			image {
				height: 150rpx;
				width: 150rpx;
				border-radius: 10rpx;
				float: left;
				margin-right: 30rpx;
				box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
			}

			.goods-name {
				font-size: 32rpx;
				padding-top: 10rpx;
				color: #000000;
			}

			.spec-name {
				font-size: 28rpx;
				padding: 10rpx 0rpx;
				color: #999;
			}
		}

		.title {
			color: #606266;
			padding-top: 20rpx;
			font-size: 28rpx;
			border-top: 1px dashed #eee;
		}

		.but {
			height: 50rpx;
			line-height: 50rpx;
			vertical-align: middle;
			text-align: center;
			padding: 0 20rpx;
			border-radius: 10rpx;
			float: left;
			margin-top: 20rpx;
			margin-left: 20rpx;
			font-size: 28rpx;
		}

		.but-ok {
			background-color: #FF9900;
			color: #fff;
		}

		.but-no {
			background-color: #f3f4f6;
			color: #c0c4cc;
		}

	}

	/*门店休息提醒*/
	.shop-rest {
		width: 100%;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.7);

		.icon {
			display: inline-block;
			padding-right: 35rpx;
			padding-top: 35rpx;
			float: right;
		}
	}

	/*商品详情*/
	.goods-detail {
		width: 600rpx;
		padding: 20rpx;

		.title {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f3f4f6;

			.share {
				display: inline-block;
				float: right;
				margin: 5rpx 70rpx 0rpx 0rpx;
			}
		}

		.goods {
			padding-top: 20rpx;

			image {
				border-radius: 8rpx;
				height: 600rpx;
				width: 600rpx;
			}
		}
	}

	.menu {
		border-radius: 15rpx;
		padding: 0 20rpx 30rpx 20rpx;
		background-color: #fff;

		.navbar-list {
			padding-top: 30rpx;
			line-height: 50rpx;

			image {
				float: left;
				margin-right: 20rpx;
				height: 50rpx;
				width: 50rpx;
			}

			.text {
				display: inline-block;
				float: right;
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #fa3534;
			}

			.arrow-right {
				display: inline-block;
				float: right;
				margin-top: 10rpx;
			}
		}
	}

	/*评价栏目*/
	.score-detail {
		padding: 20rpx;
		background-color: #FFF;
		text-align: center;
		color: #606266;

		.left {
			display: inline-block;
			height: 106rpx;
			width: 19%;

			.score {
				color: #FF9900;
				font-weight: 900;
				font-size: 50rpx;
			}
		}

		.right {
			font-size: 22rpx;
			display: inline-block;
			float: right;
			width: 40%;
			border-left: 1rpx solid #f3f4f6;
		}
	}
</style>