<template>
	<view class="hzIndex">
		<hzHeader title="外卖预定"></hzHeader>
		<view class="container hzContent">
			<view class="main">
				<view class="tab-box">
					<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''"
						@click="currentTabIndex = 0">
						外卖预订
						<view class="tabBottom" v-if="currentTabIndex == 0"></view>
					</view>
					<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''"
						@click="currentTabIndex = 1">
						我的预订
						<view class="tabBottom" v-if="currentTabIndex == 1"></view>
					</view>
				</view>
				<view class="reservation-box" v-if="currentTabIndex == 0">
					<view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
						style="height: 100%;color: #666;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;font-size: 32upx;">
						外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
					</view>
					<!-- <view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
						style="height: 100%;color: #666;background-color: white;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;">
						外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
					</view> -->
					<view v-else>
						<view class="search-box">
							<!-- <uni-search-bar placeholder="查询搜索" @confirm="search" cancelButton='auto' bgColor="#F2F6FA"
									@cancel="cancleSearch"></uni-search-bar> -->
							<view class="barber">
								<text style="font-size: 14px;color:#666">取货地点：</text>
								<view class="barber-box">
									<view class="barber-item" v-for="(item, index) in takeFoodPlace" :key="index"
										@click="choosePlace(index)"
										:class="takeFoodPlaceIndex == index ? 'barberactive' : ''">
										{{ item}}
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="cont" style="min-height:960upx ;margin: 0upx;">
								<view class="classify-box">
									<view class="classify-item" :class="chooseClassifyIndex == index ? 'active' : ''"
										v-for="(item, index) in kinds" :key="index" @click="kindClick(index)">
										<text>{{ item.attr_name }}</text>
									</view>
								</view>
								<view class="food-list" v-if="foodList.length > 0">
									<view class="list-item" v-for="(item, index) in foodList" :key="index">
										<view class="img-box">
											<image :src="formatImgUrl(item.picture)" mode=""
												@click="vbPicture(new Array(formatImgUrl(item.picture)))"></image>
										</view>
										<view class="fr-content">
											<view class="name">{{ item.food_name }}</view>
											<view class="num" 　>　</view>
											<view class="choose-num">
												<image v-if="item.buyNum > 0" @click="removeItem(item)"
													src="/static/icons/jian.png" mode=""></image>
												<text v-if="item.buyNum > 0">{{ item.buyNum }}</text>
												<image
													v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num"
													src="/static/icons/no-jia.png" mode=""></image>
												<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode="">
												</image>
											</view>
											<view class="price">&yen;{{ item.price }}/{{ item.company }}</view>
										</view>
									</view>
								</view>
								<content-none v-else :padTop="30"></content-none>
							</view> -->
						<view class="consty">
							<view class="con">
								<van-sidebar v-model="activeKey">
									<van-sidebar-item v-for="(i,index) in kinds" :key="index"
										:title="i.attr_name"></van-sidebar-item>
								</van-sidebar>
								<view class="con_right">
									<van-empty :description="descriptionVal" v-if="foodList.length==0"></van-empty>
									<van-card v-for="(i,index) in foodList" :key="index" :price="i.price"
										:title="i.food_name" :thumb="i.picture">
										<template #thumb>
											<view class="foodImg">
												<image :src="i.picture" alt="" />
											</view>
										</template>
										<template #desc>
											<view class="no_buy_num">{{i.represent}}</view>
										</template>
										<template #price>
											<view class="pic">
												￥<text class="price">{{i.price}}</text>{{i.company? '/'+i.company : ''}}
											</view>
										</template>
										<template #num>
											<view class="numbox">
												<image :class="[i.isShow==true? '': '']" v-if="i.buyNum > 0"
													@click="removeItem(i)" class="numimg"
													src="@/static/takeaway/jian.png" alt="" />
												<view v-if="i.buyNum > 0" style="color: #0e1a24;">{{i.buyNum}}</view>
												<image
													v-if="(i.quota > 0 && i.buyNum >= i.quota) || i.buyNum >= i.no_buy_num"
													:class="[i.isShow==false|| i.no_buy_num==0 &&discern== 0? 'imgIsShow': '']"
													@click="addItem(i)" class="numimg" src="@/static/takeaway/add.png"
													alt="" />
											</view>
										</template>
									</van-card>
									<!-- <view style="height: 140upx;"></view> -->
								</view>
							</view>
						</view>
						<!-- <view style="height: 100upx;"></view>
							<view class="footer-box " v-if="chooseFoodList.length == 0">
								<image class="notCheck" src="../../static/food/notCheck.png" mode="widthFix"></image>
								<text>未选购商品</text>
							</view>
							<view class="pay-box" v-else>
								<view class="fr-btn" @click="showAlert = true">购物车</view>
								<view class="fl-box" @click="showAlert = true">
									<image class="notCheck" src="../../static/icons/carChecked.png" mode="widthFix"></image>
									<text>&yen;{{ totalPrice }}（{{ totalNum }}）</text>
								</view>
							</view> -->
						<view class="fot">
							<view class="fot_left" @click="showAlert = true">
								<view class="fot_left_top">
									<text class="hj">合计:</text>
									<text class="pic">￥</text>
									<text class="price">{{totalPrice}}</text>
								</view>
								<view class="fot_left_bottom" style="color:#4b5b6b"> 已选择<text>{{totalNum}}</text>件
								</view>
							</view>
							<view class="fot_right" @click="submit">提交订单</view>
						</view>
						<!-- <view class="common-shade " v-if="chooseFoodList.length > 0 && showAlert">
								<view class="list-box food-list box box-column box-between" style="overflow: hidden;">
									<view style="flex-grow: 1;height: 200upx;overflow: auto;">
										<view class="list-item" v-for="(item, index) in chooseFoodList" :key="index">
											<view class="img-box">
												<image :src="formatImgUrl(item.picture)" mode=""></image>
											</view>
											<view class="fr-content">
												<view class="name">{{ item.food_name }}</view>
												<view class="num"></view>
												<view class="choose-num">
													<image v-if="item.buyNum > 0" @click="removeItem(item)"
														src="/static/icons/jian.png" mode=""></image>
													<text v-if="item.buyNum > 0">{{ item.buyNum }}</text>
													<image
														v-if="(item.quota > 0 && item.buyNum >= item.quota) || item.buyNum >= item.no_buy_num"
														src="/static/icons/no-jia.png" mode=""></image>
													<image v-else @click="addItem(item)" src="/static/icons/jia.png" mode="">
													</image>
												</view>
												<view class="price">&yen;{{ item.price }}/{{ item.company }}</view>
											</view>
										</view>
									</view>
									<view style="width: 100%;background: white;height: auto;">
										<view class="box box-row" style="padding: 20upx;">
											<view style="padding: 10upx 0upx;">备　注：</view>
											<view
												style="padding: 10upx;border: 1px solid #E5E5E5;border-radius: 10upx;flex-grow:1">
												<view class="uni-textarea">
													<textarea style="width: auto;" maxlength="40" v-model="remarks" focus
														@blur="bindTextAreaBlur" fixed="true" auto-height
														placeholder="如有额外要求，请填写" />
												</view>
											</view>
										</view>
										<view class="box box-center" style="padding: 20upx;">
											<view
												style="margin-right: 10%;border-radius: 10upx;padding: 20upx;background: #CCCCCC;width: 40%;text-align: center; color: white;"
												@click="showAlert=false">取消</view>
											<view
												style="border-radius: 10upx;padding: 20upx;background: #00c277;width: 40%;text-align: center;color: white;"
												@click="submit">提交订单</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="currentTabIndex == 0&&(week==4||week==5||week==6||week==0)"
							style="height: 100%;color: #666;background-color: white;height: 600upx;line-height: 60upx;padding-left: 50upx;padding-top: 40upx;">
							外卖预订时间：每周一、周二、周三<br />外卖取餐时间：每周五
						</view> -->
						<van-action-sheet v-model="showAlert">
							<template #description>
								<!-- <view class="description_left">
									<image @click="check_all" class="des_img"
										:src="eckAll?'@/static/takeaway/Eck.png':'@/static/takeaway/nEck.png'" alt="">
										<text style="color:#4b5b6b">当前已选{{n}}件商品</text>
								</view> -->
								<view class="description_right" @click="delShoppingCar">
									<image class="des_img" src="@/static/takeaway/del.png" alt="">
										<text>清空</text>
								</view>
							</template>
							<template #default>
								<view class="content tc">
									<van-card v-for="(i,index) in chooseFoodList" :key="index" :price="i.price"
										:desc="i.desc" :title="i.food_name">
										<template #thumb>
											<view class="shoppingcarimg">
												<image @click="shopcareck(i.eck,index)" :src="i.eck?eck:nEck" alt="">
													<image :src="i.picture" alt=""
														onerror="javascript:getImage('img/common/img404.png')">
											</view>
										</template>
										<template #price>
											<view class="pic">
												￥<text class="price">{{i.price}}</text>{{i.company? '/'+i.company : ''}}
											</view>
										</template>
										<template #num>
											<view class="numbox">
												<image v-if="i.buyNum > 0" @click="removeItem(i)" class="numimg"
													src="@/static/takeaway/jian.png" alt="">
													<view v-if="i.buyNum > 0" style="color: #0e1a24;">{{i.buyNum}}
													</view>
													<image
														v-if="(i.quota > 0 && i.buyNum >= i.quota) || i.buyNum >= i.no_buy_num"
														@click="addItem(i)" class="numimg"
														src="@/static/takeaway/add.png" alt="">
											</view>
										</template>
									</van-card>
								</view>
								<view style="height: 2*37*2upx ;"></view>
							</template>
						</van-action-sheet>
					</view>

				</view>
				<view v-if="currentTabIndex == 1">
					<!-- <view class="food-list1" v-if="listInfo.length > 0">
						<view class="main" v-for="(item, index) in listInfo" :key="index">
							<view class="top">
								<view class="dining">预订时间：{{ item.order_time }}</view>
								<view class="status" v-if='item.order_status != 0'>预订成功</view>
								<view class="status font-col" v-else-if='item.order_status == 0'>已取消</view>
								<view class="status font-col" v-else>已过期</view>
							</view>
							<view style="font-size: 28upx;color: #666;padding:10upx 20upx">
								<view style="padding: 6upx 0upx;">
									取货地点：
									<text style="color:#00c277">{{ item.take_food_place }}</text>
								</view>
								<view style="padding: 6upx 0upx;">
									取货日期：
									<text style="color:#00c277">{{ item.take_food_time }}</text>
								</view>
								<view v-if="item.remarks">
									备　　注：
									<text style="color:#00c277">{{ item.remarks }}</text>
								</view>
							</view>
				
							<view class="list-item" v-for="(it, index) in item.orderDetails" :key="index">
								<view class="img-box">
									<image :src="formatImgUrl(it.goods_icon)" mode=""
										@click="vbPicture(new Array(formatImgUrl(it.goods_icon)))"></image>
								</view>
								<view class="fr-content">
									<view class="name">
										{{ it.goods_name }}
									</view>
									<view class="price">
										<view style="float: left;">&yen;{{ it.price }}/{{ it.unit }}</view>
										<view style="float: right;color: #666;padding-right: 20upx;">
											x{{ it.goods_num }}
										</view>
									</view>
								</view>
							</view>
							<view style="border-top: 1px solid #eee;height:100upx">
								<view @click="cancelOrder(item)" v-if="item.order_status == 1&&item.compareTime"
									style="border: 1px solid red; color: red;border-radius:40upx;float: left;padding: 6upx 30upx;font-size: 28upx;margin-top: 28upx;margin-left: 20upx;">
									取消
								</view>
								<view style="float: right;font-size: 28upx;margin-top: 32upx;margin-right: 20upx;">
									总金额：&yen;{{ item.pay_price }}</view>
							</view>
						</view>
					</view>
					<content-none v-else :padTop="20"></content-none> -->
					<view class="list_box">
						<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
							<van-empty :description="descriptionVal" v-if="listInfo.length==0 "></van-empty>
							<view class="item_card" v-for="(i,index) in listInfo" :key="index">
								<view class="card_top">
									<view class="card_top_left">
										<img :src="require('@/static/takeaway/rest_img.png')" alt="">
										<view class="st">{{i.take_food_place}}</view>
										<!-- <view class="order_num"
											:style="active==2?'color:#0e1a24;font-size:0.373*37*2upx;margin-left:0':''">
											订单编号
										</view> -->
									</view>
									<view v-if='i.order_status == 0' class="card_top_right yd">已取消</view>
									<view v-if='i.order_status == 3' class="card_top_right qx">已过期</view>
									<view v-if='i.order_status == 1' class="card_top_right qx">预订成功</view>
								</view>
								<view class="card_con">
									<view class="foodbox">
										<view v-for="(k,dex) in i.orderDetails" class="onefood" :key="dex">
											<image class="food_img" :src="k.goods_icon" alt="">
												<view class="flex_name">
													<view class="food_name">{{k.goods_name}}</view>
													<view class="spec">
														<view class="s-text">&yen; <text
																class="s-t-price">{{ k.price }}</text>/{{ k.unit }}
														</view>
														<view class="s-num">x{{ k.goods_num }}</view>
													</view>
												</view>
										</view>
										<!-- <view v-else class="morefood">
											<view v-for="(k,dex) in i.orderDetails" :key="dex">
												<img class="food_img" :src="k.goods_icon" alt="">
												<view class="food_name">{{k.goods_name}}</view>
											</view>
										</view> -->
									</view>
									<!-- <view class="allNum">共{{i.allNum}}件</view> -->
								</view>
								<view class="card_bon">
									<view>
										预定时间：{{i.order_time}}
									</view>
									<view>
										<span>总金额：￥ </span><span class="pic">{{i.pay_price}}</span>
									</view>
								</view>
							</view>
							<view v-if="page>1 && listInfo.length==0 || isNull"
								style="text-align: center;padding: 5px 0;font-size: 15px;color: #a8a8a8;">
								没有更多了
							</view>
						</van-pull-refresh>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commodityList,
		submitOrder,
		myOrderList,
		cancelOrder,
		getAttrTypesForFood
	} from '@/common/api.js';
	import {
		callbackRequest,
		alertTip,
		sureAlterTip,
		getStorage,
		vbPicture,
		formatImgUrl
	} from '@/common/util.js';
	import contentNone from '@/components/contentNone.vue';
	import loadMore from '@/components/loadMore.vue';
	import datetimePicker from '@/components/dateTime.vue';
	export default {
		data() {
			return {
				week: new Date().getDay(),
				vbPicture: vbPicture,
				formatImgUrl: formatImgUrl,
				dataActive: 0,
				chooseClassifyIndex: 0, //选中的菜单下标
				showAlert: false, //是否显示弹窗
				kinds: [],
				date: [],
				takeFoodPlace: ['梨园', '科技楼'],
				takeFoodPlaceIndex: 0,

				foodList: [],
				chooseFoodList: [], //选中的食品列表
				foodListAll: {}, //所有商品
				userId: getStorage('userInfo').id,
				takeFoodTime: '',
				currentTabIndex: 0,
				orderList: [], //订单列表
				listInfo: [],
				page: 1,
				pageSize: 10,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				userInfo: getStorage('userInfo'), //用户信息
				submitFlag: true,
				remarks: '',
				// 新样式 新增
				descriptionVal: '暂无菜品',
				activeKey: 0, //左边菜品类型key值
				finished: false,
				refreshing: false,
				isNull: false,
			};
		},
		components: {
			contentNone,
			datetimePicker
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				this.chooseFoodList.forEach((v, i) => {
					let itemTotalPrice = this.accMul(v.price, v.buyNum); //v.price * v.buyNum;
					totalPrice += itemTotalPrice;
				});
				return Math.floor(totalPrice * 100) / 100;
			},
			totalNum() {
				let totalNum = 0;
				this.chooseFoodList.forEach((v, i) => {
					totalNum += v.buyNum;
				});
				return totalNum;
			}
		},
		onLoad(option) {
			console.log('2222222222', this.week)
			this.currentTabIndex = option.currentTabIndex || 0;
			if (this.currentTabIndex == 0) {
				// 初始化
				this.chooseFoodList = [];
				this.getAttrTypes();
				// this.getList();
			} else {
				this.page = 1;
				this.loadingType = 0;
				this.initData();
			}
		},
		watch: {
			currentTabIndex: function(newVal, oldVal) {
				if (newVal == 1) {
					this.page = 1;
					this.loadingType = 0;
					this.initData();
				} else {
					this.chooseFoodList = [];
					this.getAttrTypes();
					// this.getList();
				}
			},
			activeKey(n, o) { //监听左侧类型切换
				this.foodList = []
				// this.getrightlist(this.leftList[n])
				this.kindClick(n)
			},
		},
		onShow() {

		},
		methods: {
			onRefresh() {
				// 清空列表数据
				this.finished = true;
				this.initData();
			},
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			choosePlace(index) {
				this.takeFoodPlaceIndex = index;
			},
			compareTime(time1) {
				var endDate = time1 + " 00:00:00";
				endDate = endDate.replace(/-/g, '/');
				var endDateTime = new Date(endDate).getTime();
				var nowDateTime = new Date().getTime();
				if (endDateTime > nowDateTime) {
					return true;
				} else {
					return false;
				}
			},
			getAttrTypes() {
				let data = {
					method: getAttrTypesForFood,
					data: {
						userId: this.userId
					}
				};
				callbackRequest(data).then(res => {
					console.log('分类', res)
					if (res.data.returnCode == 1) {
						this.kinds = res.data.returnData || [];
						this.getList();
					}
				});
			},
			getList() {
				let data = {
					method: commodityList,
					data: {
						userId: this.userId,
						attrType: this.kinds[this.chooseClassifyIndex].attr_name,
					}
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						let result = res.data.returnData || [];
						for (var i = 0; i < this.chooseFoodList.length; i++) {
							for (var j = 0; j < result.length; j++) {
								if (this.chooseFoodList[i].id == result[j].id) {
									result[j].buyNum = this.chooseFoodList[i].buyNum;
								}
							}
						}
						//this.foodListAll = result.locationDec;
						this.foodList = result;


						//this.kindClick(this.chooseClassifyIndex);
					}
				});
			},
			//切换分类
			kindClick(index) {
				this.chooseClassifyIndex = index;
				this.getList();
				// if (index == 0) {
				// 	this.foodList = this.foodListAll.cookedFoodList || [];
				// } else if (index == 1) {
				// 	this.foodList = this.foodListAll.fruitList || [];
				// } else if (index == 2) {
				// 	this.foodList = this.foodListAll.coldDishList || [];
				// } else if (index == 3) {
				// 	this.foodList = this.foodListAll.hotDishList || [];
				// } else if (index == 4) {
				// 	this.foodList = this.foodListAll.vegetablesList || [];
				// } else if (index == 5) {
				// 	this.foodList = this.foodListAll.mainFoodList || [];
				// }
			},
			//点击日期
			switchTab(i) {
				this.dataActive = i;
			},
			//加入购物车  || 购物车商品数量 加1
			addItem(item) {
				if (this.chooseFoodList.length == 0) {
					this.$set(item, 'buyNum', 1);
					this.chooseFoodList.push(item);
					return false;
				} else {
					let boolean = this.chooseFoodList.every(function(value) {
						return value.id != item.id;
					});
					console.log(boolean);
					if (boolean) {
						this.$set(item, 'buyNum', 1);
						this.chooseFoodList.push(item);
					} else {
						item.buyNum++;
					}
				}
			},
			//购物车商品数量 减1
			removeItem(item) {
				// this.$set(item,item.buyNum --);
				item.buyNum--;
				if (item.buyNum == 0) {
					this.chooseFoodList.forEach((v, i) => {
						if (v.id == item.id) {
							this.chooseFoodList.splice(i, 1);
							if (this.chooseFoodList.length == 0) {
								this.showAlert = false;
							}
						}
					});
				}
			},
			submit() {
				if (!this.submitFlag) {
					return;
				}
				this.submitFlag = false;
				let arr = [];
				this.chooseFoodList.forEach((v, i) => {
					let item = {
						goodsId: v.kinds_id,
						goodsNum: v.buyNum
					};
					arr.push(item);
				});
				let data = {
					method: submitOrder,
					data: {
						userId: this.userId,
						diningRoomId: 3,
						takeFoodTime: this.takeFoodTime,
						takeFoodPlace: this.takeFoodPlace[this.takeFoodPlaceIndex],
						orderDetails: arr,
						remarks: this.remarks
					}
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						alertTip('预定成功');
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/take-out2/take-out3?currentTabIndex=1'
							});
						}, 1500);
					} else {
						this.submitFlag = true;
						alertTip(res.data.returnMsg);
					}
				});
			},
			initData() {
				let data = {
					"method": myOrderList,
					data: {
						userId: this.userInfo.id,
						pageSize: this.pageSize,
						pageNum: this.page
					}
				}
				callbackRequest(data)
					.then(res => {
						if (res.data.returnCode == 1) {
							if (res.data.returnData) {
								let result = res.data.returnData || [];
								if (this.page == 1) {
									this.listInfo = result;
								} else {
									if (result.length > 0) {
										this.listInfo = this.listInfo.concat(result);
										this.loadingType = 0;
									} else {
										this.loadingType = 2;
									}
								}
								for (var i = 0; i < this.listInfo.length; i++) {
									var compareTime = this.compareTime(this.listInfo[i].take_food_time);
									this.listInfo[i].compareTime = compareTime;
								}
							} else {
								this.isNull = true
							}

						}
					})
			},
			cancelOrder(item) {
				let data = {
					"method": cancelOrder,
					data: {
						userId: this.userInfo.id,
						orderId: item.id
					}
				}
				console.log(data);
				uni.showModal({
					content: '确认取消此订单 ?',
					success: res => {
						if (res.confirm) {
							callbackRequest(data)
								.then(res => {
									if (res.data.returnCode == 1) {
										alertTip('取消成功', 'success', 2000);
										this.page = 1;
										this.loadingType = 0;
										setTimeout(_ => {
											this.initData()
										}, 1000);
									}
								})
						}
					}
				})
			},
			onNavigationBarButtonTap: function() {
				uni.navigateTo({
					url: '../order-form/order-form'
				});
			},
			chooseDate(e) {
				this.takeFoodTime = e.time;
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.initData();
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/css/common.scss';

	.hzIndex {
		background-color: #f0f5fa;
	}

	.box {
		display: flex;
		display: -webkit-flex;
	}

	.box-row-reverse {
		flex-direction: row;
	}

	/*水平排列*/
	.box-column {
		flex-direction: column;
	}

	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}

	/*居右*/
	.box-right {
		justify-content: flex-end;
	}

	/*居左*/
	.box-center {
		justify-content: center;
	}

	.box-between {
		justify-content: space-between;
	}

	.box-align-center {
		align-items: center;
	}

	.box-wrap {
		flex-wrap: wrap;
		margin-left: 28upx;
	}

	.container {
		margin-top: 150upx;

		.my-code {
			background: #fff;
			padding-top: 80rpx;

			.code-box {
				background: #fff;
				overflow: hidden;

				.code-img {
					display: block;
					width: 350rpx;
					height: 350rpx;
					margin: 70rpx auto 100rpx;
				}
			}

			.money {
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
			}

			.tip {
				font-size: 26rpx;
				color: #666;
				line-height: 40rpx;
				padding: 0 0 30rpx;
				text-align: center;
			}
		}
	}

	.uni-list {
		background: #fff;

		.list-item {
			border-bottom: 10upx solid #f8f8f8;
			padding: 30upx 20upx;

			.content {
				overflow: hidden;

				.image-box {
					float: left;
					width: 200upx;
					height: 200upx;

					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.fr-content {
					margin-left: 220upx;
					font-size: 26upx;

					.text {
						color: #666;
						line-height: 40upx;
						margin-bottom: 10upx;

						text {
							float: left;
							color: #333;
							padding-right: 10upx;
						}
					}

					.status {
						color: red;
						margin-left: 280upx;
						position: absolute;
					}
				}
			}

			.bottom {
				overflow: hidden;
				padding: 10upx 20upx 0;

				.num-box {
					float: left;
					font-size: 28upx;
					color: #333;
					line-height: 40upx;
					padding-top: 20upx;

					text {
						color: #5fbf3d;
						padding-left: 4upx;
					}
				}

				.vote-btn {
					float: right;
					width: 160upx;
					height: 60upx;
					background: #5fbf3d;
					font-size: 26upx;
					color: #fff;
					text-align: center;
					line-height: 60upx;
					border-radius: 4upx;
				}
			}
		}
	}

	.raffle {
		width: 600rpx;
		height: 600rpx;
	}

	.main {
		.cont {
			margin: 0px -44upx 0px -44upx;
		}

		.tab-box {
			padding: 0 24upx;
			width: 80%;
			display: flex;
			font-size: 36upx;
			color: #555555;

			.active_tab {
				font-weight: 800;

			}

			.tab-item {
				width: 40%;

				.tabBottom {
					width: 28%;
					height: 6upx;
					border-radius: 5px;
					background-image: linear-gradient(to right, #64E182, #1CA7B2);
				}
			}
		}

		.tip {
			font-size: 26upx;
			text-align: center;
			color: #00c277;
			margin: 10upx;
		}

		.classify-box {
			float: left;
			width: 150upx;
			height: 100%;
			background: #eee;
			overflow: auto;

			.classify-item {
				padding: 30upx 0;
				line-height: 40upx;
				text-align: center;

				text {
					font-size: 26upx;
					color: #666;
				}
			}

			.active {
				background: #fff;

				text: {
					color: #00c277;
				}
			}
		}
	}

	.food-list {
		margin-left: 150upx;
		height: 100%;
		overflow: auto;
		background: #fff;

		.list-item {
			overflow: hidden;
			padding: 20upx 14upx;
			border-bottom: 1px solid #f8f8f8;

			.img-box {
				float: left;
				width: 120upx;
				height: 120upx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.fr-content {
				margin-left: 140upx;

				.name {
					font-size: 30upx;
					color: #333;
					font-weight: bold;
					//@include overstepOne;
					line-height: 40upx;
					margin-bottom: 6upx;
				}

				.num {
					height: 30upx;
					font-size: 26upx;
					color: #666;
					line-height: 40upx;
					margin-bottom: 6upx;
				}

				.quota-num {
					min-height: 50rpx;
				}

				.buy-num {
					display: inline-block;
					border: 1px solid #ff0000;
					font-size: 24upx;
					color: #ff0000;
					border-radius: 8upx;
					line-height: 32upx;
					padding: 0 10upx;
					vertical-align: top;
				}

				.choose-num {
					float: right;

					image {
						width: 40upx;
						height: 40upx;
						vertical-align: top;
					}

					text {
						display: inline-block;
						font-size: 28upx;
						color: #666;
						width: 80upx;
						text-align: center;
						line-height: 40upx;
						vertical-align: top;
					}
				}

				.price {
					font-size: 32upx;
					color: #ff0000;
				}
			}
		}
	}

	.footer-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80upx;
		background: #7ae5bc;
		text-align: center;
		line-height: 80upx;

		image {
			width: 50upx;
			vertical-align: middle;
		}

		text {
			font-size: 30upx;
			color: #fff;
			vertical-align: middle;
			padding-left: 10upx;
		}
	}

	.pay-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80upx;
		background: #fff;
		line-height: 80upx;

		.fl-box {
			// display: inline-block;
			// float:left;
			padding: 10upx 0 0 30upx;
			line-height: 60upx;
			margin-right: 230rpx;

			image {
				width: 50upx;
				vertical-align: middle;
				margin: 6upx 24upx 0 0;
				vertical-align: top;
			}

			text {
				font-size: 28upx;
				color: #00c277;
				vertical-align: top;
			}
		}

		.fr-btn {
			float: right;
			width: 200upx;
			background: #00c277;
			font-size: 28upx;
			color: #fff;
			text-align: center;
			line-height: 80upx;
		}
	}

	.common-shade {

		// bottom: 80upx;
		// height: auto;
		.list-box {
			width: 85%;
			height: 50%;
			position: absolute;
			top: 10%;
			left: 0;
			background: #fff;
			margin-left: 7%;
			border-radius: 10upx;
		}
	}

	.food-list1 {
		height: 100%;
		overflow: auto;
		background: #f8f8f8;

		// margin: 15upx;
		.main {
			background: #ffffff;
			margin: 10upx;
			border-radius: 10upx;
			margin-bottom: 20upx;

			.top {
				border-bottom: 1px solid #eee;
				padding: 20upx;
				overflow: hidden;

				.dining {
					float: left;
					font-size: 24upx;
					line-height: 40upx;
					color: #555;
				}

				.status {
					float: right;
					font-size: 24upx;
					color: #00c277;
					line-height: 40upx;
				}

				.font-col {
					color: #999;
				}
			}

			.bottom {
				border-top: 1px solid #eee;
				overflow: hidden;
				height: 80upx;
				line-height: 68upx;
				padding-left: 20upx;

				.order-time {
					font-size: 26rpx;
					color: #666;
				}

				.price {
					float: right;
					font-size: 28upx;
					color: #666;

					.btn {
						border: 1px solid #00C277;
						border-radius: 10upx;
						padding: 0upx 20upx;
						color: #00C277;
						height: 60upx;
						line-height: 60upx;
						margin-top: 8upx;
						margin-right: 20upx;
					}
				}
			}
		}

		.list-item {
			overflow: hidden;
			padding: 10upx 10upx 20upx 5upx;

			.img-box {
				border-radius: 10upx;
				float: left;
				width: 120upx;
				height: 120upx;

				image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 6px;
					margin-left: 20upx;
				}
			}

			.fr-content {
				margin-left: 160upx;

				.name {
					font-size: 32upx;
					color: #333;
					@include overstepOne;
					line-height: 40upx;
					margin-bottom: 6upx;
				}

				.num {
					height: 30upx;
					font-size: 26upx;
					color: #666;
					line-height: 40upx;
					margin-bottom: 6upx;
				}

				.quota-num {
					min-height: 50rpx;
				}

				.buy-num {
					display: inline-block;
					border: 1px solid #ff0000;
					font-size: 24upx;
					color: #ff0000;
					border-radius: 8upx;
					line-height: 32upx;
					padding: 0 10upx;
					vertical-align: top;
				}

				.choose-num {
					float: right;

					image {
						width: 40upx;
						height: 40upx;
						vertical-align: top;
					}

					text {
						display: inline-block;
						font-size: 28upx;
						color: #666;
						width: 80upx;
						text-align: center;
						line-height: 40upx;
						vertical-align: top;
					}

					.fl {
						float: right;
						padding: 10upx 20upx;
						font-size: 24upx;
						color: $assistColor;
						line-height: 32upx;
						border: 1px solid $assistColor;
						border-radius: 8upx;
						margin-left: 10upx;
					}
				}

				.price {
					font-size: 28upx;
					margin-top: 52upx;
				}

				.ct {
					margin-left: 20upx;
					color: #ff00009c;
				}
			}
		}
	}

	// 新版本样式
	.reservation-box {
		margin-top: 40upx;
	}

	.search-box {
		margin: 0 24upx;
		background: #FFFFFF;
		border-radius: 10*2upx;
		overflow: hidden;
	}

	.barber {
		margin-top: 16upx;
		margin-left: 24upx;
		margin-bottom: 24upx;
		// border-bottom: 1px solid #eee;
	}

	.barber-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 24upx;
		margin-left: 40upx;
	}

	.barber-item {
		width: 100*2upx;
		height: 38*2upx;
		background: #F2F6FA;
		border-radius: 4*2upx;
		border: 1px solid #F2F6FA;
		line-height: 38*2upx;
		color: #555555;
		text-align: center;
		font-size: 28upx;
		margin-left: 28upx;
	}

	.barber-item:first-child {
		margin-left: 0;
	}

	.barber-item:last-child {
		margin-left: 62upx;
	}

	.barberactive {
		background: #EDFCF7;
		border: 1px solid #00ADA6;
		color: #0DB0A7;
	}

	.sidebarWc {
		height: calc(100vh - 344upx) !important;
	}

	.van-sidebar {
		width: 2.6*37*2upx;
		height: calc(100vh - 464upx);
		padding-bottom: 150upx;
		background-color: #f0f5fa;
		box-sizing: border-box;

		.van-sidebar-item {
			padding-left: 0.54*37*2upx;
			background-color: #f0f5fa;
		}

		.van-sidebar-item__text {
			color: #0e1a24;
		}

		.van-sidebar-item--select,
		.van-sidebar-item--select:active {
			border-radius: 0;
			background-color: #fff;
		}
	}

	.van-sidebar::-webkit-scrollbar {
		display: none;
	}

	.con_right::-webkit-scrollbar {
		display: none;
	}



	.van-popover__action {
		width: 1.8*37*2upx;
	}



	.nav_check {
		display: flex;
		position: relative;
		width: calc(100% - 0.64*37*2upx);
		margin: 0.26*37*2upx auto 0.12*37*2upx;
		align-items: flex-end;
	}

	.nav_check>view {
		height: 1.32*37*2upx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: end;
		padding-bottom: 0.2*37*2upx;
		padding-left: 0.3*37*2upx;
		font-size: 0.427*37*2upx;
		position: relative;
	}

	.nav_check>view>image {
		position: absolute;
		z-index: 0;
		height: 1.08*37*2upx;
		width: 104%;
	}

	.nav_rightimg {
		right: 0;
	}

	.nav_check>view>view {
		position: absolute;
		bottom: .5946*37*2upx;
		z-index: 5;
	}

	.bana {
		/* height: 2.68*37*2upx ; */
		width: calc(100% - 48upx);
		margin: 0 auto;
		padding: 0.36*37*2upx;
		position: relative;
		box-sizing: border-box;
		border-radius: 0.27*37*2upx;
		border: 1px solid #fff;
		background-image: linear-gradient(to right, #C1E0ff, #C9F8FA);
		font-size: 0.3*37*2upx;
		color: #0370ce;
	}

	.nb {
		width: 1.68*37*2upx;
		height: 1.44*37*2upx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.bana>view {
		display: flex;
		align-items: center;
		margin-bottom: 0.2*37*2upx;
	}

	.bana>view>image {
		width: 0.3*37*2upx;
		height: 0.3*37*2upx;
		margin-right: 0.1*37*2upx;
	}

	.consty {
		// height: 81.3%;
		background: #fff;
		margin-right: 24upx;

		.con {
			display: flex;
			margin-top: 0.32 * 37 * 2upx;
			height: calc(100% - 120upx);
			// padding-right: 0.32*37*2upx;
		}

		.con_right {
			border-radius: 0 0.2*37*2upx 0 0;
			overflow: auto;
			background-color: #fff;
			width: calc(100% - 80px);
			padding-top: 0.27*37*2upx;
			height: calc(100vh - 464upx);
			padding-bottom: 150upx
		}
	}

	.numbox {
		display: flex;
		align-items: center;
	}

	.numbox>view {
		margin: 0 0.2*37*2upx;
		font-size: 0.42*37*2upx;
	}

	.numimg {
		width: 0.53*37*2upx;
		height: 0.53*37*2upx;
	}

	.van-card {
		background-color: #fff;
		/* width: 8.3333*37*2upx ; */
	}

	.van-sidebar-item--select::before {
		width: 0.24*37*2upx;
		height: 0.48*37*2upx;
		/* background-color: #00ada6; */
		background-image: linear-gradient(to right, #56cc9d, #04aea5);
		;
		border-radius: 0 0.24*37*2upx 0.2*37*2upx 0;
	}

	.fot {
		width: calc(100% - 48upx);
		height: 1.33*37*2upx;
		background-color: #fff;
		position: fixed;
		z-index: 3000;
		bottom: 0.4*37*2upx;
		left: 50%;
		transform: translate(-50%);
		border-radius: 0.66*37*2upx;
		overflow: hidden;
		display: flex;
		box-shadow: 0 0 0.2*37*2upx 0 #e7eff9;
	}

	.fot_left {
		width: calc(100% - 214upx);
		height: 100%;
		padding-left: 0.66*37*2upx;
		padding-top: 0.1*37*2upx;
		/* background-color: red; */
	}

	.fot_right {
		width: 214upx;
		height: 100%;
		background-image: linear-gradient(to right, #56cc9d, #04aea5);
		font-size: 0.42*37*2upx;
		color: #fff;
		text-align: center;
		line-height: 1.33*37*2upx;
	}

	.hj {
		color: #0e1a24;
		font-size: 0.42*37*2upx;
		font-weight: 600;
	}

	.pic,
	.price {
		color: #fc701e;
	}

	.pic {
		font-size: 26upx;
	}

	.price {
		font-weight: 600;
		font-size: 40upx;
	}

	.fot_left_top {
		margin-bottom: 0.05*37*2upx;
	}

	.fot_left_bottom {
		font-size: 0.32*37*2upx;
	}

	.van-action-sheet__content .content {
		background-color: #fff;
		max-height: 416upx;
	}

	.van-action-sheet__description {
		height: 1.17*37*2upx;
		background-color: #f6f9ff;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.37*37*2upx;
	}

	.van-card__content {
		/* padding: 0.2*37*2upx  0; */
		box-sizing: border-box;
	}

	.description_left {
		color: #0e1a24;
		display: flex;
		align-items: center;
	}

	.description_right {
		color: #97a5b1;
		display: flex;
		align-items: center;
	}

	.des_img {
		width: 0.48*37*2upx;
		height: 0.48*37*2upx;
		margin-right: 0.1*37*2upx;
	}

	.van-card__title {
		font-size: 30upx;
		color: #0e1a23;
		font-weight: 600;
		line-height: normal;
	}

	.van-card__desc {
		font-size: 0.26*37*2upx;
		color: #97a5b1;
	}

	.shoppingcarimg {
		display: flex;
		align-items: center;
	}

	.shoppingcarimg>image:first-child {
		width: 0.53*37*2upx;
		height: 0.53*37*2upx;
		margin-right: 0.32*37*2upx;
	}

	.foodImg image {
		width: 176upx;
		height: 176upx;
		border-radius: 10upx;
	}

	.shoppingcarimg>image:last-child {
		width: 2.35*37*2upx;
		height: 2.35*37*2upx;
	}

	.tc .van-card__thumb {
		width: 3.26*37*2upx;
	}

	.van-sidebar-item--select,
	.van-sidebar-item--select:active {
		font-weight: 600;
		font-size: 0.373*37*2upx;
		color: #0e1a24;
	}

	.no_buy_num {
		/* margin-top: 0.1*37*2upx ; */

	}

	// 新 预定列表 样式
	.list_box {
		margin-top: 24upx;
	}

	.item_card {
		width: 9.36*37*2upx;
		background-color: #fff;
		margin: 0 auto 0.32*37*2upx;
		border-radius: 0.27*37*2upx;
		padding: 0.37*37*2upx 0.32*37*2upx;
	}

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

	.card_top_left {
		display: flex;
		align-items: center;
	}

	.card_top_left>img {
		width: 0.427*37*2upx;
		height: 0.427*37*2upx;
		margin-right: 0.2*37*2upx;
	}

	.st {
		font-size: 16px;
		font-weight: 600;
		color: #0e1a24;
	}

	.card_top_left>span:nth-of-type(1) {
		font-size: 0.427*37*2upx;
		font-weight: 600;
	}

	.order_num {
		font-size: 0.32*37*2upx;
		color: #97a5b1;
		margin-left: 0.2*37*2upx;
	}

	.card_top_right {
		width: 160upx;
		height: 56upx;
		font-size: 28upx;
		text-align: center;
		line-height: 56upx;
		border-radius: 30upx;
	}

	.yd {
		background-color: #E0F6F5;
		color: #00ADA6;
	}

	.qx {
		background-color: #FFF3E7;
		color: #FB8107;
	}

	.card_con {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 24upx;
		justify-content: space-between;
	}

	.foodbox {
		width: 100%;
	}

	.food_img {
		display: flex;
		flex-shrink: 0;
		width: 66*2upx;
		height: 66*2upx;
		border-radius: 10*2upx;
		// background: #97A5B1;
	}

	.flex_name {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 18upx;

		.food_name {
			font-size: 0.374*37*2upx;
			color: #0e1a24;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 2.35*37*2upx;
		}

		.spec {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 10*2upx;

			.s-text {
				font-size: 12*2upx;

				.s-t-price {
					font-weight: bold;
					font-size: 16*2upx;
					color: #555555;
				}
			}

			.s-num {
				font-size: 14*2upx;
			}
		}
	}

	.allNum {
		font-size: 0.32*37*2upx;
		color: #4b5b6b;
		display: flex;
		align-items: center;
	}

	.onefood {
		display: flex;
		margin-top: 24upx;
		// align-items: center;
	}

	.onefood>img {
		margin-right: 0.32*37*2upx;
	}

	.morefood {
		display: flex;
	}

	.morefood>view {
		margin-right: 0.2*37*2upx;
	}

	.card_bon {
		display: flex;
		align-items: flex-end;
		font-size: 28upx;
		justify-content: space-between;
	}

	.card_bon>view:first-child {
		font-size: 0.32*37*2upx;
		color: #999999;
	}

	.pic {
		font-size: 18*2upx;
		color: #333333;
		font-weight: 600
	}

	.van-tab {
		color: #4b5b6b;
	}

	.van-tab--active {
		color: #04aea5 !important;
		font-weight: 600;
	}
</style>