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-name">{{cardName}}</view>
				<view class="form-line"></view>
				<view class="form-phone">{{cardPhone}}</view>
				<view class="form-line" style="margin-top: 389rpx;"></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 @click="getOrderSubmit('warn')">立即支付</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>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		var a = new Array("日", "一", "二", "三", "四", "五", "六");
		var week = new Date().getDay();
		var week2 = new Date().getDay() + 1;
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		const h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
		const f = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
		const s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
		return {
			fullDate: y + '-' + m + '-' + d,
			fullDate2: y + '-' + m + '-' + d + ' ' + h + ':' + f + ':' + s,
			fullTime: m + '月' + d + '日',
			year: y,
			month: m,
			date: d,
			day: dd.getDay(),
			sWeek: "周" + a[week],
			eWeek: "周" + a[week2]
		}
	}
	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',
			}
		},
		onLoad(option) {
			console.log(option)
			// this.payMount=Number(option.payMount)
			// this.ruzhu_num=option.ruzhu_num
			// this.freeRoom=option.freeRoom
			this.roomTypeId = option.roomTypeId
			this.typeName = 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.getweekday(this.startDate)
			this.endWeek = this.getweekday(this.endDate)
			this.mayTime = this.startDate.substring(0, 11) + "18:00:00"
			// console.log(this.getweekday(this.startDate))
			this.getTokenSubmit()
		},
		mounted() {
			this.getUserInfo()
			this.getOrderConfirm('warn')
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date()).fullDate
				this.info.startDate = getDate(new Date()).fullDate
				this.info.endDate = getDate(new Date(), 6).fullDate
				this.startTime = getDate(new Date()).fullTime
				this.endTime = getDate(new Date(), 1).fullTime
				this.startWeek = getDate(new Date()).sWeek
				this.endWeek = getDate(new Date(), 1).eWeek
				this.ruzhu_num = 1
			}, 20)
		},
		methods: {
			// 获取请求令牌
			getTokenSubmit() {
				let _self = this
				this.$axios.get("/hotel/ihotel-api/ihotel/hotelOrder/user/submit/token", {
					headers: {
						'user_token': localStorage.getItem('token')
					}
				}).then(res => {
					res = res.data
					if (res.success) {
						this.submitToken = res.data.submitToken
					} else {
						console.log('获取请求令牌失败')
					}
				});
			},
			// 获取用户信息
			getUserInfo() {
				let _self = this
				this.$axios.get("/hotel/ihotel-api/ihotel/hotelUser/userInfo", {
					headers: {
						'user_token': localStorage.getItem('token')
					}
				}).then(res => {
					res = res.data
					if (res.success) {
						if (res.data.statu == '1') {
							_self.cardName = res.data.name
							_self.cardPhone = res.data.telPhone
							_self.cardIdentity = res.data.identityType
						} else {
							alert('您没有权限，请联系客服')
						}
					} else {
						console.log('获取用户信息失败')
					}
				});
			},
			// 确认订单
			getOrderConfirm(type) {
				let _self = this
				this.$axios.get("/hotel/ihotel-api/ihotel/hotelOrder/user/order/confirm?startTime=" + this.startDate.substring(0, 10) + "&endTime=" + this.endDate
					.substring(0, 10) + '&roomTypeId=' + this.roomTypeId).then(res => {
					res = res.data
					if (res.success) {
						this.payMount = res.data.totalAmount
						this.freeRoom = res.data.freeNum
						this.ruzhu_num = res.data.nums
					} else {
						this.msgType = type
						this.order_txt = res.message
						this.$refs.popup_order.open()
					}
				});
			},
			// 提交订单
			getOrderSubmit(type) {
				this.payUrl = ''
				let _self = this
				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
				this.$axios.defaults.headers.common['request_token'] = this.submitToken;
				this.$axios.defaults.headers.common['Content-Type'] = 'application/json'
				this.$axios.post("/hotel/ihotel-api/ihotel/hotelOrder/user/order/submit", {
					"enableStartTime": this.startDate, //入住时间
					"enableEndTime": this.endDate, //离店时间
					"roomTypeId": this.roomTypeId, //房间类型id
					"payAmount": this.payMount, //需支付金额
					"userName": this.cardName,
					"userPhone": this.cardPhone,
					"mayIntoTime": this.mayTime,
					"remark": this.remark,
				}).then(res => {
					res = res.data
					if (res.success) {
						if (res.data.payAmount == 0) {
							uni.navigateTo({
								url: '../zhifuchenggong/zhifuchenggong?orderId=' + res.data.orderId
							})
						} else {
							window.location.href = res.data.payUrl;
						}

					} else {
						this.msgType = type
						this.order_txt = res.message
						this.$refs.popup_order.open()
					}
				});
			},
			// 计算指定时间是周几
			getweekday(date) {
				// date例如:'2022-03-05'
				var weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六")
				var weeka = weekArray[new Date(date).getDay()]
				return weeka
			},
			//日历选择器
			openCalendar() {
				this.$refs.popup_picker.open()
			},
			change(e) {
				console.log('1change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				this.info.selected = [{
						date: e.range.before,
						info: '到店'
					},
					{
						date: e.range.after,
						info: '离店'
					}
				]
				if (e.range.before != '' && e.range.after == '') {
					this.startWeek = '周' + e.lunar.ncWeek.substring(2, 3)
				} else if (e.range.before != '' && e.range.after != '') {
					if ((new Date(e.range.after).getTime()) < (new Date(e.range.before).getTime())) {
						this.order_txt = '离店日期不能小于到店日期'
						this.$refs.popup_order.open()
					} else {
						this.endWeek = '周' + e.lunar.ncWeek.substring(2, 3)
						this.startTime = e.range.before.substring(5, 7) + '月' + e.range.before.substring(8, 10) + '日'
						this.endTime = e.range.after.substring(5, 7) + '月' + e.range.after.substring(8, 10) + '日'
						this.startDate = e.range.before + ' 14:00:00'
						this.endDate = e.range.after + ' 12:00:00'
						this.ruzhu_num = parseInt(((new Date(e.range.after).getTime()) - (new Date(e.range.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>