discounts-minapp/hotel/makeOut.vue

<template>
	<view class="hotel-makeOut">
		<view class="content">
			<view class="info-box">
				<zs-img class="img" :src="form.roomPic" width="200rpx" height="200rpx" radius="full"></zs-img>
				<view class="info">
					<view class="title">
						{{form.roomNameCn}}
					</view>
					<view class="desc-box">
						<view class="text" v-if="info.area">
							{{info.area}}
						</view>
						<view class="text" v-if="info.window">
							{{info.window |filterWindow}}
						</view>
					</view>
					<view class="notice">
						{{info.meal}} {{info.cancel}}
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="time-box">
					<view class="item">
						<view class="label">
							入住
						</view>
						<view class="time">
						{{form.checkin | filterDate('time')}}
						</view>
					</view>
					<view class="item">
						<view class="label">
							离店
						</view>
						<view class="time">
						{{form.checkout | filterDate('time')}}
						</view>
					</view>
				</view>
				<view class="day">
					{{day}}晚
				</view>
			</view>
		</view>
		
		<view class="content room-box">
			<view class="sub-title">
				房间数
			</view>
			<view class="desc">
				{{form.numberofRooms}}间房 每间房2 成人 0儿童
			</view>
			<view class="tab-box">
				<view class="tab" :class="[d+1 == form.numberofRooms?'active':'',d%4?'ml20':'']" v-for="(i,d) in 8" :key="d" @click="choose(d)">
					{{i+1}}间 
				</view>
			</view>
		</view>
		
		<view class="content add-box">
			<view class="sub-title">
				入住信息
			</view>
			
			<u--form
				labelPosition="left"
				:model="form"
				ref="uForm"
				labelWidth="150rpx"
			>
			<view v-for="(item,index) in form.customerInfo" :key="index">
				<view class="title-box">
					<view class="title">
						房间{{index+1}}
					</view>
				</view>
				<u-form-item
					label="姓名"
					:prop="`customerInfo.${index}.value`"
					:ref="'customerInfo.'+index+'.value'"
					borderBottom
					required
				>
					<u--input
							v-model="item.value"
							border="none"
							placeholder="请填写实际入住人姓名"
					></u--input>
				</u-form-item>
			</view>
				<u-form-item
					label="联系手机"
					prop="contactPhone"
					borderBottom
					ref="item1"
					required
				>
					<u--input
							v-model="form.contactPhone"
							border="none"
							:maxlength="11"
							placeholder="用于接收短信通知"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		
		<view class="content ticket-box">
			<view class="sub-title">
				发票信息
			</view>
			<view class="box" @click="handleCall">
				<view class="ticket-title">
					不需要发票
				</view>
				<view class="ticket-desc">
					需要发票可以 联系 400-797-5000 客服开票
				</view>
				<image class="icon" src="../static/right.png" mode=""></image>
			</view>
		</view>
		
		
		<view class="btn-box">
			<view class="left">
				<view class="num">
					共{{form.numberofRooms}}件
				</view>
				<view class="total">
					合计 <view class="price-box">
						<view class="unit">
							￥
						</view>
						<view class="price">
							{{form.totalPrice}}
						</view>
					</view>
				</view>
			</view>
			<button class="btn" @click="handleBuy" :loading="loading">
				提交订单
			</button>
		</view>
		
	</view>
</template>

<script>
	import {addOrder} from '@/api/hotel.js'
	import {
		creatPayOrder,
		queryPayOrder,
	} from '@/api/payment.js'
	export default {
		data() {
			return {
				tab: 0,
				day:1,
				form:{
				  "roomNameCn":'',
				  "hotelIdPic":'',
				  "roomPic":'',
				  "channel":'ZhongShu',
				  "checkin": "",
				  "checkout": "",
				  "childAges": [
					0
				  ],
				  "childNum": 0,
				  "contactEmail": "",
				  "contactName": "",
				  "contactPhone": "",
				  "customerArriveTime": "",
				  "customerInfo": [
					{
						value:''
					}
				  ],
				  "hotelId": 0,
				  "manNum": 0,
				  "numberofRooms": 1,
				  "ratePlanId": "",
				  "specialRemarks": "",
				  "totalPrice": 0
				},
				rules:{
					contactPhone:[
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					customerInfo:[]
				},
				loading:false,
				query: {
					"msgType": "wx.unifiedOrder",
					"orderDesc": "",
					"orderNo": "",
					"channel":'ZhongShu',
					"subOpenId": "",
					"userId": ""
				},
				averagePrice:0,
				info:{
					roomNameCn:'',
					area:'',
					window:'',
					meal:'',
					cancel:''
				}
			}
		},
		computed: {
			price() {
				this.form.totalPrice = this.averagePrice*this.form.numberofRooms*this.day
				return '' 
			}
		},
		filters: {
			filterDate: function(value,type) {
					let timestamp = new Date(value).getTime()
				if(type == 'time'){
					return uni.$u.timeFormat(timestamp, 'mm月dd日');
				}else if(type == 'day'){
					let arr = ['日','一','二','三','四','五','六']
					let num = new Date(timestamp).getDay()
					return `周${arr[num]}`
				}
			},
			filterWindow:function(val){
				if(val === 0){
					return '无窗'
				}else if(val === 1){
					return '部分有窗'
				}else if(val === 2){
					return '有窗'
				}else if(val === 3){
					return '不确定'
				}else if(val === 4){
					return '内窗'
				}else if(val === 5){
					return '天窗'
				}else if(val === 6){
					return '封闭窗'
				}else if(val === 7){
					return '飘窗'
				}
			},
		},
		
		methods: {
			handleCall() {
					uni.makePhoneCall({
						phoneNumber: '400-797-5000' //仅为示例
					});
				
			},
			setRules() {
				  this.form.customerInfo.forEach((ele, index) => {
					this.$set(this.rules, `customerInfo.${index}.value`, [
					  {
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					  },
					])
				  })
		
				  this.$nextTick(() => {
				  		this.$refs.uForm.setRules(this.rules)
				  })
			},
			choose(val){
				this.form.numberofRooms = val+1
				this.form.manNum = val+1
				if(this.form.customerInfo.length<val+1){
					let num = val+1 - this.form.customerInfo.length
					for (let index = 0; index < num; index++) {
						this.form.customerInfo.push({
							value:''
						})
					}
				}else if(this.form.customerInfo.length>val+1){
					this.form.customerInfo.length = val+1
				}
				this.$nextTick(()=>{
					
				this.setRules()
				})
				
				console.log('this.form.customerInfo',this.form.customerInfo,this.form.numberofRooms);
			},
			addOrder(query){
				if (this.loading) return
				this.loading = true
				uni.showLoading({
					title: '支付中'
				})
				let that = this
				addOrder(query).then(res=>{
					if(res.state == 'Success'){
						
						this.query.orderNo = res.content.orderNo
						this.query.subOpenId = JSON.parse(uni.getStorageSync('userInfo')).openId
						this.query.orderDesc = this.form.roomNameCn
						creatPayOrder(this.query).then(data => {
							that.payData = JSON.parse(data.content.miniPayRequest)
							if (data.content.miniPayRequest == null) return uni.hideLoading()
							console.log(666,that.payData);
							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": that.payData,
								"appid": that.payData
								.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								"paySign": that.payData.paySign,
								"nonceStr": that.payData.nonceStr, // 随机字符串
								"package": that.payData.package, // 固定值
								// "prepayid":  that.payData.package, // 统一下单订单号 
								"timeStamp": that.payData.timeStamp, // 时间戳（单位：秒）
								"signType": that.payData.signType, //签名算法
								success(msg) {
									console.log('msg', that.query.orderNo);
									queryPayOrder(that.query.orderNo).then(res1 => {
										that.loading = false
										uni.hideLoading()
										if (res1.state == 'Success') {
											uni.reLaunch({
												url: '/my/order/index'
											})
										}
									})
								},
								fail(e) {
									console.log('err', e);
									that.loading = false
									uni.hideLoading()
									uni.showToast({
										title: '取消支付',
										icon: 'fail'
									})
									// 取消支付后
									uni.reLaunch({
										url:'/my/order/hotel/detail?id='+that.query.orderNo
									})
								}
							})
						
						})
						
					}
				})
			},
			handleBuy() {
				this.$refs.uForm.validate().then(res => {
					let form = JSON.parse(JSON.stringify(this.form))
					let list = []
					form.customerInfo.map(item=>{
						list.push(item.value)
					})
					form.customerInfo = list
					form.contactName = form.customerInfo[0]
					form.customerArriveTime = uni.$u.timeFormat(new Date(form.checkin).getTime()+1000*60*60*24 , 'yyyy-mm-dd')+' 17:00:00'
					
					this.addOrder(form)
				})
			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules)
			this.setRules()
		},
		onLoad(options) {
			this.form.checkin = options.checkInDate
			this.form.checkout = options.checkOutDate
			this.day = options.day
			
			let that = this
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('pay', function(data) {
				let {manNum,childNum,hotelId,ratePlanId,averagePrice,roomPic,hotelPic,roomNameCn,area,window,meal,cancel} = data
				that.form.manNum = manNum
				that.form.childNum = childNum
				that.form.hotelId = hotelId
				that.form.ratePlanId = ratePlanId
				that.averagePrice = averagePrice
				that.form.hotelIdPic = hotelPic
				that.form.roomPic = roomPic
				that.form.roomNameCn = roomNameCn
				that.info = {
					area,
					window,
					meal,
					cancel
				}
				console.log('数据：',data);
			})
		}
	}
</script>

<style lang="scss" >
.hotel-makeOut{
	background: #F9F9F9;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding: 20rpx 24rpx 200rpx;
	.u-form-item__body__left__content__label{
		font-size: 24rpx!important;
		color: #222222!important;
	}
	.content{
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
		.sub-title{
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			padding-bottom: 26rpx;
			border-bottom: 1rpx solid #F0F0F0;
		}
	}
	
	.info-box{
		display: flex;
		.info{
			margin-left: 20rpx;
			flex: 1;
			.title{
				font-weight: 600;
				font-size: 36rpx;
				color: #222222;
				width: 450rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 20rpx;
			}
			.desc-box{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
				.text{
					padding-right: 10rpx;
				}
				.text+.text{
					border-left: 2rpx solid #F0F0F0;
					padding-left: 10rpx;
				}
			}
			.notice{
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
			}
		}
	}
	.bottom-box{
		display: flex;
		align-items: center;
		padding-top: 26rpx;
		border-top: 1rpx solid #F0F0F0;
		margin-top: 20rpx;
		.time-box{
			flex: 1;
			display: flex;
			.item{
				display: flex;
				align-items: center;
				.label{
					font-weight: 300;
					font-size: 24rpx;
					color: #AAAAAA;
				}
				.time{
					font-size: 24rpx;
					color: #222222;
					margin-left: 20rpx;
				}
			}
			.item+.item{
				margin-left: 80rpx;
			}
		}
		.day{
			font-size: 24rpx;
			color: #222222;
			font-weight: bold;
		}
	}
	
	.room-box{
		.desc{
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
		}
		.tab-box{
			display: flex;
			flex-wrap: wrap;
			.ml20{
				margin-left: 20rpx;
			}
			.tab{
				width: 148rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #F0F0F0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 300;
				font-size: 28rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
			}
			.tab.active{
				background: #E2ECFF;
				color: #3879F9;
			}
		}
	}
	
	.add-box{
		.title-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.title{
				font-size: 28rpx;
				color: #222222;
				font-weight: bold;
			}
			.add-btn{
				font-weight: 300;
				font-size: 24rpx;
				color: #3879F9;
			}
		}
	}
	
	.btn-box {
		position: fixed;
		bottom: 0%;
		left: 0%;
		z-index: 2;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 10rpx 24rpx env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1rpx solid #EEEEEE;
		.left{
			display: flex;
			align-items: flex-end;
			.num{
				font-weight: 300;
				font-size: 24rpx;
				color: #AAAAAA;
			}
			.total{
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
				display: flex;
				align-items: flex-end;
				margin-left: 6rpx;
				.price-box{
					display: flex;
					align-items: flex-end;
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
					.unit{
						font-size: 20rpx;
					}
				}
			}
		}
	
		.btn {
			width: 280rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: $uni-color-primary;
			border-radius: 40rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0;
		}
	}
	
	.ticket-box{
		.box{
			position: relative;
			.ticket-title{
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				margin-top: 20rpx;
			}
			.ticket-desc{
				font-weight: 300;
				font-size: 24rpx;
				color: #AAAAAA;
				margin-top: 20rpx;
			}
			.icon{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 0%;
				top: 50%;
				margin-top: -24rpx;
			}
		}
	}
}
</style>