wxThird/pages/index/confirmYuyue.vue

<template>
<view class="box">
	<view class="yuyuCheckTis">
	  温馨提示：该报价仅为参考价格，实际以门店为准（不同品牌和车型费用不同）
	</view>
	<view class="cont">
		<view class="contkk">
		  <view class="kkline">
			  <view class="kklineLeft">
			  	<span class="stars">*</span> <span>预约门店</span>
			  </view>
			  <view class="kklineRight">连锁一号</view>
		  </view>
		  <view class="kkline">
			  <view class="kklineLeft">
				<span class="stars">*</span> <span>预约车辆</span>
			  </view>
			  <view class="kklineRight">
				  <span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
				  <img src="../../static/timg/icon_arrow_right.png" alt="" class="rightJt">
			  </view>
		  </view>
		  <view class="kkline lineborderNo">
			  <view class="kklineLeft">
				<span class="stars">*</span> <span>预约时间</span>
			  </view>
			  <view class="kklineRight" @click="cktime">
				  <span>{{billDate?billDate:'请选择'}}</span>
				  <img src="../../static/timg/icon_arrow_right.png" alt="" class="rightJt">
			  </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">￥{{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">
			</view>
			
		</view>
		
	</view>
	
	<view style="height: 120rpx;"></view>
	<view class="bottom-container">
		<view>
			<view class="bottom-container-price"><span class="qianhaospan" >￥</span> {{totalPrice}} <span></span></view>
			<view class="ckj">参考价格（到店支付）</view>
		</view>
	  <view  class="newyyBotbutton" @click="yuyue">立即预约</view>
	</view>
	<timeSelect ref="timeSelect" :timedata="timedata" @changeTime="changeTime"></timeSelect>
</view>
</template>

<script>
	import timeSelect from '@/components/timeSelect/timeSelect.vue'
	export default {
		components: {
			timeSelect
		},
		
		data() {
			return {
				comment:'',
				totalPrice:99,
				userInfo:'',
				timedata:'',
				billDate:'',
				yuyueData:'',
				carInfo:'',
			}
		},
		onLoad() {
			console.log(this.$store.state.yuyueData)
			this.yuyueData=this.$store.state.yuyueData;
			this.carInfo=this.$store.state.carInfo
			this.userInfo = uni.getStorageSync("userInfo");
			//this.getOrderTimes()
		},
		
		methods: {
			yuyue(){
				if(!this.billDate){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 3000
					});
					return 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.userInfo.shopId,
				  unionId: this.userInfo.unionId
				 },'POST').then(res => {
						if(res.code==0){
							uni.showModal({
							    title: '提示',
							    content: '预约成功',
								confirmText:'返回首页',
								cancelText:'查看订单',
							    success: function (res) {
							        if (res.confirm) {
							           // console.log('用户点击确定');
									   uni.switchTab({
									   	url:'index'
									   })
							        } else if (res.cancel) {
							           // console.log('用户点击取消');
							        }
							    }
							});

						}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: 26rpx;
	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: #999999;
	font-size: 28rpx;
	display: flex;
	justify-content: space-between;
	width: 450rpx;
}
.kklineLeft {
	width: 200rpx;
}
.rightJt{
	width: 12rpx;
	height: 20rpx;
	margin-top: 6rpx;
}
.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>