MiniScm/subpkg_checkin/checkin/checkin.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="支付结果" control="home" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="支付结果" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>
		<view v-if="result">
			<view class="tip-area">
				<u-image :src="successPicPath" width="200rpx" height="200rpx"></u-image>
				<u-text text="支付成功，祝您入住愉快！" color="#666666" size="20" bold align="center"></u-text>
			</view>
			<view class="btn-container">
				<u-button :text="buttonText" color="#9e97c3" @click="gotoHome"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				result: false,
				successPicPath: '/static/success.png',
				time: 3
			}
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['checkinInfo', 'currentHotel', 'order']),
			buttonText() {
				return '确认(' + this.time + ')'
			}
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo']),
			async checkin() {
				try {
					uni.showLoading({
						title: "正在办理入住...",
					})
					let info = {
						hotelId: this.currentHotel.hotelId,
						building: this.order.building,
						floorId: this.order.floor,
						roomId: this.order.room,
						startTime: moment(new Date()).format('YYMMDDHHmmss'),
						endTime: moment(this.order.endTime).format('YYMMDDHHmmss'),
						cardId: '0',
						userType: 1,
						orderId: this.order.orderId,
						isResv: this.order.orderSource !== 'MINI_APP'
					}
					let checkinResult = new Array(this.checkinInfo.length).fill(false)
					for (let i = 0; i < this.checkinInfo.length; i++) {
						if (i == 0) {
							info.isMainCustomer = true
							info.totalCustomerNum = this.checkinInfo.length
						} else {
							info.isMainCustomer = false
						}
						info.userName = this.checkinInfo[i].name
						info.userId = this.checkinInfo[i].idNumber
						info.faceData = this.checkinInfo[i].faceData
						info.userPhone = this.checkinInfo[i].phone
						info.address = this.checkinInfo[i].address
						info.race = this.checkinInfo[i].nation
						info.userGender = this.checkinInfo[i].sex === '男' ? 1 : 2
						info.birth = this.checkinInfo[i].birth
						info.issuingAuthority = this.checkinInfo[i].issuingAuthority
						info.issuingDate = this.checkinInfo[i].issuingDate
						info.expiryDate = this.checkinInfo[i].expiryDate
						let res = await uni.$http.post('/checkin', info)
						console.log(res)
						if (res.data.code == 200 && res.data.success === true) {
							checkinResult[i] = true
							console.log('checkinResult[' + i + '] = true')
						}
					}
					console.log(checkinResult)
					let falsePos = checkinResult.indexOf(false)
					if (falsePos < 0) {
						this.result = true
						this.countDownTimer = setInterval(() => {
							this.time--
							if (this.time === 0) {
								clearInterval(this.countDownTimer)
								this.gotoHome()
							}
						}, 1000)
					} else {
						let failName = this.checkinInfo[falsePos].name
						uni.showModal({
							showCancel: false,
							content: '办理失败，请重新选择订单',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/home/home'
									})
								}
							}
						})
						// uni.$showMsg('顾客' + failName + '办理失败！')
					}
				} finally {
					uni.hideLoading()
				}
			},
			gotoHome() {
				clearInterval(this.countDownTimer)
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		},
		async onLoad() {
			await this.checkin()
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	.tip-area {
		padding-top: 160rpx;

		.u-image {
			margin: 40rpx auto;
		}
	}

	.btn-container {
		margin: 200rpx 30rpx;
	}
</style>