xuchao/hhrs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页、场馆、折扣、权益、我的、登录页面UI及交互体验

Browse Source 
- 首页：金刚区添加文字标签、活动指南卡片自适应宽度、字体调整
- 场馆列表：去掉导航栏、添加返回按钮、优化加载提示
- 折扣列表：样式与场馆列表统一
- 场馆详情：合并信息与地址容器、添加分割线和返回按钮
- 权益页面：banner渐变圆角、统计卡片优化、空状态引导、Tab列表优化
- 我的页面：主色调统一、渐变背景、菜单样式优化
- 登录页面：协议链接可跳转、添加返回按钮
- 移除VConsole调试按钮
- 底部导航栏线条颜色调整
This commit is contained in:
jacobxu666
2026-07-17 09:54:22 +08:00
parent 07b3e89e4c
commit 15936574ba
12 changed files with 434 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/venue/detail.vue
+61 -20
View File
@@ -1,21 +1,22 @@
<template>
<view class="page" v-if="store">
<!-- 门店信息卡片 -->
<!-- 门店信息卡片（信息+地址合并容器） -->
<view class="store-card">
<image class="store-img" :src="store.image" mode="aspectFill" />
<view class="store-info">
<text class="store-name">{{ store.name }}</text>
<text class="store-category">{{ store.category }}</text>
<text class="store-hours">营业时间：{{ store.businessTime }}</text>
<view class="store-main">
<image class="store-img" :src="store.image" mode="aspectFill" />
<view class="store-info">
<text class="store-name">{{ store.name }}</text>
<text class="store-category">{{ store.category }}</text>
<text class="store-hours">营业时间：{{ store.businessTime }}</text>
</view>
</view>
</view>
<!-- 地址行 -->
<view class="address-row">
<text class="address-text">{{ store.address }}</text>
<view class="distance-row" v-if="store.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ store.distance < 1 ? Math.round(store.distance * 1000) + 'm' : Math.round(store.distance) + 'km' }}</text>
<view class="divider"></view>
<view class="address-row">
<text class="address-text">{{ store.address }}</text>
<view class="distance-row" v-if="store.distance !== null">
<u-icon name="map" color="#999999" size="24"></u-icon>
<text class="distance-text">{{ store.distance < 1 ? Math.round(store.distance * 1000) + 'm' : Math.round(store.distance) + 'km' }}</text>
</view>
</view>
</view>
@@ -29,6 +30,12 @@
<text class="discount-item" v-for="(item, index) in discountList" :key="index">{{ item }}</text>
</view>
</view>
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
<text class="back-text">返回上一页</text>
</view>
</view>
</template>
@@ -65,6 +72,9 @@ export default {
this.store = res.data
}
})
},
goBack() {
uni.navigateBack()
}
}
}
@@ -77,12 +87,17 @@ export default {
overflow: hidden;
}
/* 门店卡片 */
/* 门店卡片（信息+地址合并容器） */
.store-card {
display: flex;
background-color: #ffffff;
margin: 12px;
border-radius: 8px;
overflow: hidden;
}
.store-main {
display: flex;
align-items: flex-start;
padding: 12px;
gap: 12px;
}
@@ -98,8 +113,8 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
justify-content: flex-start;
gap: 8px;
}
.store-name {
@@ -118,13 +133,18 @@ export default {
color: #666666;
}
.divider {
height: 1px;
background-color: #f2f2f7;
margin: 0 12px;
}
/* 地址行 */
.address-row {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 12px 16px;
padding: 12px;
}
.address-text {
@@ -186,4 +206,25 @@ export default {
color: #666666;
line-height: 1.6;
}
/* 返回按钮 */
.back-btn {
position: fixed;
left: 24px;
bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.back-icon {
width: 44px;
height: 44px;
}
.back-text {
font-size: 12px;
color: #666666;
}
</style>
pages/venue/venue.vue
+45 -10
View File
@@ -2,10 +2,16 @@
<view class="page">
<!-- 搜索栏 -->
<view class="search-area">
<view class="search-bar">
<u-icon name="search" color="#8e8e93" size="36"></u-icon>
<input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" />
<view class="search-btn" @click="onSearch">搜索</view>
<view class="nav-row">
<view class="back-btn" @click="goBack">
<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
<text class="back-text">返回</text>
</view>
<view class="search-bar">
<u-icon name="search" color="#8e8e93" size="36"></u-icon>
<input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" />
<view class="search-btn" @click="onSearch">搜索</view>
</view>
</view>
</view>
@@ -23,7 +29,9 @@
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
</view>
</view>
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
<view v-if="hasScrolled" class="nomore-area">
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
</view>
</scroll-view>
</view>
</template>
@@ -40,7 +48,8 @@ export default {
loading: false,
lng: '',
lat: '',
loadStatus: 'loadmore'
loadStatus: 'loadmore',
hasScrolled: false
}
},
onLoad() {
@@ -88,11 +97,15 @@ export default {
})
},
loadMore() {
this.hasScrolled = true
if (this.list.length < this.total && !this.loading) {
this.pageNo++
this.loadList()
}
},
goBack() {
uni.navigateBack()
},
goDetail(item) {
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
},
@@ -117,7 +130,28 @@ export default {
padding: 6px 12px;
}
.nav-row {
display: flex;
align-items: center;
gap: 12px;
}
.back-btn {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
flex-shrink: 0;
gap: 2px;
}
.back-text {
font-size: 14px;
color: #333333;
}
.search-bar {
flex: 1;
display: flex;
align-items: center;
height: 44px;
@@ -145,9 +179,6 @@ export default {
.list-area {
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.venue-card {
@@ -157,10 +188,10 @@ export default {
border: 1px solid #f2f2f7;
border-radius: 6px;
width: 702rpx;
padding: 24px 12px;
gap: 12px;
box-shadow: 0 2px 3px #f2f2f7;
margin-bottom: 12px;
}
.card-img {
@@ -210,4 +241,8 @@ export default {
font-size: 12px;
color: #727272;
}
.nomore-area {
padding-top: 24px;
}
</style>