liangjian/QSY-lvjuxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化首页服务入口与租住业务流程

Browse Source 
补齐首页待办跳转、押金支付引导和多类租住服务页面能力，统一租客端关键业务流程体验。
This commit is contained in:
liangjian
2026-08-25 13:53:12 +08:00
parent 1111ac148b
commit 9fee2c3a74
41 changed files with 6985 additions and 933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
components/DepositOtherPaymentPopup.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<tn-popup :value="value" mode="bottom" length="84%" :borderRadius="32" :closeBtn="true" @close="close" @input="handleInput">
<view class="deposit-other-payment-popup">
<view class="popup-header">
<view class="popup-handle"></view>
<view class="popup-title">{{ getLocalizedText('其他支付方式', 'Other Payment Methods') }}</view>
</view>
<scroll-view scroll-y class="popup-body" :show-scrollbar="false">
<view class="popup-content">
<view v-if="hasConfiguredContent" class="hero-card">
<view class="hero-badge">{{ getLocalizedText('线下支付说明', 'Alternative Payment') }}</view>
<view class="hero-title">{{ getLocalizedText('定金支付备用方案', 'Deposit payment backup plan') }}</view>
<view class="hero-desc">
{{ getLocalizedText(
'当线上支付渠道暂不可用时，可通过下方联系电话、二维码或转账说明继续完成定金支付。',
'Use the configured contact, QR code, or transfer instructions below when the online payment channel is unavailable.'
) }}
</view>
</view>
<view v-if="loading" class="loading-card">
<view class="loading-chip">{{ getLocalizedText('正在同步其他支付配置，请稍候...', 'Syncing alternative payment details...') }}</view>
</view>
<template v-else>
<view v-if="phone" class="contact-card">
<view class="contact-main">
<view class="contact-label">{{ getLocalizedText('联系电话', 'Contact Phone') }}</view>
<view class="contact-value">{{ phone }}</view>
</view>
<view class="contact-action" @click="handleCallPhone">
<text class="tn-text-bold">{{ getLocalizedText('拨打电话', 'Call') }}</text>
</view>
</view>
<view v-if="qrCodeUrl" class="qr-card">
<view class="section-title">{{ getLocalizedText('支付二维码', 'Payment QR Code') }}</view>
<image class="qr-image" :src="qrCodeUrl" mode="widthFix" @click="previewQrCode"></image>
<view class="qr-hint">
{{ getLocalizedText('点击二维码图片可查看大图。', 'Tap the image to preview the code in full size.') }}
</view>
</view>
<view v-if="richTextNodes" class="rich-text-card">
<view class="section-title">{{ getLocalizedText('支付说明', 'Payment Instructions') }}</view>
<rich-text class="rich-text-content" :nodes="richTextNodes"></rich-text>
</view>
<view v-if="!phone && !qrCodeUrl && !richTextNodes" class="empty-card">
<view class="empty-title">{{ getLocalizedText('暂未配置展示内容', 'Configuration Pending') }}</view>
<view class="empty-desc">
{{ getLocalizedText(
'当前暂未同步到其他支付配置，请联系公寓工作人员处理。',
'Alternative payment details are not available yet. Please contact the property staff for manual payment assistance.'
) }}
</view>
</view>
</template>
</view>
</scroll-view>
<view class="popup-footer">
<view class="notice-action-btn" @click="close">
<text class="tn-text-bold">{{ getLocalizedText('我知道了', 'Got It') }}</text>
</view>
</view>
</view>
</tn-popup>
</template>
<script>
import { addFilePrefix } from '@/utils/common'
import { normalizeRichTextImages } from '@/utils/rich-text'
function escapeHtml(value = '') {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;')
}
function normalizeContentToRichText(value = '') {
const text = String(value || '').trim()
if (!text) {
return ''
}
if (/<[a-z][\s\S]*>/i.test(text)) {
return normalizeRichTextImages(
text,
'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:20rpx;margin:18rpx 0;vertical-align:top;'
)
}
return `<div style="white-space:pre-wrap;line-height:1.9;color:#334155;font-size:28rpx;">${escapeHtml(text)}</div>`
}
export default {
name: 'DepositOtherPaymentPopup',
props: {
value: {
type: Boolean,
default: false
},
config: {
type: Object,
default: () => ({})
},
loading: {
type: Boolean,
default: false
}
},
computed: {
language() {
return this.$getLanguage()
},
phone() {
return String((this.config && this.config.phone) || '').trim()
},
qrCodeUrl() {
return addFilePrefix(String((this.config && this.config.qrCode) || '').trim())
},
localizedContent() {
if (this.language === 'en') {
return this.config.contentEn || this.config.contentZh || ''
}
return this.config.contentZh || this.config.contentEn || ''
},
hasConfiguredContent() {
return !!(this.phone || this.qrCodeUrl || this.richTextNodes)
},
richTextNodes() {
return normalizeContentToRichText(this.localizedContent)
}
},
methods: {
getLocalizedText(zh, en) {
return this.language === 'en' ? en : zh
},
handleInput(value) {
this.$emit('input', value)
this.$emit('update:modelValue', value)
},
close() {
this.handleInput(false)
},
handleCallPhone() {
if (!this.phone) {
uni.showToast({
title: this.getLocalizedText('暂无联系电话', 'No contact phone available'),
icon: 'none'
})
return
}
uni.makePhoneCall({
phoneNumber: this.phone
})
},
previewQrCode() {
if (!this.qrCodeUrl) {
return
}
uni.previewImage({
urls: [this.qrCodeUrl]
})
}
}
}
</script>
<style scoped>
.deposit-other-payment-popup {
background: #ffffff;
border-radius: 32rpx 32rpx 0 0;
display: flex;
flex-direction: column;
height: 80vh;
}
.popup-header {
padding: 18rpx 88rpx 20rpx;
text-align: center;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 255, 0.96) 100%);
}
.popup-handle {
width: 88rpx;
height: 8rpx;
margin: 0 auto 18rpx;
border-radius: 999rpx;
background: rgba(148, 163, 184, 0.35);
}
.popup-title {
font-size: 34rpx;
font-weight: 600;
line-height: 1.2;
letter-spacing: 1rpx;
color: #1a2233;
}
.popup-body {
flex: 1;
height: 0;
min-height: 0;
padding: 28rpx 28rpx 24rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #f7faff 0%, #f2f5fc 100%);
}
.popup-content {
display: flex;
flex-direction: column;
gap: 24rpx;
padding-bottom: 24rpx;
}
.hero-card {
padding: 28rpx;
border-radius: 32rpx;
background:
radial-gradient(circle at top right, rgba(43, 142, 255, 0.16) 0, rgba(43, 142, 255, 0) 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.96) 100%);
border: 1rpx solid rgba(43, 142, 255, 0.1);
box-shadow: 0 24rpx 60rpx rgba(43, 142, 255, 0.1);
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 10rpx 18rpx;
border-radius: 999rpx;
background: rgba(43, 142, 255, 0.1);
color: #2b6fd6;
font-size: 22rpx;
font-weight: 700;
}
.hero-title {
margin-top: 18rpx;
font-size: 36rpx;
line-height: 1.25;
font-weight: 700;
color: #183b73;
}
.hero-desc {
margin-top: 12rpx;
font-size: 25rpx;
line-height: 1.7;
color: #607089;
}
.loading-card,
.contact-card,
.qr-card,
.rich-text-card,
.empty-card {
padding: 24rpx 28rpx;
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.88);
border: 1rpx solid rgba(43, 142, 255, 0.08);
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.85);
}
.loading-chip {
display: inline-flex;
padding: 12rpx 20rpx;
border-radius: 999rpx;
background: rgba(43, 142, 255, 0.08);
color: #4c6a95;
font-size: 24rpx;
}
.contact-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.contact-main {
flex: 1;
min-width: 0;
}
.contact-label,
.section-title {
font-size: 24rpx;
color: #7c8ca5;
font-weight: 600;
}
.contact-value {
margin-top: 10rpx;
font-size: 32rpx;
line-height: 1.4;
font-weight: 700;
color: #22324d;
word-break: break-all;
}
.contact-action {
padding: 0 28rpx;
height: 76rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2b8eff 0%, #1f6fe5 100%);
color: #ffffff;
box-shadow: 0 14rpx 28rpx rgba(43, 142, 255, 0.18);
flex-shrink: 0;
}
.qr-card {
text-align: center;
}
.qr-image {
width: 360rpx;
max-width: 100%;
margin: 18rpx auto 0;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 18rpx 40rpx rgba(15, 23, 42, 0.1);
}
.qr-hint {
margin-top: 16rpx;
font-size: 22rpx;
line-height: 1.6;
color: #7c8ca5;
}
.rich-text-content {
margin-top: 18rpx;
}
.empty-title {
font-size: 30rpx;
font-weight: 700;
color: #22324d;
}
.empty-desc {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 1.7;
color: #7c8ca5;
}
.popup-footer {
padding: 18rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 26%, #ffffff 100%);
display: flex;
justify-content: center;
backdrop-filter: blur(8rpx);
}
.notice-action-btn {
width: 100%;
height: 88rpx;
padding: 0 40rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, #2b8eff 0%, #1f6fe5 100%);
color: #ffffff;
box-shadow: 0 14rpx 28rpx rgba(43, 142, 255, 0.22);
}
</style>