1

pages.json

@@ -422,6 +422,8 @@
 					}
 				},{
 					"path":"personalList"
+				},{
+					"path":"subscribe"
 				}
 		    ]
 		},

pages/reserve/storeDetails.vue

@@ -130,7 +130,7 @@
 	.storeDetails .setmeal-item{
 		width: 200px;
 		/* height: 98px; */
-		margin-left: 15px;
+		
 		background: #FFF;
 		border-radius: 6px;
 		box-shadow:0 6px 10px 1px #F2F2F2;
@@ -142,8 +142,20 @@
 		background: #221818;
 		padding: 8px 15px;
 		color: #EFDCCB;
+		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cpoun.png');
+		background-repeat: no-repeat;
+		background-size: cover;
+		position: relative;
 		
 	}
+	.storeDetails .setmeal-pl{
+		position: absolute;
+		top:28.5px;
+		width: 18px;
+		height: 18px;
+		border-radius: 9px;
+		background: #FFF;
+	}
 	.storeDetails .setmeal-item-bottom{
 		display: flex;
 		align-items: center;
@@ -278,6 +290,11 @@
 					<view class="right u-skeleton-rect" @click="openShare">
 					  <image src="@/static/images/icon/icon-share.png" class="share-icon" />
 					  <text>分享</text>
+					  <button 
+					  v-if="u"
+						style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;"
+						open-type="share"
+					  ></button>
 					</view>
 				</view>
 				<!-- location-o -->
@@ -310,7 +327,7 @@
 			</view>
 			<view class="setmeal-box">
 				<view v-for="(cl, ci) in list" :key="ci">
-					<view class="setmeal-item u-skeleton-rect" >
+					<view class="setmeal-item u-skeleton-rect" :style="{'margin-left':ci==0?'15px':'0','margin-right': ci+1==list.length?'15px':'5px'}">
 						<view class="setmeal-item-top">
 							<view style="font-size: 14px;margin-bottom: 3px;" class="setmeal-name">剪发卡</view>
 							<view style="font-size: 11px;color: rgba(239, 220, 203, 0.6);" class="setmeal-name">总监精剪+造型+洗吹</view>
@@ -319,6 +336,8 @@
 								<text style="font-size: 20px;font-weight: bold;">78.4</text>
 								<text style="font-size: 13px;">/次  3次¥235.2</text>
 							</view>
+							<view class="setmeal-pl" style="left: -9px;"></view>
+							<view class="setmeal-pl" style="right: -9px;"> </view>
 						</view>
 						<view class="setmeal-item-bottom">
 							有效期：2020.10.05  18:00
@@ -355,7 +374,7 @@
 							</view>
 						</view>
 					</view>
-					<view class="designer-btn" :style="{'background':mc}" >
+					<view class="designer-btn" :style="{'background':mc}" @click.stop="gosubscribe">
 						预约
 					</view>
 				</view>
@@ -391,6 +410,7 @@
 		  @goLook="goLook"
 		  @closeBtn="closeBtn"
 		></coupon>
+		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
 	</scroll-view>
 </template>
 
@@ -404,6 +424,7 @@
 		},
 		data(){
 			return{
+				showAuth:false,
 				pageTitle: "门店详情",
 				scrollTop:0,
 				headStyle:{},
@@ -476,6 +497,7 @@
 			this.u = uni.getStorageSync("mall_UserInfo");
 			this.init();
 			this.getSPList()//获取服务人员列表
+			this.getAllCPList()//获取门店套餐卡
 			wx.showShareMenu({
 			  withShareTicket: true,
 			  menus: ["shareAppMessage", "shareTimeline"],
@@ -496,10 +518,8 @@
 				if(SmallShopId == 0){//如果微店id为0 去找所属微店id
 					SmallShopId = mall_UserInfo ? mall_UserInfo.UserSmallShopId : 0;
 				}
-		  let title =
-		    this.g.app_share_title != null && this.g.app_share_title != "" ? this.g.app_share_title : this.g.name;
-		  let imageUrl =
-		    this.g.app_share_pic != null && this.g.app_share_pic != "" ? this.g.app_share_pic : this.g.cover_pic;
+		  let title =this.g.storeName;
+		  let imageUrl =this.g.storeCoverImg;
 		  let id = this.id;
 		  return {
 		    title: title,
@@ -522,9 +542,9 @@
 				SmallShopId = u.UserSmallShopId? u.UserSmallShopId:0
 			}
 		  return {
-		    title: this.g.app_share_title != null && this.g.app_share_title != "" ? this.g.app_share_title  : this.g.name,
+		    title: this.g.storeName,
 		    path: "/pages/index/index?id=" + this.id + "&user_id=" + uid+ "&SmallShopId=" + SmallShopId+ "&Up=" + this.Up+'&JumpType=5',
-		    imageUrl:this.g.app_share_pic != null && this.g.app_share_pic != ""  ? this.g.app_share_pic  : this.g.cover_pic,
+		    imageUrl:this.g.storeCoverImg,
 		  };
 		},
 		created() {
@@ -553,7 +573,7 @@
 					this.designerH = data.top
 				}
 			}).exec();
-			uni.createSelectorQuery().select(".richtext").boundingClientRect(data=>{
+			uni.createSelectorQuery().select(".wxParse").boundingClientRect(data=>{
 				if(data && data.top){
 					this.richtextH = data.top
 				}
@@ -608,6 +628,19 @@
 					}
 				);
 			},
+			getAllCPList(){
+				this.request2({
+						url: '/api/AppletStores/GetAllCouponPageList',
+						data: {pageIndex:1,pageSize:999,StoreId:this.id}
+					},
+					res => {
+						
+						if (res.resultCode == 1) {
+							this.allCoupon = res.data.pageData
+						}
+					}
+				);
+			},
 			scrollHandler(e) {
 				console.log(e.detail.scrollTop)
 			  this.scrollTop = e.detail.scrollTop;
@@ -617,6 +650,15 @@
 			  if(this.stickyH-this.headH>this.scrollTop){
 				  this.showSticky=false
 			  }
+			  // if(this.scrollTop >this.setmealH+40 &&this.scrollTop<this.designerH){
+				 //  this.current= 0;
+			  // }else if(this.scrollTop >this.designerH+40 && this.scrollTop<this.richtextH){
+				 //  this.current= 1;
+			  // }else if(this.scrollTop >this.richtextH+40 && this.scrollTop<this.commentH){
+				 //  this.current= 2;
+			  // }else if(this.scrollTop >this.commentH+40 ){
+				 //  this.current= 3;
+			  // }
 			  //this.$forceUpdate();
 			},
 			scrollTopHandler() {
@@ -683,7 +725,30 @@
 				uni.navigateTo({
 					url: "/pages/reserve/personalList?id="+this.id,
 				})
+			},
+			gosubscribe(){
+				if (this.u) {
+				  uni.navigateTo({
+				  	url: "/pages/reserve/subscribe?id="+this.id,
+				  })
+				} else {
+				  this.showAuth = true;
+				}
+			},
+			openShare(){
+				if (!this.u) {
+					this.showAuth = true;
 				} 
+			},
+			reloadUserinfo() {
+			  this.u = uni.getStorageSync("mall_UserInfo");
+			  
+			  
+			},
+			//关闭登录窗口
+			gbAuth() {
+			  this.showAuth = false;
+			},
 		}
 	}
 </script>

pages/reserve/subscribe.vue

+<style scoped>
+	.subscribe {
+		height: 100vh;
+		background: #FAF8F9;
+		position: relative;
+		padding-top:15px ;
+	}
+	.subscribe .subscribe-box{
+		width: 100%;
+		background: #FFF;
+		padding: 15px 0 80px;
+	}
+	.subscribe .title{
+		width: 100%;
+		height: 45px;
+		font-size: 16px;
+		color: #1B1D1E;
+		font-weight: bold;
+		padding-left:15px ;
+		line-height: 45px;
+	}
+	.subscribe .classify{
+		display: flex;width:100%;flex-direction: row;overflow-x: auto;
+		padding-bottom: 15px;
+	}
+	.subscribe .classify-item{
+		height: 31px;
+		padding: 0 13px;
+		border-radius: 6px;
+		border: 1px solid #D8D8D8;
+		font-size: 13px;
+		color: #888888;
+		line-height: 29px;
+		margin-right: 5px;
+		white-space: nowrap;
+	}
+	.subscribe .classify-t{
+		width: 100%;
+		background: #FFF;
+		padding: 15px;
+		
+	}
+	.subscribe .c-t-box{
+		width: 100%;
+		height: 143px;
+		border-radius: 6px;
+		background: #FAF8F9;
+		padding: 15px 0;
+		display: flex;width:100%;flex-direction: row;overflow-x: auto;
+	}
+	.subscribe .c-t-item{
+		width: 80px;
+		height: 113px;
+		border-radius: 6px;
+		border: 1px solid #D8D8D8;
+		color: #888888;
+		margin-right: 5px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 20px 0 ;
+		justify-content: space-between;
+		font-size: 12px;
+	}
+	.subscribe .daystyle{
+		display: flex;width:100%;flex-direction: row;overflow-x: auto;
+		border-bottom: 1px solid #E2E2E2;
+		
+	}
+	.subscribe .day-item{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-size: 14px;
+		color: #1B1D1E;
+		padding: 7px 15px;
+		white-space: nowrap;
+		position: relative;
+	}
+	.subscribe .offline{
+		width: 100%;
+		height: 2px;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+	}
+	.subscribe .timestyle{
+		display: flex;width:100%;flex-direction: row;overflow-x: auto;
+		padding: 15px 0;
+	}
+	.subscribe .time-item{
+		width: 75px;
+		height: 45px;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 13px;
+		color: #888888;
+		border: 1px solid #D8D8D8;
+		white-space: nowrap;
+	}
+	.subscribe .info{
+		padding: 0 15px;
+		
+	}
+	.subscribe .info-item{
+		width: 100%;
+		height: 50px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		
+	}
+	.subscribe .info-i-l{
+		font-size: 14px;
+		color: #1B1D1E;
+		font-weight: bold;
+	}
+	.subscribe .inputsmart{
+		width:1;
+		flex: 1;
+		padding-left:20px ;text-align: right;font-size: 12px
+	}
+	.subscribe .persionName{
+		width: 80px;
+		display: inline-block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		padding: 0 3px;
+		text-align: center;
+	}
+	.subscribe .submit{
+		width: 100%;
+		height: 60px;
+		background: #FFF;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		padding: 0 15px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		z-index: 99;
+		
+	}
+	.submit-l{
+		display: flex;
+		flex-direction: row;
+		align-items: flex-end;
+		font-size: 13px;
+	}
+</style>
+<template>
+	<view class="subscribe">
+		<view class="subscribe-box">
+			<view class="title">服务项目</view>
+			<view class="classify">
+				<view v-for="(cl, ci) in lineCate" :key="ci">
+					<view class="classify-item" @click="switchitem(cl)"
+					:style="{
+						'margin-left':ci==0?'15px':'0',
+						'margin-right': ci+1==lineCate.length?'15px':'5px',
+						'border-color':cl.Id== categoryIds?'#FF4048':'#D8D8D8',
+						'color':cl.Id== categoryIds?'#FF4048':'#888888',
+						'background':cl.Id== categoryIds?'#FBE5E7':'#FFF',
+						'font-weight':cl.Id== categoryIds?'Bold':'100',
+						}">
+						{{cl.Name}}
+					</view>
+				</view>
+			</view>
+			<view class="classify-t" v-if="OfflineGoods.length>0">
+				<view class="c-t-box">
+					<view v-for="(c, i) in OfflineGoods" :key="i">
+						<view class="c-t-item" @click="getgoodsList(c)"
+						:style="{
+							'margin-left':i==0?'15px':'0',
+							'margin-right': i+1==OfflineGoods.length?'15px':'5px',
+							'border-color':c.id== GoodsId?'#FF4048':'#D8D8D8',
+							'color':c.id== GoodsId?'#FF4048':'#888888',
+							'background':c.id== GoodsId?'#FBE5E7':'#FFF',
+							'font-weight':c.id== GoodsId?'Bold':'100',
+							}">
+							<image mode="aspectFill" :src="c.cover_pic" style="width: 30px;height: 30px;"></image>
+							<text class="persionName">{{c.name}}</text>
+							
+						</view>
+					</view>
+				</view>
+			</view>
+			<view style="width: 100%;height: 15px;background: #FAF8F9;" v-if="dayList.length>0"></view>
+			<view class="title" v-if="dayList.length>0">到店时间</view>
+			<view class="daystyle" v-if="dayList.length>0">
+				<view v-for="(c, i) in dayList" :key="i">
+					<view class="day-item" @click="btnday(c,i)"
+					:style="{
+						'color':c.DayDateStr== selectDay?'#FF4048':'#888888',
+						}">
+						<text>{{c.WeekDayStr}}</text>
+						<text style="margin-top: 3px;">{{c.DayDateStr}}</text>
+						<view class="offline" :style="{'background':c.DayDateStr== selectDay?'#FF4048':'#FFF',}"></view>
+					</view>
+				</view>
+			</view>
+			<view class="timestyle" v-if="timeList.length>0">
+				<view v-for="(c, i) in timeList" :key="i">
+					<view class="time-item" @click="btntime(c)"
+					:style="{
+						'margin-left':i==0?'15px':'0',
+						'margin-right': i+1==timeList.length?'15px':'5px',
+						'border-color':c== selecttime?'#FF4048':'#D8D8D8',
+						'color':c== selecttime?'#FF4048':'#888888',
+						'background':c== selecttime?'#FBE5E7':'#FFF',
+						'font-weight':c== selecttime?'Bold':'100',
+						}">
+						<text>{{c}}</text>
+					</view>
+				</view>
+			</view>
+			<view style="width: 100%;height: 15px;background: #FAF8F9;" v-if="designerList.length>0"></view>
+			<view class="title" v-if="designerList.length>0">设计师</view>
+			<view class="classify-t" style="padding: 0;" v-if="designerList.length>0">
+				<view class="c-t-box" style="padding: 0 0 15px;background: #FFF;">
+					<view v-for="(c, i) in designerList" :key="i">
+						<view class="c-t-item" @click="getdesigner(c)"
+						:style="{
+							'margin-left':i==0?'15px':'0',
+							'margin-right': i+1==designerList.length?'15px':'5px',
+							'border-color':c.Gender== selectdesigner?'#FF4048':'#D8D8D8',
+							'color':c.Gender== selectdesigner?'#FF4048':'#888888',
+							'background':c.Gender== selectdesigner?'#FBE5E7':'#FFF',
+							'font-weight':c.Gender== selectdesigner?'Bold':'100',
+							'padding':i==0?'20px 0':'10px 0',
+							'height':'123px'
+							}">
+							<image mode="aspectFill" v-if="i==0" :src="c.ServiceLogo" style="width: 38px;height: 35px;"></image>
+							<u-avatar v-if="i!=0" :src="c.ServiceLogo" size="110"></u-avatar>
+							<view style="display: flex;flex-direction: column;align-items: center;">
+								<text class="persionName" style="">{{c.Name}}</text>
+								<text class="persionName"  style="font-size: 10px;color: #999999;" v-if="i!=0">{{c.ReserveCount}}人预约</text>
+							</view>
+							
+						</view>
+					</view>
+				</view>
+			</view>
+			<view style="width: 100%;height: 15px;background: #FAF8F9;" ></view>
+			<view class="title" >预约人信息</view>
+			<view class="info">
+				<view class="info-item">
+					<text class="info-i-l">人数</text>
+					<u-number-box v-model="value" :min="1" @change="valChange"></u-number-box>
+				</view>
+				<view class="info-item">
+					<text class="info-i-l">手机</text>
+					<input class="uni-input inputsmart"  v-model="Mobile" placeholder='请输入手机号码' />
+					
+					<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber='getphonenumber'>获取手机号码</button> -->
+				</view>
+				<view class="info-item">
+					<text class="info-i-l">备注</text>
+					<input class="uni-input inputsmart"  v-model="remarks" placeholder='选填，请输入您的其他要求' />
+				</view>
+			</view>
+			<view class="submit">
+				<view class="submit-l">
+					<text>定金：</text>
+					<text :style="{'color':mainColor}">￥<text style='font-size: 20px;'>{{goods.price*value}}</text></text>
+				</view>
+				<u-button
+					size="80"
+					:ripple="true"
+					shape="circle"
+					@click="submitOrderHandler()"
+					:custom-style="{
+						backgroundColor: mainColor,
+						height: '80rpx',
+						color: '#FFF',
+						fontSize: '14px'
+					}"
+				>
+					<u-loading mode="circle" style="margin-right: 5px;" v-if="submitOrder"></u-loading>
+					立即预约
+				</u-button>
+			</view>
+		</view>	
+		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
+		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
+			<view style="background:#fff;width:500rpx">
+				<view style="padding:10px 0 0 10px">提交失败</view>
+				<view style="text-align:center;padding-bottom:40rpx">
+					<view style="margin:80rpx 0">支付取消</view>
+					<span @click="exitPay" style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import payCom from '@/components/pay/pay';
+	
+	export default {
+		components: {
+			payCom,
+		},
+		data() {
+			return {
+				pageTitle: "预约",
+				mainColor: "",
+				loading: true,
+				submitOrder:false,
+				payExit: false,
+				payBtn: false,
+				id:0,
+				goods:{},
+				lineCate:[],
+				OfflineGoods:[],
+				categoryIds:0,
+				GoodsId:0,
+				dayList:[],
+				timeList:[],
+				designerList:[],
+				selectDay:'',
+				selecttime:'',
+				selectdesigner:0,
+				value:1,
+				remarks:'',
+				Mobile:'',
+				payInfo: {
+					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
+					OrderId: '',
+					OrderPayType: 1,
+					GoodsName: ''
+				},
+			};
+		},
+		
+		onLoad(option) {
+			this.mainColor = this.$uiConfig.mainColor;
+			if(option && option.id){
+				this.id = option.id
+			}
+			this.payInfo.OpenId=uni.getStorageSync('mall_UserInfo').OpenId;
+			
+		},
+		mounted() {
+			uni.setNavigationBarTitle({
+				title: this.pageTitle,
+			});
+			this.getAppllCate()//获取分类
+			
+		},
+		methods: {
+			
+			getAppllCate(){
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.request2({
+						url: '/api/AppletGoods/GetAppletOfflineCate',
+						data: {}
+					},
+					res => {
+						if (res.resultCode == 1) {
+							this.lineCate = res.data
+							this.categoryIds = this.lineCate[0].Id;
+							this.GetAppOGList()
+						}
+						uni.hideLoading();
+					}
+				);
+			},
+			GetAppOGList(){
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.request2({
+						url: '/api/AppletGoods/GetAppletOfflineGoodsList',
+						data: {categoryIds:this.categoryIds,StoreId: this.id}
+					},
+					res => {
+						
+							this.OfflineGoods = res.data;					
+							this.GoodsId= 0;
+							this.dayList=[];
+							this.timeList=[];
+							this.designerList=[];
+							if(this.OfflineGoods.length>0){
+								this.GoodsId = this.OfflineGoods[0].id;
+								this.GetApplOGInfo()
+							}
+						uni.hideLoading();
+					}
+				);
+			},
+			GetApplOGInfo(){
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.request2({
+						url: '/api/AppletGoods/GetAppletOfflineGoodsInfo',
+						data: {GoodsId:this.GoodsId,StoreId: this.id}
+					},
+					res => {
+						if (res.resultCode == 1) {
+							if(res.data && res.data.goods){
+								this.goods = res.data.goods;
+								this.payInfo.GoodsName = this.goods.name.slice(0,10);
+								this.dayList = res.data.goods.storeDateList;
+								this.selectDay= this.dayList[0].DayDateStr;
+								this.timeList = this.dayList[0].TimeList;
+								this.selecttime= this.timeList[0];
+								this.designerList = res.data.goods.persionList;
+								let obj = {
+									ServiceLogo:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/timeisup.png',
+									Name:'到点分配',
+									Gender:0,
+								}
+								this.designerList.unshift(obj)
+								
+								this.selectdesigner= this.designerList[0].Gender;
+							}
+						}
+						uni.hideLoading();
+					}
+				);
+			},
+			submitOrderHandler(){//提交订单
+				let that = this;
+				this.submitOrder = true;
+				uni.requestSubscribeMessage({
+					tmplIds: that.goods.template_message_list,
+					complete(res) {
+						let form = {};
+						form.GoodsId = that.goods.id;
+						form.StoresId = that.id;
+						form.Mobile = that.Mobile;
+						form.Income = that.goods.price*that.value;
+						form.Remark = that.remarks;
+						form.CouponMoney = 0;
+						form.DetailList = [];
+						let obj={
+							GoodsId:that.goods.id,
+							ServicepersonalId:that.selectdesigner,
+							ServiceDate:that.selectDay,
+							ServiceTime:that.selecttime,
+							Number: that.value
+						}
+						form.DetailList.push(obj)
+						console.log(form)
+						that.request2(
+							{
+								url: '/api/AppletOrder/SetAppletOfflineGoodsOrderInfo',
+								data: form
+							},
+							res => {
+								if (res.resultCode == 1) {
+									that.submitOrder = false;
+									that.payBtn = true;
+									that.payInfo.OrderId = res.data.OrderId;
+									that.payInfo.total_price = form.Income;
+								}
+								else{
+									that.$refs.uToast.show({
+										title: res.data.message,
+										type: 'warning'
+									});
+								}
+								
+							}
+						);
+					
+					}
+				});
+			},
+			getphonenumber(e){
+					console.log(e)  
+					uni.checkSession({//检查登录状态是否过期
+						success:(x)=>{
+							if(x.errMsg=='checkSession:ok'){//没有过期
+								console.log('没过期')
+							}
+						},
+						fail:(err)=>{//检测失败重新登录
+							console.log(err)
+						}
+					})
+			},
+			switchitem(item){//选中分类的操作
+				this.categoryIds = item.Id;
+				this.GetAppOGList()
+			},
+			getgoodsList(item){//选中商品的操作
+				this.GoodsId = item.id;
+				this.GetApplOGInfo()
+			},
+			btnday(item,i){//选中日期的操作
+				this.selectDay = item.DayDateStr;
+				this.timeList = this.dayList[i].TimeList;
+				this.selecttime= this.timeList[0];
+			},
+			btntime(item){
+				this.selecttime = item;
+			},
+			getdesigner(item){//设计师
+				this.selectdesigner = item.Gender
+			},
+			valChange(e){
+				this.value = e.value
+			},
+			closePay() {
+				this.payBtn = false;
+				this.payExit = true;
+			},
+			exitPay() {
+				this.payExit = false;
+				// uni.redirectTo({
+				//   url: "/pages/order/index/index?status=0",
+				// });
+			},
+		},
+	};
+</script>
+
+