MiniScm/subpkg/extend/extend.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="我的订单" control="back" bgcolor="#9e97c3"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="我的订单" bgcolor="#9e97c3"></NavigateBar>
			<!-- #endif -->
		</view>
		<view v-if="Object.keys(checkinInfo).length > 0">
			<view class="top-background">
				<view class="room-type-item">
					<view class="room-type-item-left">
						<u-image :src="roomTypePicPath" width="200rpx" height="200rpx" radius="10"></u-image>
					</view>
					<view class="room-type-item-middle">
						<view class="room-type-item-middle-text">
							<u-text :text="roomInfo" color="#333333" size="32rpx" bold></u-text>
						</view>
						<!-- <view class="room-type-item-middle-bottom">
							<u-text :text="roomArea" color="#666666"></u-text>
						</view> -->
					</view>
					<view class="room-type-item-right">
						<view class="room-type-item-right-text">
							<u-text :text="unitPrice" color="#FF5C58" align="right" size="24px" bold></u-text>
						</view>
					</view>
				</view>
			</view>
			<view class="checkin-date-info">
				<view class="date-selector">
					<view class="date-item">
						<u-text text="入住" color="#666666" size="15"></u-text>
						<view class="date-info">
							<u-text :text="start.date" color="#333333" size="14" bold></u-text>
							<u-text :text="start.day" color="#333333" size="14" bold></u-text>
						</view>
					</view>
					<view class="date-item">
						<u-text text="离店" color="#666666" size="15"></u-text>
						<view class="date-info">
							<u-text :text="end.date" color="#333333" size="14" bold></u-text>
							<u-text :text="end.day" color="#333333" size="14" bold></u-text>
						</view>
					</view>
				</view>
				<view class="day-num">
					<u-text :text="dayNumText" color="#333333" size="15" bold></u-text>
				</view>
			</view>
			<view class="guest-info">
				<u-form v-for="info in guestInfos" labelPosition="left" labelWidth="240rpx" labelAlign="left">
					<u-form-item label="住客姓名" prop="name">
						<u-text :text="info.name" color="#333333" bold size="16"></u-text>
					</u-form-item>
					<u-form-item label="联系电话" prop="phone">
						<u-text :text="info.phone" color="#333333" bold size="16"></u-text>
					</u-form-item>
					<u-form-item label="离店时间">
						<u-text :text="checkinInfo.endTime" color="#333333" bold size="16"></u-text>
					</u-form-item>
				</u-form>
			</view>
			<view v-if="fromExtend" class="extend-tip">
				<u-text :text="extendTip" align="center"></u-text>
			</view>
			<view class="btn-area">
				<button v-if="fromExtend == true" class="btn" hover-class="btn-hover"
					@click="queryCanExtend">续住</button>
				<button v-else class="btn" hover-class="btn-hover" @click="confirmCheckout">退房</button>
			</view>
			<view>
				<u-calendar :show="calendarShow" mode="single" title="选择离店日期" @confirm="confirmEndTime"
					@close="calendarShow=false" :minDate="minDate" :defaultDate="minDate" color="#9e97c3"></u-calendar>
			</view>
		</view>
		<view v-else>
			<view class="not-reservation">
				<u-text class="tip" text="您还未入住！" align="center"></u-text>
				<u-text v-if="fromExtend" class="tip" text="若已退房或房间到期,请至前台办理" align="center"></u-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDay
	} from '../../utils/commonUtils.js'
	import {
		IMG_BASE_URL
	} from "../../config.js"
	import moment from 'moment'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				roomTypePicPath: '',
				roomInfo: '',
				unitPrice: '',
				roomArea: '',
				start: {},
				end: {},
				dayNumText: '',
				guestInfos: [],
				calendarShow: false,
				minDate: '',
				order: {},
				dayNum: '',
				newOrderId: '',
				fromExtend: true,
				newEndTime: '',
				checkinInfo: {},
				extendButtonLoading: false,
				extendButtonLoadingText: '办理中',
				endTimePickerShow: false,
				maxDate: 0,
				oldEndTime: '',
				extendTip: '',
				needAuthPay: false
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['currentHotel'])
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo']),
			confirmCheckout() {
				uni.showModal({
					title: '您确定退房吗？',
					success: (res) => {
						if (res.confirm) {
							this.checkout()
						}
					}
				})
			},
			async checkout() {
				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('退房办理失败')
				}
			},
			async queryCanExtend() {
				let res = await uni.$http.post('/canExtend', {
					orderId: this.order.orderId
				})
				if (res.data.data == true) {
					this.calendarShow = true
				} else {
					uni.$showMsg('不满足续住条件，请至前台办理')
				}
			},
			async extend() {
				let res = await uni.$http.post('/extend', {
					orderId: this.newOrderId
				});
				if (res.data.success === true) {
					this.updateCheckinInfo({})
					uni.$showMsg('续住办理成功！')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 2000)
				} else {
					uni.$showMsg('续住办理失败')
				}

			},
			async confirmEndTime(e) {
				this.newEndTime = e[0]
				this.dayNum = (new Date(e[0]).getTime() - new Date(this.minDate).getTime()) / (24 * 60 * 60 * 1000) + 1
				uni.showModal({
					title: '确认续住' + this.dayNum + '天吗？',
					success: (res) => {
						if (res.confirm) {
							this.calendarShow = false
							this.createExtendOrder()
						}
					}
				})
			},
			async createExtendOrder() {
				let info = {
					id: this.checkinInfo.id,
					dayNum: this.dayNum
				}
				let createRes = await uni.$http.post('/extend/orderId', info)
				if (createRes.data.code === 200) {
					let resData = createRes.data.data
					this.newOrderId = resData.orderId
					this.needAuthPay = resData.needAuthPay
					this.pay(this.newOrderId)
				} else {
					uni.$showMsg('订单不满足续住条件，请至前台办理')
				}
			},
			async pay(orderId) {
				console.log("pay start");

				// #ifdef MP-WEIXIN
				let res = await uni.$http.post('/hotelOrder/payment', {
					openid: this.userInfo.openid,
					orderId: orderId,
					platform: 'WECHAT',
					hotelId: this.currentHotel.hotelId
				})
				res.data.data.package = res.data.data.packageStr
				let paymentResult = await wx.requestPayment(res.data.data)
				console.log("payment result:", paymentResult)
				if (paymentResult.errMsg === 'requestPayment:ok') {
					uni.$showMsg("支付成功")
					this.extend()
				}
				// #endif

				// #ifdef MP-ALIPAY
				if (!this.needAuthPay) {
					await this.aliPaymentNormal(orderId)
				} else {
					await this.aliPaymentFreeze(orderId)
				}
				// #endif
			},
			async getCheckinInfo() {
				let res = await uni.$http.post('/checkinInfo/queryByCondition', {
					userIdNumber: this.userInfo.idNumber,
					status: 1,
					hotelId: this.currentHotel.hotelId,
					pageNo: 1,
					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
						this.checkinInfo = res.data.data.records[0];

						//根据订单号查询订单信息
						let orderRes = await uni.$http.post('/hotelOrder/queryByCondition', {
							orderId: this.checkinInfo.orderId,
							hotelId: this.currentHotel.hotelId,
							pageNo: 1,
							pageSize: 1
						});
						let guest = {}
						guest.name = this.checkinInfo.customerName
						let order = orderRes.data.data.records[0]
						//查询到订单则直接按订单内容显示，否则
						if (order) {
							this.order = order
							this.roomTypePicPath = IMG_BASE_URL + '/' + order.roomPicPath
							this.roomInfo = order.roomTypeName + order.room
							this.unitPrice = '￥' + order.unitPrice
							guest.phone = order.checkinPhone
						} else {
							let roomInfoRes = await uni.$http.post('/roomInfo', {
								hotelId: this.checkinInfo.hotelId,
								room: this.checkinInfo.room,
								pageNo: 1,
								pageSize: 1
							})
							console.log('roominfo', roomInfoRes)
							let roomTypeRes = await uni.$http.post('/roomType', {
								roomType: roomInfoRes.data.data.records[0].roomType,
								pageNo: 1,
								pageSize: 1
							})
							let roomType = roomTypeRes.data.data.records[0]
							this.roomTypePicPath = IMG_BASE_URL + '/' + roomType.roomPicPath
							this.roomInfo = roomType.roomTypeName + this.checkinInfo.room
							this.unitPrice = '￥' + roomType.unitPrice
						}
						this.guestInfos.push(guest)

						this.start.date = moment(this.checkinInfo.startTime).format('MM月DD日')
						this.start.day = getDay(new Date(this.checkinInfo.startTime).getDay())
						this.end.date = moment(this.checkinInfo.endTime).format('MM月DD日')
						this.end.day = getDay(new Date(this.checkinInfo.endTime).getDay())

						let start = new Date(moment(this.checkinInfo.startTime).format('YYYY/MM/DD'))
						let end = new Date(moment(this.checkinInfo.endTime).format('YYYY/MM/DD'))
						// console.log(start.getTime())
						// console.log(end)
						let dayNum = (end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000)
						dayNum = dayNum < 1 ? 1 : dayNum
						this.dayNumText = '共' + dayNum + '晚'

						//设置日历
						let endDate = new Date(this.checkinInfo.endTime)
						endDate.setDate(endDate.getDate() + 1)
						this.minDate = moment(new Date(endDate)).format('YYYY-MM-DD')
						// this.defaultDate = moment(new Date(endDate)).format('YYYY-MM-DD')

						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('查询失败！')
				}
			},
			// #ifdef MP-ALIPAY
			async aliPaymentNormal(orderId) {
				let alipayRes = await uni.$http.post('/hotelOrder/alipayPrepay', {
					openid: this.userInfo.openid,
					orderId: orderId,
					platform: 'ALIPAY',
					hotelId: this.currentHotel.hotelId
				})
				// console.log("获取预付号",alipayRes.data.data)
				let tradeNo = alipayRes.data.data.tradeNo
				let tradeRes = await my.tradePay({
					tradeNO: tradeNo
				})
				// console.log("tradeRes 交易支付结果",tradeRes.resultCode);

				if (tradeRes.resultCode === "6002") {
					// 网络连接出错
					uni.showModal({
						title: "网络连接出错",
						content: "网络连接出错，请检查网络连接后重试。",
					});
				}

				// 顾客支付后，查询支付状态
				if (["9000", "6004", "8000"].includes(tradeRes.resultCode)) {
					// 顾客支付订单后，查询支付宝侧的订单支付状态，只有TRADE_SUCCESS才为支付成功
					let tradeStatus = await uni.$http.post('/hotelOrder/queryAlipayTradeStatus', {
						tradeNo: tradeNo,
						hotelId: this.currentHotel.hotelId
					})
					// console.log("tradeStatus", tradeStatus);
					if (tradeStatus.data.success && tradeStatus.data.data.tradeStatus === "TRADE_SUCCESS") {
						uni.$showMsg("支付成功")
						this.extend()
					}
				}
			},
			async aliPaymentFreeze(orderId) {
				// 申请获取签名字符串
				let alipayRes = await uni.$http.post('/hotelOrder/alipayFreezeFund', {
					orderId: orderId,
					hotelId: this.currentHotel.hotelId
				})
				// console.log("签名字符串", alipayRes.data)

				if (!alipayRes.data.success) {
					console.log("获取签名字符串");
					uni.showModal({
						title: "网络连接出错。",
						content: "网络连接出错，请检查网络连接后重试。",
					});
					return
				}

				// 根据签名字符串发起授权
				let orderString = alipayRes.data.data
				let tradeRes = await my.tradePay({
					orderStr: orderString
				})
				// console.log("tradeRes 授权结果",tradeRes.resultCode);

				if (tradeRes.resultCode === "6002") {
					// 网络连接出错
					uni.showModal({
						title: "网络连接出错",
						content: "网络连接出错，请检查网络连接后重试。",
					});
				}

				// 顾客授权后，查询授权状态
				if (["9000", "6004", "8000"].includes(tradeRes.resultCode)) {
					// 顾客授权后，查询授权状态，只有AUTHORIZED（已授权状态：授权成功，可以进行转支付或解冻操作）才算成功
					let tradeStatus = await uni.$http.post('/hotelOrder/queryFreezeStatus', {
						orderId: orderId,
						hotelId: this.currentHotel.hotelId
					})
					// console.log("tradeStatus", tradeStatus);
					if (tradeStatus.data.success && tradeStatus.data.data === "AUTHORIZED") {
						uni.$showMsg("支付成功")
						this.extend()
					}
				}
			}
			// #endif
		},
		async onLoad(options) {
			await this.getCheckinInfo()
			this.fromExtend = options.fromExtend == 'true'
		},
		onShow() {
			this.extendTip = '请在 ' + this.currentHotel.checkoutTime + ' 前办理续住，逾期请至前台办理'
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;

		.top-background {
			background-color: #9e97c3;
			overflow: hidden;

			.room-type-item {
				border-radius: 30rpx;
				background-color: #FFFFFF;
				margin: 120rpx 20rpx;
				padding: 20rpx;
				display: flex;
				border-radius: 10rpx;

				.room-type-item-middle {
					margin-top: 40rpx;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					width: 280rpx;

					.room-type-item-middle-text {
						font-size: 40rpx;
						font-weight: bold;
						color: #333333;
					}

					.room-type-item-middle-bottom {
						margin-top: 40rpx;
						font-size: 25rpx;

						text {
							margin-right: 20rpx;
							color: #666666
						}
					}
				}

				.room-type-item-right {
					width: 25%;
					margin-right: 20rpx;

					.room-type-item-right-text {
						margin-left: 60rpx;
						margin-top: 70rpx;
					}

					text {
						font-size: 40rpx;
						font-weight: bold;
						color: #FF5C58
					}
				}
			}
		}

	}

	.checkin-date-info {
		transform: translateY(-100rpx);
		border-radius: 30rpx;
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 20rpx;
		display: flex;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 0rpx 8rpx 11rpx 2rpx rgba(79, 121, 225, 0.19);

		.date-selector {
			margin: 20rpx;
			display: flex;
			width: 70vw;

			.date-item {
				width: 35vw;

				.date-info {
					display: flex;
				}
			}
		}

		.day-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.u-form {
		transform: translateY(-100rpx);
		background-color: #FFFFFF;

		.u-form-item {
			line-height: 70rpx;

			.u-form-item__body {
				margin-left: 32rpx;
				margin-right: 32rpx;
				border-bottom: 2rpx solid #E5E5E5;
			}

			.u-form-item__body__left__content__label {
				font-size: 36rpx;
				color: #666666;
			}
		}
	}

	.btn-area {
		transform: translateY(-60rpx);
		display: flex;
		justify-content: space-evenly;

		.btn {
			color: #9e97c3;
			border: 1rpx solid #9e97c3;
			background-color: #FFFFFF;
			font-weight: bold;
			font-size: 33rpx;
			width: 250rpx;
		}

		.btn-hover {
			color: #FFFFFF;
			background-color: #9e97c3;
		}
	}


	.not-reservation {
		margin-top: 40%;
	}

	.extend-tip {
		transform: translateY(-100rpx);
	}
</style>