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

190
pkgService/submit_request/components/BuildingSelector.vue
View File

@@ -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>