discounts-minapp/orderFood/index.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.channelPrice}}
											</view>
										</view>
										<view class="old-price">
											￥{{i.price}}
										</view>
									</view>
									<image class="btn" @click="add(i,1)" 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="btn-box">
							<view class="price-box">
								<view class="price">
									<view class="unit">
										￥
									</view>
									<view class="num">
										{{item.selPrice}}
									</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)" mode=""></image>
								<view class="num">
									{{item.quantity}}
								</view>
							<image class="btn" src="../static/add-active.png" @click="add(item,1)" 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>
		
	</view>
</template>

<script>
	import {shopDetail,menuList} from '@/api/orderFood.js'
	export default {
		data() {
			return {
				show:false,
				active:0,
				list:[],
				shopInfo:{
					shopName:'',
					address:'',
				},
				carList:[],
				scrollTo:'title0',
				scrollTo1:'',
				topList:[],
				offsetTop: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.selPrice*10000*item.quantity)
				})
				return total/10000
			}
		},
		methods: {
			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){
				if(this.carList.some(i=>item.productId == i.productId)){
					this.carList.forEach((i,index)=>{
						if(item.productId == i.productId){
							item.quantity+=num
							if(item.quantity == 0){
								this.carList.splice(index,1)
							}
						}
					})
				}else{
					let obj ={
					  "imageUrl": item.imageUrl,
					  "nameCn": item.nameCn,
					  "productId": item.productId,
					  "quantity": 1,
					  "selPrice": item.channelPrice,
					  "orgPrice": item.basePrice,
					}
					this.carList.push(obj)
				}
			},
			handleCar(){
				this.show = true
			},
			handleTab(index){
				this.active = index
				this.scrollTo = 'title'+index
			},
			chooseTag(val){
				console.log('当前',val);
			},
			menuList(){
				menuList('63836999-5117-4980-8632-497f007808ef').then(res=>{
					if(res.state = 'Success'){
						this.list = res.content.data
						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": "63836999-5117-4980-8632-497f007808ef",
				  "lat": "",
				  "lon": ""}).then(res=>{
					if(res.state = 'Success'){
						this.shopInfo.shopName = res.content.data.shopName
						this.shopInfo.address = res.content.data.address
					}
				})
			},
			
			buy() {
				console.log(this.carList);
				let info ={
					shopName:this.shopInfo.shopName,
					address:this.shopInfo.address,
					shopId:'63836999-5117-4980-8632-497f007808ef',
					products:this.carList,
					total:this.total
				}
				uni.navigateTo({
					url:`/orderFood/pay`,
					  success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('pay', info)
					  }
				})
			}
		},
		onLoad() {
			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.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-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;
						}
					}
					.count-box{
						display: flex;
						align-items: center;
						.num{
							width: 100rpx;
							text-align: center;
							font-size: 28rpx;
							color: #222222;
						}
						.btn{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
}
</style>