refactor: 国际化文本迁移至全局 locales/messages.js
将组件级 i18n 对象重构为统一由全局 locales/messages.js 管理,确保中英文语言切换时正确显示对应文本。 - 新增 utils/i18n.js 国际化工具函数 - 更新 store/$t.mixin.js 翻译混入逻辑 - 迁移 pkgService、pkgBooking、pkgAccount、pkgExplore、pages 等共 58 个组件的中英文文本至全局消息表
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<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>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ $tr('预订确认') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="book-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '180rpx'}">
|
||||
@@ -13,7 +13,7 @@
|
||||
</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-sm tn-color-gray">{{ $tr('你正在预约') }}</view>
|
||||
<view class="tn-text-bold tn-text-lg tn-color-black tn-margin-top-xs clamp-text-2">
|
||||
{{ displayStyleName }}
|
||||
</view>
|
||||
@@ -24,7 +24,7 @@
|
||||
<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
|
||||
<text class="tn-text-sm tn-color-gray tn-margin-right-xs">{{ $tr('定金') }}</text>$500.00
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -32,15 +32,15 @@
|
||||
|
||||
<!-- 填写日期表单 -->
|
||||
<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="section-title tn-text-bold tn-text-xl tn-margin-bottom-xs">{{ $tr('填写预订时间') }}</view>
|
||||
<view class="tn-color-gray tn-text-sm tn-margin-bottom-lg">{{ $tr('支付后会先生成预定单并进入审核,不会直接占用房间资源。') }}</view>
|
||||
|
||||
<view class="form-item tn-margin-bottom-lg">
|
||||
<view class="form-label tn-text-bold">{{ t('startDate') }}</view>
|
||||
<view class="form-label tn-text-bold">{{ $tr('入住日期 (Check-in)') }}</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') }}
|
||||
{{ form.startDate ? form.startDate : $tr('请选择日期') }}
|
||||
</text>
|
||||
<text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
|
||||
</view>
|
||||
@@ -48,11 +48,11 @@
|
||||
</view>
|
||||
|
||||
<view class="form-item tn-margin-bottom-sm">
|
||||
<view class="form-label tn-text-bold">{{ t('endDate') }}</view>
|
||||
<view class="form-label tn-text-bold">{{ $tr('离开日期 (Check-out)') }}</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') }}
|
||||
{{ form.endDate ? form.endDate : $tr('请选择日期') }}
|
||||
</text>
|
||||
<text class="tn-icon-calendar tn-color-black tn-text-xl"></text>
|
||||
</view>
|
||||
@@ -61,12 +61,12 @@
|
||||
|
||||
<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>
|
||||
<text class="tn-color-gray">{{ $tr('入住晚数') }}</text>
|
||||
<text class="tn-text-bold tn-color-black">{{ stayNights }} {{ $tr('晚') }}</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>
|
||||
<text class="tn-color-gray">{{ $tr('当前状态') }}</text>
|
||||
<text class="tn-text-bold tn-color-black">{{ $tr('待支付定金') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -75,11 +75,11 @@
|
||||
<!-- 底部固定按钮区 -->
|
||||
<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-sm tn-color-gray">{{ $tr('定金') }}</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>
|
||||
<text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '处理中...' : 'Processing...') : $tr('进入支付页') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -100,40 +100,6 @@ export default {
|
||||
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: '
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -159,7 +125,7 @@ export default {
|
||||
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(' | ')
|
||||
return [roomTypeText ? `${this.$tr('房型:')}${roomTypeText}` : '', areaText].filter(Boolean).join(' | ')
|
||||
},
|
||||
displayLocationText() {
|
||||
if (!this.applyData) {
|
||||
@@ -200,9 +166,6 @@ export default {
|
||||
this.redirectIfBookingUnavailable()
|
||||
},
|
||||
methods: {
|
||||
t(key) {
|
||||
return this.$tm('pkgBooking.book.book', key)
|
||||
},
|
||||
redirectIfBookingUnavailable() {
|
||||
const session = getSessionSnapshot()
|
||||
if (!session.isLogin) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="book-viewing-page tn-safe-area-inset-bottom">
|
||||
<tn-nav-bar :isBack="true" :backTitle="t('backTitle')" backgroundColor="#F0F6FF" :bottomShadow="false" :fixed="true">
|
||||
<view class="nav-title">{{ t('navTitle') }}</view>
|
||||
<tn-nav-bar :isBack="true" :backTitle="$tr('返回')" backgroundColor="#F0F6FF" :bottomShadow="false" :fixed="true">
|
||||
<view class="nav-title">{{ $tr('预约现场带看') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="content-wrapper" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
|
||||
@@ -21,8 +21,8 @@
|
||||
<view class="form-card">
|
||||
<view class="card-header tn-flex tn-flex-row-between tn-flex-col-bottom">
|
||||
<view class="header-left tn-flex tn-flex-col-bottom">
|
||||
<text class="card-title">{{ t('selectViewingTime') }}</text>
|
||||
<text class="card-subtitle">{{ t('selectViewingTimeDesc') }}</text>
|
||||
<text class="card-title">{{ $tr('选择看房时间') }}</text>
|
||||
<text class="card-subtitle">{{ $tr('请选择您方便的时间段') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -60,13 +60,13 @@
|
||||
<view class="form-card">
|
||||
<view class="card-header">
|
||||
<view class="header-left tn-flex tn-flex-col-bottom">
|
||||
<text class="card-title">{{ t('rentalNeeds') }}</text>
|
||||
<text class="card-subtitle">{{ t('rentalNeedsDesc') }}</text>
|
||||
<text class="card-title">{{ $tr('您的租住需求') }}</text>
|
||||
<text class="card-subtitle">{{ $tr('帮助管家更好地为您推荐房源') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="field-item">
|
||||
<view class="field-label">{{ t('roomTypeLabel') }}</view>
|
||||
<view class="field-label">{{ $tr('意向房型') }}</view>
|
||||
<room-type-selector
|
||||
v-model="formData.intendedRoomTypeCode"
|
||||
:initial-area-code="formData.intendedAreaCode"
|
||||
@@ -75,7 +75,7 @@
|
||||
</view>
|
||||
|
||||
<view class="field-item">
|
||||
<view class="field-label">{{ t('durationLabel') }}</view>
|
||||
<view class="field-label">{{ $tr('预计租住时长') }}</view>
|
||||
<view class="tag-grid">
|
||||
<view
|
||||
v-for="(item, index) in durationOptions"
|
||||
@@ -90,28 +90,28 @@
|
||||
</view>
|
||||
|
||||
<view class="field-item">
|
||||
<view class="field-label">{{ t('budgetLabel') }}</view>
|
||||
<view class="field-label">{{ $tr('租金预算 (元/月)') }}</view>
|
||||
<view class="input-box tn-flex tn-flex-col-center">
|
||||
<text class="tn-icon-money input-icon"></text>
|
||||
<input
|
||||
class="custom-input"
|
||||
v-model="formData.budget"
|
||||
type="digit"
|
||||
:placeholder="t('budgetPlaceholder')"
|
||||
:placeholder="$tr('请输入您的心理价位')"
|
||||
placeholder-style="color: #A1B0C4;"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="field-item">
|
||||
<view class="field-label">{{ t('workplaceLabel') }}</view>
|
||||
<view class="field-label">{{ $tr('工作/通勤地点') }}</view>
|
||||
<view class="input-box tn-flex tn-flex-col-center">
|
||||
<text class="tn-icon-location input-icon"></text>
|
||||
<input
|
||||
class="custom-input"
|
||||
v-model="formData.workplace"
|
||||
type="text"
|
||||
:placeholder="t('workplacePlaceholder')"
|
||||
:placeholder="$tr('请输入主要通勤地点')"
|
||||
placeholder-style="color: #A1B0C4;"
|
||||
/>
|
||||
</view>
|
||||
@@ -123,7 +123,7 @@
|
||||
<!-- 底部操作区 -->
|
||||
<view class="footer-bar tn-safe-area-inset-bottom">
|
||||
<view class="submit-btn" @click="handleSubmit">
|
||||
<text>{{ t('submitBooking') }}</text>
|
||||
<text>{{ $tr('提交预约') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -204,7 +204,7 @@ export default {
|
||||
},
|
||||
displayInfoDesc() {
|
||||
if (!this.sourceData) {
|
||||
return this.t('defaultInfoDesc')
|
||||
return this.$tr('专属管家为您提供一对一带看服务')
|
||||
}
|
||||
const bannerCopy = this.language === 'en'
|
||||
? compactEnglishText(this.sourceData.bannerSubtitleEn || this.sourceData.bannerDescEn || this.sourceData.bannerSubtitle || this.sourceData.bannerDesc || '', 48)
|
||||
@@ -213,7 +213,7 @@ export default {
|
||||
? (this.sourceData.areaLabelEnDisplay || this.sourceData.areaNameEnDisplay || compactEnglishText(this.sourceData.areaLabelEn || this.sourceData.areaLabel || this.sourceData.areaNameEn || this.sourceData.areaName || '', 26))
|
||||
: (this.sourceData.areaLabel || this.sourceData.areaName || this.sourceData.areaLabelEn || this.sourceData.areaNameEn || '')
|
||||
const meta = [bannerCopy, areaLabel, localizePayMethodText(this.sourceData.payMethod, this.language)].filter(Boolean).join(' · ')
|
||||
return meta || this.t('defaultInfoDesc')
|
||||
return meta || this.$tr('专属管家为您提供一对一带看服务')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -236,101 +236,7 @@ export default {
|
||||
workplace: ''
|
||||
},
|
||||
sourceData: null,
|
||||
isSubmitting: false,
|
||||
i18n: {
|
||||
zh: {
|
||||
backTitle: '返回',
|
||||
navTitle: '预约现场带看',
|
||||
selectViewingTime: '选择看房时间',
|
||||
selectViewingTimeDesc: '请选择您方便的时间段',
|
||||
rentalNeeds: '您的租住需求',
|
||||
rentalNeedsDesc: '帮助管家更好地为您推荐房源',
|
||||
roomTypeLabel: '意向房型',
|
||||
durationLabel: '预计租住时长',
|
||||
budgetLabel: '租金预算 (元/月)',
|
||||
budgetPlaceholder: '请输入您的心理价位',
|
||||
workplaceLabel: '工作/通勤地点',
|
||||
workplacePlaceholder: '请输入主要通勤地点',
|
||||
submitBooking: '提交预约',
|
||||
defaultInfoDesc: '专属管家为您提供一对一带看服务',
|
||||
duration1: '1-3个月',
|
||||
duration2: '4-6个月',
|
||||
duration3: '7-9个月',
|
||||
duration4: '10-12个月',
|
||||
duration5: '1年以上',
|
||||
week0: '周日',
|
||||
week1: '周一',
|
||||
week2: '周二',
|
||||
week3: '周三',
|
||||
week4: '周四',
|
||||
week5: '周五',
|
||||
week6: '周六',
|
||||
today: '今天',
|
||||
tomorrow: '明天',
|
||||
remarkTitle: '预约看房申请',
|
||||
remarkTime: '看房时间:{date} {time}',
|
||||
remarkDuration: '预计租住时长:{duration}',
|
||||
remarkBudget: '租金预算:{budget} 元/月',
|
||||
remarkWorkplace: '工作/通勤地点:{workplace}',
|
||||
remarkArea: '意向区域:{area}',
|
||||
remarkRoomType: '意向房型:{roomType}',
|
||||
remarkSource: '当前来源:{room}',
|
||||
remarkPayMethod: '支付方式:{payMethod}',
|
||||
remarkTail: '备注:请宿管确认带看安排;若带看完成并锁定房号,可转为预定单通知租客支付。',
|
||||
selectTimeRequired: '请选择看房时间段',
|
||||
selectDurationRequired: '请选择预计租住时长',
|
||||
submitting: '提交中...',
|
||||
submitSuccessTitle: '预约成功',
|
||||
submitSuccessContent: '您的预约看房申请已提交,请等待管家联系',
|
||||
submitFailed: '预约提交失败'
|
||||
},
|
||||
en: {
|
||||
backTitle: 'Back',
|
||||
navTitle: 'On-site Viewing',
|
||||
selectViewingTime: 'Select Viewing Time',
|
||||
selectViewingTimeDesc: 'Choose a time slot that works for you',
|
||||
rentalNeeds: 'Rental Needs',
|
||||
rentalNeedsDesc: 'Help the manager recommend a suitable room',
|
||||
roomTypeLabel: 'Preferred Room Type',
|
||||
durationLabel: 'Expected Stay Duration',
|
||||
budgetLabel: 'Budget (CNY/month)',
|
||||
budgetPlaceholder: 'Enter your expected budget',
|
||||
workplaceLabel: 'Work / Commute Location',
|
||||
workplacePlaceholder: 'Enter your main commute location',
|
||||
submitBooking: 'Submit Request',
|
||||
defaultInfoDesc: 'A dedicated manager will arrange a one-on-one viewing for you',
|
||||
duration1: '1-3 months',
|
||||
duration2: '4-6 months',
|
||||
duration3: '7-9 months',
|
||||
duration4: '10-12 months',
|
||||
duration5: 'Over 1 year',
|
||||
week0: 'Sun',
|
||||
week1: 'Mon',
|
||||
week2: 'Tue',
|
||||
week3: 'Wed',
|
||||
week4: 'Thu',
|
||||
week5: 'Fri',
|
||||
week6: 'Sat',
|
||||
today: 'Today',
|
||||
tomorrow: 'Tomorrow',
|
||||
remarkTitle: 'Viewing Request',
|
||||
remarkTime: 'Viewing Time: {date} {time}',
|
||||
remarkDuration: 'Expected Stay: {duration}',
|
||||
remarkBudget: 'Budget: {budget} CNY/month',
|
||||
remarkWorkplace: 'Work / Commute Location: {workplace}',
|
||||
remarkArea: 'Preferred Area: {area}',
|
||||
remarkRoomType: 'Preferred Room Type: {roomType}',
|
||||
remarkSource: 'Current Source: {room}',
|
||||
remarkPayMethod: 'Payment Method: {payMethod}',
|
||||
remarkTail: 'Note: Please confirm the viewing schedule with the manager. After viewing and locking a room number, the order can be converted into a booking for payment.',
|
||||
selectTimeRequired: 'Please select a viewing time slot',
|
||||
selectDurationRequired: 'Please select the expected stay duration',
|
||||
submitting: 'Submitting...',
|
||||
submitSuccessTitle: 'Booking Submitted',
|
||||
submitSuccessContent: 'Your viewing request has been submitted.\nThe system will forward it to the authorized manager of the selected area. After the manager confirms the viewing, the order can be completed directly or converted into a booking for payment once a room is selected.',
|
||||
submitFailed: 'Failed to submit the booking'
|
||||
}
|
||||
}
|
||||
isSubmitting: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -348,9 +254,6 @@ export default {
|
||||
this.redirectIfBookingUnavailable()
|
||||
},
|
||||
methods: {
|
||||
t(key, params) {
|
||||
return this.$tm('pkgBooking.book_viewing.book_viewing', key, params)
|
||||
},
|
||||
redirectIfBookingUnavailable() {
|
||||
const session = getSessionSnapshot()
|
||||
if (!session.isLogin) {
|
||||
@@ -382,24 +285,24 @@ export default {
|
||||
},
|
||||
syncDurationOptions() {
|
||||
this.durationOptions = [
|
||||
this.t('duration1'),
|
||||
this.t('duration2'),
|
||||
this.t('duration3'),
|
||||
this.t('duration4'),
|
||||
this.t('duration5')
|
||||
this.$tr('1-3个月'),
|
||||
this.$tr('4-6个月'),
|
||||
this.$tr('7-9个月'),
|
||||
this.$tr('10-12个月'),
|
||||
this.$tr('1年以上')
|
||||
]
|
||||
},
|
||||
generateDates() {
|
||||
const dates = []
|
||||
const today = new Date()
|
||||
const weeks = [
|
||||
this.t('week0'),
|
||||
this.t('week1'),
|
||||
this.t('week2'),
|
||||
this.t('week3'),
|
||||
this.t('week4'),
|
||||
this.t('week5'),
|
||||
this.t('week6')
|
||||
this.$tr('周日'),
|
||||
this.$tr('周一'),
|
||||
this.$tr('周二'),
|
||||
this.$tr('周三'),
|
||||
this.$tr('周四'),
|
||||
this.$tr('周五'),
|
||||
this.$tr('周六')
|
||||
]
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
@@ -409,8 +312,8 @@ export default {
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
|
||||
let weekStr = weeks[d.getDay()]
|
||||
if (i === 0) weekStr = this.t('today');
|
||||
else if (i === 1) weekStr = this.t('tomorrow');
|
||||
if (i === 0) weekStr = this.$tr('今天');
|
||||
else if (i === 1) weekStr = this.$tr('明天');
|
||||
|
||||
dates.push({
|
||||
date: `${d.getFullYear()}-${month}-${day}`,
|
||||
@@ -452,11 +355,11 @@ export default {
|
||||
return
|
||||
}
|
||||
if (this.currentTimeIndex === -1) {
|
||||
uni.showToast({ title: this.t('selectTimeRequired'), icon: 'none' })
|
||||
uni.showToast({ title: this.$tr('请选择看房时间段'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.formData.duration) {
|
||||
uni.showToast({ title: this.t('selectDurationRequired'), icon: 'none' })
|
||||
uni.showToast({ title: this.$tr('请选择预计租住时长'), icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
@@ -478,13 +381,13 @@ export default {
|
||||
}
|
||||
|
||||
this.isSubmitting = true
|
||||
uni.showLoading({ title: this.t('submitting'), mask: true })
|
||||
uni.showLoading({ title: this.$tr('提交中...'), mask: true })
|
||||
return submitViewingApplicationForm(payload)
|
||||
.then(() => {
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
title: this.t('submitSuccessTitle'),
|
||||
content: this.t('submitSuccessContent'),
|
||||
title: this.$tr('预约成功'),
|
||||
content: this.$tr('您的预约看房申请已提交,请等待管家联系'),
|
||||
showCancel: false,
|
||||
confirmColor: '#01BEFF',
|
||||
success: () => {
|
||||
@@ -498,7 +401,7 @@ export default {
|
||||
console.error('submit viewing application failed', error)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: (error && (error.message || error.msg)) || this.t('submitFailed'),
|
||||
title: (error && (error.message || error.msg)) || this.$tr('预约提交失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<view class="selector-header tn-flex tn-flex-row-between tn-flex-col-center" @click="openSelector">
|
||||
<view class="selected-info">
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedRoomType }">
|
||||
{{ selectedRoomType ? getRoomTypeDisplayName(selectedRoomType) : t('selectRoomType') }}
|
||||
{{ selectedRoomType ? getRoomTypeDisplayName(selectedRoomType) : $tr('请选择房型') }}
|
||||
</view>
|
||||
<view class="selected-area tn-text-ellipsis" v-if="selectedArea">
|
||||
{{ getAreaDisplayName(selectedArea) }}
|
||||
@@ -15,17 +15,17 @@
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="80%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ t('popupTitle') }}</text>
|
||||
<text class="popup-title">{{ $tr('选择意向房型') }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="area-list-scroll">
|
||||
<view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
|
||||
<tn-loading mode="circle"></tn-loading>
|
||||
<view class="tn-margin-top-sm tn-color-gray">{{ t('loadingRoomTypes') }}</view>
|
||||
<view class="tn-margin-top-sm tn-color-gray">{{ $tr('房型加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!areaList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ t('emptyRoomTypes') }}</text>
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选房型') }}</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="area-group" v-for="(area, index) in areaList" :key="area.code">
|
||||
@@ -45,7 +45,7 @@
|
||||
@click="handleSelect(area, room)"
|
||||
>
|
||||
<view class="room-name tn-text-ellipsis">{{ getRoomTypeDisplayName(room) }}</view>
|
||||
<view class="room-price" v-if="room.price">¥{{ getPriceValue(room.price) }}{{ t('priceUnit') }}</view>
|
||||
<view class="room-price" v-if="room.price">¥{{ getPriceValue(room.price) }}{{ $tr('/月') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -117,10 +117,6 @@ export default {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
t(key) {
|
||||
const lang = I18N[this.language] ? this.language : 'zh'
|
||||
return I18N[lang][key] || I18N.zh[key] || key
|
||||
},
|
||||
openSelector() {
|
||||
this.showPopup = true
|
||||
this.loadData()
|
||||
@@ -149,7 +145,7 @@ export default {
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('load room types error', error)
|
||||
uni.showToast({ title: this.t('loadFailed'), icon: 'none' })
|
||||
uni.showToast({ title: this.$tr('房型加载失败'), icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<view class="booking-detail-page tn-safe-area-inset-bottom">
|
||||
<tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#FFFFFF">
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ $tr('预订详情') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="page-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view v-if="loading" class="empty-card tn-padding-lg">
|
||||
<view class="booking-title">{{ t('loadingTitle') }}</view>
|
||||
<view class="demo-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
|
||||
<view class="booking-title">{{ $tr('订单加载中') }}</view>
|
||||
<view class="demo-desc tn-margin-top-sm">{{ $tr('正在同步该预订的真实详情,请稍候。') }}</view>
|
||||
</view>
|
||||
<view v-else-if="booking" class="booking-card tn-padding-lg">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view>
|
||||
<view class="booking-title">{{ t('orderNoLabel') }}</view>
|
||||
<view class="booking-title">{{ $tr('预定单号') }}</view>
|
||||
<view class="booking-order tn-margin-top-xs">{{ booking.orderNo }}</view>
|
||||
</view>
|
||||
<view class="status-badge" :class="'status-' + booking.tagType">{{ booking.statusText }}</view>
|
||||
@@ -20,48 +20,48 @@
|
||||
|
||||
<view class="info-box tn-margin-top">
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('roomTypeLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('风格房型') }}</text>
|
||||
<text class="info-value">{{ booking.roomTypeText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('buildingFloorLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('楼栋楼层') }}</text>
|
||||
<text class="info-value">{{ booking.buildingFloorText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('roomNoLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('房间号') }}</text>
|
||||
<text class="info-value">{{ booking.roomNoText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('areaLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('所属区域') }}</text>
|
||||
<text class="info-value">{{ booking.areaText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('stayDateLabel') }}</text>
|
||||
<text class="info-value">{{ booking.startDateText }}{{ t('dateRangeJoiner') }}{{ booking.endDateText }}</text>
|
||||
<text class="info-label">{{ $tr('入住时间') }}</text>
|
||||
<text class="info-value">{{ booking.startDateText }}{{ $tr(' 至 ') }}{{ booking.endDateText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between">
|
||||
<text class="info-label">{{ t('submittedAtLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('提交时间') }}</text>
|
||||
<text class="info-value">{{ booking.createdAtText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="booking.rejectReasonText" class="reason-box tn-margin-top">
|
||||
<view class="reason-title">{{ t('rejectReasonTitle') }}</view>
|
||||
<view class="reason-title">{{ $tr('驳回原因') }}</view>
|
||||
<view class="reason-content tn-margin-top-xs">{{ booking.rejectReasonText }}</view>
|
||||
</view>
|
||||
|
||||
<view class="flow-box tn-margin-top">
|
||||
<view class="flow-title">{{ t('flowTitle') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('pending_review') ? 'active' : ''">{{ t('flowStep1') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('approved_wait_assign') ? 'active' : ''">{{ t('flowStep2') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('assigned_wait_room') ? 'active' : ''">{{ t('flowStep3') }}</view>
|
||||
<view class="flow-title">{{ $tr('当前流程') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('pending_review') ? 'active' : ''">{{ $tr('1. 已支付,等待角色审批') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('approved_wait_assign') ? 'active' : ''">{{ $tr('2. 审批通过,等待分配管家') }}</view>
|
||||
<view class="flow-step tn-margin-top-sm" :class="isStepActive('assigned_wait_room') ? 'active' : ''">{{ $tr('3. 已分配管家,等待分配房号') }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-card tn-padding-lg">
|
||||
<view class="booking-title">{{ t('emptyTitle') }}</view>
|
||||
<view class="demo-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
|
||||
<view class="booking-title">{{ $tr('暂无预订记录') }}</view>
|
||||
<view class="demo-desc tn-margin-top-sm">{{ $tr('当前暂无可查看的预订详情,请先前往预订记录确认订单。') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -78,52 +78,6 @@ import {
|
||||
} from '../../utils/booking-helper'
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
zh: {
|
||||
navTitle: '预订详情',
|
||||
loadingTitle: '订单加载中',
|
||||
loadingDesc: '正在同步该预订的真实详情,请稍候。',
|
||||
orderNoLabel: '预定单号',
|
||||
roomTypeLabel: '风格房型',
|
||||
buildingFloorLabel: '楼栋楼层',
|
||||
roomNoLabel: '房间号',
|
||||
areaLabel: '所属区域',
|
||||
stayDateLabel: '入住时间',
|
||||
submittedAtLabel: '提交时间',
|
||||
rejectReasonTitle: '驳回原因',
|
||||
flowTitle: '当前流程',
|
||||
flowStep1: '1. 已支付,等待角色审批',
|
||||
flowStep2: '2. 审批通过,等待分配管家',
|
||||
flowStep3: '3. 已分配管家,等待分配房号',
|
||||
emptyTitle: '暂无预订记录',
|
||||
emptyDesc: '当前暂无可查看的预订详情,请先前往预订记录确认订单。',
|
||||
cachedDetailShown: '网络异常,已展示最近同步详情',
|
||||
loadFailed: '预订详情加载失败',
|
||||
dateRangeJoiner: ' 至 '
|
||||
},
|
||||
en: {
|
||||
navTitle: 'Booking Detail',
|
||||
loadingTitle: 'Loading booking',
|
||||
loadingDesc: 'Syncing the latest booking details. Please wait.',
|
||||
orderNoLabel: 'Booking No.',
|
||||
roomTypeLabel: 'Room Type',
|
||||
buildingFloorLabel: 'Building / Floor',
|
||||
roomNoLabel: 'Room No.',
|
||||
areaLabel: 'Area',
|
||||
stayDateLabel: 'Stay Dates',
|
||||
submittedAtLabel: 'Submitted At',
|
||||
rejectReasonTitle: 'Rejection Reason',
|
||||
flowTitle: 'Current Flow',
|
||||
flowStep1: '1. Paid and waiting for approval',
|
||||
flowStep2: '2. Approved and waiting for butler assignment',
|
||||
flowStep3: '3. Butler assigned and waiting for room allocation',
|
||||
emptyTitle: 'No booking record',
|
||||
emptyDesc: 'No booking detail is available right now. Please check your booking records first.',
|
||||
cachedDetailShown: 'Network issue detected. Showing the latest synced detail.',
|
||||
loadFailed: 'Failed to load booking detail',
|
||||
dateRangeJoiner: ' to '
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderNo: '',
|
||||
@@ -148,9 +102,6 @@ export default {
|
||||
await this.refreshBooking()
|
||||
},
|
||||
methods: {
|
||||
t(key, params) {
|
||||
return this.$tm('pkgBooking.booking_detail.booking_detail', key, params)
|
||||
},
|
||||
getStoreUser() {
|
||||
return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
|
||||
},
|
||||
@@ -205,8 +156,8 @@ export default {
|
||||
this.booking = this.resolveBookingFromList(normalizeBookingList(cachedList, this.language))
|
||||
uni.showToast({
|
||||
title: this.booking
|
||||
? this.t('cachedDetailShown')
|
||||
: ((error && (error.message || error.msg)) || this.t('loadFailed')),
|
||||
? this.$tr('网络异常,已展示最近同步详情')
|
||||
: ((error && (error.message || error.msg)) || this.$tr('预订详情加载失败')),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<view class="booking-list-page tn-safe-area-inset-bottom">
|
||||
<tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="transparent">
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ t('navTitle') }}</view>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ $tr('预订记录') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="page-content tn-padding" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
|
||||
<view v-if="loading" class="empty-card tn-padding-lg">
|
||||
<view class="empty-title">{{ t('loadingTitle') }}</view>
|
||||
<view class="empty-desc tn-margin-top-sm">{{ t('loadingDesc') }}</view>
|
||||
<view class="empty-title">{{ $tr('订单加载中') }}</view>
|
||||
<view class="empty-desc tn-margin-top-sm">{{ $tr('正在同步您的真实预订记录,请稍候。') }}</view>
|
||||
</view>
|
||||
<view v-else-if="bookingList.length">
|
||||
<view
|
||||
@@ -18,7 +18,7 @@
|
||||
>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view>
|
||||
<view class="booking-title">{{ item.roomTypeText || t('bookingFallbackTitle') }}</view>
|
||||
<view class="booking-title">{{ item.roomTypeText || $tr('房源预订') }}</view>
|
||||
<view class="booking-subtitle tn-margin-top-xs">{{ item.orderNo }}</view>
|
||||
</view>
|
||||
<view class="status-badge" :class="'status-' + item.tagType">
|
||||
@@ -28,15 +28,15 @@
|
||||
|
||||
<view class="info-grid tn-margin-top">
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('buildingFloorLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('楼栋楼层') }}</text>
|
||||
<text class="info-value">{{ item.buildingFloorText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between tn-margin-bottom-sm">
|
||||
<text class="info-label">{{ t('stayDateLabel') }}</text>
|
||||
<text class="info-value">{{ item.startDateText }}{{ t('dateRangeJoiner') }}{{ item.endDateText }}</text>
|
||||
<text class="info-label">{{ $tr('入住时间') }}</text>
|
||||
<text class="info-value">{{ item.startDateText }}{{ $tr(' 至 ') }}{{ item.endDateText }}</text>
|
||||
</view>
|
||||
<view class="info-row tn-flex tn-flex-row-between">
|
||||
<text class="info-label">{{ t('submittedAtLabel') }}</text>
|
||||
<text class="info-label">{{ $tr('提交时间') }}</text>
|
||||
<text class="info-value">{{ item.createdAtText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -44,10 +44,10 @@
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-card tn-padding-lg">
|
||||
<view class="empty-title">{{ t('emptyTitle') }}</view>
|
||||
<view class="empty-desc tn-margin-top-sm">{{ t('emptyDesc') }}</view>
|
||||
<view class="empty-title">{{ $tr('暂无预订记录') }}</view>
|
||||
<view class="empty-desc tn-margin-top-sm">{{ $tr('当前暂无预订记录,完成预订后会在这里展示。') }}</view>
|
||||
<view class="custom-btn btn-primary tn-margin-top-lg" @click="goSelectRoom">
|
||||
<text class="tn-text-bold">{{ t('goSelectRoom') }}</text>
|
||||
<text class="tn-text-bold">{{ $tr('去选房') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -60,38 +60,6 @@ import { getSessionSnapshot } from '../../utils/app-state'
|
||||
import { normalizeBookingList, parseOrderListResponse } from '../../utils/booking-helper'
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
zh: {
|
||||
navTitle: '预订记录',
|
||||
loadingTitle: '订单加载中',
|
||||
loadingDesc: '正在同步您的真实预订记录,请稍候。',
|
||||
bookingFallbackTitle: '房源预订',
|
||||
buildingFloorLabel: '楼栋楼层',
|
||||
stayDateLabel: '入住时间',
|
||||
submittedAtLabel: '提交时间',
|
||||
emptyTitle: '暂无预订记录',
|
||||
emptyDesc: '当前暂无预订记录,完成预订后会在这里展示。',
|
||||
goSelectRoom: '去选房',
|
||||
cachedListShown: '网络异常,已展示最近同步记录',
|
||||
loadFailed: '预订记录加载失败',
|
||||
dateRangeJoiner: ' 至 '
|
||||
},
|
||||
en: {
|
||||
navTitle: 'Booking Records',
|
||||
loadingTitle: 'Loading bookings',
|
||||
loadingDesc: 'Syncing your latest booking records. Please wait.',
|
||||
bookingFallbackTitle: 'Room Booking',
|
||||
buildingFloorLabel: 'Building / Floor',
|
||||
stayDateLabel: 'Stay Dates',
|
||||
submittedAtLabel: 'Submitted At',
|
||||
emptyTitle: 'No booking records',
|
||||
emptyDesc: 'No booking record is available yet. Completed bookings will appear here.',
|
||||
goSelectRoom: 'Select Room',
|
||||
cachedListShown: 'Network issue detected. Showing the latest synced records.',
|
||||
loadFailed: 'Failed to load booking records',
|
||||
dateRangeJoiner: ' to '
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bookingList: [],
|
||||
@@ -112,9 +80,6 @@ export default {
|
||||
await this.fetchBookingList()
|
||||
},
|
||||
methods: {
|
||||
t(key, params) {
|
||||
return this.$tm('pkgBooking.booking_list.booking_list', key, params)
|
||||
},
|
||||
getStoreUser() {
|
||||
return (this.$store && this.$store.state && this.$store.state.vuex_user) || {}
|
||||
},
|
||||
@@ -156,8 +121,8 @@ export default {
|
||||
this.applyBookingList(normalizeBookingList(cachedList, this.language))
|
||||
uni.showToast({
|
||||
title: this.bookingList.length
|
||||
? this.t('cachedListShown')
|
||||
: ((error && (error.message || error.msg)) || this.t('loadFailed')),
|
||||
? this.$tr('网络异常,已展示最近同步记录')
|
||||
: ((error && (error.message || error.msg)) || this.$tr('预订记录加载失败')),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view class="pay-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>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ $tr('支付定金') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="pay-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '200rpx'}">
|
||||
|
||||
<!-- 支付金额区 -->
|
||||
<view class="amount-area tn-flex tn-flex-direction-column tn-flex-col-center tn-margin-top-xl tn-margin-bottom-xl">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('paymentAmount') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('应付定金') }}</view>
|
||||
<view class="tn-text-bold tn-color-black tn-margin-top-sm amount-text">
|
||||
<text class="tn-text-xl tn-margin-right-xs">$</text>500.00
|
||||
</view>
|
||||
@@ -21,48 +21,48 @@
|
||||
<view class="icon-bg-box tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-sm">
|
||||
<text class="tn-icon-building bill-head-icon"></text>
|
||||
</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ t('billTo') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('收款方') }}</view>
|
||||
</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ t('company') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ $tr('绿居物业管理有限公司') }}</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('roomType') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('房源风格') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ displayStyleName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && (roomData.roomTypeName || roomData.roomTypeNameEn)">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('roomTypeNameLabel') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('房型') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ displayRoomTypeName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('location') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('楼栋位置') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">{{ displayLocationText }}</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.startDate">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('bookingPeriod') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('预订时间') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ roomData.startDate }} {{ t('toLabel') }} {{ roomData.endDate }}
|
||||
{{ roomData.startDate }} {{ $tr('至') }} {{ roomData.endDate }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.stayNights">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('stayNights') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ roomData.stayNights }} {{ t('nightUnit') }}</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ $tr('入住晚数') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ roomData.stayNights }} {{ $tr('晚') }}</view>
|
||||
</view>
|
||||
|
||||
<view class="bill-divider tn-margin-top-md tn-margin-bottom"></view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-md">
|
||||
<view class="tn-color-black tn-text-bold tn-text-lg">{{ t('total') }}</view>
|
||||
<view class="tn-color-black tn-text-bold tn-text-lg">{{ $tr('合计') }}</view>
|
||||
<view class="tn-text-bold" style="color: $brand-primary; font-size: 40rpx;">$500.00</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式选择 -->
|
||||
<view class="payment-methods">
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black tn-margin-bottom-lg">{{ t('paymentMethod') }}</view>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black tn-margin-bottom-lg">{{ $tr('选择支付方式') }}</view>
|
||||
|
||||
<view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom"
|
||||
:class="payMethod === 'Wechat' ? 'method-active' : ''" @click="payMethod = 'Wechat'">
|
||||
@@ -105,10 +105,10 @@
|
||||
</view>
|
||||
|
||||
<view class="tip-panel tn-padding-lg">
|
||||
<view class="tn-text-bold tn-text-lg tn-color-black">{{ t('fallbackTitle') }}</view>
|
||||
<view class="tn-color-gray tn-text-sm tn-margin-top-sm">{{ t('fallbackDesc') }}</view>
|
||||
<view class="tn-text-bold tn-text-lg tn-color-black">{{ $tr('支付接口暂未接入') }}</view>
|
||||
<view class="tn-color-gray tn-text-sm tn-margin-top-sm">{{ $tr('当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程,后续由工作人员跟进。') }}</view>
|
||||
<view class="tip-action tn-margin-top-lg" @click="fallbackToApplication">
|
||||
<text class="tn-text-bold">{{ t('fallbackAction') }}</text>
|
||||
<text class="tn-text-bold">{{ $tr('改为提交入住申请') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -117,11 +117,11 @@
|
||||
<!-- 底部固定支付按钮 -->
|
||||
<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('total') }}</view>
|
||||
<view class="tn-text-sm tn-color-gray">{{ $tr('合计') }}</view>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">$500.00</view>
|
||||
</view>
|
||||
<view class="custom-btn btn-primary" style="width: 60%; height: 100rpx;" @click="handlePay" :class="{ 'btn-disabled': isSubmitting }">
|
||||
<text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '支付中...' : 'Processing...') : t('payNow') }}</text>
|
||||
<text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '支付中...' : 'Processing...') : $tr('确认支付并提交预订') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -136,77 +136,7 @@ export default {
|
||||
return {
|
||||
isSubmitting: false,
|
||||
payMethod: 'Wechat',
|
||||
roomData: null,
|
||||
i18n: {
|
||||
zh: {
|
||||
title: '支付定金',
|
||||
paymentAmount: '应付定金',
|
||||
billTo: '收款方',
|
||||
company: '绿居物业管理有限公司',
|
||||
roomType: '房源风格',
|
||||
roomTypeNameLabel: '房型',
|
||||
location: '楼栋位置',
|
||||
bookingPeriod: '预订时间',
|
||||
toLabel: '至',
|
||||
stayNights: '入住晚数',
|
||||
nightUnit: '晚',
|
||||
total: '合计',
|
||||
paymentMethod: '选择支付方式',
|
||||
payNow: '确认支付并提交预订',
|
||||
fallbackTitle: '支付接口暂未接入',
|
||||
fallbackDesc: '当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程,后续由工作人员跟进。',
|
||||
fallbackAction: '改为提交入住申请',
|
||||
fallbackNavigateTitle: '入住申请',
|
||||
fallbackNavigateDesc: '支付接口暂未接入,先提交入住申请,由工作人员继续跟进。',
|
||||
paying: '支付中...',
|
||||
pendingTitle: '支付接口待接入',
|
||||
paymentNoticeTitle: '用户须知',
|
||||
paymentNoticeMethodLabel: '支付方式',
|
||||
paymentNoticeAmountLabel: '支付金额',
|
||||
paymentNoticeItemLabel: '支付项目',
|
||||
paymentNoticeItemValue: '房源定金',
|
||||
paymentNoticeLine1: '请确认支付方式和金额无误后再继续操作。',
|
||||
paymentNoticeLine2: '当前页面为预支付引导页,真实支付接口暂未接入。',
|
||||
paymentNoticeLine3: '确认后将进入后续提交流程,由工作人员继续跟进。',
|
||||
paymentNoticeConfirm: '继续',
|
||||
paymentNoticeCancel: '取消',
|
||||
laterAction: '我知道了'
|
||||
},
|
||||
en: {
|
||||
title: 'Deposit Payment',
|
||||
paymentAmount: 'Deposit Amount',
|
||||
billTo: 'Bill To',
|
||||
company: 'Lüju Property Management',
|
||||
roomType: 'Style',
|
||||
roomTypeNameLabel: 'Room Type',
|
||||
location: 'Location',
|
||||
bookingPeriod: 'Booking Period',
|
||||
toLabel: 'to',
|
||||
stayNights: 'Stay Nights',
|
||||
nightUnit: 'nights',
|
||||
total: 'Total',
|
||||
paymentMethod: 'Payment Method',
|
||||
payNow: 'Pay and Submit',
|
||||
fallbackTitle: 'Payment API Pending',
|
||||
fallbackDesc: 'The real deposit payment flow is not ready yet. You can submit an application first and let staff follow up.',
|
||||
fallbackAction: 'Submit Application Instead',
|
||||
fallbackNavigateTitle: 'Stay Application',
|
||||
fallbackNavigateDesc: 'The payment API is not ready yet. Submit a stay application first and let staff follow up.',
|
||||
paying: 'Processing...',
|
||||
pendingTitle: 'Payment API Pending',
|
||||
paymentNoticeTitle: 'Payment Notice',
|
||||
paymentNoticeMethodLabel: 'Payment Method',
|
||||
paymentNoticeAmountLabel: 'Amount',
|
||||
paymentNoticeItemLabel: 'Charge Item',
|
||||
paymentNoticeItemValue: 'Deposit',
|
||||
paymentNoticeLine1: 'Please confirm the payment method and amount before continuing.',
|
||||
paymentNoticeLine2: 'This page is a pre-payment guide and the real payment API is not connected yet.',
|
||||
paymentNoticeLine3: 'After confirmation, the process continues to the follow-up submission flow for staff handling.',
|
||||
paymentNoticeConfirm: 'Continue',
|
||||
paymentNoticeCancel: 'Cancel',
|
||||
laterAction: 'Later'
|
||||
}
|
||||
}
|
||||
roomData: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -256,26 +186,23 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
t(key) {
|
||||
return this.$tm('pkgBooking.pay.pay', key)
|
||||
},
|
||||
confirmPaymentNotice() {
|
||||
const content = [
|
||||
`${this.t('paymentNoticeItemLabel')}: ${this.t('paymentNoticeItemValue')}`,
|
||||
`${this.t('paymentNoticeMethodLabel')}: ${this.payMethod}`,
|
||||
`${this.t('paymentNoticeAmountLabel')}: $500.00`,
|
||||
`${this.$tr('支付项目')}: ${this.$tr('房源定金')}`,
|
||||
`${this.$tr('支付方式')}: ${this.payMethod}`,
|
||||
`${this.$tr('支付金额')}: $500.00`,
|
||||
'',
|
||||
`1. ${this.t('paymentNoticeLine1')}`,
|
||||
`2. ${this.t('paymentNoticeLine2')}`,
|
||||
`3. ${this.t('paymentNoticeLine3')}`
|
||||
`1. ${this.$tr('请确认支付方式和金额无误后再继续操作。')}`,
|
||||
`2. ${this.$tr('当前页面为预支付引导页,真实支付接口暂未接入。')}`,
|
||||
`3. ${this.$tr('确认后将进入后续提交流程,由工作人员继续跟进。')}`
|
||||
].join('\n')
|
||||
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: this.t('paymentNoticeTitle'),
|
||||
title: this.$tr('用户须知'),
|
||||
content,
|
||||
confirmText: this.t('paymentNoticeConfirm'),
|
||||
cancelText: this.t('paymentNoticeCancel'),
|
||||
confirmText: this.$tr('继续'),
|
||||
cancelText: this.$tr('取消'),
|
||||
success: (res) => resolve(!!(res && res.confirm)),
|
||||
fail: () => resolve(false)
|
||||
})
|
||||
@@ -314,7 +241,7 @@ export default {
|
||||
const descZh = '支付接口暂未接入,先提交入住申请,由工作人员继续跟进。'
|
||||
const descEn = 'The payment API is not ready yet. Submit a stay application first and let staff follow up.'
|
||||
uni.navigateTo({
|
||||
url: `/pkgService/submit_request/submit_request?title=${encodeURIComponent(this.t('fallbackNavigateTitle'))}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&desc=${encodeURIComponent(this.t('fallbackNavigateDesc'))}&descZh=${encodeURIComponent(descZh)}&descEn=${encodeURIComponent(descEn)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
|
||||
url: `/pkgService/submit_request/submit_request?title=${encodeURIComponent(this.$tr('入住申请'))}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&desc=${encodeURIComponent(this.$tr('支付接口暂未接入,先提交入住申请,由工作人员继续跟进。'))}&descZh=${encodeURIComponent(descZh)}&descEn=${encodeURIComponent(descEn)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
|
||||
})
|
||||
},
|
||||
handlePay() {
|
||||
@@ -322,16 +249,16 @@ export default {
|
||||
this.confirmPaymentNotice().then((confirmed) => {
|
||||
if (!confirmed) return
|
||||
this.isSubmitting = true
|
||||
uni.showLoading({ title: this.t('paying') })
|
||||
uni.showLoading({ title: this.$tr('支付中...') })
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
this.isSubmitting = false
|
||||
uni.showModal({
|
||||
title: this.t('pendingTitle'),
|
||||
content: this.t('fallbackDesc'),
|
||||
confirmText: this.t('fallbackAction'),
|
||||
cancelText: this.t('laterAction'),
|
||||
title: this.$tr('支付接口待接入'),
|
||||
content: this.$tr('当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程,后续由工作人员跟进。'),
|
||||
confirmText: this.$tr('改为提交入住申请'),
|
||||
cancelText: this.$tr('我知道了'),
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.fallbackToApplication()
|
||||
|
||||
Reference in New Issue
Block a user