MiniScm/subpkg_checkin/checkin/checkin.vue

<template>
	<view>
		<view class="" v-if="Object.keys(checkinInfo).length>0">
			<uni-card :title="checkinInfo.hotelName" extra="入住信息" note="Tips">
				<view class="card-item" v-if="checkinInfo.building">
					<view class="card-item-left">
						<text>楼栋：</text>
					</view>
					<text>{{checkinInfo.building}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>楼层：</text>
					</view>
					<text>{{checkinInfo.floor}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>房间：</text>
					</view>
					<text>{{checkinInfo.room}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>起始时间：</text>
					</view>
					<text>{{checkinInfo.startTime}}\n</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<text>结束时间：</text>
					</view>
					<text>{{checkinInfo.endTime}}</text>
				</view>
			</uni-card>
		</view>
		<view class="has-reservation" v-else-if="reservation && Object.keys(reservation).length">
			<uni-card :title="reservation.hotelName" extra="订房信息" note="Tips">
				<view class="card-item" v-if="reservation.building">
					<view class="card-item-left">
						<u-text :text="buildingTip" align="center"></u-text>
					</view>
					<text>{{reservation.building}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<u-text :text="floorTip" align="center"></u-text>
					</view>
					<text>{{reservation.floor}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<u-text :text="roomTip" align="center"></u-text>
					</view>
					<text>{{reservation.room}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<u-text :text="startTimeTip" align="center"></u-text>
					</view>
					<text>{{reservation.startTime}}</text>
				</view>
				<view class="card-item">
					<view class="card-item-left">
						<u-text :text="endTimeTip" align="center"></u-text>
					</view>
					<text>{{reservation.endTime}}</text>
				</view>
				<view class="card-item" v-for="guest in guestInfo">
					<view class="card-item-left">
						<u-text :text="'入住人'+guest.id+':'"></u-text>
					</view>
					<u-text :text="guest.name"></u-text>
					<view class="">
					</view>
					<view class="">
						<u-text :text="guest.idNumber"></u-text>
					</view>
				</view>
			</uni-card>
			<view>
				<!-- <button class="checkinBtn" @click="checkin">入住</button> -->
				<!-- <button class="completeBtn" @click="authentication">添加入住人</button> -->
				<button class="completeBtn" @click="gotoAddGuest">办理入住</button>
				<button class="gobackBtn" @click="deletePicRoom">删除选房</button>
			</view>
		</view>
		<view class="not-reservation" v-else>
			<text class="tip">未查询到选房信息，请先选房</text>
			<button class="gobackBtn" @click="gotoSelectRoom">去选房</button>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				startTimeTip: '起始时间：',
				endTimeTip: '结束时间：',
				buildingTip: '楼 栋 ：',
				floorTip: '楼 层 ：',
				roomTip: '房 间 ：',
				guestInfo: [],
				reservation: {},
				verificated: false,
				eidToken: [],
				startTime: '',
				endTime: '',
				startTimeShow: false,
				endTimeShow: false,
				checkinInfo: {},
			}
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['hotelParams', 'currentHotelId']),
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo']),
			gotoSelectRoom() {
				uni.navigateTo({
					url: '/subpkg_checkin/selectRoomType/selectRoomType'
				})
			},
			gotoAddGuest() {
				uni.navigateTo({
					url: '/subpkg_checkin/addGuest/addGuest'
				})
			},
			async deletePicRoom() {
				console.log(this.reservation.id)
				let res = await uni.$http.delete('/userPicRoomInfo/' + this.reservation.id)
				console.log(res)
				if (res.data.code === 200) {
					uni.$showMsg('删除成功！')
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpkg_checkin/checkin/checkin'
						})
					}, 1500)

				} else {
					uni.$showMsg('删除失败！')
				}
			},
			async getReservationInfo() {
				let res = await uni.$http.post('/userPicRoomInfo/queryByCondition', {
					userId: this.userInfo.userId,
					// userId: 29,
					status: true,
					pageNo: 1,
					pageSize: 1
				})
				console.log(res)
				if (res.data.data.records?.length > 0) {
					this.reservation = res.data.data.records[0]
					this.reservation.startTime = moment(this.reservation.startTime).format('YYYY/MM/DD HH:mm')
					this.reservation.endTime = moment(this.reservation.endTime).format('YYYY/MM/DD HH:mm')
				} else {
					this.reservation = {}
				}
				console.log(this.reservation)
			},
			async getCheckinInfo() {
				// let {
				// 	data: res
				// } = await uni.$http.post('/checkinInfo/queryByCondition', {
				// 	userIdNumber: this.userInfo.idNumber,
				// 	status: 1,
				// 	hotelId: this.currentHotelId,
				// 	pageNo: 1,
				// 	pageSize: 1
				// });
				let {
					data: res
				} = await uni.$http.post('/roomCustomer/queryByCondition', {
					userIdNumber: this.userInfo.idNumber,
					status: 1,
					hotelId: this.currentHotelId,
					pageNo: 1,
					pageSize: 1
				});
				console.log(res)
				if (res.code == 200) {
					if (res.data.records.length > 0) {
						this.checkinInfo = res.data.records[0];
						this.checkinInfo.startTime = moment(this.checkinInfo.startTime).format('YYYY/MM/DD HH:mm')
						this.checkinInfo.endTime = moment(this.checkinInfo.endTime).format('YYYY/MM/DD HH:mm')
						uni.$showMsg('已入住！')
					} else {
						this.checkinInfo = {}
					}
				} else {
					uni.$showMsg('查询失败！')
				}
			}
		},
		onLoad() {
			this.getReservationInfo()
			this.getCheckinInfo()
		}
	}
</script>

<style lang="scss">
	.space-around {
		display: flex;
		justify-content: space-around;
	}

	.reservation-time {
		text-align: center;
		display: block;
	}

	.card-item {
		margin-bottom: 40rpx;
		display: flex;

		.card-item-left {
			width: 220rpx;
		}
	}

	.toux {
		margin: 20rpx auto;
		display: block;

	}

	.photoBtn {
		margin: 20rpx 20rpx;
		display: block;
		background-color: #0081ff;
		color: #ffffff;
	}

	.checkinBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 340rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}

	.completeBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 220rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}

	.gobackBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 100rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}

	.not-reservation {
		display: flex;
		justify-content: center;
		height: 100%;
		text-align: center;
		vertical-align: 100rpx;
	}

	.tip {
		padding-top: 40%;
	}

	.date-picker {
		margin-left: 80rpx;
		font-weight: bold;
	}
</style>