wxThird/pages/index/onlineBooking.vue

<template>
	<view class="box">
		<view class="top">
			<view class="shopTop">
				<swiper class="swiper" circular :autoplay="true" :interval="interval" :duration="duration"
					v-if="shopInfo.imgs">
					<swiper-item v-for="(item,index) in shopInfo.imgs.split(',')" v-if="item">
						<view class="swiper-item">
							<img mode="aspectFit" :src="item" alt="">
						</view>
					</swiper-item>

				</swiper>
			</view>
			<!-- 门店详情 -->
			<view class="newshopNames" v-if="shopInfo">
				<view class="newshopDstop">
					<view class="newshopDname">{{shopInfo.shopName}}</view>

					<view v-if="(data.isShowScore == 1) || (data.isShowEvaluate == 1)" class="appraiseBox">
						<view v-if="data.isShowScore == 1" class="appraise">{{data.shopInfo.miniV2ShopScore?data.shopInfo.miniV2ShopScore:0}}
							<span style='font-size: 26rpx; margin-left: 3rpx;'>分</span>
						</view>
						<view v-if="data.isShowScore == 1" class="line"></view>
						<view @click="goShopAppraiseList()" v-if="data.isShowEvaluate == 1" class="appraiseCount">评价数
							{{data.evaluateCount?data.evaluateCount:0}}

						</view>
						<image v-if="data.isShowEvaluate == 1" class="rightArrow" src="../../static/timg/icon_arrow_right.png" mode=""></image>
					</view>

					<view class="newshopDtime">
						营业时间： <span>{{shopInfo.startTime}} - {{shopInfo.endTime}}</span>
					</view>
					<view class="newshopDbqbox" v-if="shopInfo.brands">
						<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="" style="display: flex;">
							<img src="../../static/timg/icon_coordinate@2x.png"
								style="margin-top: 24rpx;margin-right: 10rpx;" class="shopaddressIcon">
							<view class="newshopDadressName">

								{{shopInfo.address?shopInfo.address:'--'}}
							</view>
						</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)"
					style="padding-top: 10rpx;padding-left: 24rpx;padding-right: 24rpx;">
					<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 class="nodataBox" v-if="rightData.length==0">
					<image src="http://dmsphoto.66km.com.cn/thFiles/3C95A4C5-73F8-4B34-902B-703B8A0825C9.png"
						mode="widthFix" class="nodataImg"></image>
					<view class="noTxt">暂无数据</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:;" :style="{background:'#'+themeColor}" 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: 3000,
				duration: 500,
				distance: 0.05,
				leftIndex: 0,
				yydetailShow: false,
				userInfo: '',
				bizTagId: '',
				leftData: '',
				rightData: '',
				rightTitle: '',
				selectedItems: [],
				location: {
					lng: '',
					lat: '',
				},
				shopInfo: '',
				naShopId: '',
				themeColor: '',
				data: {},
			}
		},
		onLoad(opt) {
			this.userInfo = uni.getStorageSync("userInfo");
			this.themeColor = uni.getStorageSync("themeColor");
			this.naShopId = opt.naShopId;
			if (this.naShopId == null || this.naShopId == 'null') {
				this.naShopId = ''
			}
			console.log(this.naShopId)
			var that = this;
			that.getInfo()
			//this.listBigTags()
		},
		computed: {
			totalPrice() {
				return this.selectedItems.reduce((i, k) => {
					return Number(i) + Number(k.Price)
				}, 0).toFixed(2)
			}
		},
		methods: {
			goShopAppraiseList() {
				uni.navigateTo({
					url: '../user/ShopAppraiseList?shopID=' + this.data.shopInfo.id
					// url: 'ShopAppraiseList?shopID=' + this.numList.shopInfo.id
				})
			},
			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 : '',
					shopId: this.naShopId,
				}, 'GET').then(res => {
					this.shopInfo = res.data.shopInfo;
					this.data = res.data;
					
					uni.setStorage({
						key: 'yyshopInfo',
						data: that.shopInfo,
						success: function() {

						}
					});
					
					
					this.listBigTags()
				})
			},
			listBigTags() {
				uni.showLoading({
					title: '加载中'
				});
				//openreservation/listBigTags
				this.$http('openreservation/listItemWxCategory', {
					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() {
				var that = this;
				if (!that.shopInfo.lat || !that.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.shopInfo.lat),
						longitude: Number(that.shopInfo.lng),
						name: that.shopInfo.shopName,
						address: that.shopInfo.provinceName + that.shopInfo.cityName + that.shopInfo.areaName +
							that.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}
			},
			phones() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.mobilePhone
				});
			},
			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">
	.nodataBox {
		text-align: center;
	}

	.nodataImg {
		width: 400rpx;
		padding-top: 100rpx;
	}

	.noTxt {
		font-size: 32rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.box {
		background: #F4F5F7;
		min-height: 100vh;
	}

	.swiper-item img {
		width: 750rpx;
		height: 500rpx;
	}

	.swiper-item {
		height: 500rpx;
	}

	.swiper {
		height: 500rpx;
	}

	.shopTop {
		height: 500rpx;
	}

	.newshopNames {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: -60rpx;
		position: relative;
		border-radius: 24rpx 24rpx 0px 0px;
		padding-bottom: 20rpx;
	}

	.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 #F19D01;
		color: #f19D01;
		font-size: 24rpx;
		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: 20rpx 20rpx;
		background: url(http://dmsphoto.66km.com.cn/thFiles/010748B7-5678-46C3-941B-60B3CD4D10CB.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 24rpx;
	}

	.newshopDadressName {
		color: #999999;
		padding-top: 16rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		width: 480rpx;
		font-weight: 400;
	}

	.newshopDrlineimg {
		width: 44rpx;
		height: 44rpx;
	}

	.newshopDrlineTxt {
		color: #999999;
		font-size: 24rpx;
		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;
		padding-bottom: 120rpx;
		min-height: 40vh;
	}

	.yuyueLeft {
		background: #F5F5F5;
		width: 154rpx;

	}

	.yuyueRight {
		width: 596rpx;
		background: #FFFFFF;


	}

	.yuyueleftLine {
		font-size: 26rpx;
		padding: 30rpx 24rpx;
		color: #3C3C3C;
		font-weight: 400;
	}

	.leftActive {
		background: #FFFFFF;
		font-weight: 500;
	}

	.yuyueRightTitle {
		color: #999999;
		font-size: 26rpx;
		background: #F9F9F9;
		padding-left: 24rpx;
		line-height: 62rpx;
	}

	.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: calc(50vh + 2rpx);
		overflow-y: scroll;
		background: #F0F0F0;
		position: absolute;
		left: 0;
		bottom: 119rpx;
	}

	.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;
		font-weight: 500;
	}

	.yyDetailTopRight {
		display: flex;
		padding-right: 24rpx;
	}

	.yydetailx {
		line-height: 90rpx;
		color: #999999;
		font-size: 30rpx;
	}

	.yydetalqk {
		width: 86rpx;
		height: 41rpx;
		background: #F4F5F7;
		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;

		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;
	}

	.appraiseBox {
		padding: 5rpx 40rpx 5rpx 20rpx;
		margin-top: 10rpx;
		height: 62rpx;
		background: rgba(255, 0, 0, 0.08);
		border-radius: 0 25rpx 70rpx 0;
		width: 320rpx;
		display: flex;
		align-items: center;
	}


	.appraise {
		color: #FF0000;
		font-size: 38rpx;
		font-weight: bold;

	}

	.line {

		margin: 0 20rpx;
		width: 1rpx;
		height: 30rpx;
		background: #E9E8E8;

	}

	.appraiseCount {

		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		flex-grow: 1;

	}

	.rightArrow {

		width: 7rpx;
		height: 15rpx;
		margin-left: 32rpx;
	}
</style>