优化首页、场馆、折扣、权益、我的、登录页面UI及交互体验
- 首页:金刚区添加文字标签、活动指南卡片自适应宽度、字体调整 - 场馆列表:去掉导航栏、添加返回按钮、优化加载提示 - 折扣列表:样式与场馆列表统一 - 场馆详情:合并信息与地址容器、添加分割线和返回按钮 - 权益页面:banner渐变圆角、统计卡片优化、空状态引导、Tab列表优化 - 我的页面:主色调统一、渐变背景、菜单样式优化 - 登录页面:协议链接可跳转、添加返回按钮 - 移除VConsole调试按钮 - 底部导航栏线条颜色调整
This commit is contained in:
+49
-18
@@ -2,16 +2,22 @@
|
||||
<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>
|
||||
|
||||
<!-- 商户列表 -->
|
||||
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
|
||||
<view class="merchant-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
@@ -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;
|
||||
@@ -144,23 +178,20 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
width: 702rpx;
|
||||
margin-left: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.merchant-card {
|
||||
.venue-card {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background-color: #ffffff;
|
||||
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 {
|
||||
@@ -181,10 +212,6 @@ export default {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.card-category {
|
||||
@@ -214,4 +241,8 @@ export default {
|
||||
font-size: 12px;
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
.nomore-area {
|
||||
padding-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user