discounts-minapp/orderFood/shopDetail.vue

<template>
	<view class="orderFood">
		<view class="shop-info">
			<view class="shop-name">
				{{shopInfo.shopName}}
			</view>
			<view class="address">
				{{shopInfo.address}}
			</view>
		</view>
		
		<view class="content">
			<scroll-view :scroll-y="true"  class="left" :scroll-into-view="scrollTo1" scroll-with-animation>
			<!-- <view class="left"> -->
				<view class="item" :class="[active == index?'active':'']" v-for="(item,index) in list" :id="'tab'+index" :key="index" @click="handleTab(index)">
					<image class="icon" :src="item.imageCnUrl" mode=""></image>
					<view class="name">
						{{item.topName}}
					</view>
				</view>
			<!-- </view> -->
			</scroll-view>
			<scroll-view :scroll-y="true"  class="right" :scroll-into-view="scrollTo" scroll-with-animation @scroll="scroll">
	<!-- 			<view class="test">
					
				</view> -->
				<!-- <view class="right"> -->
					<view class="section" v-for="(item,index) in list" :key="index">
						<view class="section-name" :class="'title'+index" :id="'title'+index" >
							{{item.topName}}
						</view>
					<!-- 	<zs-title :title="item.topName" :value="index" :class="'title'+index" :id="'title'+index" @changeTag="chooseTag"></zs-title> -->
						<view class="item" v-for="(i,d) in item.menuVoList" :key="d" >
							<image class="img" :src="i.imageUrl" mode=""></image>
							<view class="info">
								<view class="title">
									{{i.nameCn}}
								</view>
								<view class="btn-box">
									<view class="price-box">
										<view class="price">
											<view class="unit">
												￥
											</view>
											<view class="num">
												{{i.priceHead}}
											</view>
										</view>
										<view class="old-price">
											￥{{i.price}}
										</view>
									</view>
									<image class="btn" @click.stop="add(i,1,item)" src="../static/add-active.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				<!-- </view> -->
			</scroll-view>
		</view>
		
		<view class="total-box">
			<view class="price-box" @click="handleCar">
				<view class="car-box">
					<image class="icon" src="../static/shop-car.png" mode=""></image>
					<view class="num" v-if="totalNum">
						{{totalNum}}
					</view>
				</view>
				<view class="price">
					<view class="unit">
						￥
					</view>
					<view class="num">
						{{total}}
					</view>
				</view>
			</view>
			
			<button class="buy" :class="[!carList.length?'disabled':'']" :disabled="!carList.length" type="default" @click="buy">{{carList.length?'选好了':'未选择商品'}}</button>
		</view>
		
		
		<!-- 购物车 -->
		<u-popup :show="show" round="32rpx" mode="bottom" @close="show = false">
			<view class="popup-title-box" >
				<view class="title">
					已选商品
				</view>
				<view class="clear" v-if="carList.length" @click="clear">
					清空
				</view>
			</view>
			<u-empty
			        mode="car"
			        icon="http://cdn.uviewui.com/uview/empty/car.png"
					v-if="!carList.length"
			>
			</u-empty>
			<view class="car-content" v-else>
				<view class="item" v-for="(item,index) in carList" :key="index">
					<image class="img" :src="item.imageUrl" mode=""></image>
					<view class="info">
						<view class="title">
							{{item.nameCn}}
						</view>
						<view class="type" v-if="item.config">
							{{item.config}}
						</view>
						<view class="btn-box">
							<view class="price-box">
								<view class="price">
									<view class="unit">
										￥
									</view>
									<view class="num">
										{{item.sellPrice}}
									</view>
								</view>
								<view class="old-price">
									￥{{item.orgPrice}}
								</view>
							</view>
							<view class="count-box">
							<image class="btn" src="../static/remove.png" v-if="item.quantity" @click="add(item,-1,{},index)" mode=""></image>
								<view class="num">
									{{item.quantity}}
								</view>
							<image class="btn" src="../static/add-active.png" @click="add(item,1,{},index)" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="total-box total-box1">
				<view class="price-box" @click="handleCar">
					<view class="car-box">
						<image class="icon" src="../static/shop-car.png" mode=""></image>
						<view class="num" v-if="totalNum">
							{{totalNum}}
						</view>
					</view>
					<view class="price">
						<view class="unit">
							￥
						</view>
						<view class="num">
							{{total}}
						</view>
					</view>
				</view>
				
				<button class="buy" :class="[!carList.length?'disabled':'']" :disabled="!carList.length" type="default" @click="buy">{{carList.length?'选好了':'未选择商品'}}</button>
			</view>
		</u-popup>
		
		
		<!-- 商品详情 -->
		<u-popup :show="show2" round="32rpx" mode="bottom" @close="show2 = false">
			<view class="popup-goodsDetail">
				<view class="box">
					
					<image class="img" :src="goodsInfo.product_img" mode="aspectFit"></image>
					<view class="popup-content">
						<view class="title">
							{{goodsInfo.product_name}}
						</view>
						<view class="desc" v-if="goodsInfo.product_description">
							{{goodsInfo.product_description}}
						</view>
						
						<view class="choose-box" v-if="ot == 'NXDC'">
							<view class="choose-item" v-for="item in goodsInfo.details.spu_specs" :key="item.code">
								<view class="choose-title">
									{{item.name}}
								</view>
								<view class="item-box">
									<view class="item" :class="[i.code == chooseInfo[item.code].code?'active':'']" v-for="i in item.values" :key="i.code" @click="choose(i,item.code)">
										{{i.name}} {{i.price?`￥${i.price}`:''}}
									</view>
								</view>
							</view>
						</view>
						
						<view class="choose-box" v-else-if="ot == 'MDL'">
							<view class="choose-item" v-for="item in goodsInfo.details.optional" :key="item.code">
								<view class="choose-title">
									{{item.name}}
								</view>
								<view class="item-box">
									<view class="item" :class="[i.id == chooseInfo[item.name+'-'+item.id].id?'active':'']" v-for="i in item.sku_infos" :key="i.id" @click="()=>choose(i,item.name+'-'+item.id)">
										{{i.name}} {{i.price?`￥${i.price}`:''}}
									</view>
								</view>
							</view>
							
							<view class="choose-item" >
								<view class="choose-title">
									套餐内容
								</view>
								<view class="item-box">
									<view class="item active"  v-for="i in goodsInfo.details.required" :key="i.id">
										{{i.product_name}}x{{i.amount}}
									</view>
								</view>
							</view>
						</view>
						
						
						<view class="choose-box" v-else-if="ot == 'XBK'">
							<view class="choose-item" v-for="item in goodsInfo.details.optional" :key="item.code">
								<view class="choose-title">
									{{item.name}}
								</view>
								<view class="item-box">
									<view class="item" :class="[i.id == chooseInfo[item.id].id?'active':'']" v-for="i in item.sku_infos" :key="i.id" @click="()=>choose(i,item.id)">
										{{i.name}} {{i.price?`￥${i.price}`:''}}
									</view>
								</view>
							</view>
						</view>							
						
						<view class="choose-box" v-else-if="ot == 'XC'">
							<view class="choose-item" v-for="item in goodsInfo.details.specifications" :key="item.code">
								<view class="choose-title">
									{{item.name}}
								</view>
								<view class="item-box">
									<view class="item" :class="[i.id == chooseInfo[item.id].id?'active':'']" v-for="i in item.values" :key="i.id" @click="()=>choose(i,item.id,item)">
										{{i.name}} {{i.price?`￥${i.price}`:''}}
									</view>
								</view>
							</view>
						</view>
						
						
						
					</view>
				</view>
				
				<view class="btn-box">
					<view class="order-info">
						<view class="left">
							<view class="price-box">
								<view class="price">
									￥{{(itemPrice.price*10000)*num/10000}}
								</view>
								<view class="old-price">
									￥{{ (itemPrice.oldPrice*10000)*num/10000}}
								</view>
							</view>
							<view class="choose">
								{{config}}
							</view>
						</view>
						<view class="count-box">
							<image class="btn1" src="../static/remove.png" v-if="num" @click="add1(-1)" mode=""></image>
								<view class="num">
									{{num}}
								</view>
							<image class="btn1" src="../static/add-active.png" @click="add1(1)" mode=""></image>
						</view>
					</view>
					<button class="btn" type="default" @click="handleAdd">加入购物车</button>
				</view>
				
			</view>
		</u-popup>
		
		<u-modal :show="show1" :title="shopInfo.shopName"  confirmColor="#FF4D3A" confirmText="更换门店" @confirm="confirm">
			<view class="modal-box">
				<view class="shopName">
					店铺暂未营业或已暂停营业
				</view>
				
				<view class="notice">
					请尝试更换门店~
				</view>
			</view>
			
		</u-modal>
		
	</view>
</template>

<script>
	import {shopDetail,menuList,foodGoodsDetail} from '@/api/orderFood.js'
	export default {
		data() {
			return {
				shopId:"63836999-5117-4980-8632-497f007808ef",
				show:false,
				show1:false,
				show2:false,
				active:0,
				list:[],
				shopInfo:{
					shopName:'',
					address:'',
				},
				carList:[],
				scrollTo:'title0',
				scrollTo1:'',
				topList:[],
				offsetTop:0,//顶部距离
				cateName:'',//跳转过来携带的分类名称
				ot:uni.getStorageSync('ot'),
				goodsInfo:{},
				num:1,
				chooseInfo:{},
				item:{},//弹窗内商品信息
				productId:'',
				itemPrice:{//弹窗内商品价格
					price:0,
					oldPrice:0
				}
			};
		},
		computed: {
			totalNum(){
				let total = 0
				this.carList.map(item=>{
					total+=item.quantity
				})
				return total
			},
			total() {
				let total = 0
				this.carList.map(item=>{
					total+=(item.sellPrice*10000*item.quantity)
				})
				return total/10000
			},
			// 选择的规格文字 同时计算当前选择的价格
			config(){
				let str = ''
				for (let key in this.chooseInfo) {
					 str +=this.chooseInfo[key].name +'/'
				}
				if(this.goodsInfo.details&&this.goodsInfo.details.sku_infos){
					let {productId,price,oldPrice} = this.findData()
					this.productId = productId
					this.itemPrice = {
						price,
						oldPrice
					}
				}else if(this.goodsInfo.details&&this.goodsInfo.details.specifications){
					let addPrice = 0
					for (let key in this.chooseInfo) {
						addPrice += this.chooseInfo[key].price
					}
					this.itemPrice = {
						price:this.item.priceHead+addPrice,
						oldPrice:this.item.price+addPrice
					}
					
				}else if(this.ot == 'MDL'){
					this.itemPrice = {
						price:this.item.priceHead,
						oldPrice:this.item.price
					}
				}else if(this.ot == 'XBK'){
					let addPrice = 0
					for (let key in this.chooseInfo) {
						addPrice += this.chooseInfo[key].price
					}
					this.itemPrice = {
						price:this.item.priceHead+addPrice,
						oldPrice:this.item.price+addPrice
					}
				}
				console.log('jiage',this.itemPrice);
				return str
			}
		},
		methods: {
			// 选择规格
			choose(item,key,data){
				console.log(item,key);
				if(this.ot == 'XC'){
					if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id &&!data.mandatory){
						this.$delete(this.chooseInfo,key)
					}else{
						this.$set(this.chooseInfo,key,item)
					}
				}else if(this.ot == 'MDL'){
					if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id){//麦当劳不能不选择
						// this.$delete(this.chooseInfo,key)
					}else{
						this.$set(this.chooseInfo,key,item)
					}
				}
				else if(this.ot == 'XBK'){
					if(this.chooseInfo[key]&&this.chooseInfo[key].id == item.id){//星巴克不能不选择
						// this.$delete(this.chooseInfo,key)
					}else{
						this.$set(this.chooseInfo,key,item)
					}
				}
				else{//奈雪的茶
					this.$set(this.chooseInfo,key,item)
				}
			},
			confirm(){
				this.show1 = false
				uni.navigateTo({
					url:'./shopList'
				})
			},
			// 滚动的选择商品
			scroll(val){
				if(!this.offsetTop){
					this.offsetTop = val.currentTarget.offsetTop
				}
				this.topList.map((item,index)=>{
					if(index!=this.topList.length-1){
						
						if(val.detail.scrollTop>= (item-this.offsetTop)&&(val.detail.scrollTop <=this.topList[index+1]-this.offsetTop)){
							this.scrollTo1 = 'tab'+index
							this.active = index
						}
					}else{
						if(val.detail.scrollTop>= (item-this.offsetTop)){
							this.scrollTo1 = 'tab'+index
							this.active = index
						}
					}
				})
			},
			clear(){
				this.carList = []
			},
			// 购物车内添加数量 商品添加数量 选择规格时不走这里 但是选择规格的购物车内数量操作走这里
			add(item,num,data={},idx){//item:当前操作item num：增加或者减少 data：当前item的上层栏目，idx：购物车内当前操作商品index 方便删除
				// 如果需要选择规格
				if(data.childClassList) return this.handleItem(item,data)
				
				// 肯德基
				if(this.ot == 'Kfc'){
					if(this.carList.some(i=>item.productId == i.productId)){
						this.carList.forEach((row,index)=>{
							if(item.productId == row.productId){
								row.quantity+=num
								if(row.quantity == 0){
									this.carList.splice(index,1)
								}
							}
						})
					}else{
						let obj ={
						  "imageUrl": item.imageUrl,
						  "nameCn": item.nameCn,
						  "productId": item.productId,
						  "quantity": 1,
						  "sellPrice": item.priceHead,
						  "orgPrice": item.price,
						}
						this.carList.push(obj)
					}
				// }else if(this.ot == 'NXDC'){//奈雪的茶 购物车内没有的商品不会从这里添加 所以只处理有的情况
				}else{
					if(this.carList.some((i,d)=>item.productId == i.productId)){
						this.carList.forEach((row,index)=>{
							if(index == idx){
								row.quantity+=num
								if(row.quantity == 0){
									this.carList.splice(index,1)
								}
							}
						})
					}
				}
			},
			// 商品详情内数量操作
			add1(num){
				this.num+=num
			},
			// 计算当前选择规格价格和code
			findData(){
				let productId = ''
				let cur = {}
				let price = 0
				let oldPrice = 0
				let addPrice = 0
				for (let key in this.chooseInfo) {
					cur[key] = this.chooseInfo[key].code
					addPrice += this.chooseInfo[key].price
				}
				 this.goodsInfo.details.sku_infos.map(item=>{
						let obj = {}
						item.specs.map(i=>{
							obj[i.code] = i.spec_code
							
						})
						if(this.areObjectsEqual(cur,obj)){
							price = item.salePrice
							oldPrice = item.price
							return productId = item.code
						}
				})
				console.log('找到对应的',productId,price);
				return {
					productId,
					price:price+addPrice,
					oldPrice:oldPrice+addPrice
				}
			},
			// 选择规格后，加入购物车
			handleAdd(){
				this.show2 = false
				// let {productId,price,addPrice} = this.findData()
				let obj = {}
				if(this.ot == 'NXDC'){
					obj ={
					  "imageUrl": this.item.imageUrl,
					  "nameCn": this.item.nameCn,
					  "productId": this.item.productId,
					  "quantity": this.num,
					  "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
					  "orgPrice": this.itemPrice.oldPrice,
					  "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
					  "selected": [
					    {
					      "round": 0, //奈雪产品round目前没有使用，传0
					      "products": [
					        {
					          "linkId": "",
					          "productId": this.productId, //套餐选项skuID，商品详情的sku列表里面已经包含所有选项组合
					          "quantity": 1
					        }
					      ]
					    }
					  ]
					}
				}else if(this.ot == 'XC'){
					let products = []
					for (let key in this.chooseInfo) {
						products.push(
							{ "linkId": key, "productId": this.chooseInfo[key].id, "quantity": 1 }
						)
					}
					obj ={
					  "imageUrl": this.item.imageUrl,
					  "nameCn": this.item.nameCn,
					  "productId": this.item.productId,
					  "quantity": this.num,
					  "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
					  "orgPrice": this.itemPrice.oldPrice,
					  "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
					  "selected": [
					    {
					      "round": 0,//喜茶产品round目前没有使用，传0
					      "products": products
					    }
					  ]
					}
				}else if(this.ot == 'MDL'){
					let products = []
					for (let key in this.chooseInfo) {
						products.push(
							{
							    "linkId": key.split('-')[1],//下单参数linkId（有时会和主商品id相同）
							    "productId": this.chooseInfo[key].id,//套餐选项商品id
							    "quantity": 1
							}
						)
					}
					obj ={
					  "imageUrl": this.item.imageUrl,
					  "nameCn": this.item.nameCn,
					  "productId": this.item.productId,
					  "quantity": this.num,
					  "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
					  "orgPrice": this.itemPrice.oldPrice,
					  "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
					  "selected": [
					    {
					      "round": 0,//喜茶产品round目前没有使用，传0
					      "products": products
					    }
					  ]
					}
				}
				else if(this.ot == 'XBK'){
					let products = []
					for (let key in this.chooseInfo) {
						products.push(
							{
							    "linkId": key,
							    "productId": this.chooseInfo[key].id,//套餐选项商品id
							    "quantity": 1
							}
						)
					}
					obj ={
					  "imageUrl": this.item.imageUrl,
					  "nameCn": this.item.nameCn,
					  "productId": this.item.productId,
					  "quantity": this.num,
					  "sellPrice": this.itemPrice.price,//市场价（如果存在套餐选项加价，这里的金额需要计算加价）
					  "orgPrice": this.itemPrice.oldPrice,
					  "config": JSON.parse(JSON.stringify(this.config)) , //这里只是为了直观展示套餐选项，实际下单可以传空
					  "selected": [
					    {
					      "round": 0,//喜茶产品round目前没有使用，传0
					      "products": products
					    }
					  ]
					}
				}
				
				this.carList.push(obj)
			},
			// 对比两个对象是否内容相同
		   areObjectsEqual(obj1, obj2) {
			 const keys1 = Object.keys(obj1);
			 const keys2 = Object.keys(obj2);
		
			 if (keys1.length!== keys2.length) {
			   return false;
			 }
		
			 for (const key in obj1) {
			   if (obj1.hasOwnProperty(key)) {
				 if (obj1[key]!== obj2[key]) {
				   return false;
				 }
			   }
			 }
		
			 return true;
		   },
			handleItem(i,item){
				console.log(item);
				this.num = 1
				this.item = i
				if(!item.childClassList) return
				this.show2 = true
				foodGoodsDetail({productId:i.productId,shopId:this.shopId}).then(res=>{
					if(res.state = 'Success'){
						this.goodsInfo = res.content.data
						this.chooseInfo = {}
						if(this.goodsInfo.details.spu_specs){//奈雪的茶
							this.goodsInfo.details.spu_specs.map(item=>{
								this.$set(this.chooseInfo,item.code,item.values[0])
							})
						}else if(this.goodsInfo.details.specifications){//喜茶
							this.goodsInfo.details.specifications.map(item=>{
								this.$set(this.chooseInfo,item.id,item.values[0])
							})
						}else if(this.goodsInfo.details.optional&&this.goodsInfo.details.optional.length&&this.ot=='XBK'){//星巴克
							this.goodsInfo.details.optional.map(item=>{
								this.$set(this.chooseInfo,item.id,item.sku_infos[0])
							})
						}else if(this.goodsInfo.details.optional&&this.goodsInfo.details.optional.length){//麦当劳
							this.goodsInfo.details.optional.map(item=>{
								// id可能相同 所以加上类目的name 方便创建订单时能取到id
								this.$set(this.chooseInfo,item.name+'-'+item.id,item.sku_infos[0])
							})
						}
						console.log(this.chooseInfo);
					}
				})
			},
			handleCar(){
				this.show = true
			},
			handleTab(index){
				this.active = index
				this.scrollTo = 'title'+index
			},
			chooseTag(val){
				console.log('当前',val);
			},
			menuList(){
				uni.showLoading({
					title:'加载中'
				})
				menuList(this.shopId).then(res=>{
					uni.hideLoading()
					if(res.state = 'Success'){
						this.list = res.content.data
						this.list.map((item,index)=>{
							if(this.ot != 'Kfc'&&item.childClassList){
								item.menuVoList = JSON.parse(JSON.stringify(item.childClassList[0].menuVoList))
								// delete item.childClassList
							}
							// 滚动到对应栏目
							if(this.cateName&&(item.topName == this.cateName)){
								this.handleTab(index)
							}
						})
					
						
						this.$nextTick(()=>{
							let query = uni.createSelectorQuery().in(this);
							query.selectAll('.section-name').boundingClientRect(data=>{
								console.log(data);
								this.topList =data.map(item=>{
									return item.top
								})
							}).exec();
							
							
						})
					}
				})
			},
			shopDetail(){
				shopDetail({"id": this.shopId,
				  "lat": "",
				  "lon": ""}).then(res=>{
					if(res.state = 'Success'){
						this.shopInfo.shopName = res.content.data.shopName
						this.shopInfo.address = res.content.data.address
						//是否在营业时间内
						if(res.content.data.openTime&&res.content.data.closeTime&&!this.isInBusinessHours(res.content.data.openTime,res.content.data.closeTime)){
							this.show1 = true
						}
						
						
						
					}
				})
			},
			
			buy() {
				let that = this
				if (uni.getStorageSync('token')) {
					if(JSON.parse(uni.getStorageSync('userInfo')).setMealCode != 0&&JSON.parse(uni.getStorageSync('userInfo')).setMealCode){
						let info ={
							shopName:this.shopInfo.shopName,
							address:this.shopInfo.address,
							shopId:this.shopId,
							products:this.carList,
							total:this.total,
							openTime:this.shopInfo.openTime,
							closeTime:this.shopInfo.closeTime,
							totalNum:this.totalNum
						}
						uni.navigateTo({
							url:`/orderFood/pay`,
							  success: function(res) {
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('pay', info)
							  }
						})
					}else{
						uni.showModal({
							title:'此商品需要开通会员才能购买',
							cancelText:'下次再说',
							confirmText:'立即开通',
							success(res) {
								if(res.confirm){
									uni.navigateTo({
										url:'/my/memberCenter/index'
									})
								}
							}
						})
					}
				}else{
					uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:`/login/login/login?redirect=/orderFood/shopDetail&id=${that.shopId}`
								})
							}
						}
					})
				}
				
			},
			 isInBusinessHours(openTimeStr, closeTimeStr) {
				let open = openTimeStr
				let close = closeTimeStr
				if(open.indexOf('.') != -1){
					let index = open.indexOf('.')
					open = open.substr(0,index)
				}
				if(close.indexOf('.') != -1){
					let index = close.indexOf('.')
					close = close.substr(0,index)
				}
			   const now = new Date();
			   const openTime = new Date(open);
			   const closeTime = new Date(close);
			 
			   // 获取当前时间的时分秒
			   const nowHours = now.getHours();
			   const nowMinutes = now.getMinutes();
			   const nowSeconds = now.getSeconds();
			 
			   // 获取开店时间的时分秒
			   const openHours = openTime.getHours();
			   const openMinutes = openTime.getMinutes();
			   const openSeconds = openTime.getSeconds();
			 
			   // 获取关店时间的时分秒
			   const closeHours = closeTime.getHours();
			   const closeMinutes = closeTime.getMinutes();
			   const closeSeconds = closeTime.getSeconds();
			 
			   // 将当前时间、开店时间和关店时间转换为秒数
			   const nowSecondsTotal = nowHours * 3600 + nowMinutes * 60 + nowSeconds;
			   const openSecondsTotal = openHours * 3600 + openMinutes * 60 + openSeconds;
			   const closeSecondsTotal = closeHours * 3600 + closeMinutes * 60 + closeSeconds;
				
				console.log(openSecondsTotal,closeSecondsTotal,nowSecondsTotal);
			  if ( openSecondsTotal <nowSecondsTotal && nowSecondsTotal<closeSecondsTotal  ) {
			    return true
			  } else {
			    return false
			  }
			}
		},
		onLoad(options) {
			console.log(this.isInBusinessHours("2019-08-24T09:15:22.123Z","2019-08-24T14:15:22.123"));
			
			this.cateName = options.cateName
			this.shopId = options.id || "63836999-5117-4980-8632-497f007808ef"
			// this.shopId = "63836999-5117-4980-8632-497f007808ef"
			this.shopDetail()
			this.menuList()
		},
		onReady () {
			// this.Observer = uni.createIntersectionObserver(this)
			
			// this.Observer.relativeTo('.test',{bottom: 0}).observe('.title0', (res) => {
			// 	console.log(12312);
			// 	// this.$emit('changeTag',this.value)
			// })
		}
	}
</script>

<style lang="scss" >
.orderFood{
	.shop-info{
		width: 100%;
		height: 130rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F0F0F0;
		// position: fixed;
		// top: 0%;
		// left: 0%;
		// z-index: 9;
		background: #fff;
		.shop-name{
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
		.address{
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 16rpx;
		}
	}
	.content{
		height: calc(100vh - 130rpx);
		display: flex;
		overflow: auto;
		box-sizing: border-box;
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom)) ;
		.left{
			flex: 0 0 176rpx;
			background: #F7F7F7;
			.item{
				text-align: center;
				padding: 16rpx 0;
				.icon{
					width: 76rpx;
					height: 76rpx;
				}
				.name{
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
			.item.active{
				background: #FFFFFF;
				.name{
					color: #222222;
				}
			}
		}
		.right{
			flex: 1;
			padding: 0 24rpx;
			overflow: auto;
			position: relative;
			.test{
				width: 100%;
				height: 60rpx;
				background: red;
				position: fixed;
			}
			.section{
				.section-name{
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
					padding-top: 30rpx;
				}
				.item{
					display: flex;
					margin-top: 28rpx;
					.img{
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
					.info{
						flex: 1;
						margin-left: 26rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.title{
							font-weight: bold;
							font-size: 32rpx;
							color: #222222;
						}
						.btn-box{
							display: flex;
							justify-content: space-between;
							.price-box{
								display: flex;
								align-items: center;
								.price{
									display: flex;
									align-items: flex-end;
									color: #FF4D3A;
									.unit{
										font-size: 20rpx; 
									}
									.num{
										font-weight: bold;
										font-size: 36rpx;
									}
								}
								.old-price{
									font-weight: normal;
									font-size: 24rpx;
									color: #AAAAAA;
									text-decoration: line-through;
									margin-left: 16rpx;
								}
							}
							.btn{
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
	
	.total-box1{
		position: inherit!important;
		padding-bottom: 0!important;
	}
	.total-box{
		position: fixed;
		left: 0%;
		bottom: 0;
		width: 100%;
		padding: 10rpx 24rpx env(safe-area-inset-bottom);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #EEEEEE;
		.price-box{
			display: flex;
			.car-box{
				position: relative;
				display: flex;
				align-items: center;
				.icon{
					width: 48rpx;
					height: 48rpx;
				}
				.num{
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					min-width: 36rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 18rpx;
					background: #222222;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
			}
			.price{
				display: flex;
				align-items: flex-end;
				color: #FF4D3A;
				.unit{
					font-size: 20rpx; 
				}
				.num{
					font-weight: bold;
					font-size: 36rpx;
				}
			}
		}
		
		.buy{
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #EE4320;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0;
			
		}
		.buy::after{
			border: none;
			outline: none;
		}
		.buy.disabled{
			background: #F6F6F6;
			color: #AAAAAA;
			
		}
	}
	.popup-title-box{
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		.title{
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
		.clear{
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}
	.u-empty{
		padding: 30rpx 0;
	}
	
	.car-content{
		padding-bottom: 30rpx;
		max-height: 700rpx;
		overflow: auto;
		.item{
			display: flex;
			margin-top: 28rpx;
			padding: 0 24rpx;
			.img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			.info{
				flex: 1;
				margin-left: 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
				.type{
					font-weight: normal;
					font-size: 24rpx;
					color: #AAAAAA;
				}
				.btn-box{
					display: flex;
					justify-content: space-between;
					.price-box{
						display: flex;
						align-items: center;
						.price{
							display: flex;
							align-items: flex-end;
							color: #FF4D3A;
							.unit{
								font-size: 20rpx; 
							}
							.num{
								font-weight: bold;
								font-size: 36rpx;
							}
						}
						.old-price{
							font-weight: normal;
							font-size: 24rpx;
							color: #AAAAAA;
							text-decoration: line-through;
							margin-left: 16rpx;
						}
					}
					.count-box{
						display: flex;
						align-items: center;
						.num{
							width: 100rpx;
							text-align: center;
							font-size: 28rpx;
							color: #222222;
						}
						.btn{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
	.modal-box{
		.shop-name{
			font-weight: 600;
			font-size: 32rpx;
			color: #181818;
			width: 100%;
			text-align: center;
		
		}
		.address{
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 4rpx;
			width: 100%;
			text-align: center;
		}
		
		.notice{
			margin-top: 20rpx;
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			text-align: center;
		}
	}
	
	.popup-goodsDetail{
		padding-bottom: env(safe-area-inset-bottom);
		.img{
			width: 750rpx;
			height: 400rpx;
			vertical-align: bottom;
		}
		.box{
			max-height: 60vh;
			overflow: auto;
		}
		.popup-content{
			padding: 0 24rpx;
			.title{
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
				margin-top: 24rpx;
			}
			.desc{
				font-size: 24rpx;
				color: #222222;
				margin: 24rpx 0;
			}
			.choose-box{
				.choose-item{
					.choose-title{
						font-size: 28rpx;
						color: #222222;
					}
					.item-box{
						display: flex;
						flex-wrap: wrap;
						padding: 20rpx 0;
						.item{
							font-size: 24rpx;
							color: #222222;
							padding: 0 20rpx;
							line-height: 44rpx;
							height: 44rpx;
							background: #fff;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #F0F0F0;
							margin-right: 20rpx;
							margin-bottom: 10rpx;
						}
						.item.active{
							border: 2rpx solid #EE4320;
							background: #FEECE8;
						}
					}
				}
			}
		}
		.btn-box{
			padding: 20rpx 24rpx;
			border-top: 1rpx solid #EEEEEE;
			.order-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					.price-box{
						display: flex;
						align-items: center;
						.price{
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
						}
						.old-price{
							font-size: 22rpx;
							color: #AAAAAA;
							text-decoration: line-through;
						}
					}
					.choose{
						font-size: 20rpx;
						color: #AAAAAA;
						margin-top: 8rpx;
					}
				}
				.count-box{
					display: flex;
					align-items: center;
					.num{
						width: 100rpx;
						text-align: center;
						font-size: 28rpx;
						color: #222222;
					}
					.btn1{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.btn{
				width: 702rpx;
				height: 80rpx;
				background: #EE4320;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 24rpx;
			}
		}
	}
}
</style>