MiniScm/subpkg/checkout/checkout.vue

<template>
	<view>
		<view 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 class="completeBtn">
				<u-button type="primary" @click="checkout" :loading="checkoutButtonLoading"
					:loadingText="checkoutButtonLoadingText">退房</u-button>
			</view>
		</view>

		<view v-else class="not-reservation">
			<text class="tip">无可退入住记录</text>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				checkinInfo: {},
				checkoutButtonLoading: false,
				checkoutButtonLoadingText: '办理中'
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['currentHotelId','updateReservationInfo']),
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo']),
			async checkout() {
				try {
					this.checkoutButtonLoading = true
					let res = await uni.$http.post('/checkout', {
						id: this.checkinInfo.id
					});
					if (res.data.success === true) {
						this.updateCheckinInfo({})
						uni.$showMsg('退房办理成功！')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/home'
							})
						}, 1000)
					} else {
						uni.$showMsg('退房办理失败:' + res.data.msg)
					}
				} catch (e) {
					uni.$showMsg('退房办理失败:')
				} finally {
					this.checkoutButtonLoading = false
				}
			},
			async getCheckinInfo() {
				let {
					data: res
				} = await uni.$http.post('/checkinInfo/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')
					} else {
						this.checkinInfo = {}
					}
				} else {
					uni.$showMsg('查询失败！')
				}
			}
		},
		onLoad() {
			this.getCheckinInfo()
		}
	}
</script>

<style lang="scss">
	.card-item {
		margin-bottom: 40rpx;
		display: flex;

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

	.completeBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 120rpx;
		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%;
	}
</style>