445bd850f4
- 新增工单中心(ticket_center)与工单工作台(ticket_workbench)页面 - 新增房间巡查(room_inspection)与失物招领发布(lost_found_publish)页面 - 预约看样流程新增房型/楼栋/楼层选择器组件 - 新增工具模块: booking-entry、privacy、reservation-flow - api/index.js 补充楼层列表、看样提交等接口 - locales/messages.js 补充多语言文案 - manifest.json 开启微信小程序隐私检查 - 完善登录、注册、申请详情、账单等相关页面交互
388 lines
13 KiB
Vue
388 lines
13 KiB
Vue
<template>
|
|
<view class="book-page tn-safe-area-inset-bottom">
|
|
<tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#F8F9FA">
|
|
<view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
|
|
</tn-nav-bar>
|
|
|
|
<view class="book-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '180rpx'}">
|
|
|
|
<!-- 选中的房源卡片 (Room Preview) -->
|
|
<view v-if="applyData" class="room-preview-card tn-margin-bottom-xl tn-margin-top-sm tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
|
|
<view class="preview-img-box">
|
|
<image :src="applyData.image" mode="aspectFit" class="preview-img"></image>
|
|
</view>
|
|
<view class="preview-info tn-flex-1 tn-margin-left tn-flex tn-flex-direction-column tn-flex-row-between">
|
|
<view>
|
|
<view class="tn-text-sm tn-color-gray">{{ t('bookingFor') }}</view>
|
|
<view class="tn-text-bold tn-text-lg tn-color-black tn-margin-top-xs clamp-text-2">
|
|
{{ displayStyleName }}
|
|
</view>
|
|
<view v-if="applyData.roomTypeName || applyData.roomTypeNameEn" class="tn-color-gray tn-text-xs tn-margin-top-xs">
|
|
{{ displayRoomTypeLine }}
|
|
</view>
|
|
</view>
|
|
<view class="tn-flex tn-flex-row-between tn-flex-col-bottom tn-margin-top-sm">
|
|
<view class="room-tag tn-text-xs tn-text-bold">{{ displayLocationText }}</view>
|
|
<view class="tn-color-black tn-text tn-text-bold">
|
|
<text class="tn-text-sm tn-color-gray tn-margin-right-xs">{{ t('deposit') }}</text>$500.00
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 填写日期表单 -->
|
|
<view class="form-section tn-margin-bottom-xl tn-padding-lg form-card">
|
|
<view class="section-title tn-text-bold tn-text-xl tn-margin-bottom-xs">{{ t('checkInDate') }}</view>
|
|
<view class="tn-color-gray tn-text-sm tn-margin-bottom-lg">{{ t('checkInDesc') }}</view>
|
|
|
|
<view class="form-item tn-margin-bottom-lg">
|
|
<view class="form-label tn-text-bold">{{ t('startDate') }}</view>
|
|
<picker mode="date" @change="onStartDateChange">
|
|
<view class="form-input tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<text :class="form.startDate ? 'tn-color-black tn-text-bold' : 'tn-color-gray'">
|
|
{{ form.startDate ? form.startDate : t('selectDate') }}
|
|
</text>
|
|
<text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="form-item tn-margin-bottom-sm">
|
|
<view class="form-label tn-text-bold">{{ t('endDate') }}</view>
|
|
<picker mode="date" @change="onEndDateChange" :start="form.startDate">
|
|
<view class="form-input tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<text :class="form.endDate ? 'tn-color-black tn-text-bold' : 'tn-color-gray'">
|
|
{{ form.endDate ? form.endDate : t('selectDate') }}
|
|
</text>
|
|
<text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<view v-if="stayNights > 0" class="tn-margin-top-lg booking-summary">
|
|
<view class="summary-row tn-flex tn-flex-row-between">
|
|
<text class="tn-color-gray">{{ t('stayNights') }}</text>
|
|
<text class="tn-text-bold tn-color-black">{{ stayNights }} {{ t('nightUnit') }}</text>
|
|
</view>
|
|
<view class="summary-row tn-flex tn-flex-row-between tn-margin-top-sm">
|
|
<text class="tn-color-gray">{{ t('bookingStatus') }}</text>
|
|
<text class="tn-text-bold tn-color-black">{{ t('pendingPayment') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部固定按钮区 -->
|
|
<view class="fixed-bottom-btn-area tn-flex tn-flex-row-between tn-flex-col-center">
|
|
<view class="tn-flex tn-flex-direction-column">
|
|
<view class="tn-text-sm tn-color-gray">{{ t('deposit') }}</view>
|
|
<view class="tn-text-bold tn-text-xl" style="color: $brand-primary;">$500.00</view>
|
|
</view>
|
|
<view class="custom-btn btn-dark" style="width: 60%; height: 100rpx;" @click="submitBooking" :class="{ 'btn-disabled': isSubmitting }">
|
|
<text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '处理中...' : 'Processing...') : t('submitOrder') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { resolveExistingBookingNavigationTarget } from '../../utils/booking-entry'
|
|
import { getSessionSnapshot } from '../../utils/app-state'
|
|
import { syncLoginStayState } from '../../utils/session-sync'
|
|
import { compactEnglishText } from '../../utils/select-room-normalizers'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isSubmitting: false,
|
|
applyData: null,
|
|
form: {
|
|
startDate: '',
|
|
endDate: ''
|
|
},
|
|
i18n: {
|
|
zh: {
|
|
title: '预订确认',
|
|
bookingFor: '你正在预约',
|
|
deposit: '定金',
|
|
checkInDate: '填写预订时间',
|
|
checkInDesc: '支付后会先生成预定单并进入审核，不会直接占用房间资源。',
|
|
startDate: '入住日期 (Check-in)',
|
|
endDate: '离开日期 (Check-out)',
|
|
selectDate: '请选择日期',
|
|
submitOrder: '进入支付页',
|
|
stayNights: '入住晚数',
|
|
nightUnit: '晚',
|
|
bookingStatus: '当前状态',
|
|
pendingPayment: '待支付定金',
|
|
roomTypeLabel: '房型：'
|
|
},
|
|
en: {
|
|
title: 'Booking Confirm',
|
|
bookingFor: 'Booking For',
|
|
deposit: 'Deposit',
|
|
checkInDate: 'Booking Period',
|
|
checkInDesc: 'Payment will create a booking order first, without occupying room inventory.',
|
|
startDate: 'Check-in Date',
|
|
endDate: 'Check-out Date',
|
|
selectDate: 'Select Date',
|
|
submitOrder: 'Go To Payment',
|
|
stayNights: 'Stay Nights',
|
|
nightUnit: 'nights',
|
|
bookingStatus: 'Status',
|
|
pendingPayment: 'Deposit Pending',
|
|
roomTypeLabel: 'Room Type: '
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
language() {
|
|
return this.$getLanguage()
|
|
},
|
|
displayStyleName() {
|
|
if (!this.applyData) {
|
|
return ''
|
|
}
|
|
return this.language === 'en'
|
|
? (this.applyData.styleNameEnDisplay || compactEnglishText(this.applyData.styleNameEn || this.applyData.styleNameZh || '', 24))
|
|
: (this.applyData.styleNameZh || this.applyData.styleNameEn || '')
|
|
},
|
|
displayRoomTypeLine() {
|
|
if (!this.applyData) {
|
|
return ''
|
|
}
|
|
const roomTypeText = this.language === 'en'
|
|
? (this.applyData.roomTypeNameEnDisplay || compactEnglishText(this.applyData.roomTypeNameEn || this.applyData.roomTypeName || '', 22))
|
|
: (this.applyData.roomTypeName || this.applyData.roomTypeNameEn || '')
|
|
const areaText = this.language === 'en'
|
|
? (this.applyData.roomAreaEnDisplay || compactEnglishText(this.applyData.roomAreaEn || this.applyData.roomArea || '', 28))
|
|
: (this.applyData.roomArea || this.applyData.roomAreaEn || '')
|
|
return [roomTypeText ? `${this.t('roomTypeLabel')}${roomTypeText}` : '', areaText].filter(Boolean).join(' | ')
|
|
},
|
|
displayLocationText() {
|
|
if (!this.applyData) {
|
|
return ''
|
|
}
|
|
const buildingText = this.language === 'en'
|
|
? (this.applyData.buildingEnDisplay || compactEnglishText(this.applyData.buildingEn || this.applyData.building || '', 18))
|
|
: (this.applyData.building || this.applyData.buildingEn || '')
|
|
const floorText = this.language === 'en'
|
|
? (this.applyData.floorEnDisplay || compactEnglishText(this.applyData.floorEn || this.applyData.floor || '', 12))
|
|
: (this.applyData.floor || this.applyData.floorEn || '')
|
|
return [buildingText, floorText].filter(Boolean).join(' - ')
|
|
},
|
|
stayNights() {
|
|
if (!this.form.startDate || !this.form.endDate) {
|
|
return 0
|
|
}
|
|
const start = new Date(this.form.startDate).getTime()
|
|
const end = new Date(this.form.endDate).getTime()
|
|
if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
|
|
return 0
|
|
}
|
|
return Math.ceil((end - start) / (24 * 60 * 60 * 1000))
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.applyData) {
|
|
Promise.resolve(options.applyData)
|
|
.then(decodeURIComponent)
|
|
.then(JSON.parse)
|
|
.then((data) => {
|
|
this.applyData = data && typeof data === 'object' ? data : {}
|
|
})
|
|
.catch((e) => {
|
|
console.error('Failed to parse apply data', e);
|
|
})
|
|
}
|
|
this.redirectIfBookingUnavailable()
|
|
},
|
|
methods: {
|
|
t(key) {
|
|
return this.$tm('pkgBooking.book.book', key)
|
|
},
|
|
redirectIfBookingUnavailable() {
|
|
const session = getSessionSnapshot()
|
|
if (!session.isLogin) {
|
|
return Promise.resolve(false)
|
|
}
|
|
|
|
return syncLoginStayState({
|
|
language: this.$getLanguage(),
|
|
force: true
|
|
})
|
|
.then((stayState) => {
|
|
const targetUrl = resolveExistingBookingNavigationTarget(stayState)
|
|
if (!targetUrl) {
|
|
return false
|
|
}
|
|
|
|
if (/^\/pages\/index\/index(?:\?|$)/.test(targetUrl)) {
|
|
uni.reLaunch({ url: targetUrl })
|
|
return true
|
|
}
|
|
|
|
uni.redirectTo({ url: targetUrl })
|
|
return true
|
|
})
|
|
.catch((error) => {
|
|
console.error('check booking entry failed', error)
|
|
return false
|
|
})
|
|
},
|
|
onStartDateChange(e) {
|
|
this.form.startDate = e.detail.value;
|
|
},
|
|
onEndDateChange(e) {
|
|
this.form.endDate = e.detail.value;
|
|
},
|
|
submitBooking() {
|
|
if (this.isSubmitting) return;
|
|
if (!this.form.startDate || !this.form.endDate) {
|
|
uni.showToast({ title: this.language === 'zh' ? '请选择入住与离开日期' : 'Please select check-in and check-out dates', icon: 'none' });
|
|
return;
|
|
}
|
|
if (new Date(this.form.endDate).getTime() <= new Date(this.form.startDate).getTime()) {
|
|
uni.showToast({ title: this.language === 'zh' ? '离开日期需晚于入住日期' : 'Check-out must be later than check-in', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
this.isSubmitting = true;
|
|
const orderData = {
|
|
...this.applyData,
|
|
startDate: this.form.startDate,
|
|
endDate: this.form.endDate,
|
|
stayNights: this.stayNights,
|
|
sourceType: 'booking-intent'
|
|
};
|
|
|
|
let roomDataStr = encodeURIComponent(JSON.stringify(orderData));
|
|
|
|
uni.showLoading({ title: this.language === 'zh' ? '正在生成订单...' : 'Creating Order...' });
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
this.isSubmitting = false;
|
|
uni.redirectTo({
|
|
url: `/pkgBooking/pay/pay?roomData=${roomDataStr}`
|
|
});
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.book-page {
|
|
background-color: #F8F9FA;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 选中的房源卡片预览 */
|
|
.room-preview-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.3s;
|
|
}
|
|
.room-preview-card:hover {
|
|
border-color: rgba($brand-primary-rgb, 0.3);
|
|
box-shadow: 0 16rpx 50rpx rgba($brand-primary-rgb, 0.08);
|
|
}
|
|
.preview-img-box {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.05);
|
|
}
|
|
.preview-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.preview-info {
|
|
height: 150rpx;
|
|
}
|
|
.room-tag {
|
|
background-color: #FAFFEB;
|
|
color: #557A2B;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.clamp-text-2 {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 表单区域 */
|
|
.form-card {
|
|
background-color: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
|
|
}
|
|
.form-label {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.form-input {
|
|
background-color: #F8F9FA;
|
|
height: 100rpx;
|
|
border-radius: 20rpx;
|
|
padding: 0 36rpx;
|
|
font-size: 30rpx;
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
.form-input:active {
|
|
border-color: rgba($brand-primary-rgb, 0.5);
|
|
background-color: #FAFFEB;
|
|
}
|
|
|
|
.booking-summary {
|
|
padding: 24rpx 28rpx;
|
|
border-radius: 24rpx;
|
|
background: #F8F9FA;
|
|
}
|
|
|
|
/* 底部固定按钮区 */
|
|
.fixed-bottom-btn-area {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.04);
|
|
padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
|
|
z-index: 999;
|
|
}
|
|
|
|
/* 自定义按钮样式 */
|
|
.custom-btn {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 100rpx;
|
|
padding: 12rpx 36rpx;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 10rpx 30rpx rgba(34, 34, 34, 0.2);
|
|
}
|
|
.custom-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
.btn-dark {
|
|
background-color: #222222;
|
|
color: $brand-primary;
|
|
}
|
|
.btn-disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|