MiniScmV3/subpkg/extend/extend.vue

<template>
	<view class="checkin-brief-info" v-if="hasCheckinInfo">
		<view class="top-background">
			<view class="room-info-area">
				<view class="room-type-pic">
					<image :src="roomTypePicPath"></image>
				</view>
				<view class="room-info">
					<text>{{roomInfo}}</text>
				</view>
				<view class="room-type-price">
					<text>￥{{unitPrice}}</text>
				</view>
			</view>
		</view>
		<view class="checkin-date-info">
			<view class="date-item">
				<view class="date-item-title">
					<text>入住</text>
				</view>
				<view class="date-item-detail">
					<text>{{startDate}}</text>
					<text>{{startDay}}</text>
				</view>
			</view>
			<view class="date-item">
				<view class="date-item-title">
					<text>离店</text>
				</view>
				<view class="date-item-detail">
					<text>{{endDate}}</text>
					<text>{{endDay}}</text>
				</view>
			</view>
			<view class="checkin-date-other">
				<text>{{dayNumText}}</text>
				<text>{{breakfastNumText}}</text>
			</view>
		</view>
		<view class="guest-info">
			<view class="guest-info-item">
				<view class="guest-info-item-label">
					<text>住客姓名</text>
				</view>
				<view class="guest-info-item-content">
					<text>{{name}}</text>
				</view>
			</view>
			<view class="guest-info-item">
				<view class="guest-info-item-label">
					<text>联系电话</text>
				</view>
				<view class="guest-info-item-content">
					<text>{{phone}}</text>
				</view>
			</view>
			<view class="guest-info-item">
				<view class="guest-info-item-label">
					<text>离店时间</text>
				</view>
				<view class="guest-info-item-content">
					<text>{{endTime}}</text>
				</view>
			</view>
		</view>
		<view class="end-time-tip">
			<text>{{endTimeTip}}</text>
		</view>
		<view class="btn-area">
			<button v-if="fromExtend" hover-class="btn-hover" @click="showCalendar">续住</button>
			<button v-else hover-class="btn-hover" @click="confirmCheckout">退房</button>
		</view>
		<view class="">
			<uni-calendar ref="calendar" :insert="false" :lunar="true" :start-date="calendarStartDate"
				:date="calendarDate" @confirm="confirmEndTime"></uni-calendar>
		</view>
	</view>

	<view class="not-checkin" v-else>
		<view class="not-checkin-text">
			<text>您还未入住！</text>
		</view>
		<view class="not-checkin-text">
			<text>若已退房或房间到期,请至前台办理</text>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useHotelStore
	} from '@/store/hotelStore.js'
	import {
		ROOM_TYPE_PIC_URL
	} from '../../config'
	import moment from 'moment/moment'
	import {
		getDayOfWeek
	} from '../../utils/dateTimeUtil'
	import {
		useUserStore
	} from '../../store/userStore'
	import {
		useAppInfoStore
	} from '@/store/appInfoStore.js'

	let hotel = useHotelStore().hotel
	let fromExtend = ref(true)
	let hasCheckinInfo = ref(false)

	let roomTypePicPath = ref('')
	let roomInfo = ref('')
	let unitPrice = ref('')
	let breakfastNumText = ref('')

	let startDay = ref('')
	let startDate = ref('')
	let endDay = ref('')
	let endDate = ref('')
	let dayNumText = ref('')

	let name = ref('')
	let phone = ref('')
	let endTime = ref('')
	let endTimeTip = computed(() => {
		let text = fromExtend.value ? '续住' : '退房'
		let checkoutTime = hotel.checkoutTime.split(':')
		let checkoutTimeText = checkoutTime[0] + '点'
		if (checkoutTime[1] !== '00') {
			checkoutTimeText = checkoutTimeText + checkoutTime[1] + '分'
		}
		return '请在' + checkoutTimeText + '前办理' + text + '，逾期请至前台办理'
	})

	let orderId = ref('')
	let checkinInfoId = ref(0)

	let calendarStartDate = ref('')
	let calendarDate = ref('')
	let originEndDate = ref('')

	async function getCheckinInfo() {
		let res = await uni.request({
			url: `/user/checkinInfo/${hotel.hotelId}`,
			method: 'GET'
		})
		if (res.statusCode === 200 && res.data.success) {
			let checkinInfo = res.data.data
			if (checkinInfo) {
				//设置页面展示信息
				roomTypePicPath.value = ROOM_TYPE_PIC_URL + '/' + checkinInfo.roomPicPath
				roomInfo.value = checkinInfo.roomTypeName + checkinInfo.room
				unitPrice.value = checkinInfo.unitPrice

				startDate.value = moment(checkinInfo.startTime).format('MM月DD日')
				startDay.value = getDayOfWeek(new Date(checkinInfo.startTime))
				endDate.value = moment(checkinInfo.endTime).format('MM月DD日')
				endDay.value = getDayOfWeek(new Date(checkinInfo.endTime))
				dayNumText.value = '共' + checkinInfo.dayNum + '晚'
				breakfastNumText.value = checkinInfo.breakfastNum ? `含${checkinInfo.breakfastNum}早` : '不含早'

				name.value = checkinInfo.name
				phone.value = checkinInfo.phone
				endTime.value = moment(checkinInfo.endTime).format('M月DD日 HH:mm')

				orderId.value = checkinInfo.orderId
				checkinInfoId.value = checkinInfo.id

				//设置日历
				originEndDate.value = moment(new Date(checkinInfo.endTime)).format('YYYY-MM-DD')
				let date = new Date(checkinInfo.endTime)
				date.setDate(date.getDate() + 1)
				console.log('date', moment(new Date(date)).format('YYYY-MM-DD'))
				calendarStartDate.value = moment(new Date(date)).format('YYYY-MM-DD')
				calendarDate.value = moment(new Date(date)).format('YYYY-MM-DD')

				hasCheckinInfo.value = true
			} else {
				hasCheckinInfo.value = false
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: '查询失败'
			})
		}
	}

	let canExtend = ref(false)
	async function queryCanExtend() {
		let res = await uni.request({
			url: `/scm/canExtend/${orderId.value}`,
			method: 'GET'
		})
		if (res.statusCode === 200 && res.data.data === true) {
			canExtend.value = true
		} else {
			canExtend.value = false
		}
	}

	let calendar = ref()

	function showCalendar() {
		if (!canExtend.value) {
			uni.showToast({
				icon: 'none',
				title: '不满足续住条件，请至前台办理'
			})
			return
		}
		calendar.value.open()
	}

	function confirmEndTime(date) {
		//获取日历选择的时间
		calendarDate.value = moment(new Date(date.fulldate)).format('YYYY-MM-DD ')
		let dayNum = (new Date(date.fulldate).valueOf() - new Date(originEndDate.value).valueOf()) / (24 * 60 * 60 * 1000)
		uni.showModal({
			title: '确认续住' + dayNum + '天吗？',
			success: async (res) => {
				if (res.confirm) {
					let createRes = await createExtendOrder(dayNum)
					if (!createRes.data.success) {
						uni.showToast({
							icon: 'none',
							title: '订单不满足续住条件，请至前台办理'
						})
						return
					}
					let payRes = await pay(createRes.data.data.orderId)
					if (payRes) {
						let extendRes = await extend(createRes.data.data.orderId)

						if (extendRes.data.success) {
							uni.showToast({
								icon: 'none',
								title: '续住办理成功！'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}, 2000)
						} else {
							uni.showToast({
								icon: 'none',
								title: '续住办理失败！'
							})
						}
					}
				}
			}
		})
	}
	async function createExtendOrder(dayNum) {
		return await uni.request({
			url: '/scm/extend/orderId',
			method: 'POST',
			data: {
				id: checkinInfoId.value,
				dayNum: dayNum
			}
		})
	}

	let user = useUserStore()
	let appInfo = useAppInfoStore()
	async function pay(orderId) {
		if (hotel.paymentChannel === "YST") {
			return await ystPay(orderId)
		} else {
			return await nativePay(orderId)
		}
	}
	async function nativePay(orderId) {
		let res = await uni.request({
			url: '/order/payment/weChat',
			method: 'POST',
			data: {
				openid: user.userInfo.openid,
				orderId: orderId,
				appId: appInfo.appId
			}
		})
		if (res.statusCode === 200 && res.data.success) {
			res.data.data.package = res.data.data.packageStr
			let paymentResult = await uni.requestPayment(res.data.data)
			console.log("payment result:", paymentResult)
			if (paymentResult.errMsg === 'requestPayment:ok') {
				uni.showToast({
					icon: 'none',
					title: '支付成功'
				})
				return true
			}
		}
		return false
	}
	async function ystPay(orderId) {
		const {
			data: submitRes
		} = await uni.request({
			url: '/order/payment/ystPay',
			method: 'POST',
			data: {
				openid: user.userInfo.openid,
				orderId: orderId,
				appId: appInfo.appId
			}
		})

		// console.log("订单提交结果", submitRes)

		const payData = JSON.parse(submitRes.data)
		// console.log("支付数据", payData);
		const paymentResult = await uni.requestPayment(payData)
		// console.log("payment result:", paymentResult)

		// 调用支付成功，查询下订单支付情况
		const {
			data: paymentRes
		} = await uni.request({
			url: '/order/payment/queryYstPay',
			method: 'POST',
			data: {
				openid: user.userInfo.openid,
				orderId: orderId,
				appId: appInfo.appId
			}
		})

		console.log("订单支付结果", paymentRes)

		if (paymentRes.success && paymentRes.data === "S") {
			uni.showToast({
				icon:'none',
				title:'支付成功'
			})
			return true
		}
		return false
	}

	async function extend(orderId) {
		return await uni.request({
			url: `/scm/extend/${orderId}`,
			method: 'POST'
		})
	}

	function confirmCheckout() {
		uni.showModal({
			title: '您确定退房吗？',
			success: (res) => {
				if (res.confirm) {
					checkout()
				}
			}
		})
	}

	async function checkout() {
		let res = await uni.request({
			url: `/scm/checkout/${checkinInfoId.value}`,
			method: 'POST'
		});
		if (res.data.success) {
			uni.showToast({
				icon: 'none',
				title: '退房办理成功！'
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}, 1000)
		} else {
			uni.showModal({
				icon: 'none',
				title: '退房失败，请至前台办理'
			})
		}
	}

	onLoad(async (options) => {
		fromExtend.value = options.fromExtend === 'true'
		await getCheckinInfo()
		if (hasCheckinInfo.value) {
			await queryCanExtend()
		}
	})
</script>

<style lang="scss" scoped>
	.checkin-brief-info {
		.top-background {
			background-color: #a09cc4;
			overflow: hidden; //消除子元素margin-top的影响

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

				.room-type-pic {
					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}

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

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

				.room-type-price {
					width: 25%;
					margin-right: 20rpx;
					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: 40rpx;
		padding: 20rpx;
		display: flex;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 0rpx 8rpx 11rpx 2rpx rgba(79, 121, 225, 0.19);

		.date-item {
			width: 35vw;

			.date-item-title {
				text {
					font-size: 30rpx;
					color: #666666;
				}
			}

			.date-item-detail {
				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-right: 20rpx;
				}
			}
		}

		.checkin-date-other {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			text {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}

	.guest-info {
		transform: translateY(-100rpx);

		.guest-info-item {
			display: flex;
			margin: 40rpx;
			border-bottom: 2rpx solid #e5e5e5;
			line-height: 70rpx;

			.guest-info-item-label {
				width: 240rpx;

				text {
					font-size: 36rpx;
					color: #666666;
				}
			}

			.guest-info-item-content {
				text {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}
	}

	.end-time-tip {
		transform: translateY(-100rpx);
		display: flex;
		justify-content: center;

		text {
			font-size: 30rpx;
		}
	}

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

		button {
			color: #a09cc4;
			border: 1rpx solid #a09cc4;
			background-color: #FFFFFF;
			font-weight: bold;
			font-size: 33rpx;
			width: 250rpx;
		}

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

	.not-checkin {
		margin-top: 40vh;

		.not-checkin-text {
			display: flex;
			justify-content: center;
		}
	}
</style>