CjyTravel/subPageC/bookHomestay/bookHomestay.vue

<template>
	<view class="v-pages bgcolor p-b-24">
		<view class="v-card order small container-fluid m-t-24" style="padding-bottom: 60rpx;">
			<view class="v-order-form">
				<view class="v-form-date row flex-align-center">
					<view class="start"><text class="date">{{orderInfo.startDate1}}</text></view>
					<text class="mid">{{orderInfo.dayNum}}晚</text>
					<view class="end"><text class="date">{{orderInfo.endDate1}}</text></view>
				</view>
				<view class="v-order-title">
					{{orderInfo.houseName}}
				</view>
				<view class="v-order-tip">
					<!-- <text
          v-if="orderInfo.bedNum">{{orderInfo.bedNum}}张床{{orderInfo.bedWide}}米宽{{orderInfo.houseNam}}</text> -->
					<text v-if="orderInfo.guest">{{orderInfo.guest}}人入住</text> <text class="m-l-10"
						v-if="orderInfo.houseArea">{{orderInfo.houseArea}}㎡</text>
				</view>
				<view class="v-order-wait">需等待商家确认</view>
			</view>
		</view>

		<view class="v-card order small container-fluid m-t-24">
			<view class="v-order-title m-b-24">
				<view class="text"><text>入住信息</text></view>
			</view>
			<uni-forms class="v-order-form" ref="form" :modelValue="formData">
				<!-- 整套民宿预定，暂时不显示房间数量 -->
				<!-- <uni-forms-item label="房间数量" name="roomNumber">
          <uni-easyinput class="v-input" type="number" :inputBorder="false" v-model="formData.roomNumber"
            placeholder="请输入房间数量" />
        </uni-forms-item> -->
				<uni-forms-item label="入住人" name="name">
					<uni-easyinput class="v-input" type="text" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.name" placeholder="请输入入住人姓名" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="idCardNumber">
					<uni-easyinput class="v-input" type="text" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.idCardNumber" placeholder="请输入身份证号码" />
				</uni-forms-item>
				<uni-forms-item label="联系手机" name="phoneNumber">
					<uni-easyinput class="v-input" type="number" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.phoneNumber" placeholder="请输入手机号码" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="v-card order small container-fluid m-t-24">
			<view class="v-order-title">
				<view class="text"><text>发票服务</text></view>
			</view>
			<view class="m-t-24 v-form-content">如需发票，请向民宿前台索取。</view>
		</view>

		<view class="v-card order small bg1 container-fluid m-t-24">
			<view class="v-order-title">
				<view class="text"><text>下单说明</text></view>
			</view>
			<view class="m-t-24 v-form-content">订单需等待商家确认后才生效，订单确认结果以平台订单信息为准。</view>
		</view>

		<view class="v-order-submit row flex-align-center">
			<view class="col price">
				<text class="text">总价</text>
				<text class="yuan">&yen;</text>
				<text class="number">{{totalPrice}}</text>
			</view>
			<view class="btn" @click="orderSubmit">提交订单</view>
		</view>
		<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
			<f-pay :show-title="false" :show="isPayPopup" :order="orderPay"
				:payMoney="orderPay.orderAmount" :tradeNo="orderPay.orderNumber"
				@payResult="payResult"></f-pay>
		</u-popup>
	</view>
</template>

<script>
	import fPay from "../components/f-pay/f-pay";
	import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";

	export default {
		components: {
			fPay,
			uPopup
		},
		data() {
			return {
				//是否支付弹窗
				isPayPopup: false,

				orderInfo: {},
				formData: {
					name: undefined,
					roomNumber: 1, //整套逻辑，暂定房间数为1
					phoneNumber: undefined,
					idtype: 1,
					idCardNumber: undefined,
					// phoneNumber: undefined,
					// idtype: undefined,
					// idCardNumber: undefined,
				},
				orderPay: undefined,
				totalPrice: undefined,
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '入住人姓名不能为空！',
						}]
					},
					idCardNumber: {
						rules: [{
								required: true,
								errorMessage: '身份证号码不能为空！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const reg =
										/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
									if (reg.test(value) == false) {
										callback('请输入正确的身份证号码！')
									}
									return true
								}
							}
						]
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: '联系手机不能为空！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
									if (reg.test(value) == false) {
										callback('请输入正确的手机号码！')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			const ticket = JSON.parse(decodeURIComponent(options.ticket));
			this.orderInfo = ticket
			this.totalPrice = Math.round(Number(this.orderInfo.housePrice) * Number(this.orderInfo.dayNum) * 100) / 100
			this.formData.phoneNumber = this.orderInfo.mobile
		},
		methods: {
			orderSubmit() {
				this.$refs.form.validate().then(res => {

					const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
					let appId = extConfig.app_id

					var data = {
						"hotelId": this.orderInfo.hotelId,
						"hotelName": this.orderInfo.hotelName,
						"orderAmount": this.totalPrice,
						"checkTime": this.orderInfo.startDate,
						"checkOutTime": this.orderInfo.endDate,
						"bedId": this.orderInfo.id,
						"roomsNums": Number(this.formData.roomNumber),

						"mobile": this.orderInfo.mobile,
						"openid": this.orderInfo.openid,
						"appid": appId,
						"tenantId": "1",
						"checkInPersonInfoDTOList": [this.formData]
					};

					this.$Request.post(this.$config.createHotelOrder, data, 'json', null, false, null).then((
						res) => {
						if (res.code == 0) {
							this.orderPay = res.data							
							this.payOrder()
						} else if (res.code == 600) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "网络拥挤，请稍后重试",
								icon: 'none',
								duration: 2000
							})
						}
					});

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			payOrder(val) {
				console.log("订单==========", val)
				this.isPayPopup = true
			},

			//支付结果
			payResult(data) {
				if (data.payStatus == 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.isPayPopup = false
					setTimeout(() => {
						uni.navigateTo({
							url: "/subPageC/orderHomestay/orderList"
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/subPageC/orderHomestay/orderList"
						});
					}, 1000)
				}
				//uni.showToast({title: data.detail.errMsg,icon:'none'});
			},
			
			closePay() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消支付？',
					cancelText: '再想想',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							that.isPayPopup = false
							setTimeout(() => {
								uni.redirectTo({
									url: "/subPageC/orderHomestay/orderList"
								});
							}, 500)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}			
		}
	}
</script>

<style lang="scss" scoped>
</style>