ihotel-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">周四入住</text>
				  <text class="select-list-time">07月21日</text>
				</view>
				<view class="select-center">
					<view class="select-line1"></view>
					<view class="select-circle">1晚</view>
					<view class="select-line2"></view>
				</view>
				<view class="select-time-one">
				  <text class="select-list">周五离店</text>
				  <text class="select-list-time">07月22日</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">01户型</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 class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
						<text class="jiantou">〉</text>
					</picker>
				</view>
				<view class="form-line" style="margin-top: 477rpx;"></view>
				<view class="uni-textarea">
					<textarea @blur="bindTextAreaBlur" placeholder="在此填写您的要求" maxlength="50" auto-height /><text class="textsrea-txt">{{textNum}}/50</text>
				</view>
			</view>
		</view>
		<!-- 第三层表单 -->
		<view class="three_all">
			<view class="three-title">
				您是【
				<text v-if="cardIdentity==4">教师</text>
				<text v-if="cardIdentity==0">其他</text>
				<text v-if="cardIdentity==1">学生</text>
				<text v-if="cardIdentity==5">校友</text>
				】
			</view>
			<view class="three-mark">本人可以免费入住，需要预交费<text style="color: rgba(255, 87, 51, 1);">20.00</text>元，即可享受权益</view>
			<view class="three-zhu">注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度数
         为10度，超出标准需在预付款中扣除，未超出原路返回预付款</view>
		</view>
		<!-- 注释 -->
		<view class="zhushi">
			<text class="zhushi-mark">低价保证</text> <text class="zhushi-mark">入住免房费</text> <text class="zhushi-mark">提前选好房</text>
		</view>
		<!-- 支付框 -->
		<view class="fukuan">
			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥20.00</view>
			<view class="fu-zhifu">立即支付</view>
		</view>
		
	</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:'',//离店日期
				array: ['18:00前到店', '19:00前到店', '20:00前到店', '21:00前到店'],
				index: 0,
				textNum:0,//输入框当前字数
				cardName:'',//用户名
				cardPhone:'',//用户电话
				cardIdentity:'',//身份
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				// console.log('date:'+getDate(new Date()).fullDate)
				// console.log('startDate:'+getDate(new Date()).fullDate)
				// console.log('endDate:'+getDate(new Date(),6).fullDate)
				this.info.date = getDate(new Date()).fullDate
				this.info.startDate = getDate(new Date()).fullDate
				this.info.endDate =  getDate(new Date(),6).fullDate
			}, 2000)
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				  let _self = this
				  this.$axios.get("/ihotel/hotelUser/userInfo",
				  {
					  headers:{
						  'user_token':localStorage.getItem('user_token')
					  }
				  }).then(res => {
					res = res.data
					if (res.success) {
						if (res.data.statu == '1') {
						  _self.cardName=res.data.name
						  _self.cardPhone=res.data.cardNumber
						  _self.cardIdentity=res.data.identityType
						}else {
							alert('您没有权限，请联系客服')
						}
					} else {
					  console.log('获取用户信息失败')
					}
				  });
			},
			//日历选择器
			openCalendar() {
				this.$refs.popup_picker.open()
			},
			change(e) {
				console.log('1change 返回:', e)
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.range.before,
					info: '到店'
				})
				this.info.selected.push({
					date: e.range.after,
					info: '离店'
				})
			},
			//选择器
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			// 输入框
			bindTextAreaBlur: function (e) {
				// console.log(e.detail.cursor)
				// console.log(e.detail.value)
				this.textNum=e.detail.cursor
			}
		}
	}
</script>

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