hotelorder_student_h5/pages/order_room/order_room.vue

<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="index_bg">
			<view class="welcome">
				<image class="welcome_img" src="../../static/index/welcome.png"></image>
			</view>
		</view>
		<!-- 第一层标题 -->
		<view class="touming_bg">
			<view class="touming_title">墨轩湖姬子公寓（南昌交通学院）</view>
			<view class="touming_txt">尊敬的老师，您辛苦了，欢迎入住！</view>
		</view>
		<!-- 第二层表单 -->
		<view class="two_all">
			<view class="select-time" @click="openCalendar">
				<view class="select-time-one">
					<text class="select-list">{{ startWeek }}入住</text>
					<text class="select-list-time">{{ startTime }}</text>
				</view>
				<view class="select-center">
					<view class="select-line1"></view>
					<view class="select-circle">{{ ruzhu_num }} 晚</view>
					<view class="select-line2"></view>
				</view>
				<view class="select-time-one">
					<text class="select-list">{{ endWeek }}离店</text>
					<text class="select-list-time">{{ endTime }}</text>
				</view>
			</view>
			<uni-popup ref="popup_picker" :mask-click="true">
				<view class=popup_bg_picker>
					<uni-calendar :selected="info.selected" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert"
						:lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @change="change" />
				</view>
			</uni-popup>
			<view class="form_bg">
				<view class="form_title">房型：{{ typeName }}</view>
				<view class="form-text">姓名：{{ cardName }}</view>
				<view class="form-text">手机：{{ cardPhone }}</view>
				<view class="form-text">身份：{{ cardIdentity }}</view>
			</view>
		</view>
		<!-- 注释 -->
		<view class="zhushi">
			<text class="zhushi-mark"><text class="zhushi-circle"></text>低价保证</text>
			<text class="zhushi-mark"><text class="zhushi-circle"></text>入住免房费</text>
			<text class="zhushi-mark"><text class="zhushi-circle"></text>提前选好房</text>
		</view>
		<!-- 支付框 -->
		<view class="fukuan">
			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥{{ payMount }}</view>
			<view class="fu-zhifu" :class="{'room-button2': freeRoom == 0}">
				<text v-if="freeRoom == 0">房间已满</text>
				<text v-else @tap="getOrderSubmit()">立即支付</text>
			</view>
		</view>
		<!-- 提交订单时弹框 -->
		<uni-popup ref="popup_order" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" :content="order_txt" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: [],
					startDate: '',
					date: '',
					endDate: ''
				},
				startTime: '', //到店日期
				endTime: '', //离店日期
				startDate: '', //默认到店日期接口数据
				endDate: '', //默认离店日期接口数据
				startWeek: '', // 默认入店日
				endWeek: '', // 默认离店
				array: ['18:00前到店', '19:00前到店', '20:00前到店', '21:00前到店'],
				index: 0,
				mayTime: '', // 预计到店时间
				typeName: '', //户型名
				textNum: 0, //输入框当前字数
				cardName: '', //用户名
				cardPhone: '', //用户电话
				cardIdentity: '', //身份
				submitToken: '', //请求令牌
				// roomTypeId: '', //房间类型id
				remark: '', //备注要求
				payMount: 0, //应付金额
				freeRoom: 0, //剩余房间
				ruzhu_num: 1, //入住夜晚
				order_txt: '', //提交订单时信息
				msgType: 'warn',
				cardNumber: '',
				payData: {}
			}
		},
		onLoad(option) {
			// console.log('option', option)
			this.ruzhu_num = option.ruzhu_num
			this.payMount = Number(option.price) //应付金额
			this.freeRoom = option.freeRoom //剩余房间
			// this.roomTypeId = option.roomTypeId //房间类型id
			this.h_type = option.typeName //户型名
			this.startTime = option.startTime //到店日期
			this.endTime = option.endTime //离店日期
			this.startDate = option.enableStartTime.substring(0, 11) + "12:00:00" //默认到店日期接口数据
			this.endDate = option.enableEndTime.substring(0, 11) + "14:00:00" //默认离店日期接口数据
			this.startWeek = this.$utils.getweekday(this.startDate) // 默认入店日
			this.endWeek = this.$utils.getweekday(this.endDate) // 默认离店
			this.mayTime = this.startDate.substring(0, 11) + "18:00:00" // 预计到店时间
			// console.log(this.$utils.getweekday(this.startDate))
		},
		mounted() {
			// 获取用户信息
			this.getUserInfo();
		},
		onReady() {
			var that = this
			that.$nextTick(() => {
				that.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				that.info.date = that.$utils.getDate(new Date()).fullDate
				that.info.startDate = that.$utils.getDate(new Date()).fullDate
				that.info.endDate = that.$utils.getDate(new Date(), 6).fullDate
				if (that.$utils.isEmpty(that.startTime)) {
					that.startTime = that.$utils.getDate(new Date()).fullTime
				}
				if (that.$utils.isEmpty(that.endTime)) {
					that.endTime = that.$utils.getDate(new Date(), 1).fullTime
				}
				if (that.$utils.isEmpty(that.startWeek)) {
					that.startWeek = that.$utils.getDate(new Date()).sWeek
				}
				if (that.$utils.isEmpty(that.endWeek)) {
					that.endWeek = that.$utils.getDate(new Date(), 1).eWeek
				}
				if (that.$utils.isEmpty(that.ruzhu_num)) {
					that.ruzhu_num = 1
				}
			}, 20)
		},
		methods: {
			/**
			 * 调起支付
			 */
			onBridgeReady() {
				var that = this;
				// 在这里可以使用WeixinJSBridge对象进行支付调用等操作
				// 调用支付接口
				if (typeof WeixinJSBridge !== 'undefined') {
					WeixinJSBridge.invoke('getBrandWCPayRequest', that.payData,
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.errMsg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "../my_orderlist/my_orderlist?Inv=2"
											})
										}
									}
								});
							} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
								uni.showToast({
									title: '支付取消',
									icon: 'success'
								});
							} else {
								uni.showModal({
									title: '提示',
									content: res.errMsg,
									showCancel: false
								})
							}
						});
				}
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo() {
				var that = this
				var tempCardNumber = that.$utils.getEncryptedData('cardNumber')
				if (that.$utils.isEmpty(tempCardNumber)) {
					uni.showToast({
						title: '用户卡号为空'
					});
					return;
				}
				that.cardNumber = tempCardNumber;
				that.$myRequest({
					url: '/hotelReservation/zhotel2/appuser.action?card_number=' + that.cardNumber
				}).then(res => {
					// console.log(res);
					let data = res.data.data
					if (res.data.code === 200) {
						that.cardName = data.user_name
						that.cardPhone = data.user_phone
						if (data.identity_type === 0) {
							that.cardIdentity = '其它'
						} else if (data.identity_type === 1) {
							that.cardIdentity = '学生'
						} else if (data.identity_type === 4) {
							that.cardIdentity = '教职工'
						} else if (data.identity_type === 5) {
							that.cardIdentity = '校友'
						} else if (data.identity_type === 6) {
							that.cardIdentity = '访客'
						} else {
							that.cardIdentity = '临时人员'
						}
					} else {
						alert('未获得用户数据')
					}
				});
			},
			/**
			 * 提交订单
			 */
			getOrderSubmit() {
				let that = this
				that.$myRequest({
					method: 'POST',
					url: '/hotelReservation/zhotel2/apporder_pay.action',
					data: {
						'card_number': that.cardNumber,
						'h_type': that.h_type,
						'live_time': that.startDate.substring(0, 10),
						'end_time': that.endDate.substring(0, 10)
					},
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(res => {
					let data = res.data
					if (data.code === 200) {
						let d = data.data;
						that.payData = {
							"appId": d.appId,
							"nonceStr": d.nonceStr,
							"paySign": d.paySign,
							"package": "prepay_id=" + d.prepay_id,
							"signType": d.signType,
							"timeStamp": d.timeStamp
						}

						if (typeof WeixinJSBridge === 'undefined') {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', ththatis.onBridgeReady);
							}
						} else {
							that.onBridgeReady();
						}
					} else {
						that.msgType = 'warn'
						that.order_txt = data.message
						that.$refs.popup_order.open()
					}
				});
			},
			dialogConfirm() {
				uni.showToast({
					title: '确定'
				})
			},
			//日历选择器
			openCalendar() {
				this.$refs.popup_picker.open()
			},
			// 重新选择日期
			change(e) {
				// console.log('1change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				var before = e.range.before;
				var after = e.range.after;
				this.info.selected = [{
						date: before,
						info: '到店'
					},
					{
						date: after,
						info: '离店'
					}
				];
				if (before !== '' && after === '') {
					this.startWeek = '周' + e.lunar.ncWeek.substring(2, 3)
				} else if (before !== '' && after !== '') {
					if ((new Date(after).getTime()) == (new Date(before).getTime())) {
						uni.showToast({
							title: '不能选同一天',
							icon: 'error',
							duration: 1500
						});
						return;
					}
					if ((new Date(after).getTime()) < (new Date(before).getTime())) {
						var temp = before;
						before = after;
						after = temp;
					}
					this.endWeek = '周' + e.lunar.ncWeek.substring(2, 3)
					this.startTime = before.substring(5, 7) + '月' + before.substring(8, 10) + '日'
					this.endTime = after.substring(5, 7) + '月' + after.substring(8, 10) + '日'
					this.startDate = before + ' 14:00:00'
					this.endDate = after + ' 12:00:00'
					this.ruzhu_num = parseInt(((new Date(after).getTime()) - (new Date(before).getTime())) / 1000 / 60 / 60 / 24)
				}
			},
			//选择器
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.mayTime = this.startDate.substring(0, 11) + this.array[this.index].substring(0, 5) + ":00"
				// console.log(this.mayTime)
			},
			// 输入框
			bindTextAreaBlur: function(e) {
				// console.log(e.detail.cursor)
				// console.log(e.detail.value)
				this.textNum = e.detail.cursor
				this.remark = e.detail.value
			}
		}
	}
</script>

<style>
	@import url("./css/order_room.css");
</style>