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

54
pkgExplore/store_detail/components/FacilityList.vue
View File

@@ -1,11 +1,14 @@
<template>
<view class="section-panel" v-if="facilityList && facilityList.length">
<view class="section-header">
<view class="title-bar"></view>
<text class="section-title">{{ $tr('配套设施') }}</text>
</view>
<view class="facility-grid tn-flex tn-flex-wrap">
<view class="facility-item tn-flex tn-flex-direction-column tn-flex-col-center" v-for="(item, index) in facilityList" :key="index">
<text :class="item.icon" class="facility-icon"></text>
<view class="icon-wrap tn-flex tn-flex-row-center tn-flex-col-center">
<text :class="item.icon" class="facility-icon"></text>
</view>
<text class="facility-name">{{ item.name }}</text>
</view>
</view>
@@ -29,25 +32,39 @@ export default {
</script>
<style scoped lang="scss">
$navy-deep: #1E3A5F;
$gold: #C9A96E;
$gold-light: #D4BC8C;
$text-primary: #0F172A;
$text-secondary: #64748B;
.section-panel {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1rpx solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
background: #FFFFFF;
border: 1rpx solid rgba($navy-deep, 0.08);
box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
margin: 24rpx 32rpx 0;
padding: 32rpx;
border-radius: 24rpx;
border-radius: 28rpx;
}
.section-header {
margin-bottom: 24rpx;
margin-bottom: 28rpx;
display: flex;
align-items: center;
}
.title-bar {
width: 6rpx;
height: 32rpx;
background: linear-gradient(180deg, $gold 0%, $gold-light 100%);
border-radius: 999rpx;
margin-right: 16rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #fff;
font-weight: 800;
color: $navy-deep;
}
.facility-grid {
@@ -58,14 +75,23 @@ export default {
width: 25%;
}
.icon-wrap {
width: 88rpx;
height: 88rpx;
background: linear-gradient(135deg, rgba($navy-deep, 0.08) 0%, rgba($navy-deep, 0.03) 100%);
border: 1rpx solid rgba($navy-deep, 0.08);
border-radius: 24rpx;
margin-bottom: 16rpx;
}
.facility-icon {
font-size: 52rpx;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 12rpx;
font-size: 44rpx;
color: $navy-deep;
}
.facility-name {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
color: $text-secondary;
font-weight: 500;
}
</style>

103
pkgExplore/store_detail/components/RoomList.vue
View File

@@ -1,7 +1,10 @@
<template>
<view class="section-panel room-section">
<view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
<text class="section-title">{{ $tr('在租房型（{count}）', { count: roomTypes.length }) }}</text>
<view class="title-wrap tn-flex tn-flex-col-center">
<view class="title-bar"></view>
<text class="section-title">{{ $tr('在租房型（{count}）', { count: roomTypes.length }) }}</text>
</view>
</view>
<view class="room-list-vertical">
<view
@@ -99,25 +102,43 @@ export default {
</script>
<style scoped lang="scss">
$navy-deep: #1E3A5F;
$navy-light: #2E4A73;
$gold: #C9A96E;
$gold-light: #D4BC8C;
$text-primary: #0F172A;
$text-secondary: #64748B;
$text-tertiary: #94A3B8;
.section-panel {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1rpx solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
background: #FFFFFF;
border: 1rpx solid rgba($navy-deep, 0.08);
box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
margin: 24rpx 32rpx 0;
padding: 32rpx;
border-radius: 24rpx;
border-radius: 28rpx;
}
.section-header {
margin-bottom: 24rpx;
margin-bottom: 28rpx;
}
.title-wrap {
flex: 1;
}
.title-bar {
width: 6rpx;
height: 32rpx;
background: linear-gradient(180deg, $gold 0%, $gold-light 100%);
border-radius: 999rpx;
margin-right: 16rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #fff;
font-weight: 800;
color: $navy-deep;
}
.room-list-vertical {
@@ -129,11 +150,17 @@ export default {
.room-card-v {
width: 100%;
display: flex;
border-radius: 16rpx;
border-radius: 24rpx;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
border: 1rpx solid rgba(255, 255, 255, 0.1);
box-shadow: none;
background: #FFFFFF;
border: 1rpx solid rgba($navy-deep, 0.08);
box-shadow: 0 8rpx 24rpx rgba(30, 58, 95, 0.05);
transition: all 0.2s;
}
.room-card-v:active {
transform: translateY(-4rpx);
box-shadow: 0 16rpx 40rpx rgba(30, 58, 95, 0.1);
}
.room-img-v {
@@ -146,38 +173,38 @@ export default {
.img {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
}
.pay-method-tag {
position: absolute;
top: 12rpx;
left: 12rpx;
background: rgba(0, 0, 0, 0.6);
background: rgba($navy-deep, 0.85);
backdrop-filter: blur(8rpx);
color: #fff;
color: $gold-light;
font-size: 18rpx;
padding: 4rpx 10rpx;
border-radius: 6rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
font-weight: 500;
}
.room-info-v {
flex: 1;
padding: 16rpx 20rpx;
padding: 20rpx 24rpx;
display: flex;
flex-direction: column;
min-width: 0;
}
.room-header-v {
margin-bottom: 8rpx;
margin-bottom: 10rpx;
}
.room-name-v {
font-size: 30rpx;
font-weight: bold;
color: #fff;
font-weight: 800;
color: $navy-deep;
flex: 1;
}
@@ -188,16 +215,18 @@ export default {
.tag-v {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.15);
color: $navy-deep;
background: rgba($navy-deep, 0.06);
padding: 4rpx 12rpx;
border-radius: 6rpx;
border-radius: 8rpx;
font-weight: 500;
}
.room-desc-v {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.6);
margin-bottom: auto; /* 将底部价格推下去 */
color: $text-tertiary;
margin-bottom: auto;
line-height: 1.5;
}
.room-bottom-v {
@@ -205,41 +234,45 @@ export default {
}
.room-price-v {
color: #ffb8b8;
color: $navy-deep;
display: flex;
align-items: baseline;
}
.price-symbol {
font-size: 20rpx;
font-weight: bold;
font-weight: 800;
margin-right: 2rpx;
color: $gold;
}
.price-val {
font-size: 36rpx;
font-weight: 800;
line-height: 1;
color: $navy-deep;
}
.price-unit {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.6);
color: $text-tertiary;
margin-left: 4rpx;
font-weight: 500;
}
.go-btn-v {
background: rgba(255, 255, 255, 0.15);
color: #fff;
background: linear-gradient(135deg, $navy-light 0%, $navy-deep 100%);
color: #FFFFFF;
font-size: 22rpx;
padding: 8rpx 20rpx;
padding: 10rpx 22rpx;
border-radius: 30rpx;
border: 1rpx solid rgba(255, 255, 255, 0.2);
font-weight: 600;
box-shadow: 0 6rpx 16rpx rgba($navy-deep, 0.2);
}
.go-btn-v .tn-icon-right {
font-size: 20rpx;
margin-left: 4rpx;
color: $gold-light;
}
</style>

126
pkgExplore/store_detail/components/StoreInfo.vue
View File

@@ -1,12 +1,15 @@
<template>
<view class="store-info-panel">
<!-- 核心信息卡片 -->
<!-- 核心信息卡片：地址 -->
<view class="info-card tn-flex tn-flex-row-between tn-flex-col-center" @click="openMap">
<view class="address-left tn-flex tn-flex-col-center">
<view class="icon-wrap tn-flex tn-flex-row-center tn-flex-col-center">
<text class="tn-icon-location-fill location-icon"></text>
</view>
<text class="address-title tn-text-ellipsis">{{ shortAddress }}</text>
<view class="address-content">
<text class="address-label">{{ $tr('公寓地址') }}</text>
<text class="address-title tn-text-ellipsis">{{ shortAddress }}</text>
</view>
</view>
<view class="address-right tn-flex tn-flex-col-center">
<text class="nav-text">{{ $tr('导航') }}</text>
@@ -17,6 +20,7 @@
<!-- 小区简介 -->
<view class="section-panel" v-if="displayDescription">
<view class="section-header">
<view class="title-bar"></view>
<text class="section-title">{{ $tr('小区简介') }}</text>
</view>
<view
@@ -53,14 +57,14 @@ function normalizeRichDescription(value = '') {
html,
'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:16rpx;margin:16rpx 0;vertical-align:top;'
)
html = html.replace(/<p\b([^>]*)>/gi, '<p$1 style="line-height:1.9;color:rgba(255,255,255,0.78);margin:0 0 20rpx;word-break:break-word;">')
html = html.replace(/<div\b([^>]*)>/gi, '<div$1 style="line-height:1.9;color:rgba(255,255,255,0.78);margin:0 0 20rpx;word-break:break-word;">')
html = html.replace(/<ul\b([^>]*)>/gi, '<ul$1 style="padding-left:28rpx;margin:0 0 20rpx;color:rgba(255,255,255,0.78);line-height:1.9;">')
html = html.replace(/<ol\b([^>]*)>/gi, '<ol$1 style="padding-left:32rpx;margin:0 0 20rpx;color:rgba(255,255,255,0.78);line-height:1.9;">')
html = html.replace(/<p\b([^>]*)>/gi, '<p$1 style="line-height:1.9;color:#475569;margin:0 0 20rpx;word-break:break-word;">')
html = html.replace(/<div\b([^>]*)>/gi, '<div$1 style="line-height:1.9;color:#475569;margin:0 0 20rpx;word-break:break-word;">')
html = html.replace(/<ul\b([^>]*)>/gi, '<ul$1 style="padding-left:28rpx;margin:0 0 20rpx;color:#475569;line-height:1.9;">')
html = html.replace(/<ol\b([^>]*)>/gi, '<ol$1 style="padding-left:32rpx;margin:0 0 20rpx;color:#475569;line-height:1.9;">')
html = html.replace(/<li\b([^>]*)>/gi, '<li$1 style="margin-bottom:12rpx;">')
html = html.replace(/<h([1-6])\b([^>]*)>/gi, '<h$1$2 style="color:#FFFFFF;line-height:1.5;margin:0 0 20rpx;font-weight:600;">')
html = html.replace(/<strong\b([^>]*)>/gi, '<strong$1 style="color:#FFFFFF;font-weight:600;">')
html = html.replace(/<a\b([^>]*)>/gi, '<a$1 style="color:#9EC5FF;text-decoration:underline;">')
html = html.replace(/<h([1-6])\b([^>]*)>/gi, '<h$1$2 style="color:#1E3A5F;line-height:1.5;margin:0 0 20rpx;font-weight:600;">')
html = html.replace(/<strong\b([^>]*)>/gi, '<strong$1 style="color:#1E3A5F;font-weight:600;">')
html = html.replace(/<a\b([^>]*)>/gi, '<a$1 style="color:#2E4A73;text-decoration:underline;">')
return html
}
@@ -125,6 +129,14 @@ export default {
</script>
<style scoped lang="scss">
$navy-deep: #1E3A5F;
$navy-light: #2E4A73;
$gold: #C9A96E;
$gold-light: #D4BC8C;
$text-primary: #0F172A;
$text-secondary: #64748B;
$text-tertiary: #94A3B8;
.store-info-panel {
padding: 0 32rpx;
margin-top: 24rpx;
@@ -133,18 +145,16 @@ export default {
}
.info-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1rpx solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
border-radius: 24rpx;
background: #FFFFFF;
border: 1rpx solid rgba($navy-deep, 0.08);
box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
border-radius: 28rpx;
padding: 32rpx;
transition: all 0.2s;
&:active {
background: rgba(255, 255, 255, 0.12);
transform: scale(0.98);
box-shadow: 0 12rpx 32rpx rgba(30, 58, 95, 0.1);
}
}
@@ -155,69 +165,91 @@ export default {
}
.icon-wrap {
width: 56rpx;
height: 56rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 16rpx;
margin-right: 16rpx;
width: 72rpx;
height: 72rpx;
background: linear-gradient(135deg, rgba($navy-deep, 0.08) 0%, rgba($navy-deep, 0.04) 100%);
border-radius: 20rpx;
margin-right: 20rpx;
flex-shrink: 0;
border: 1rpx solid rgba($navy-deep, 0.08);
}
.location-icon {
color: #fff;
font-size: 32rpx;
color: $navy-deep;
font-size: 36rpx;
}
.address-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.address-label {
font-size: 24rpx;
color: $text-tertiary;
margin-bottom: 6rpx;
}
.address-title {
font-size: 32rpx;
font-weight: bold;
color: #fff;
font-size: 30rpx;
font-weight: 700;
color: $text-primary;
flex: 1;
}
.address-right {
flex-shrink: 0;
padding-left: 20rpx;
border-left: 1rpx solid rgba(255, 255, 255, 0.2);
padding-left: 24rpx;
border-left: 1rpx solid rgba($navy-deep, 0.08);
}
.nav-text {
font-size: 26rpx;
color: #fff;
font-weight: 500;
color: $navy-deep;
font-weight: 600;
}
.nav-arrow {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
color: $gold;
margin-left: 6rpx;
}
.section-panel {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1rpx solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
background: #FFFFFF;
border: 1rpx solid rgba($navy-deep, 0.08);
box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
margin-top: 24rpx;
padding: 32rpx;
border-radius: 24rpx;
border-radius: 28rpx;
}
.section-header {
margin-bottom: 20rpx;
margin-bottom: 24rpx;
display: flex;
align-items: center;
}
.title-bar {
width: 6rpx;
height: 32rpx;
background: linear-gradient(180deg, $gold 0%, $gold-light 100%);
border-radius: 999rpx;
margin-right: 16rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #fff;
font-weight: 800;
color: $navy-deep;
}
.store-desc {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
color: $text-secondary;
line-height: 1.7;
word-break: break-word;
}
@@ -233,14 +265,16 @@ export default {
}
.expand-btn {
margin-top: 16rpx;
font-size: 24rpx;
color: #fff;
margin-top: 20rpx;
font-size: 26rpx;
color: $navy-deep;
font-weight: 600;
}
.expand-icon {
margin-left: 8rpx;
font-size: 28rpx;
line-height: 1;
color: $gold;
}
</style>