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

195
pkgService/submit_request/components/FloorSelector.vue
View File

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