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-07-29 09:05:38 +08:00
parent da6bdc6a02
commit 1111ac148b
34 changed files with 8734 additions and 2801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
pkgBooking/book_viewing/components/RoomTypeSelector.vue
View File

@@ -1,40 +1,53 @@
<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('请选择房型') }}
{{ 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="!areaList.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 areaList" :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
@@ -45,7 +58,15 @@
@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>
@@ -59,25 +80,6 @@
import { areaPagination } from '@/api/index.js'
import { normalizeAreaItem } from '../../../utils/select-room-normalizers'
const I18N = {
zh: {
emptyRoomTypes: '暂无可选房型',
loadFailed: '房型加载失败',
loadingRoomTypes: '房型加载中...',
popupTitle: '选择意向房型',
priceUnit: '/月',
selectRoomType: '请选择房型'
},
en: {
emptyRoomTypes: 'No room types available',
loadFailed: 'Failed to load room types',
loadingRoomTypes: 'Loading room types...',
popupTitle: 'Select Room Type',
priceUnit: '/month',
selectRoomType: 'Select room type'
}
}
export default {
name: 'BookViewingRoomTypeSelector',
props: {
@@ -230,17 +232,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 {
@@ -248,72 +263,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 {
@@ -323,17 +441,18 @@ 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;
@@ -342,18 +461,66 @@ export default {
.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>