wxThird/pages/index/confirmYuyue.vue

<template>
<view class="box">
	<!-- <view class="yuyuCheckTis" :style="{background:'#'+themeColor}">
	   温馨提示：该报价仅为参考价格，实际以门店为准（不同品牌和车型费用不同） 
	</view> -->
	<view class="cont">
		<view class="contkk">
		  <view class="kkline">
			  <view class="kklineLeft">
			  	<span class="stars">*</span> <span>预约门店</span>
			  </view>
			  <view class="kklineRight">{{yyshopInfo.shopName}}</view>
		  </view>
		<!--  <view class="kkline">
			  <view class="kklineLeft">
				<span class="stars">*</span> <span>预约车辆</span>
			  </view>
			  <view class="kklineRight" @click="goCarlist">
				  <span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
				  <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
			  </view>
		  </view> -->
		  <view class="kkline ">
			  <view class="kklineLeft">
				<span class="stars">*</span> <span>预约时间</span>
			  </view>
			  <view class="kklineRight" @click="cktime">
				  <span>{{billDate?billDate:'请选择'}}</span>
				  <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
			  </view>
		  </view>
		  <view class=" lineborderNo" >
		  	<view class="bzline">
		  		<view class="beiz">手机号</view>
		  		<input type="number" v-model="mobilePhone" placeholder="请输入手机号" class="beizInput" placeholder-style="color:#cccccc;">
		  	</view>
		  	
		  </view> 
		</view>
		
		<view class="contkk" style="margin-top: 20rpx;">
			<view class="kkline2">
			  <view class="kklineLeft1">预约项目</view>
			  <view class="kklineRight1">(以实际门店价格为准)</view>
			</view>
			<view class="kkline2" v-for="(item,index) in yuyueData">
			  <view class="kklineLeft3">{{item.ItemName}}</view>
			  <view class="kklineRight3" v-if="item.Price">￥{{item.Price}}</view>
			</view>
		</view>
		<view class="contkk" style="margin-top: 20rpx;">
			<view class="bzline">
				<view class="beiz">备注</view>
				<input type="text" v-model="comment" placeholder="请输入备注（选填）" class="beizInput" placeholder-style="color:#cccccc;">
			</view>
			
		</view>
		
	</view>
	
	<view style="height: 120rpx;"></view>
	<view class="bottom-container">
		<view>
			<view class="bottom-container-price"><span class="qianhaospan" v-if="totalPrice" >￥</span> {{totalPrice}} <span></span></view>
			<view class="ckj">参考价格（到店支付）</view>
		</view>
	  <view  class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="yuyue">立即预约</view>
	</view>
	<timeSelect ref="timeSelect" :stationID="stationID" :timedata="timedata" :themeColor="themeColor" @changeTime="changeTime"></timeSelect>
</view>
</template>

<script>
	import timeSelect from '@/components/timeSelect/timeSelect.vue'
	export default {
		components: {
			timeSelect
		},
		
		data() {
			return {
				comment:'',
				totalPrice:'',
				userInfo:'',
				timedata:'',
				billDate:'',
				yuyueData:'',
				carInfo:'',
				yyshopInfo:'',
				themeColor:'',
				isgo:true,
				stationID:'',
				mobilePhone:'',
				ext:'',
			}
		},
		onLoad(opt) {
			this.themeColor = uni.getStorageSync("themeColor");
			console.log(this.$store.state.yuyueData)
			this.yuyueData=this.$store.state.yuyueData;
			this.stationID=this.yuyueData[0].StationID
			this.totalPrice=opt.totalPrice
			//this.carInfo=this.$store.state.carInfo
			//this.userInfo = uni.getStorageSync("userInfo");
			this.userInfo = this.$store.state.userInfo;
			this.yyshopInfo=uni.getStorageSync("yyshopInfo")
			this.ext=this.$common.getExtStoreId();
			//this.getOrderTimes()
			
		},
		onShow() {
			this.carInfo=this.$store.state.carInfo;
			console.log(this.carInfo)
		},
		methods: {
			goCarlist(){
				uni.navigateTo({
					url:'../user/addCar/cailist'
				})
			},
			yuyue(){
				/* if(!this.carInfo){
					uni.showToast({
						title: '请选择车辆',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(!this.carInfo.id){
					uni.showToast({
						title: '请选择车辆',
						icon: 'none',
						duration: 3000
					});
					return false;
				} */
				if(!this.billDate){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(!this.isgo){
					return false
				}
				 this.isgo=false;
				this.$http('openreservation/saveOrderSheet', {
				  billDate: this.billDate,
				  comment: this.comment,
				  carID: this.carInfo.id || '',
				  orderItem: this.yuyueData.map(item => item.ID).join(),
				  shopId: this.yyshopInfo.id,
				  unionId: this.ext.unionId,
				  stationID:this.stationID,
				  mobilePhone:this.mobilePhone
				 },'POST').then(res => {
					    this.isgo=true;
					    var id=res.data
						if(res.code==0){
							if(this.userInfo){
								uni.showModal({
								    title: '提示',
								    content: '预约订单提交成功',
									confirmText:'返回首页',
									cancelText:'查看订单',
								    success: function (res) {
								        if (res.confirm) {
								           // console.log('用户点击确定');
										   uni.switchTab({
										   	url:'index'
										   })
								        } else if (res.cancel) {
								           // console.log('用户点击取消');
										   // uni.reLaunch({
											  //  url:'../user/bespeakDetail?id='+id
										   // })
										   uni.redirectTo({
										   		url:'../user/bespeakDetail?id='+id
										   })
										   
								        }
								    }
								});
							}else{
								uni.showModal({
								    title: '提示',
								    content: '预约订单提交成功',
									confirmText:'返回首页',
									showCancel:false,
								    success: function (res) {
								        if (res.confirm) {
								           // console.log('用户点击确定');
										   uni.switchTab({
										   	url:'index'
										   })
								        } 
								    }
								});
							}
						

						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							});
						}		
				 })
			},
			changeTime(data){
				console.log(data)
				this.billDate=data
			},
			cktime(){
				 this.$refs.timeSelect.open();
			},
			
		}
	}
</script>

<style scoped lang="less">
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.yuyuCheckTis{
	color: #C8841C;
	line-height: 37rpx;
	font-size: 28rpx;
	background: #FFF7EB;
	padding: 18rpx 24rpx;
	font-weight: 400;
}
.cont{
	padding: 24rpx;
}
.contkk{
	background: #ffffff;
	border-radius: 10rpx;
	padding: 0 20rpx;
}
.kkline{
	display: flex;
	padding: 30rpx 0;
	border-bottom: 1px solid #EEEEEE;
	color: #666666;
	font-size: 28rpx;
}
.kkline2{
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1px solid #EEEEEE;
	color: #666666;
	font-size: 28rpx;
}
.stars{
	color: #FF2400;
}
.kklineRight{
	color: #3c3c3c;
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	width: 450rpx;
}
.kklineLeft {
	width: 200rpx;
}
.rightJt{
	width: 30rpx;
	height: 30rpx;
	margin-top: 4rpx;
}
.lineborderNo{
	border-bottom: none;
}
.kklineLeft1{
	font-weight: 500;
	color: #3C3C3C;
	font-size: 28rpx;
}
.kklineRight1{
	font-weight: 400;
	color: #999999;
	font-size: 26rpx;
}
.kklineLeft3{
	font-weight: 400;
	color: #666666;
	font-size: 28rpx;
	width: 480rpx;
	 overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
}
.kklineRight3{
	font-weight: 400;
	color: #3C3C3C;
	font-size: 28rpx;
}
.bzline{
	display: flex;padding: 30rpx 0;
}
.beizInput{
	width: 450rpx;font-size: 28rpx;
}
.beiz{
	color: #666666;font-size: 28rpx;
	width: 200rpx;
}
.bottom-container{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
}
.newyyBotbutton{
	width: 204rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 74rpx;
	text-align: center;
	margin-right: 30rpx;
	margin-top: 23rpx;
}
.bottom-container-price{
	color: #FF0000;
	padding-top: 30rpx;
	padding-left: 30rpx;
	font-size: 32rpx;
}
.qianhaospan{
	font-size: 22rpx;
}
.ckj{
	color: #999999;font-size: 24rpx;
	padding-left: 30rpx;
}
</style>