<template>
	<view class="content">
		<!-- 店铺 -->
		<view class="Shop" v-show="Getnavindex == 0 && !iswx">
			<!-- 店铺列表头部样式 -->
			<view class="head" ref="head">
				<!-- 肯德基顶部 -->
				<HomeHeadKDJ v-if="BrandInfor['brand_id'] == 1" ref="Head" @_Change="_Change" @_Search="_Search">
				</HomeHeadKDJ>
				<!-- 麦当劳顶部 -->
				<HomeHeadMDL v-if="BrandInfor['brand_id'] == 5" ref="Head" @_Change="_Change" @_Search="_Search">
				</HomeHeadMDL>
				<!-- 星巴克顶部 -->
				<HomeHeadXBK v-if="BrandInfor['brand_id'] == 10" ref="Head" @_Change="_Change" @_Search="_Search">
				</HomeHeadXBK>
				<!-- 瑞幸顶部 -->
				<HomeHeadRX v-if="BrandInfor['brand_id'] == 13" ref="Head" @_Search="_Search">
				</HomeHeadRX>
				<!-- 奈雪的茶顶部 -->
				<HomeHeadNX v-if="BrandInfor['brand_id'] == 2" ref="Head" @_Change="_Change" @_Search="_Search">
				</HomeHeadNX>
			</view>

			<!-- 店铺列表 -->
			<view class="List-Conten" :class="[
				BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 13? 
				'grey': (BrandInfor['brand_id'] == 5 || BrandInfor['brand_id'] == 10)?'MDLBACK':'']">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower"
					:style="{'height':ScollViewHeight}">
					<!-- 网传循环方法节省资源(尝试) -->
					<view class="Store-List" v-for="(item,Tabindex) in (index == 0?ShopList:LikeList)" :key="Tabindex">
						<!-- 肯德基 -->
						<template v-if="BrandInfor['brand_id'] == 1">
							<view class="Store-List-Shop-MDL" v-for="(item1,index1) in item" :key="index1"
								@tap="HomePage(item1)">
								<view class="Store-List-Shop-MDL-Top">
									<view class="Store-List-Shop-MDL-Top-Name">
										{{item1['restaurant_name']}}
									</view>
									<view class="Store-List-Shop-MDL-Top-State">
										营业中
									</view>
									<!-- <view class="Store-List-Shop-MDL-Top-State2" v-else>
										未营业
									</view> -->
									<view class="Store-List-Shop-MDL-Top-distance">
										距离您{{item1['distance']}}千米
									</view>
								</view>
								<view class="Store-List-Shop-MDL-Address">
									{{item1['restaurant_address']}}
								</view>
							</view>
						</template>
						<!-- 奈雪的茶 -->
						<template v-if="BrandInfor['brand_id'] == 2">
							<view class="Store-List-Shop-NX" @tap="HomePage(item1)" v-for="(item1,index1) in item"
								:key="index1">
								<view class="Store-List-Shop-NX-Top-NX">
									<view class="Store-List-Shop-NX-Top-NX-Left">
										<view class="Store-List-Shop-NX-Top-NX-Left-Title">
											{{item1['restaurant_name']}}
										</view>
										<b-restaurant-state :item="item1"></b-restaurant-state>
									</view>
									<view class="Store-List-Shop-NX-Top-NX-Right">
										 <!-- @tap.stop="openLocation(item1['latitude'],item1['longitude'])" -->
										<img class="img"
											:src="qnyurl('Navigation.png','nx')" alt="">
										<view class="Store-List-Shop-NX-Top-NX-Right-distance">
											距离您{{item1['distance']}}千米
										</view>
									</view>
								</view>
								<view class="Store-List-Shop-NX-Area-NX">
									<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
									<view class="Store-List-Item-Area-NX-text">
										{{item1['restaurant_address']}}
									</view>
								</view>
							</view>
						</template>
						<!-- 麦当劳 -->
						<template v-if="BrandInfor['brand_id'] == 5">
							<view class="Store-List-Shop-KDJ" v-for="(item1,index1) in item" :key="index1">
								<view class="Store-List-Shop-KDJ-Infot">
									<view class="Store-List-Shop-KDJ-Top">
										<view class="Store-List-Shop-KDJ-Top-Name">
											{{item1['restaurant_name']}}
										</view>
										<view class="Store-List-Shop-KDJ-Top-distance">
											距离您{{item1['distance']}}千米
										</view>
									</view>
									<view class="Store-List-Shop-KDJ-Area">
										{{item1['restaurant_address']}}
									</view>
								</view>
								<view class="btn" @tap="HomePage(item1)">
									去点餐
								</view>
							</view>
						</template>
						<!-- 星巴克 -->
						<template v-if="BrandInfor['brand_id'] == 10">
							<view class="Store-List-Shop-XBK" @tap="HomePage(item1)" v-for="(item1,index1) in item"
								:key="index1">
								<view class="Store-List-Shop-XBK-Top">
									<view class="Store-List-Shop-XBK-Top-Name">
										{{item1['restaurant_name']}}
									</view>
									<view class="Store-List-Shop-XBK-Top-distance">
										距离您{{item1['distance']}}千米
									</view>
								</view>
								<view class="Store-List-Shop-XBK-Area">
									{{item1['restaurant_address']}}
								</view>
							</view>
						</template>
						<!-- 瑞幸 -->
						<template v-if="BrandInfor['brand_id'] == 13">
							<view class="Store-List-Shop-RX" @tap="HomePage(item1)" v-for="(item1,index1) in item"
								:key="index1">
								<view class="Store-List-Shop-RX-Top-RX">
									<view class="Store-List-Shop-RX-Top-RX-Left">
										<view class="Store-List-Shop-RX-Top-RX-Left-Title">
											{{item1['restaurant_name']}}
										</view>
										<b-restaurant-state :item="item1"></b-restaurant-state>
									</view>
									<view class="Store-List-Shop-RX-Top-RX-Right">
										 <!-- @tap.stop="openLocation(item1['latitude'],item1['longitude'])" -->
										<img class="img"
											:src="qnyurl('Navigation.png','rx')" alt="">
										<view class="Store-List-Shop-RX-Top-RX-Right-distance">
											距离您{{item1['distance']}}千米
										</view>
									</view>
								</view>
								<view class="Store-List-Shop-RX-Area-RX">
									<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
									<view class="Store-List-Item-Area-RX-text">
										{{item1['restaurant_address']}}
									</view>
								</view>
							</view>
						</template>
					
					</view>
					<b-load :show="LoadType == 'store'" position="absolute" type='store' width="160" height="132"
						:text="index?'暂无收藏':'该地区暂无门店信息'" color="#000000"></b-load>
				</scroll-view>
			</view>
		</view>

		<!-- 订单 -->
		<view class="Orders" v-show=" Getnavindex == 1">
			<view class="Orders-Toggle-Type" :style="{'background-color':`rgba(255,255,255,${backgroundcolor})`}">
				<OrderStatus @commission="Typetoggle" :un_commission_count="count['un_commission_total']" :commission_count="count['commission_total']"></OrderStatus>
				<!-- <view class="Orders-Toggle-Type-Item" @tap="Typetoggle(0)">
					待结算{{count['un_commission_total']}}单
				</view>
				<view class="Orders-Toggle-Type-Item" @tap="Typetoggle(1)">
					已结算{{count['commission_total']}}单
				</view> -->
			</view>
			<!-- 占位元素 -->
			<view style="width: 100%;height: 200rpx;"></view>
			<!-- 订单列表 -->
			<view class="Orders-List" :style="{paddingBottom:OrderBottonPadding}" v-if="orders['List']['length']">
				<view class="Orders-List-Item" v-for="(item,index) in orders['List']" :key="index">
					<OrderItemKDJ v-if="item1['brand_id'] == 1" :item="item1" v-for="(item1,index1) in item"
						:key="index1"></OrderItemKDJ>
					<OrderItemNX v-if="item1['brand_id'] == 2" :item="item1" v-for="(item1,index1) in item"
						:key="index1"></OrderItemNX>
					<OrderItemMDL v-if="item1['brand_id'] == 5" :item="item1" v-for="(item1,index1) in item"
						:key="index1"></OrderItemMDL>
					<OrderItemXBK v-if="item1['brand_id'] == 10" :item="item1" v-for="(item1,index1) in item"
						:key="index1"></OrderItemXBK>
					<OrderItemRX v-if="item1['brand_id'] == 13" :item="item1" v-for="(item1,index1) in item"
						:key="index1"></OrderItemRX>
				</view>
				<!-- 加载更多状态 -->
				<u-loadmore :status="orders['status']" />
			</view>
			<!-- 订单加载状态 -->
			<b-load :show="LoadType == 'orders' && orders['List']['length'] <= 0" z-index="none" position="absolute" type='orders' width="160" height="132" color="#000000" background="transparent"></b-load>
		</view>
		<template v-if="!iswx">
			<!-- 底部导航组件 -->
			<view class="Nav" >
				<restaurantNav ref="restaurantNav"></restaurantNav>
			</view>
			
			<!-- 就餐方法(只有麦当劳/肯德基才会点击店铺时弹出选择就餐方式弹框)-->
			<u-popup :show="eattypeShow" @close="eattypeShow = false" closeable>
				<view class="poupconten">
					<view class="shop-inofr">
						<view class="shop-inofr-name">
							<image class="icon" :src="qnyurl('sopicon.png')" mode=""></image>
							<text>{{GetShopInfor['restaurant_name']}}</text>
						</view>
						<view class="shop-inofr-area">
							{{GetShopInfor['restaurant_address']}}
						</view>
					</view>
					<view class="hint">
						温馨提示：<text class="text1"
							:class="`themeColor-${BrandInfor['brand_id']}`">{{BrandInfor['brand_name']}}点餐为第三方供应商提供的代下单服务（暂不支持外卖）</text>，<text
							class="text2">出餐后可凭取餐码到店取餐。如有疑问请及时联系在线客服！</text>
					</view>
					<view class="Way">
						<view class="Way-title">请选择就餐方式</view>
						<view class="Way-type">
							<view class="Way-type-item "
								:class="[GetMODE == 'EAT_IN'? `theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
								@tap="SetEatMode('EAT_IN')">
								<view class="Way-type-item-img">
									<image class="img" :src="qnyurl('diannei.png')" mode="aspectFit"></image>
								</view>
								<view class="Way-type-item-right">
									<view class="Way-type-item-right-text1">
										店内就餐
									</view>
									<view class="Way-type-item-right-text2">
										Dine In
									</view>
								</view>
							</view>
							<view class="Way-type-item"
								:class="[GetMODE == 'TAKE_AWAY'? `theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
								@tap="SetEatMode('TAKE_AWAY')">
								<view class="Way-type-item-img">
									<image class="img" :src="qnyurl('dabao.png')" mode="aspectFit"></image>
								</view>
								<view class="Way-type-item-right">
									<view class="Way-type-item-right-text1">
										打包带走
									</view>
									<view class="Way-type-item-right-text2">
										Take Away
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			
			<!-- 瑞星/星巴克进入店铺首页时的温馨提示 -->
			<u-modal :show="eattypeShow2" closeOnClickOverlay @close="eattypeShow2 = false" title="温馨提示" width="580rpx">
				<template v-slot:default>
					<view class="slot-content">
						<view class="slot-content-Tips">
							{{Brand()['BrandName']}}点餐为<text :style="{color:Brand()['ThemeColor']}">第三方提供的点餐服务</text>，该服务与{{Brand()['BrandName']}}官方无关，有问题请联系在线客服。
						</view>
						<view class="slot-content-Tips2">
							<view>
								● 优惠点餐，不支持开发票!
							</view>
							<view>
								● 出餐后不支持退款！
							</view>
						</view>
					</view>
				</template>
				<template v-slot:confirmButton>
					<view class="confirmButton" :style="Brand()['customStyle']['BtnStyle'][0]">
						<navigator url="/pages/restaurant/home/shop_home/shop_home" @tap="eattypeShow2 = false">
							我知道了
						</navigator>
					</view>
				</template>
			</u-modal>
			
			<b-load :show="LoadType == 'load'" position="absolute" type='load'  width="79" height="80"
				color="#ccc" background="rgba(0,0,0,0.05)"></b-load>
			<!-- 没有店铺 -->
		<!-- 	<b-load :show="LoadType == 'load'" position="absolute" type='load' width="79" height="80"
				:color="Brand()['ThemeColor']" background="rgba(0,0,0,0.05)"></b-load> -->
		</template>
		
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	// 肯德基店铺列表头部
	import HomeHeadKDJ from './components/Home-Head-KDJ/Home-Head-KDJ.vue';
	// 麦当劳店铺列表头部
	import HomeHeadMDL from './components/Home-Head-MDL/Home-Head-MDL.vue';
	// 星巴克店铺列表头部
	import HomeHeadXBK from './components/Home-Head-XBK/Home-Head-XBK.vue';
	// 瑞幸店铺列表头部
	import HomeHeadRX from './components/Home-Head-RX/Home-Head-RX.vue';
	//奈雪的茶店铺列表头部
	import HomeHeadNX from './components/Home-Head-NX/Home-Head-NX.vue';
	// 底部导航
	import restaurantNav from './components/restaurant-nav/restaurant-nav.vue';
	// 肯德基订单组件
	import OrderItemKDJ from './components/Order-Item-KDJ/Order-Item-KDJ.vue';
	// 麦当劳订单组件
	import OrderItemMDL from './components/Order-Item-MDL/Order-Item-MDL.vue';
	// 星巴克订单组件
	import OrderItemXBK from './components/Order-Item-XBK/Order-Item-XBK.vue';
	// 瑞幸订单组件
	import OrderItemRX from './components/Order-Item-RX/Order-Item-RX.vue';
	// 瑞幸订单组件
	import OrderItemNX from './components/Order-Item-NX/Order-Item-NX.vue';
	// 混入
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	import mixin from '@/static/js/mixin/mixin.js';
	// 请求接口
	import {
		restaurantQueryAPI,
		storeCollectionListAPI,
		getPhoneAPI
	} from '@/request/restaurant/index.js';
	import {
		orderListAPI,
		agOrderPayAPI,
		cancelOrderAPI,
		paypayAPI
	} from '@/request/restaurant/index.js';

	// // 肯德基首页组件
	// import bPageHomeKfc from '@/components/b-page-home/b-page-home-kfc.vue';
	// // 瑞幸首页组件
	// import bPageHomeRx from '@/components/b-page-home/b-page-home-rx.vue';
	// // 星巴克首页组件
	// import bPageHomeXbk from '@/components/b-page-home/b-page-home-xbk.vue';

	let self;
	export default {
		mixins: [mixin, restaurantmixins],
		components: {
			HomeHeadKDJ,
			HomeHeadMDL,
			HomeHeadXBK,
			HomeHeadRX,
			HomeHeadNX,
			OrderItemXBK,
			restaurantNav,
			OrderItemKDJ,
			OrderItemMDL,
			OrderItemRX,
			OrderItemNX
		},
		data() {
			return {
				LoadType: 'load',
				// 就餐方式
				eattypeShow: false,
				// 温馨提示
				eattypeShow2: false,
				list: [],
				// 店铺列表
				ShopList: [],
				// 店铺总数量
				ShopListCount: 0,
				// 关注列表
				like: [],
				// 关注店铺列表
				LikeList: [],
				// 关注店铺总数量
				SikeListCount: 0,
				// scoll高度
				ScollViewHeight: 0,
				// 切换索引
				index: 0,
				// 订单部分数据
				orders: {
					page: 1,
					type: '',
					List: [],
					last_page: 0,
					last_time_toggle: '',
					status: 'loading'
				},
				// 订单顶部晒筛选数据
				count: {
					un_commission_total: 0,
					commission_total: 0
				},
				// 订单滑动时颜色
				backgroundcolor: 0,
				// 订单底部留白
				OrderBottonPadding: '',
				// 用于标识是否是从小程序跳进H5的
				iswx:false

			};
		},
		onReady() {
			// setTimeout(() => {
			// 	this.init();
			// }, 500);

		},
		onLoad(para) {
			// console.log(getApp()['globalData']['parameters']?.navindex,'para---');
			self = this;
			// 小程序点击点餐订单进入H5
			if(getApp()['globalData']['parameters']?.navindex){
				this.SETBRANDINFOR({ brand_id: '', brand_name: ''});
				this.SETNAVINDEX(1);
				this['iswx'] = true;
				// this.GetorderList();
			}else{
				this.INIT_BUYCART();
			};
			// setTimeout(()=>{
			// 	console.log(this['BrandInfor'],'BrandInfor')
			// },1000)
		},
		onShow() {
			if (this['Getnavindex'] == 1) {
				this['orders']['page'] = 1;
				this['orders']['List'] = [];
				this['orders']['status'] = 'loading';
				// 初始化高度-回调获取订单列表
				this.init(()=>{
					this.GetorderList();
				});
			} else {
				if(!this['index'] && this['ShopList']['length'] <= 0 && this['list']['length'] <= 0){
					setTimeout(() => {
						this.init(()=>{
							self.GetList();
						});
					}, 500);
				}
				if(this['index'] && this['like']['length'] <= 0 && this['LikeList']['length'] <= 0){
					this.GetstoreCollectionList();
				}
				
			}
		},
		computed: {
			// 加载状态
			loadState() {
				return (this['index'] == 0 && this['ShopList']['length'] <= 0) || (this['index'] == 1 && this['LikeList'][
					'length'
				] <= 0);
			}
		},
		watch: {
			GetCityCode(val) {
				console.log(val, '用户切换位置4');
				// 用户自主切换地址时更换列表
				this.GetList();
			},
			Getnavindex(val) {
				console.log('切换');
				if (val == 1) {
					self['orders']['page'] = 1;
					self['orders']['status'] = 'loading';
					this['orders']['List'] = [];
					this.init(()=>{
						this.GetorderList();
					});
				} else {
					// 没有高度代表其他方式进入且没有加载第一个导航页需要初始化
					if(!this['ScollViewHeight']){
						setTimeout(() => {
							this.init(()=>{
								self.GetList();
							});
						}, 500);
						return
					}
					if(!this['index'] && this['ShopList']['length'] <= 0 && this['list']['length'] <= 0){
						this.GetList();
					}
					if(this['index'] && this['like']['length'] <= 0 && this['LikeList']['length'] <= 0){
						this.GetstoreCollectionList();
					}
				}
			}
		},
		methods: {
			// 支付宝支付测试
			init(cabllback = ()=>{}) {
				// 获取头部和底部高度然后计算出滚动区域高度
				let height = 0;
				uni.getSystemInfo({
					success: async res => {
						let headinfo = uni.createSelectorQuery().in(this).select(".head");
						let Navinfo = uni.createSelectorQuery().in(this).select(".Nav");
						await headinfo.boundingClientRect(function(data) {
							height += data.height || 199;
							console.log(data.height, '顶部');
						}).exec();
						await Navinfo.boundingClientRect(function(data) {
							try{
								height += data.height;
								self['OrderBottonPadding'] = `${(data.height / (uni.upx2px(100) / 100)) + 40}rpx`;
							}catch(e){
								height += 0;
								self['OrderBottonPadding'] = `${(0 / (uni.upx2px(100) / 100)) + 40}rpx`;
								//TODO handle the exception
							}
							
						}).exec();
						var rpx = `${(res.windowHeight - height) / (uni.upx2px(100) / 100)}rpx`;
						this['ScollViewHeight'] = rpx;
						// 因为需要获取到数量所以需要调用全部先获取数量再对数据经行处理
						cabllback();
					}
				});
			},

			// 获取订单列表
			GetorderList() {
				uni.showLoading({
					title: '加载中'
				});
				self['LoadType'] = 'load';
				self['orders']['status'] = 'loading';
				orderListAPI({
					page: this['orders']['page'],
					type: this['orders']['type'],
					brand_id: this['BrandInfor']['brand_id']
				}).then(res => {
					if(self['orders']['page'] == 1){
						self['orders']['List'] = [];
					}
					if (res['data']['data']['data']['length'] > 0 && res['data']['data']['total'] > 0) {
						self['count'] = res['data']['count'];
						self['orders']['List'].push(res['data']['data']['data']);
						self['orders']['last_page'] = res['data']['data']['last_page'];
						self['orders']['page'] += 1;
						self['LoadType'] = '';
						self['orders']['status'] = 'loadmore';
					} else {
						// if (self['orders']['page'] != 1) {
							self['LoadType'] = 'orders';
							self['orders']['status'] = 'nomore';
						// }
					};
					if(self['orders']['List']['length'] >= self['orders']['last_page']){
						self['orders']['status'] = 'nomore';
					};
					uni.hideLoading();
				})
			},

			// 订单顶部选项
			Typetoggle(type) {
				// 如果上次切换与本次切换类型一致则代表用户点击了两次,此时需要将列表切换至所有列表
				// if (this['orders']['last_time_toggle'] === type) {
				// 	this['orders']['type'] = '';
				// } else {
				// 	this['orders']['type'] = type;
				// }
				this['orders']['type'] = type;
				this['orders']['page'] = 1;
				this.GetorderList();
				
			},

			// 获取餐厅列表
			GetList(keyword = '') {
				// 设置加载状态
				this['LoadType'] = 'load';
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					city_code: this.GetCityCode,
					address: keyword,
				}
				restaurantQueryAPI(parameters).then(res => {
					this['ShopList'] = [];
					this['list'] = res['data']['data'];
					this['ShopListCount'] = res['data']['count'];
					console.log(this['list'],'list');
					if (res?.data && res['data']['data'] != undefined) {
						this['ShopList'].push(this.arrObtain('list'));
						this['LoadType'] = '';
					} else {
						this['LoadType'] = 'store';
					}
				}).catch(res=>{
					console.log(res,'列表');
					if(res['code'] == 1005){
						this['LoadType'] = '';
					}
				})
			},

			// 获取关注冽表
			GetstoreCollectionList(keyword = '') {
				this['LoadType'] = 'load';
				let parameters = {
					brand_id: this['BrandInfor']['brand_id'],
					address: keyword,
				}
				storeCollectionListAPI(parameters).then(res => {
					this['like'] = res['data']['data'];
					// 切换时数量会改变,(切换时数量不应该改变)
					// this['$refs']['Head'].SetTabnum(this['list']['length'], this['like']['length'])
					this['SikeListCount'] = res['data']['count'];
					if (res['data']['data']['length'] && res['data']['data'] != undefined) {
						this['LikeList'].push(this.arrObtain('like'));
						this['LoadType'] = '';
					} else {
						this['LoadType'] = 'store';
					}

				})
			},

			// scroll-view触底
			scrolltolower() {
				let key = this['$refs']['Head']['tabsconfig']['index'];
				console.log(key,'key');
				if (key == 0) {
					this['ShopList'].push(this.arrObtain('list'));
				} else {
					this['LikeList'].push(this.arrObtain('like'));
				}
			},

			// tabs切换事件(如果有的话)
			_Change(index) {
				// this['TabIndex'] = 
				// let key;
				// try {
				// 	key = this['$refs']['Head']['tabsconfig']['index'];
				// } catch (e) {
				// 	key = 0;
				// 	//TODO handle the exception
				// }
				this['index'] = index;
				if (index == 0) {
					this['ShopList'] = [];
					this.GetList();
				} else {
					this['LikeList'] = [];
					this.GetstoreCollectionList();
				}
			},

			// 输入框确认事件
			_Search(value) {
				this.GetList(value)
			},

			// 获取数据前十个
			arrObtain(key) {
				let arr = this[key].splice(0, 20);
				console.log(this[key]['length'], '剩余数量');
				return arr;
			},

			// 进入店铺
			HomePage(item) {
				console.log(item,'item');
				// 奈雪品牌店铺即使闭店也能进入店铺详情,下单时会出现错误,所以在此处拦截一下
				if(this['BrandInfor']['brand_id'] == 2 && !item['is_open']){
					uni.showToast({
						title:'店铺未开业',
						icon:'none'
					});
					return
				};
				// 设置店铺信息
				this.SETSHOPDETAIL(item);
				if (this['BrandInfor']['brand_id'] == 1 || this['BrandInfor']['brand_id'] == 5) {
					// 打开就餐方式弹框
					this['eattypeShow'] = true;
				} else if (this['BrandInfor']['brand_id'] == 13 || this['BrandInfor']['brand_id'] == 10 || this['BrandInfor']['brand_id'] == 2) {
					// 打开提示
					this['eattypeShow2'] = true;
				}
			},

			// 设置就餐方式
			SetEatMode(type) {
				this.SETMODE(type);
				uni.navigateTo({
					url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
					success: () => {
						this['eattypeShow'] = false;
					}
				})
			}
		},
		// 滑动
		onPageScroll(e) {
			this['backgroundcolor'] = e['scrollTop'] / 150;
		},

		// 触底
		onReachBottom() {
			if (self['orders']['List']['length'] >= self['orders']['last_page']) {
				self['orders']['status'] = 'nomore';
				return;
			};
			this.GetorderList();

		},


		// 分享
		onShareAppMessage() {
			if (this['BrandInfor']['brand_id'] == 1) {
				return KFCrestaurant();
			} else if (this['BrandInfor']['brand_id'] == 10) {
				return XBKSharing();
			}
			if (this['BrandInfor']['brand_id'] == 13) {
				return RXrestaurant();
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #f9f9f9;
	}

	.scroll-Y {
		position: relative;
	}

	/deep/ .uni-scroll-view-content {
		padding: 32rpx;
		height: auto;
	}

	.Nav {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0;
		left: 0;
	}


	.Store-List {
		width: 100%;

		// 肯德基店铺样式
		&-Shop-MDL {
			padding: 30rpx;
			width: 100%;
			background-color: #ffffff;
			border-radius: 14rpx;
			margin-bottom: 20rpx;

			&-Top {
				display: flex;
				align-items: flex-start;
				margin-bottom: 30rpx;

				&-Name {
					font-size: 30rpx;
					color: $THEMECOLOR4;
					margin-right: 20rpx;
				}

				&-State {
					min-width: 100rpx;
					text-align: center;
					background: #C63836;
					border-radius: 2rpx;
					color: #ffffff;
					font-size: 20rpx;
				}
				&-State2{
					min-width: 100rpx;
					text-align: center;
					background: #8f8f8f;
					border-radius: 2rpx;
					color: #ffffff;
					font-size: 20rpx;
				}

				&-distance {
					min-width: 230rpx;
					font-size: 26rpx;
					color: #777777;
					flex: 1;
					text-align: right;
				}
			}

			&-Address {
				font-size: 26rpx;
				color: #666666;
			}
		}
		// 肯德基
		&-Shop-KDJ {
			width: 100%;
			height: auto;
			background-color: #ffffff;
			border-radius: 15rpx;
			min-height: 155rpx;
			padding: 32rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			&-Infot {
				flex: 1;
			}

			.btn {
				width: 146rpx;
				height: 56rpx;
				border: 2rpx solid #FFBC0F;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				color: #FFA200;
				margin-left: 15rpx;
			}

			&-Top {
				&-Name {
					font-size: $FONTSIZE30;
					color: $THEMECOLOR4;
					margin-right: 20rpx;
					margin-bottom: 15rpx;
				}

				&-distance {
					min-width: 230rpx;
					font-size: $FONTSIZE26;
					color: $THEMECOLOR5;
					flex: 1;
					margin-bottom: 15rpx;
				}
			}

			&-Area {
				font-size: $FONTSIZE26;
			}
		}
		// 星巴克
		&-Shop-XBK {
			width: 100%;
			height: auto;
			background-color: #ffffff;
			min-height: 155rpx;
			padding: 32rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #cccccc;

			&-Top {
				display: flex;
				align-items: flex-start;
				margin-bottom: 30rpx;

				&-Name {
					font-size: $FONTSIZE30;
					color: $THEMECOLOR4;
					margin-right: 20rpx;
				}

				&-distance {
					min-width: 230rpx;
					font-size: $FONTSIZE26;
					color: $THEMECOLOR5;
					flex: 1;
					text-align: right;
				}
			}

			&-Area {
				font-size: $FONTSIZE26;
			}
		}
		// 瑞幸咖啡样式
		&-Shop-RX {
			background-color: #ffffff;
			padding: 30rpx 32rpx;
			margin-bottom: 30rpx;
			border-radius: 15rpx;

			&-Top-RX {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				&-Left {
					font-size: $FONTSIZE30;
					color: $THEMECOLOR4;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&-Title {
						margin-bottom: 20rpx;
						font-weight: 700;
					}
				}

				&-Right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					color: $THEMECOLOR6;
					font-size: 26rpx;

					.img {
						max-width: 64rpx;
						min-width: 64rpx;
						min-height: 64rpx;
						max-height: 64rpx;
					}

					&-distance {
						min-width: 230rpx;
						margin-top: 15rpx;
						text-align: right;
					}
				}
			}

			&-Area-RX {
				color: #999999;
				font-size: $FONTSIZE24;
				padding-top: 22rpx;
				border-top: 1rpx solid #EDEEF0;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				&-text {
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.img {
					max-width: 22rpx;
					min-width: 22rpx;
					min-height: 26rpx;
					max-height: 26rpx;
					margin-right: 15rpx;
				}
			}
		}
		// 瑞幸咖啡样式
		&-Shop-NX {
			background-color: #ffffff;
			padding: 30rpx 32rpx;
			margin-bottom: 30rpx;
			border-radius: 15rpx;
		
			&-Top-NX {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
		
				&-Left {
					font-size: $FONTSIZE30;
					color: $THEMECOLOR4;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
		
					&-Title {
						margin-bottom: 20rpx;
						font-weight: 700;
					}
				}
		
				&-Right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					color: #a7d500;
					font-size: 26rpx;
		
					.img {
						width: 64rpx;
						height: 64rpx;
						max-width: 64rpx;
						min-width: 64rpx;
						min-height: 64rpx;
						max-height: 64rpx;
						
					}
		
					&-distance {
						min-width: 230rpx;
						margin-top: 15rpx;
						text-align: right;
					}
				}
			}
		
			&-Area-NX {
				color: #999999;
				font-size: $FONTSIZE24;
				padding-top: 22rpx;
				border-top: 1rpx solid #EDEEF0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
		
				&-text {
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
		
				.img {
					width: 22rpx;
					height: 26rpx;
					max-width: 22rpx;
					min-width: 22rpx;
					min-height: 26rpx;
					max-height: 26rpx;
					margin-right: 15rpx;
				}
			}
		}
	}


	.grey {
		background-color: #f9f9f9;
	}

	.MDLBACK {
		background-color: #FFFFFF;
	}

	// 订单页面
	.Orders {
		padding: 32rpx 32rpx 0 32rpx;
		min-height: 100%;

		&-Toggle-Type {
			width: 100%;
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			padding: 32rpx 32rpx 15rpx 32rpx;

			&-Item {
				width: 320rpx;
				height: 91rpx;
				background: #FFFFFF;
				border: 1rpx solid #DEDEDE;
				border-radius: 20rpx;
				text-align: center;
				line-height: 91rpx;
				color: #333333;
				font-size: $FONTSIZE24;
			}
		}
	}


	// 就餐方式弹框
	.poupconten {
		width: 100%;
		height: 656rpx;
		background-color: #ffffff;
		padding: 32rpx;

		.shop-inofr {
			margin-bottom: 50rpx;

			&-name {
				font-size: $FONTSIZE32;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.icon {
					width: 33rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}

			&-area {
				font-size: $FONTSIZE24;
				color: #999999;
			}
		}

		.hint {
			font-size: $FONTSIZE24;
			line-height: 45rpx;

			.text1 {
				color: #DA2F35;
			}

			.text2 {
				color: #999999;
			}
		}

		// 方式
		.Way {
			width: 100%;

			&-title {
				font-size: $FONTSIZE24;
				color: #333333;
				line-height: 40rpx;
			}

			&-type {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;

				// &-rightactivation {
				// 	color: #FFFFFF !important;
				// 	border-color: #DE393F !important;
				// 	background-color: #DE393F !important;
				// }

				&-item {
					width: 320rpx;
					height: 130rpx;
					border: 1rpx solid #E3E3E3;
					border-radius: 6rpx;
					text-align: center;
					color: #666666;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					&-img {
						width: 74rpx;
						height: 61rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					&-right {
						display: flex;
						flex-direction: column;
						justify-content: center;

						&-text1 {
							font-size: $FONTSIZE30;
						}

						&-text2 {
							font-size: $FONTSIZE24;
						}
					}
				}
			}
		}
	}

	// 温馨提示弹框
	// 就餐方式弹框
	.slot-content-Tips {
		font-size: 30rpx;
		line-height: 40rpx;
		// .text1 {
		// 	color: #DB9F5E;
		// }
	}

	.slot-content-Tips2 {
		width: 100%;
		background-color: #FFF9F3;
		margin-top: 20rpx;
		color: #FF7910;
		font-size: 26rpx;
		line-height: 49rpx;
		padding: 15rpx 32rpx;
	}

	.confirmButton {
		// background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
		border-radius: 43px;
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>
