feat: 重构核心租住流程页面与交互体验
统一注册、看房、申请与入住等核心页面的视觉和流程衔接，补齐支付、签约与状态流转闭环，提升移动端操作连贯性。
This commit is contained in:
liangjian
@@ -116,7 +116,7 @@
|
||||
:class="{ 'danger-btn--loading': canceling }"
|
||||
@click.stop="handleCancelOrder"
|
||||
>
|
||||
<text class="tn-text-bold">{{ canceling ? $tr('取消中...') : $tr('取消订单') }}</text>
|
||||
<text class="tn-text-bold">{{ canceling ? $tr('取消中...') : $tr('取消申请') }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="currentStepActionText"
|
||||
@@ -344,12 +344,14 @@ export default {
|
||||
&& this.detail.detailCode
|
||||
&& this.statusType === 'pending'
|
||||
},
|
||||
canCancelOrder() {
|
||||
return this.shouldPayDeposit(this.detail)
|
||||
&& !this.isViewingApplication
|
||||
&& this.detail
|
||||
canCancelApplication() {
|
||||
return !!(this.detail
|
||||
&& this.detail.detailCode
|
||||
&& !this.canceling
|
||||
&& Number(this.detail.status) === 0
|
||||
&& (this.isViewingApplication || Number(this.detail.payStatus) !== 10))
|
||||
},
|
||||
canCancelOrder() {
|
||||
return this.canCancelApplication && !this.canceling
|
||||
}
|
||||
},
|
||||
onLoad(options = {}) {
|
||||
@@ -601,11 +603,16 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
getCancelOrderContent() {
|
||||
return this.isViewingApplication
|
||||
? this.$tr('取消后将关闭当前预约看房申请，是否继续？')
|
||||
: this.$tr('取消后将关闭当前申请单，是否继续？')
|
||||
},
|
||||
confirmCancelOrder() {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: this.$tr('取消订单'),
|
||||
content: this.$tr('取消后将关闭当前未支付的定金订单，是否继续？'),
|
||||
title: this.$tr('取消申请'),
|
||||
content: this.getCancelOrderContent(),
|
||||
confirmColor: '#ef4444',
|
||||
success: (res) => resolve(!!(res && res.confirm)),
|
||||
fail: () => resolve(false)
|
||||
@@ -640,9 +647,7 @@ export default {
|
||||
}
|
||||
this.canceling = true
|
||||
return userDetailCancel({
|
||||
detailCode: this.detail.detailCode,
|
||||
code: this.detail.detailCode,
|
||||
referenceTypeNo: this.detail.detailCode
|
||||
detailCode: this.detail.detailCode
|
||||
}, this.language)
|
||||
.then(() => {
|
||||
this.detail = {
|
||||
@@ -652,14 +657,14 @@ export default {
|
||||
}
|
||||
this.syncCanceledDetailToCache()
|
||||
uni.showToast({
|
||||
title: this.$tr('订单已取消'),
|
||||
title: this.$tr('申请已取消'),
|
||||
icon: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
uni.showToast({
|
||||
title: (error && (error.message || error.msg)) || this.$tr('取消订单失败'),
|
||||
title: (error && (error.message || error.msg)) || this.$tr('取消申请失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
@@ -241,7 +241,7 @@ import {
|
||||
getAccountBillRefundStatusLabel,
|
||||
getAccountReferenceTypeLabel
|
||||
} from '@/utils/enum-store.js'
|
||||
import { getActiveApplicationCode, getMyApplicationList, saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
|
||||
import { getActiveApplicationCode, getMyApplicationList, getSessionSnapshot, saveActiveApplicationCode, saveMyApplicationList } from '@/utils/app-state'
|
||||
|
||||
const VIEWING_APPLICATION_PATTERN = /预约看房申请|看房时间：|意向房型：|意向区域：|viewing request|viewing time|preferred room type|preferred area/i
|
||||
|
||||
@@ -730,7 +730,7 @@ export default {
|
||||
getCancelButtonText(item = {}) {
|
||||
return this.cancelingBillNo === this.getBillNo(item)
|
||||
? this.$tr('取消中...')
|
||||
: this.$tr('取消订单')
|
||||
: this.$tr('取消申请')
|
||||
},
|
||||
resolveReferenceTypeNo(item = {}) {
|
||||
return item.code || item.detailCode || ''
|
||||
@@ -755,6 +755,19 @@ export default {
|
||||
return Promise.resolve('')
|
||||
}
|
||||
|
||||
const session = getSessionSnapshot()
|
||||
const sessionUser = session && session.currentUser ? session.currentUser : {}
|
||||
const currentFlowRefNo = String(
|
||||
sessionUser.currentReservationRefNo
|
||||
|| (session && session.resolvedUser && session.resolvedUser.currentReservationRefNo)
|
||||
|| ''
|
||||
).trim()
|
||||
if (currentFlowRefNo) {
|
||||
this.currentReferenceTypeNo = currentFlowRefNo
|
||||
saveActiveApplicationCode(currentFlowRefNo)
|
||||
return Promise.resolve(this.currentReferenceTypeNo)
|
||||
}
|
||||
|
||||
const cachedActiveCode = getActiveApplicationCode()
|
||||
if (cachedActiveCode) {
|
||||
this.currentReferenceTypeNo = cachedActiveCode
|
||||
@@ -1011,8 +1024,8 @@ export default {
|
||||
confirmCancelOrder() {
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: this.$tr('取消订单'),
|
||||
content: this.$tr('取消后将关闭当前未支付订单，是否继续？'),
|
||||
title: this.$tr('取消申请'),
|
||||
content: this.$tr('取消后将关闭当前申请单，是否继续？'),
|
||||
confirmColor: '#ef4444',
|
||||
success: (res) => resolve(!!(res && res.confirm)),
|
||||
fail: () => resolve(false)
|
||||
@@ -1020,18 +1033,8 @@ export default {
|
||||
})
|
||||
},
|
||||
buildCancelOrderPayload(item = {}) {
|
||||
const pendingOrder = this.getPendingPaymentOrder(item) || {}
|
||||
const billNo = this.getBillNo(item)
|
||||
const paymentNo = pendingOrder.paymentNo || pendingOrder.payNo || pendingOrder.payRequestNo || ''
|
||||
return {
|
||||
detailCode: this.currentReferenceTypeNo,
|
||||
code: this.currentReferenceTypeNo,
|
||||
referenceTypeNo: this.currentReferenceTypeNo,
|
||||
billNo,
|
||||
BillNo: billNo,
|
||||
paymentNo,
|
||||
payNo: paymentNo,
|
||||
payRequestNo: pendingOrder.payRequestNo || ''
|
||||
detailCode: this.currentReferenceTypeNo
|
||||
}
|
||||
},
|
||||
createPaymentSession(item = {}) {
|
||||
@@ -1274,7 +1277,7 @@ export default {
|
||||
return userDetailCancel(this.buildCancelOrderPayload(item), this.language)
|
||||
.then(() => {
|
||||
uni.showToast({
|
||||
title: this.$tr('订单已取消'),
|
||||
title: this.$tr('申请已取消'),
|
||||
icon: 'success'
|
||||
})
|
||||
return this.refreshBillList()
|
||||
@@ -1282,7 +1285,7 @@ export default {
|
||||
})
|
||||
.catch((error) => {
|
||||
uni.showToast({
|
||||
title: (error && (error.message || error.msg)) || this.$tr('取消订单失败'),
|
||||
title: (error && (error.message || error.msg)) || this.$tr('取消申请失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
@@ -93,7 +93,8 @@
|
||||
:formData="uploadFormData"
|
||||
:max-count="6"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
uploadText=""
|
||||
:uploadText="''"
|
||||
:customBtn="true"
|
||||
@on-success="onUploadSuccess"
|
||||
@on-list-change="onPhotoListChange"
|
||||
@on-remove="onRemoveImage"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,32 +1,40 @@
|
||||
<template>
|
||||
<view class="building-selector">
|
||||
<view
|
||||
class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
:class="{ 'selector-header--disabled': !areaCode }"
|
||||
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
:class="{ 'selector-card--disabled': !areaCode }"
|
||||
@click="handleOpen"
|
||||
>
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('楼栋') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedBuilding }">
|
||||
{{ selectedBuilding ? getBuildingDisplayName(selectedBuilding) : placeholderText }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right" :class="areaCode ? 'tn-color-gray' : 'tn-color-disabled'"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ $tr('选择意向楼栋') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向楼栋') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您期望入住的楼栋') }}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="building-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">{{ $tr('楼栋加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('楼栋加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!buildingList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选楼栋') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选楼栋') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用楼栋，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="building-list">
|
||||
@@ -37,8 +45,13 @@
|
||||
:class="{ 'is-active': selectedBuilding && selectedBuilding.code === item.code }"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<text class="building-name">{{ getBuildingDisplayName(item) }}</text>
|
||||
<text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-success-circle-fill building-check"></text>
|
||||
<view class="building-name-left tn-flex tn-flex-col-center">
|
||||
<view class="building-icon-wrap">
|
||||
<text class="tn-icon-building"></text>
|
||||
</view>
|
||||
<text class="building-name">{{ getBuildingDisplayName(item) }}</text>
|
||||
</view>
|
||||
<text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-check building-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -186,7 +199,7 @@ export default {
|
||||
this.buildingList = []
|
||||
this.selectedBuilding = null
|
||||
uni.showToast({
|
||||
title: this.$tr('楼栋列表加载失败'),
|
||||
title: this.$tr('楼栋加载失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
@@ -218,20 +231,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.building-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-header--disabled {
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selector-card--disabled {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
@@ -240,41 +265,104 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.building-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.building-list {
|
||||
@@ -289,23 +377,55 @@ export default {
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.12);
|
||||
transition: all 0.2s ease;
|
||||
padding: 24rpx 28rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&.is-active {
|
||||
border-color: rgba($brand-primary, 0.5);
|
||||
box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.08);
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.building-name {
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.building-icon-wrap {
|
||||
background: rgba($brand-primary, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.building-name-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.building-icon-wrap {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.building-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.building-check {
|
||||
color: $brand-primary;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,34 @@
|
||||
<template>
|
||||
<view class="date-range-selector">
|
||||
<view class="date-item">
|
||||
<view class="date-label">{{ resolvedStartLabel }}</view>
|
||||
<picker mode="date" @change="onStartChange">
|
||||
<view class="date-input" :class="{ 'is-empty': !start }">
|
||||
{{ start || resolvedStartPlaceholder }}
|
||||
<view class="date-range-selector tn-flex tn-flex-col-center">
|
||||
<picker mode="date" @change="onStartChange" class="date-picker date-picker--start">
|
||||
<view class="date-card" :class="{ 'is-empty': !start, 'is-active': start }">
|
||||
<view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<text class="date-label">{{ resolvedStartLabel }}</text>
|
||||
<view class="date-icon-wrap">
|
||||
<text class="tn-icon-calendar"></text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="date-value">{{ start || resolvedStartPlaceholder }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<view class="range-connector">
|
||||
<view class="connector-line"></view>
|
||||
<text class="connector-text">{{ $tr('至') }}</text>
|
||||
<view class="connector-line"></view>
|
||||
</view>
|
||||
<view class="date-divider">{{ $tr('至') }}</view>
|
||||
<view class="date-item">
|
||||
<view class="date-label">{{ resolvedEndLabel }}</view>
|
||||
<picker mode="date" @change="onEndChange">
|
||||
<view class="date-input" :class="{ 'is-empty': !end }">
|
||||
{{ end || resolvedEndPlaceholder }}
|
||||
|
||||
<picker mode="date" @change="onEndChange" class="date-picker date-picker--end">
|
||||
<view class="date-card" :class="{ 'is-empty': !end, 'is-active': end }">
|
||||
<view class="date-card-header tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<text class="date-label">{{ resolvedEndLabel }}</text>
|
||||
<view class="date-icon-wrap">
|
||||
<text class="tn-icon-calendar"></text>
|
||||
</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="date-value">{{ end || resolvedEndPlaceholder }}</view>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -75,44 +87,92 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
|
||||
.date-range-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
border: 2rpx solid rgba(226, 232, 240, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
.date-picker {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.date-divider {
|
||||
margin: 0 24rpx;
|
||||
color: #94A3B8;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
.date-card {
|
||||
background: #F4F8FF;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
&.is-active {
|
||||
background: #FFFFFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.08);
|
||||
|
||||
.date-value {
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-empty .date-value {
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.date-card-header {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 22rpx;
|
||||
color: #64748B;
|
||||
margin-bottom: 12rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
font-size: 28rpx;
|
||||
color: #1A2B4C;
|
||||
font-weight: 600;
|
||||
.date-icon-wrap {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.is-empty {
|
||||
color: #CBD5E1;
|
||||
font-weight: normal;
|
||||
text {
|
||||
font-size: 22rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.range-connector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 18rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.connector-line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.connector-text {
|
||||
font-size: 22rpx;
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,39 @@
|
||||
<template>
|
||||
<view class="floor-selector">
|
||||
<view
|
||||
class="selector-header tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
||||
@click="handleOpen"
|
||||
>
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('楼层') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedFloor }">
|
||||
{{ selectedFloor ? getFloorDisplayName(selectedFloor) : placeholderText }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right tn-color-gray"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
|
||||
<view class="popup-content">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">{{ $tr('选择意向楼层') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向楼层') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您期望入住的楼层') }}</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="floor-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">{{ $tr('楼层加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('楼层加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!floorList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选楼层') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选楼层') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用楼层，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="floor-list">
|
||||
@@ -34,8 +42,13 @@
|
||||
:class="{ 'is-active': !selectedFloor }"
|
||||
@click="handleClear"
|
||||
>
|
||||
<text class="floor-name">{{ $tr('不选择') }}</text>
|
||||
<text v-if="!selectedFloor" class="tn-icon-success-circle-fill floor-check"></text>
|
||||
<view class="floor-name-left tn-flex tn-flex-col-center">
|
||||
<view class="floor-icon-wrap">
|
||||
<text class="tn-icon-close" style="font-size: 22rpx;"></text>
|
||||
</view>
|
||||
<text class="floor-name">{{ $tr('不选择') }}</text>
|
||||
</view>
|
||||
<text v-if="!selectedFloor" class="tn-icon-check floor-check"></text>
|
||||
</view>
|
||||
<view
|
||||
v-for="item in floorList"
|
||||
@@ -44,8 +57,13 @@
|
||||
:class="{ 'is-active': selectedFloor && selectedFloor.value === item.value }"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<text class="floor-name">{{ getFloorDisplayName(item) }}</text>
|
||||
<text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-success-circle-fill floor-check"></text>
|
||||
<view class="floor-name-left tn-flex tn-flex-col-center">
|
||||
<view class="floor-icon-wrap">
|
||||
<text class="tn-icon-building"></text>
|
||||
</view>
|
||||
<text class="floor-name">{{ getFloorDisplayName(item) }}</text>
|
||||
</view>
|
||||
<text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-check floor-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -173,7 +191,7 @@ export default {
|
||||
this.floorList = []
|
||||
this.selectedFloor = null
|
||||
uni.showToast({
|
||||
title: this.$tr('楼层列表加载失败'),
|
||||
title: this.$tr('楼层加载失败'),
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
@@ -212,17 +230,29 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.floor-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
@@ -230,41 +260,104 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.floor-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.floor-list {
|
||||
@@ -279,13 +372,23 @@ export default {
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 30rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.12);
|
||||
transition: all 0.2s ease;
|
||||
padding: 24rpx 28rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&.is-active {
|
||||
border-color: rgba($brand-primary, 0.5);
|
||||
box-shadow: 0 8rpx 20rpx rgba($brand-primary, 0.08);
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.floor-name {
|
||||
color: $brand-primary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.floor-icon-wrap {
|
||||
background: rgba($brand-primary, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -293,13 +396,35 @@ export default {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.floor-name-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.floor-icon-wrap {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.floor-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.floor-check {
|
||||
color: $brand-primary;
|
||||
font-size: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,51 +1,72 @@
|
||||
<template>
|
||||
<view class="room-type-selector">
|
||||
<view class="selector-header tn-flex tn-flex-row-between tn-flex-col-center" @click="openSelector">
|
||||
<view class="selector-card tn-flex tn-flex-row-between tn-flex-col-center" @click="openSelector">
|
||||
<view class="selected-info">
|
||||
<view class="selected-label">{{ $tr('意向房型') }}</view>
|
||||
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedRoomType }">
|
||||
{{ selectedRoomType ? getRoomTypeDisplayName(selectedRoomType) : $tr('请选择意向房型') }}
|
||||
</view>
|
||||
<view class="selected-area tn-text-ellipsis" v-if="selectedArea">
|
||||
<text class="tn-icon-location area-icon"></text>
|
||||
{{ getAreaDisplayName(selectedArea) }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="tn-icon-right tn-color-gray"></text>
|
||||
<view class="selector-arrow">
|
||||
<text class="tn-icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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">{{ $tr('选择意向房型') }}</text>
|
||||
<view class="popup-title">{{ $tr('选择意向房型') }}</view>
|
||||
<view class="popup-subtitle">{{ $tr('选择您心仪的房型与区域') }}</view>
|
||||
</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">{{ $tr('房型加载中...') }}</view>
|
||||
<tn-loading mode="circle" :size="48"></tn-loading>
|
||||
<view class="tn-margin-top tn-color-gray">{{ $tr('房型加载中...') }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else-if="!displayAreaList.length" class="empty-state tn-padding-xl tn-text-center">
|
||||
<text class="tn-color-gray">{{ $tr('暂无可选房型') }}</text>
|
||||
<view class="empty-icon">
|
||||
<text class="tn-icon-empty-data"></text>
|
||||
</view>
|
||||
<view class="empty-title">{{ $tr('暂无可选房型') }}</view>
|
||||
<view class="empty-desc">{{ $tr('当前暂无可用房型，请稍后再试') }}</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="area-group" v-for="(area, index) in displayAreaList" :key="area.code">
|
||||
<view class="area-title tn-flex tn-flex-row-between tn-flex-col-center" @click="toggleArea(index)">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<text class="area-dot"></text>
|
||||
<text>{{ getAreaDisplayName(area) }}</text>
|
||||
<view class="area-title-left tn-flex tn-flex-col-center">
|
||||
<view class="area-icon-wrap">
|
||||
<text class="tn-icon-home"></text>
|
||||
</view>
|
||||
<text class="area-title-text">{{ getAreaDisplayName(area) }}</text>
|
||||
</view>
|
||||
<view class="area-toggle">
|
||||
<text :class="collapsedAreas[index] ? 'tn-icon-down' : 'tn-icon-up'"></text>
|
||||
</view>
|
||||
<text :class="collapsedAreas[index] ? 'tn-icon-down' : 'tn-icon-up'" class="tn-color-gray"></text>
|
||||
</view>
|
||||
<view class="room-type-grid" v-show="!collapsedAreas[index]">
|
||||
<view
|
||||
class="room-type-item"
|
||||
v-for="room in area.roomTypes"
|
||||
<view
|
||||
class="room-type-item"
|
||||
v-for="room in area.roomTypes"
|
||||
:key="room.code"
|
||||
:class="{ 'is-active': selectedRoomType && selectedRoomType.code === room.code }"
|
||||
@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) }}{{ $tr('/月') }}</view>
|
||||
<view class="room-price" v-if="room.price">
|
||||
<text class="price-symbol">¥</text>
|
||||
<text class="price-value">{{ getPriceValue(room.price) }}</text>
|
||||
<text class="price-unit">{{ $tr('/月') }}</text>
|
||||
</view>
|
||||
<view v-else class="room-price room-price--empty">{{ $tr('价格面议') }}</view>
|
||||
<view class="active-mark">
|
||||
<text class="tn-icon-check"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -124,28 +145,28 @@ export default {
|
||||
},
|
||||
loadData(force = false) {
|
||||
if (!force && this.areaList.length > 0) return
|
||||
|
||||
|
||||
this.isLoading = true
|
||||
return areaPagination({ PageIndex: 1, PageSize: 100 }, this.language)
|
||||
.then((res) => {
|
||||
const rawList = Array.isArray(res?.data?.data) ? res.data.data : (Array.isArray(res?.data) ? res.data : [])
|
||||
|
||||
|
||||
this.areaList = rawList
|
||||
.map(item => normalizeAreaItem(item))
|
||||
.filter(area => area.roomTypes && area.roomTypes.length > 0)
|
||||
|
||||
|
||||
// 初始化全部不折叠
|
||||
const collapsed = {}
|
||||
this.areaList.forEach((_, index) => {
|
||||
collapsed[index] = false
|
||||
})
|
||||
this.collapsedAreas = collapsed
|
||||
|
||||
|
||||
this.syncSelection()
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('load room types error', e)
|
||||
uni.showToast({ title: this.$tr('房型列表加载失败'), icon: 'none' })
|
||||
uni.showToast({ title: this.$tr('房型加载失败'), icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
@@ -153,12 +174,12 @@ export default {
|
||||
},
|
||||
syncSelection() {
|
||||
if (!this.displayAreaList.length) return
|
||||
|
||||
|
||||
let foundArea = null
|
||||
let foundRoom = null
|
||||
const previousAreaCode = this.selectedArea && this.selectedArea.code ? this.selectedArea.code : ''
|
||||
const previousRoomCode = this.selectedRoomType && this.selectedRoomType.code ? this.selectedRoomType.code : ''
|
||||
|
||||
|
||||
// Try to find by room type code
|
||||
if (this.value) {
|
||||
for (const area of this.displayAreaList) {
|
||||
@@ -170,18 +191,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// If not found by room, try to find by initial area code
|
||||
if (!foundRoom && this.initialAreaCode) {
|
||||
foundArea = this.displayAreaList.find(a => a.code === this.initialAreaCode)
|
||||
}
|
||||
|
||||
|
||||
if (foundArea) {
|
||||
this.selectedArea = foundArea
|
||||
if (foundRoom) {
|
||||
this.selectedRoomType = foundRoom
|
||||
}
|
||||
|
||||
|
||||
if (foundRoom) {
|
||||
if (this.value !== foundRoom.code) {
|
||||
this.$emit('input', foundRoom.code)
|
||||
@@ -227,17 +248,30 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$luxury-gold: #D8B56A;
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
$surface: #FFFFFF;
|
||||
$bg-popup: #F8FAFF;
|
||||
|
||||
.room-type-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
background: #FFFFFF;
|
||||
.selector-card {
|
||||
background: $surface;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 32rpx;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
min-height: 100rpx;
|
||||
padding: 26rpx 30rpx;
|
||||
border: 2rpx solid rgba($brand-primary, 0.12);
|
||||
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
||||
min-height: 120rpx;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.selector-card:active {
|
||||
background: #FAFCFF;
|
||||
border-color: rgba($brand-primary, 0.25);
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
@@ -245,72 +279,175 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.selected-name {
|
||||
font-size: 28rpx;
|
||||
color: #1A2233;
|
||||
font-weight: 600;
|
||||
|
||||
font-size: 30rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.is-empty {
|
||||
color: #A0B0C0;
|
||||
color: $text-tertiary;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-area {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
font-size: 22rpx;
|
||||
color: #6A7A99;
|
||||
margin-top: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.selector-arrow {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #F8FAFF;
|
||||
background: $bg-popup;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 40rpx 30rpx 20rpx;
|
||||
padding: 40rpx 30rpx 28rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed rgba($brand-primary, 0.15);
|
||||
background: #FFFFFF;
|
||||
background: $surface;
|
||||
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1A2233;
|
||||
color: $text-primary;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.area-list-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
padding: 24rpx 30rpx 60rpx;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.empty-state {
|
||||
padding-top: 120rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-primary, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
|
||||
text {
|
||||
font-size: 56rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.area-group {
|
||||
margin-bottom: 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.04);
|
||||
border: 1rpx solid rgba($brand-primary, 0.05);
|
||||
margin-bottom: 28rpx;
|
||||
background: $surface;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx;
|
||||
box-shadow: 0 8rpx 28rpx rgba(26, 34, 51, 0.04);
|
||||
border: 1rpx solid rgba($brand-primary, 0.06);
|
||||
}
|
||||
|
||||
.area-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1A2233;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.area-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
.area-title-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.area-icon-wrap {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 14rpx;
|
||||
background: rgba($brand-primary, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 16rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.area-title-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.area-toggle {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: $brand-primary;
|
||||
margin-right: 12rpx;
|
||||
box-shadow: 0 0 8rpx rgba($brand-primary, 0.4);
|
||||
background: #F4F8FF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.room-type-grid {
|
||||
@@ -320,36 +457,86 @@ export default {
|
||||
}
|
||||
|
||||
.room-type-item {
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #FFFFFF;
|
||||
border: 1rpx solid rgba($brand-primary, 0.15);
|
||||
box-shadow: 0 4rpx 12rpx rgba($brand-primary, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
position: relative;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #FAFCFF;
|
||||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
overflow: hidden;
|
||||
|
||||
&.is-active {
|
||||
background: #FFFFFF;
|
||||
border-color: $brand-primary;
|
||||
box-shadow: 0 4rpx 16rpx rgba($brand-primary, 0.1);
|
||||
|
||||
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
||||
|
||||
.room-name {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.room-price {
|
||||
color: $brand-primary;
|
||||
}
|
||||
|
||||
.active-mark {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #1A2233;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.room-price {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
&--empty {
|
||||
font-size: 22rpx;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 22rpx;
|
||||
color: #6A7A99;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.active-mark {
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
right: 12rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
background: $brand-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,35 +57,38 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$text-primary: #1A2233;
|
||||
$text-secondary: #6A7A99;
|
||||
$text-tertiary: #A1B0C4;
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.option-chip {
|
||||
padding: 16rpx 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
color: #64748B;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
border: 2rpx solid rgba(226, 232, 240, 0.8);
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0 34rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #F4F8FF;
|
||||
border-radius: 36rpx;
|
||||
font-size: 26rpx;
|
||||
color: $text-secondary;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.option-chip--active {
|
||||
background: #1A2B4C;
|
||||
border-color: #1A2B4C;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 8rpx 24rpx rgba(26, 43, 76, 0.2);
|
||||
background: linear-gradient(135deg, rgba($brand-primary, 0.1) 0%, rgba($brand-primary, 0.06) 100%);
|
||||
border-color: rgba($brand-primary, 0.35);
|
||||
color: $brand-primary;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.12);
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
color: #94A3B8;
|
||||
color: $text-tertiary;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -181,7 +181,8 @@
|
||||
:formData="uploadFormData"
|
||||
:max-count="6"
|
||||
:max-size="5 * 1024 * 1024"
|
||||
uploadText=""
|
||||
:uploadText="''"
|
||||
:customBtn="true"
|
||||
@on-success="onUploadSuccess"
|
||||
@on-list-change="onPhotoListChange"
|
||||
@on-remove="onRemoveImage"
|
||||
@@ -426,6 +427,25 @@ function pickReadableValue(...values) {
|
||||
return ''
|
||||
}
|
||||
|
||||
function isOpaqueCodeValue(value = '') {
|
||||
const text = String(value || '').trim()
|
||||
if (!text) {
|
||||
return false
|
||||
}
|
||||
return /^[A-Z0-9-]{12,}$/i.test(text) && !/[\u4e00-\u9fa5\s]/.test(text)
|
||||
}
|
||||
|
||||
function pickReadableLabel(...values) {
|
||||
for (let index = 0; index < values.length; index += 1) {
|
||||
const text = String(values[index] || '').trim()
|
||||
if (!text || isOpaqueCodeValue(text)) {
|
||||
continue
|
||||
}
|
||||
return text
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function safeJsonParse(value, fallback = null) {
|
||||
if (typeof value !== 'string') {
|
||||
return value || fallback
|
||||
@@ -532,18 +552,20 @@ export default {
|
||||
return 'rgba(255, 255, 255, 0.96)'
|
||||
},
|
||||
navBarBackStyle() {
|
||||
const isDarkBg = this.scrollTop < 40
|
||||
return {
|
||||
transition: 'all 0.2s ease',
|
||||
background: isDarkBg ? 'rgba(0, 0, 0, 0.2)' : 'transparent',
|
||||
borderRadius: '50%',
|
||||
width: '64rpx',
|
||||
height: '64rpx',
|
||||
background: this.scrollTop < 40 ? 'rgba(255, 255, 255, 0.82)' : 'rgba(255, 255, 255, 0.96)',
|
||||
border: '1rpx solid rgba(43, 142, 255, 0.08)',
|
||||
boxShadow: '0 10rpx 28rpx rgba(31, 76, 145, 0.10)',
|
||||
backdropFilter: 'blur(18rpx)',
|
||||
borderRadius: '20rpx',
|
||||
width: '72rpx',
|
||||
height: '72rpx',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: '12rpx',
|
||||
color: isDarkBg ? '#FFFFFF' : '#000000'
|
||||
color: '#1A2233'
|
||||
}
|
||||
},
|
||||
navTitleOpacity() {
|
||||
@@ -573,7 +595,12 @@ export default {
|
||||
) || '--'
|
||||
},
|
||||
currentAreaText() {
|
||||
return pickReadableValue(this.currentOrderDetail.areaName, this.currentOrderDetail.campusName, this.currentOrderDetail.areaCode)
|
||||
return pickReadableLabel(
|
||||
this.currentOrderDetail.areaText,
|
||||
this.currentOrderDetail.areaName,
|
||||
this.currentOrderDetail.areaLabel,
|
||||
this.currentOrderDetail.campusName
|
||||
)
|
||||
},
|
||||
currentLeaseText() {
|
||||
const start = String(this.currentOrderDetail.startDate || this.currentOrderDetail.start || '').slice(0, 10)
|
||||
|
||||
Reference in New Issue
Block a user