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
components/TabBar/TabBar.vue
+1 -1
View File
@@ -59,7 +59,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
border-top: 1rpx solid #F2F2F7; border-top: 1rpx solid rgba(242, 242, 242, 0.5);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
.tab-bar-item { .tab-bar-item {
main.js
-5
View File
@@ -1,10 +1,5 @@
import App from './App' import App from './App'
// #ifdef H5
import VConsole from 'vconsole'
new VConsole()
// #endif
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue' import Vue from 'vue'
import './uni.promisify.adaptor' import './uni.promisify.adaptor'
pages.json
+19 -7
View File
@@ -6,37 +6,37 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "首页" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/index/login", "path": "pages/index/login",
"style": { "style": {
"navigationBarTitleText": "登录" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/mine/mine", "path": "pages/mine/mine",
"style": { "style": {
"navigationBarTitleText": "我的" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/venue/venue", "path": "pages/venue/venue",
"style": { "style": {
"navigationBarTitleText": "文旅场馆" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/discount/discount", "path": "pages/discount/discount",
"style": { "style": {
"navigationBarTitleText": "商户折扣" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/rights/rights", "path": "pages/rights/rights",
"style": { "style": {
"navigationBarTitleText": "权益信息" "navigationStyle": "custom"
} }
}, },
{ {
@@ -48,7 +48,7 @@
{ {
"path": "pages/venue/detail", "path": "pages/venue/detail",
"style": { "style": {
"navigationBarTitleText": "门店详情" "navigationStyle": "custom"
} }
}, },
{ {
@@ -68,6 +68,18 @@
"style": { "style": {
"navigationBarTitleText": "使用指南" "navigationBarTitleText": "使用指南"
} }
},
{
"path": "pages/agreement/user",
"style": {
"navigationBarTitleText": "用户协议"
}
},
{
"path": "pages/agreement/privacy",
"style": {
"navigationBarTitleText": "隐私协议"
}
} }
], ],
"globalStyle": { "globalStyle": {
pages/agreement/privacy.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<view class="page">
<view class="content">
<text class="heading">隐私协议</text>
<text class="body">请在此处填写隐私协议的具体内容。</text>
</view>
</view>
</template>
<script>
export default {}
</script>
<style>
.page {
min-height: 100vh;
background-color: #ffffff;
padding: 20px;
box-sizing: border-box;
}
.heading {
font-size: 18px;
font-weight: bold;
color: #333333;
display: block;
margin-bottom: 16px;
}
.body {
font-size: 14px;
color: #666666;
line-height: 1.8;
}
</style>
pages/agreement/user.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<view class="page">
<view class="content">
<text class="heading">用户协议</text>
<text class="body">请在此处填写用户协议的具体内容。</text>
</view>
</view>
</template>
<script>
export default {}
</script>
<style>
.page {
min-height: 100vh;
background-color: #ffffff;
padding: 20px;
box-sizing: border-box;
}
.heading {
font-size: 18px;
font-weight: bold;
color: #333333;
display: block;
margin-bottom: 16px;
}
.body {
font-size: 14px;
color: #666666;
line-height: 1.8;
}
</style>
pages/discount/discount.vue
+45 -14
View File
@@ -2,16 +2,22 @@
<view class="page"> <view class="page">
<!-- 搜索栏 --> <!-- 搜索栏 -->
<view class="search-area"> <view class="search-area">
<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"> <view class="search-bar">
<u-icon name="search" color="#8e8e93" size="36"></u-icon> <u-icon name="search" color="#8e8e93" size="36"></u-icon>
<input class="search-input" v-model="keyword" placeholder="请搜索商户名" confirm-type="search" @confirm="onSearch" /> <input class="search-input" v-model="keyword" placeholder="请搜索商户名" confirm-type="search" @confirm="onSearch" />
<view class="search-btn" @click="onSearch">搜索</view> <view class="search-btn" @click="onSearch">搜索</view>
</view> </view>
</view> </view>
</view>
<!-- 商户列表 --> <!-- 商户列表 -->
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100"> <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" /> <image class="card-img" :src="item.image" mode="aspectFill" />
<view class="card-info"> <view class="card-info">
<text class="card-name">{{ item.name }}</text> <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> <text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
</view> </view>
</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> </scroll-view>
</view> </view>
</template> </template>
@@ -40,7 +48,8 @@ export default {
loading: false, loading: false,
lng: '', lng: '',
lat: '', lat: '',
loadStatus: 'loadmore' loadStatus: 'loadmore',
hasScrolled: false
} }
}, },
onLoad() { onLoad() {
@@ -88,11 +97,15 @@ export default {
}) })
}, },
loadMore() { loadMore() {
this.hasScrolled = true
if (this.list.length < this.total && !this.loading) { if (this.list.length < this.total && !this.loading) {
this.pageNo++ this.pageNo++
this.loadList() this.loadList()
} }
}, },
goBack() {
uni.navigateBack()
},
goDetail(item) { goDetail(item) {
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId }) uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
}, },
@@ -117,7 +130,28 @@ export default {
padding: 6px 12px; 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 { .search-bar {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
height: 44px; height: 44px;
@@ -144,23 +178,20 @@ export default {
} }
.list-area { .list-area {
width: 702rpx; padding: 12px;
margin-left: 24rpx;
margin-top: 24rpx;
display: flex;
flex-direction: column;
gap: 10px;
} }
.merchant-card { .venue-card {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #f2f2f7; border: 1px solid #f2f2f7;
border-radius: 6px; border-radius: 6px;
width: 702rpx;
padding: 24px 12px; padding: 24px 12px;
gap: 12px; gap: 12px;
box-shadow: 0 2px 3px #f2f2f7; box-shadow: 0 2px 3px #f2f2f7;
margin-bottom: 12px;
} }
.card-img { .card-img {
@@ -181,10 +212,6 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
} }
.card-category { .card-category {
@@ -214,4 +241,8 @@ export default {
font-size: 12px; font-size: 12px;
color: #727272; color: #727272;
} }
.nomore-area {
padding-top: 24px;
}
</style> </style>
pages/index/index.vue
+38 -16
View File
@@ -9,6 +9,7 @@
<view class="king-area"> <view class="king-area">
<view class="king-item" v-for="(item, index) in kingList" :key="index" @click="item.isRights ? goRights() : goPage(item.url)"> <view class="king-item" v-for="(item, index) in kingList" :key="index" @click="item.isRights ? goRights() : goPage(item.url)">
<image class="king-icon" :src="item.icon" mode="widthFix"></image> <image class="king-icon" :src="item.icon" mode="widthFix"></image>
<text class="king-text">{{ item.text }}</text>
</view> </view>
</view> </view>
@@ -37,10 +38,10 @@
data() { data() {
return { return {
kingList: [ kingList: [
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', url: '/pages/venue/venue' }, { icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', text: '文旅场馆', url: '/pages/venue/venue' },
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', url: '/pages/discount/discount' }, { icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', text: '商户折扣', url: '/pages/discount/discount' },
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', url: '/pages/rights/rights', isRights: true }, { icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', text: '权益包', url: '/pages/rights/rights', isRights: true },
{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', url: '/pages/winners/winners' } { icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', text: '中奖名单', url: '/pages/winners/winners' }
], ],
guideList: [ guideList: [
{ {
@@ -93,10 +94,17 @@
</script> </script>
<style> <style>
page {
height: 100%;
overflow: hidden;
}
.page { .page {
height: 100vh; height: 100vh;
background-color: #f5f5f5; background-color: #f5f5f5;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
} }
.banner-img { .banner-img {
@@ -109,7 +117,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
background-color: #ffffff; background-color: #ffffff;
padding: 24rpx; padding: 24rpx;
box-sizing: border-box; box-sizing: border-box;
@@ -118,6 +126,7 @@
.king-item { .king-item {
width: 25%; width: 25%;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@@ -125,19 +134,31 @@
.king-icon { .king-icon {
width: 100rpx; width: 100rpx;
height: 132rpx; height: 132rpx;
margin-bottom: 12rpx;
}
.king-text {
font-family: 'Source Han Sans SC', 'Source Han Sans CN', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
font-size: 24rpx;
color: #333333;
text-align: center;
} }
/* 活动指南 */ /* 活动指南 */
.guide-section { .guide-section {
flex: 1;
background-color: #ffffff; background-color: #ffffff;
margin-top: 10rpx; margin-top: 10rpx;
padding: 24rpx 20rpx 30rpx; overflow: hidden;
display: flex;
flex-direction: column;
} }
.section-title { .section-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 24rpx 20rpx 0 24px;
} }
.title-line { .title-line {
@@ -149,7 +170,7 @@
} }
.title-text { .title-text {
font-size: 30rpx; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
@@ -157,19 +178,20 @@
.guide-list { .guide-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx; gap: 12px;
padding: 0 20rpx 30rpx;
} }
.guide-card { .guide-card {
position: relative; position: relative;
width: 702rpx; width: 100%;
height: 252rpx; height: 252rpx;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
} }
.guide-bg { .guide-bg {
width: 702rpx; width: 100%;
height: 252rpx; height: 252rpx;
border-radius: 16rpx; border-radius: 16rpx;
} }
@@ -187,14 +209,14 @@
} }
.guide-title { .guide-title {
font-size: 30rpx; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #0088FF; color: #0088FF;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.guide-sub { .guide-sub {
font-size: 22rpx; font-size: 12px;
color: #949AA0; color: #949AA0;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
@@ -202,10 +224,10 @@
.guide-tag { .guide-tag {
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
padding: 4rpx 16rpx; padding: 4px 10px;
background-color: #00C0E8; background-color: #e6f2ff;
color: #ffffff; color: #0088FF;
font-size: 20rpx; font-size: 12px;
border-radius: 6rpx; border-radius: 6rpx;
} }
pages/index/login.vue
+40 -6
View File
@@ -23,14 +23,20 @@
<view class="login-btn" @click="onLogin">立即登录</view> <view class="login-btn" @click="onLogin">立即登录</view>
<!-- 协议区 --> <!-- 协议区 -->
<view class="agreement-area" @click="agreed = !agreed"> <view class="agreement-area">
<view class="checkbox" :class="{ checked: agreed }"> <view class="checkbox" :class="{ checked: agreed }" @click="agreed = !agreed">
<text class="check-icon" v-if="agreed">✓</text> <text class="check-icon" v-if="agreed">✓</text>
</view> </view>
<text class="agreement-text">我已阅读并同意</text> <text class="agreement-text" @click="agreed = !agreed">我已阅读并同意</text>
<text class="agreement-link">《用户协议》</text> <text class="agreement-link" @click.stop="goAgreement('user')">《用户协议》</text>
<text class="agreement-text">和</text> <text class="agreement-text" @click="agreed = !agreed">和</text>
<text class="agreement-link">《隐私协议》</text> <text class="agreement-link" @click.stop="goAgreement('privacy')">《隐私协议》</text>
</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>
</view> </view>
</template> </template>
@@ -123,6 +129,13 @@ export default {
}).catch(() => { }).catch(() => {
uni.showToast({ title: '登录失败', icon: 'none' }) uni.showToast({ title: '登录失败', icon: 'none' })
}) })
},
goAgreement(type) {
const url = type === 'user' ? '/pages/agreement/user' : '/pages/agreement/privacy'
uni.navigateTo({ url })
},
goBack() {
uni.navigateBack()
} }
} }
} }
@@ -250,4 +263,25 @@ export default {
font-size: 24rpx; font-size: 24rpx;
color: #0088FF; color: #0088FF;
} }
/* 返回按钮 */
.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> </style>
pages/mine/mine.vue
+12 -9
View File
@@ -108,13 +108,13 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #ffffff; background: linear-gradient(to bottom, #0066cc, #f2f2f7);
padding: 20px 16px; padding: 40px 16px 130px;
} }
.login-hint { .login-hint {
font-size: 16px; font-size: 16px;
color: #1a1818; color: #ffffff;
font-weight: 500; font-weight: 500;
margin-left: 12px; margin-left: 12px;
} }
@@ -129,6 +129,7 @@ export default {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
background-color: #ffffff;
} }
.user-detail { .user-detail {
@@ -140,17 +141,17 @@ export default {
.user-name { .user-name {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #1a1818; color: #ffffff;
} }
.user-phone { .user-phone {
font-size: 14px; font-size: 14px;
color: #666666; color: rgba(255, 255, 255, 0.8);
} }
.logout-btn { .logout-btn {
background-color: #e8e8e8; background-color: rgba(255, 255, 255, 0.2);
color: #666666; color: #ffffff;
font-size: 13px; font-size: 13px;
padding: 6px 16px; padding: 6px 16px;
border-radius: 4px; border-radius: 4px;
@@ -158,14 +159,16 @@ export default {
/* 菜单列表 */ /* 菜单列表 */
.menu-list { .menu-list {
margin-top: 12px; margin: -88px 12px 0;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px;
} }
.menu-item { .menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px; height: 64px;
padding: 0 16px;
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
} }
pages/rights/rights.vue
+99 -16
View File
@@ -1,5 +1,15 @@
<template> <template>
<view class="page"> <view class="page" :class="{ 'page-auth': status === 'auth' }">
<!-- 返回按钮（顶部，非auth状态） -->
<view class="back-btn" @click="goBack" v-if="status !== 'auth'">
<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
<text class="back-text">返回</text>
</view>
<!-- 返回按钮（底部，auth状态） -->
<view class="back-btn-bottom" @click="goBack" v-if="status === 'auth'">
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
<text class="back-text-bottom">返回上一页</text>
</view>
<!-- 状态1: 权益资格认证 --> <!-- 状态1: 权益资格认证 -->
<view v-if="status === 'auth'" class="auth-container"> <view v-if="status === 'auth'" class="auth-container">
<view class="section-title"> <view class="section-title">
@@ -70,7 +80,7 @@
</view> </view>
<view class="stats-divider"></view> <view class="stats-divider"></view>
<view class="stats-item"> <view class="stats-item">
<text class="stats-label">剩余可用权益数</text> <text class="stats-label">可用权益数</text>
<view class="stats-value-row"> <view class="stats-value-row">
<text class="stats-number-large">10</text> <text class="stats-number-large">10</text>
<text class="stats-unit">个</text> <text class="stats-unit">个</text>
@@ -111,6 +121,10 @@
</view> </view>
</view> </view>
<view class="empty-state" v-if="rightsList.length === 0 && !loading">
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
<text class="empty-state-text">暂无内容</text>
</view>
</scroll-view> </scroll-view>
<scroll-view class="list-area" scroll-y @scrolltolower="loadAppointmentMore" :lower-threshold="100" <scroll-view class="list-area" scroll-y @scrolltolower="loadAppointmentMore" :lower-threshold="100"
@@ -123,6 +137,10 @@
<text v-if="item.timeName">（{{ item.timeName }}）</text></view> <text v-if="item.timeName">（{{ item.timeName }}）</text></view>
</view> </view>
<view class="empty-state" v-if="appointmentList.length === 0 && !appointmentLoading">
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
<text class="empty-state-text">暂无内容</text>
</view>
</scroll-view> </scroll-view>
<scroll-view class="list-area" scroll-y @scrolltolower="loadCheckMore" :lower-threshold="100" <scroll-view class="list-area" scroll-y @scrolltolower="loadCheckMore" :lower-threshold="100"
v-if="currentTab==2"> v-if="currentTab==2">
@@ -132,6 +150,10 @@
<text>{{ item.resourceName }}</text><text style="color: #FF383C;">已使用</text></view> <text>{{ item.resourceName }}</text><text style="color: #FF383C;">已使用</text></view>
<view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">核销时间：{{ item.checkTime }}</view> <view style="font-size: 24rpx;color: #727272;margin-top: 24rpx;">核销时间：{{ item.checkTime }}</view>
</view> </view>
<view class="empty-state" v-if="checkList.length === 0 && !checkLoading">
<image class="empty-state-img" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_wzj.png" mode="widthFix"></image>
<text class="empty-state-text">暂无内容</text>
</view>
<view class="loading" v-if="checkLoading"> <view class="loading" v-if="checkLoading">
<text class="loading-text">加载中...</text> <text class="loading-text">加载中...</text>
</view> </view>
@@ -443,6 +465,9 @@
uni.navigateTo({ uni.navigateTo({
url: '/pages/rights/detail?id=' + item.ruleId url: '/pages/rights/detail?id=' + item.ruleId
}) })
},
goBack() {
uni.navigateBack()
} }
} }
} }
@@ -453,8 +478,12 @@
} }
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
.page-auth {
background-color: #ffffff;
}
/* 认证表单 */ /* 认证表单 */
.auth-container { .auth-container {
min-height: 100vh;
padding: 16px; padding: 16px;
} }
@@ -487,15 +516,12 @@
.form-item { .form-item {
display: flex; display: flex;
align-items: center; align-items: center;
height: 50px; height: 64px;
width: 100%;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
position: relative; position: relative;
} }
.form-item:last-child {
border-bottom: none;
}
.form-label { .form-label {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
@@ -581,11 +607,12 @@
/* 权益信息 - 蓝色横幅 */ /* 权益信息 - 蓝色横幅 */
.banner-area { .banner-area {
background-color: #0088ff; background-color: #0088ff;
padding: 20px 16px 24px; padding: 80px 16px 96px;
border-radius: 0 0 50px 50px;
} }
.banner-title { .banner-title {
font-size: 16px; font-size: 24px;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
display: block; display: block;
@@ -613,25 +640,25 @@
} }
.expire-text { .expire-text {
font-size: 16px; font-size: 24px;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
} }
.expire-label { .expire-label {
font-size: 14px; font-size: 24px;
color: rgba(255, 255, 255, 0.8); color: #ffffff;
} }
/* 统计卡片 */ /* 统计卡片 */
.stats-card { .stats-card {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #ffffff; background: #FFFFFF;
margin: -12px 12px 0; margin: -60px 12px 0;
border-radius: 8px; border-radius: 10px;
padding: 16px 24px; padding: 16px 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0px 4px 4px 0px #00000019;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@@ -839,4 +866,60 @@
font-size: 14px; font-size: 14px;
color: #999999; color: #999999;
} }
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 80px;
}
.empty-state-img {
width: 200px;
}
.empty-state-text {
font-size: 16px;
color: #999999;
margin-top: 16px;
}
/* 返回按钮 */
.back-btn {
position: fixed;
top: 24px;
left: 24px;
display: flex;
align-items: center;
gap: 2px;
z-index: 10;
}
.back-text {
font-size: 14px;
color: #ffffff;
}
/* 底部返回按钮 */
.back-btn-bottom {
position: fixed;
left: 24px;
bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
z-index: 10;
}
.back-icon {
width: 44px;
height: 44px;
}
.back-text-bottom {
font-size: 12px;
color: #666666;
}
</style> </style>
pages/venue/detail.vue
+50 -9
View File
@@ -1,7 +1,8 @@
<template> <template>
<view class="page" v-if="store"> <view class="page" v-if="store">
<!-- 门店信息卡片 --> <!-- 门店信息卡片（信息+地址合并容器） -->
<view class="store-card"> <view class="store-card">
<view class="store-main">
<image class="store-img" :src="store.image" mode="aspectFill" /> <image class="store-img" :src="store.image" mode="aspectFill" />
<view class="store-info"> <view class="store-info">
<text class="store-name">{{ store.name }}</text> <text class="store-name">{{ store.name }}</text>
@@ -9,8 +10,7 @@
<text class="store-hours">营业时间：{{ store.businessTime }}</text> <text class="store-hours">营业时间：{{ store.businessTime }}</text>
</view> </view>
</view> </view>
<view class="divider"></view>
<!-- 地址行 -->
<view class="address-row"> <view class="address-row">
<text class="address-text">{{ store.address }}</text> <text class="address-text">{{ store.address }}</text>
<view class="distance-row" v-if="store.distance !== null"> <view class="distance-row" v-if="store.distance !== null">
@@ -18,6 +18,7 @@
<text class="distance-text">{{ store.distance < 1 ? Math.round(store.distance * 1000) + 'm' : Math.round(store.distance) + 'km' }}</text> <text class="distance-text">{{ store.distance < 1 ? Math.round(store.distance * 1000) + 'm' : Math.round(store.distance) + 'km' }}</text>
</view> </view>
</view> </view>
</view>
<!-- 商户优惠 --> <!-- 商户优惠 -->
<view class="discount-section"> <view class="discount-section">
@@ -29,6 +30,12 @@
<text class="discount-item" v-for="(item, index) in discountList" :key="index">{{ item }}</text> <text class="discount-item" v-for="(item, index) in discountList" :key="index">{{ item }}</text>
</view> </view>
</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> </view>
</template> </template>
@@ -65,6 +72,9 @@ export default {
this.store = res.data this.store = res.data
} }
}) })
},
goBack() {
uni.navigateBack()
} }
} }
} }
@@ -77,12 +87,17 @@ export default {
overflow: hidden; overflow: hidden;
} }
/* 门店卡片 */ /* 门店卡片（信息+地址合并容器） */
.store-card { .store-card {
display: flex;
background-color: #ffffff; background-color: #ffffff;
margin: 12px; margin: 12px;
border-radius: 8px; border-radius: 8px;
overflow: hidden;
}
.store-main {
display: flex;
align-items: flex-start;
padding: 12px; padding: 12px;
gap: 12px; gap: 12px;
} }
@@ -98,8 +113,8 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
gap: 6px; gap: 8px;
} }
.store-name { .store-name {
@@ -118,13 +133,18 @@ export default {
color: #666666; color: #666666;
} }
.divider {
height: 1px;
background-color: #f2f2f7;
margin: 0 12px;
}
/* 地址行 */ /* 地址行 */
.address-row { .address-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: #ffffff; padding: 12px;
padding: 12px 16px;
} }
.address-text { .address-text {
@@ -186,4 +206,25 @@ export default {
color: #666666; color: #666666;
line-height: 1.6; 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> </style>
pages/venue/venue.vue
+41 -6
View File
@@ -2,12 +2,18 @@
<view class="page"> <view class="page">
<!-- 搜索栏 --> <!-- 搜索栏 -->
<view class="search-area"> <view class="search-area">
<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"> <view class="search-bar">
<u-icon name="search" color="#8e8e93" size="36"></u-icon> <u-icon name="search" color="#8e8e93" size="36"></u-icon>
<input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" /> <input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" />
<view class="search-btn" @click="onSearch">搜索</view> <view class="search-btn" @click="onSearch">搜索</view>
</view> </view>
</view> </view>
</view>
<!-- 场馆列表 --> <!-- 场馆列表 -->
<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100"> <scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
@@ -23,7 +29,9 @@
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text> <text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
</view> </view>
</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> </scroll-view>
</view> </view>
</template> </template>
@@ -40,7 +48,8 @@ export default {
loading: false, loading: false,
lng: '', lng: '',
lat: '', lat: '',
loadStatus: 'loadmore' loadStatus: 'loadmore',
hasScrolled: false
} }
}, },
onLoad() { onLoad() {
@@ -88,11 +97,15 @@ export default {
}) })
}, },
loadMore() { loadMore() {
this.hasScrolled = true
if (this.list.length < this.total && !this.loading) { if (this.list.length < this.total && !this.loading) {
this.pageNo++ this.pageNo++
this.loadList() this.loadList()
} }
}, },
goBack() {
uni.navigateBack()
},
goDetail(item) { goDetail(item) {
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId }) uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
}, },
@@ -117,7 +130,28 @@ export default {
padding: 6px 12px; 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 { .search-bar {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
height: 44px; height: 44px;
@@ -145,9 +179,6 @@ export default {
.list-area { .list-area {
padding: 12px; padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
} }
.venue-card { .venue-card {
@@ -157,10 +188,10 @@ export default {
border: 1px solid #f2f2f7; border: 1px solid #f2f2f7;
border-radius: 6px; border-radius: 6px;
width: 702rpx; width: 702rpx;
padding: 24px 12px; padding: 24px 12px;
gap: 12px; gap: 12px;
box-shadow: 0 2px 3px #f2f2f7; box-shadow: 0 2px 3px #f2f2f7;
margin-bottom: 12px;
} }
.card-img { .card-img {
@@ -210,4 +241,8 @@ export default {
font-size: 12px; font-size: 12px;
color: #727272; color: #727272;
} }
.nomore-area {
padding-top: 24px;
}
</style> </style>