wxThird/pages/index/onlineBooking.vue

<template>
	<view class="box">
		<view class="top">
			<view class="shopTop">
				<swiper class="swiper" circular  :autoplay="false" :interval="interval"
								:duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/A9157023-4939-48B7-BB49-D9D8113EF953.jpg" alt="">
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<img mode="aspectFit" src="http://dmsphoto.66km.com.cn/thFiles/1057BA84-E59D-47B7-9F66-73E3491A443E.jpg" alt="">
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 门店详情 -->
			<view class="newshopNames" v-if="shopInfo">
			  <view class="newshopDstop">
			    <view class="newshopDname">{{shopInfo.shopName}}</view>
			    <view class="newshopDtime">
			      营业时间： <span>{{shopInfo.startTime}} - {{shopInfo.endTime}}</span>
			    </view>
			    <view class="newshopDbqbox" >
			      <view class="newshopDbqline" v-for="(item,index) in shopInfo.brands.split(',')">{{item}}</view>
			    </view>
			  </view>
			  <view class="newshopDadressBpx">
			    <view class="newshopDaleft">
			      <view class="newshopDaleftTop">
			        <img src="../../static/timg/icon_coordinate@2x.png" alt="" class="shopaddressIcon">
			       <!-- <span class="shopDdistance" v-if="Number(shopInfo.distance)>1">距离{{shopInfo.distance}}km</span>
			        <span class="shopDdistance" v-else-if="Number(shopInfo.distance)">距离{{shopInfo.distance*1000}}m</span>
			        <span class="shopDdistance" v-else>距离--km</span> -->
			      </view>
			      <view class="newshopDadressName">{{shopInfo.address}}</view>
			    </view>
			    <view class="newshopDaright">
			      <view class="newshopDrline" @click="goLocation()">
			        <img src="../../static/timg/icon_map@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">地图</view>
			      </view>
			      <view class="newshopDRsx"></view>
			      <view class="newshopDrline" @click="phones()">
			        <img src="../../static/timg/icon_phone@2x.png" alt="" class="newshopDrlineimg">
			        <view class="newshopDrlineTxt">电话</view>
			      </view>
			    </view>
			  </view>
			
			</view>
		</view>
	  <!-- 预约详情-->
	  <view class="yuyue-container">
	  	<view class="yuyueLeft">
	  		<view class="yuyueleftLine" v-for="(item,index) in leftData" @click="listItemWxInfo(item,index)" :class="{leftActive:leftIndex==index}">{{item.Name}}</view>
	  	</view>
		<view class="yuyueRight">
			<view class="yuyueRightTitle">{{rightTitle}}</view>
			<view v-for="(item,index) in rightData" @click="checkItem(item)">
				<view class="yrTop">
					 <view class="ItemName">{{item.ItemName}}</view>
					 <image src="../../static/timg/ickno.png" v-if="selectedItems.findIndex(i=>i.ID===item.ID)==-1" mode="" class="yrTopImg"></image>
					 <image src="../../static/timg/icon_checked@2x.png" v-if="selectedItems.findIndex(i=>i.ID===item.ID)!=-1" mode=""  class="yrTopImg"></image>
				</view>
				<view class="itemSm">
					{{item.Comment}}
				</view>
				<view class="Price">
					 <view class="yuyue-price"> <span class="qianhaospan">￥</span> {{item.Price||'--'}} </view>
				</view>
			</view>
			
			
		</view>
	  </view>
	  
	  <view class="bottom-container newbottom-container">
	    <view class="newyyBox" @click="yuyueDetail">
	      <view class="yyBleft">
	        <img src="../../static/timg/icon_qingdan@2x.png" alt="" class="yyBleftimg">
	      </view>
	      <view>
	        <view class="totalPriceBox"><span>预估总额:</span > <span class="totalPrice"><span class="qianhaospan">￥</span>{{totalPrice}}</span>  </view>
	        <span class="hejishul">合计数量: {{selectedItems.length}}</span>
	      </view>
	  
	    </view>
	  
	    <view href="javascript:;" class=" newbottom-container-button" @click="yuyue">立即预约</view>
	  </view>
	  
	  <view class="yydetailBox" v-if="yydetailShow" @click="yydetailShow=false">
	    <view class="yyDetailTop" @click.stop="">
	      <view class="yyDetailTopleft">清单</view>
	      <view class="yyDetailTopRight">
	        <view class="yydetalqk" @click="yyqingk">清空</view>
	        <view class="yydetailx" @click="yydetailShow=false">X</view>
	      </view>
	    </view>
	    <view class="yydetailCont" @click.stop="">
	       <view class="yydetailContLine" v-for="(item,index) in  selectedItems">
	           <view class="yydlineName">{{item.ItemName}}</view>
	           <view class="yydlineCommnt" v-if="true">{{item.Comment}}</view>
	           <view class="yydPrice">￥{{item.Price}}</view>
	       </view>
	    </view>
	  
	  </view>
	  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interval:2000,
				distance:0.05,
				leftIndex:0,
				yydetailShow:false,
				userInfo:'',
			    bizTagId:'',
				leftData:'',
				rightData:'',
				rightTitle:'',
				selectedItems: [],
				location: {
					lng: '',
					lat: '',
				},
				shopInfo:'',
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo");
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res)
					that.location.lat = res.latitude
					that.location.lng = res.longitude
					that.getInfo() 
			
				},
				fail(err) {
			       that.getInfo()
				}
			});
			//this.listBigTags()
		},
		computed: {
		  totalPrice () {
		    return this.selectedItems.reduce((i, k) => {
		      return Number(i) + Number(k.Price)
		    }, 0).toFixed(2)
		  }
		},
		methods: {
			getInfo(){
				uni.showLoading({
					title: '加载中'
				})
				var that=this;
				this.$http('openreservation/getInfo', {
					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.lng ? this.location.lng : '',
					
				}, 'GET').then(res => {
					this.shopInfo = res.data.shopInfo;
					uni.setStorage({
						key: 'yyshopInfo',
						data:that.shopInfo,
						 success: function () {
						    
						 }
					}); 
				    this.listBigTags()
				})
			},
			listBigTags(){
				uni.showLoading({
					title: '加载中'
				});
				this.$http('openreservation/listBigTags', {
					shopId:this.shopInfo.id,
					unionId:this.userInfo.unionId
				}, 'GET').then(res => {
					uni.hideLoading();
					this.bizTagId=res.data[0].ID
					this.rightTitle=res.data[0].Name
				    this.leftData=res.data;
					this.GetlistItemWxInfo()
				})
			},
			GetlistItemWxInfo(){
				//console.log("listItemWxInfo")
				uni.showLoading({
					title: '加载中'
				});
				console.log("bizTagId"+this.bizTagId)
				this.$http('openreservation/listItemWxInfo', {
					shopId:this.shopInfo.id,
					bizTagId:this.bizTagId
				}, 'GET').then(res => {
					//console.log(res)
					uni.hideLoading();
					// es.data.forEach(mode => {
					// 	mode.ck=false
					// })
				    this.rightData=res.data
					console.log(this.rightData)
				})
			},
			checkItem (item) {
			  let index = this.selectedItems.findIndex(i => i.ID === item.ID)
			  if (index !== -1) {
			    this.selectedItems.splice(index, 1)
			  } else {
			    this.selectedItems.push(item)
			  }
			},
			goLocation(){
				
			},
			phones(){
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.contactorPhone
				});
			},
			listItemWxInfo(item,index){
				console.log(item)
				this.leftIndex=index;
				this.bizTagId=item.ID
				if(item.ID==''){
					this.bizTagId=''
				}
				
				this.rightTitle=item.Name;
				this.GetlistItemWxInfo()
			},
			yuyueDetail(){
				this.yydetailShow=true;
			},
			yyqingk(){
				 this.selectedItems = []
			},
			yuyue(){
				if (!this.selectedItems.length) {
				 uni.showToast({
				 	title: '请选择预约项目',
				 	icon: 'none',
				 	duration: 3000
				 });
				} else {
				 this.$store.commit('mutationsyuyueData', this.selectedItems)
				  uni.navigateTo({
				  	url:'confirmYuyue'
				  })
				}
			}
		}
	}
</script>

<style scoped lang="less">
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.swiper-item img{
	width: 750rpx;
	height: 500rpx;
}
.swiper-item{
	height: 500rpx;
}
.swiper{
	height: 500rpx;
}
.newshopNames{
	width: 702rpx;
	margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: -60rpx;
	position: relative;
}
.newshopDname{
	color: #333333;font-size: 30rpx;
	padding-left: 20rpx;
	padding-top: 23rpx;
	font-weight: 500;
}
.newshopDtime{
	color: #999999;
	font-size: 24rpx;
	padding-left: 20rpx;
	padding-top: 10rpx;
	font-weight: 400;
}
.newshopDstop{
	padding-bottom: 21rpx;
	border-bottom: 1px solid #EEEEEE;
}
.newshopDetailtop{
	margin-bottom: 20rpx;
}
.newshopDbqbox{
	display: flex;
	flex-wrap: wrap;
	padding-left: 20rpx;
}
.newshopDbqline{
	line-height: 30rpx;
	height: 30rpx;
	border-radius: 4rpx;
	border: 1px solid #FF7D30;
	color: #FF7D30;
	font-size: 22rpx;
	padding: 0 8rpx;
	margin-right: 16rpx;
	margin-top: 10rpx;
}
.newshopDbqbox{
	padding-top: 5rpx;
}
.shopaddressIcon{
	width: 22rpx;
	height: 30rpx;
}
.shopDdistance{
	color: #3C3C3C;font-size: 24rpx;line-height: 30rpx;padding-left: 16rpx;
	font-weight: 500;
}
.newshopDaleftTop{
	display: flex;
}
.newshopDadressBpx{
  display: flex;
  padding: 30rpx 20rpx;
  background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
  background-size: 100% 100%;
}
.newshopDadressName{
	color: #999999;padding-top: 16rpx;
	font-size: 24rpx;line-height: 24rpx;
	width: 480rpx;font-weight: 400;
}
.newshopDrlineimg{
	width: 44rpx;
	height: 44rpx;
}
.newshopDrlineTxt{
	color: #999999;
	font-size: 22rpx;
	text-align: center;
	padding-top: 7rpx;
	font-weight: 400;
}
.newright-item .yuyue-item{
	padding-top: 20rpx;
}
.newshopDRsx{
	width: 2rpx;
	height: 71rpx;
	background: #EEEEEE;
}
.newshopDaright{
	display: flex;
	justify-content: space-between;
	width: 150rpx;
	padding-left: 20rpx;
}
.yrTopImg{
	width: 36rpx;
	height: 36rpx;
}
.yuyue-container{
	display: flex;
	margin-top: 20rpx;
	padding-bottom: 120rpx;
	min-height: 40vh;
}
.yuyueLeft{
	background: #F5F5F5;
	width: 154rpx;
	
}
.yuyueRight{
	width: 548rpx;
	background: #FFFFFF;
	padding-left: 24rpx;
	padding-right: 24rpx;
}
.yuyueleftLine{
	font-size: 26rpx;
	padding:30rpx 24rpx;
	color: #3C3C3C;
	font-weight: 400;
}
.leftActive{
	background: #FFFFFF;
	font-weight: 500;
}
.yuyueRightTitle{
	color: #999999;font-size: 26rpx;
	padding: 30rpx 0;
}
.yrTop{
	display: flex;
	justify-content: space-between;
}
.ItemName{
	color: #3C3C3C;
	font-size: 28rpx;
	width: 480rpx;
}
.itemSm{
	color: #999999;
	line-height: 33rpx;
	font-size: 24rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;		
	display: -webkit-box;			
	-webkit-line-clamp: 2;		
	line-clamp: 2;					
	-webkit-box-orient: vertical;	
	
}
.qianhaospan{
	font-size: 22rpx;
}
.yuyue-price{
	color: #FF3B30;
	font-size: 32rpx;
	padding-top: 8rpx;
	border-bottom: 1px  solid #EEEEEE;
	padding-bottom: 19rpx;
}
.newbottom-container-button{
	width: 203rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	color: #FEFFFE;
	font-size: 30rpx;
	line-height: 74rpx;
	text-align: center;
}
.newbottom-container{
	display: flex;
	justify-content: space-between;
	padding-left: 32rpx !important;
	width: 696rpx !important;
    z-index: 66;
	padding: 23rpx 32rpx !important;
	height: 76rpx !important;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
	
}
.yuyue-main .newright-item{
	padding-bottom: 19rpx;
}
.yyBleftimg{
	width: 45rpx;
	height: 35rpx;
	margin-top: 2rpx;
}
.yyBleft{
	display: flex;
	align-items: center;
	padding-right: 33rpx;
}
.newyyBox{
	display: flex;
}
.newyyBox .totalPriceBox{
	line-height: 45rpx;
	color: #666666;
	font-size: 24rpx;
	font-weight: 500;
}
.newyyBox .totalPrice{
	color: #FF0000;
	font-size: 32rpx;
}
.hejishul{
	color: #999999;
	font-size: 24rpx;
	font-weight: 400;
}
.yydetailBox{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background: rgba(0, 0, 0, 0.4);
	z-index: 6;
}
.yydetailCont{
	width: 100vw;
	height: 50vh;
	overflow-y: scroll;
	background: #F0F0F0;
	position: absolute;
	left: 0;
	bottom: 120rpx;
}
.yyDetailTop{
	width: 750rpx;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0px 0px;
	position: absolute;
	left: 0;
	bottom: calc( 50vh + 120rpx);
	display: flex;
	justify-content: space-between;
}
.yyDetailTopleft{
	color: #3C3C3C;
	font-size: 30rpx;
	line-height: 90rpx;
	padding-left: 24rpx;
}
.yyDetailTopRight{
	display: flex;
	padding-right: 24rpx;
}
.yydetailx{
	line-height: 90rpx;
	color: #999999;
	font-size: 30rpx;
}
.yydetalqk{
	width: 86rpx;
	height: 41rpx;
	background: #EEEEEE;
	border-radius: 21rpx;
	text-align: center;
	line-height: 41rpx;
	color: #666666;
	font-size: 24rpx;
	margin-top: 25rpx;
	margin-right: 38rpx;
}
.yydetailContLine{
	width: 702rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	border: 1px solid #DDDDDD;
	margin-top: 20rpx;
	margin-left: 24rpx;
	padding: 24rpx 0px;
}
.yydlineName{
	color: #3C3C3C;
	font-size: 26rpx;
	padding-left: 24rpx;
	
}
.yydlineCommnt{
	color: #999999;
	font-size: 26rpx;
	padding-left: 22rpx;
	line-height: 30rpx;
	padding-top: 10rpx;
}
.yydPrice{
	padding-left: 22rpx;
	padding-top: 10rpx;
	color: #FF3B30;
	font-size: 32rpx;
}
</style>