MiniScm/subpkg/extend/extend.vue

<template>
	<view>
		<view v-if="Object.keys(checkinInfo).length>0" class="">
			<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>
				<view class="card-item">
					<view class="card-item-left">
						<u-text text="请选择续住至:"></u-text>
					</view>
					<view>
						<u-datetime-picker :show="endTimePickerShow" v-model="newEndTime" mode="datetime"
							:minDate="minDate" :maxDate="maxDate" @cancel="endTimePickerShow = false"
							@confirm="confirmEndTimeChange"></u-datetime-picker>
						<u-text :text="endTimeFormatted" bold="true" @click="endTimePickerShow = true"></u-text>
					</view>
				</view>
			</uni-card>
			<view class="completeBtn">
				<u-button type="primary" @click="extend" :loading="extendButtonLoading"
					:loadingText="extendButtonLoadingText">续住</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 {
				newEndTime: '',
				checkinInfo: {},
				extendButtonLoading: false,
				extendButtonLoadingText: '办理中',
				endTimePickerShow: false,
				minDate: 0,
				maxDate: 0,
				oldEndTime: ''
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['currentHotelId']),
			currentTime(e) {
				let endTime = new Date(moment(this.checkinInfo.endTime).format());
				endTime = moment(endTime.getTime() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
				return endTime;
			},
			endTimeFormatted() {
				let end = new Date(this.newEndTime)
				return moment(end).format('YYYY/MM/DD HH:mm')
			},
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo']),
			async extend() {
				try {
					this.extendButtonLoading = true
					let endTime = new Date(this.newEndTime)
					let res = await uni.$http.post('/extend', {
						id: this.checkinInfo.id,
						endTime: moment(endTime).format('YYMMDDHHmmss'),
					});
					if (res.data.success === true) {
						this.updateCheckinInfo({})
						uni.$showMsg('续住办理成功！')
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/home/home'
							})
						}, 2000)
					} else {
						uni.$showMsg('续住办理失败:' + res.data.msg)
					}
				} catch (e) {
					uni.$showMsg('续住办理失败:')
				} finally {
					this.extendButtonLoading = false
				}
			},
			confirmEndTimeChange(info) {
				//设置结束时间
				this.newEndTime = info.value
				//关闭选择器显示
				this.endTimePickerShow = false
			},
			async getCheckinInfo() {
				let res = await uni.$http.post('/checkinInfo/queryByCondition', {
					userIdNumber: this.userInfo.idNumber,
					status: 1,
					pageNo: 1,
					hotelId: this.currentHotelId,
					pageSize: 1
				});
				if (res.data.code == 200) {
					if (res.data.data.records.length > 0) {
						console.log(res.data.data.records[0].endTime)
						let originEndTime = new Date(res.data.data.records[0].endTime);
						this.newEndTime = new Date(originEndTime.valueOf() + 24 * 60 * 60 * 1000)
						this.oldEndTime = res.data.data.records[0].endTime
						let minDate = new Date(this.oldEndTime)
						minDate.setDate(minDate.getDate() + 1)
						let maxDate = new Date(this.oldEndTime)
						maxDate.setFullYear(maxDate.getFullYear() + 1)
						this.minDate = minDate.valueOf()
						this.maxDate = maxDate.valueOf()
						this.checkinInfo = res.data.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: 220rpx;
		}
	}

	.date-picker-container {
		display: flex;
	}

	.date-picker {
		margin-left: 80rpx;
		font-weight: bold;
	}

	.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>