优化活动列表组件样式和布局：1. 调整列表间距 2. 优化滚动体验 3. 修复首个组件遮盖问题
This commit is contained in:
davy
parent
54f3534be4
commit
2e0e29a3d1
@ -311,86 +311,4 @@
|
|||||||
margin-top: 104rpx; // 筛选栏高度
|
margin-top: 104rpx; // 筛选栏高度
|
||||||
padding: 24rpx 32rpx;
|
padding: 24rpx 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-item {
|
|
||||||
border-radius: 20rpx;
|
|
||||||
background: #FDFDFD;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #F2F2F2;
|
|
||||||
width: 702rpx;
|
|
||||||
margin-bottom: 32rpx;
|
|
||||||
.left {
|
|
||||||
padding: 24rpx 20rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #EFEDE9;
|
|
||||||
width: 180rpx;
|
|
||||||
margin-top: -10rpx;
|
|
||||||
margin-bottom: -10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
padding: 20rpx;
|
|
||||||
flex:1;
|
|
||||||
.title {
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 30rpx;
|
|
||||||
color: #0B0E26;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub {
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 30rpx;
|
|
||||||
color: #0B0E26;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-img {
|
|
||||||
width: 500rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
white-space: nowrap;
|
|
||||||
height: 144rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
.beer-box {
|
|
||||||
width: 100rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
// &:nth-child(1) {
|
|
||||||
// margin-left: 32rpx;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
width: 100rpx;
|
|
||||||
height: 144rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zeng {
|
|
||||||
font-family: Source Han Sans;
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: normal;
|
|
||||||
text-align: center;
|
|
||||||
color: #0B0E26;
|
|
||||||
padding: 8rpx 12rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
background: #FEE034;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -58,63 +58,31 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- <commonTitle title="热门活动招募"></commonTitle> -->
|
<!-- <commonTitle title="热门活动招募"></commonTitle> -->
|
||||||
<view style="margin:46rpx 0 16rpx 24rpx;font-size: 40rpx;font-weight:bold;color: #030303;">
|
<view class="section-title">
|
||||||
<text >热门活动招募</text></view>
|
<text>热门活动招募</text>
|
||||||
<!-- 专辑列表 -->
|
|
||||||
<!-- <view v-for="(item,i) in featurePageList" :key="i" class="bg-white">
|
|
||||||
<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
|
|
||||||
<view class="flex-1 flex flex-col">
|
|
||||||
<text class="title">{{ item.pageName }}</text>
|
|
||||||
<text class="sub">{{ item.subTitle}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
|
<!-- 活动列表容器 -->
|
||||||
|
<view class="list-container">
|
||||||
|
<scroll-view
|
||||||
|
scroll-y="true"
|
||||||
|
@scrolltolower="changePage"
|
||||||
|
:scroll-anchoring="true"
|
||||||
|
:refresher-enabled="true"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
>
|
||||||
|
<view class="activity-list" style="margin-top: 16rpx;">
|
||||||
|
<activity-item
|
||||||
|
v-for="(item, index) in featurePageList"
|
||||||
|
:key="index"
|
||||||
|
:item="item"
|
||||||
|
@click="toDetail"
|
||||||
|
@review="toReview"
|
||||||
|
/>
|
||||||
</view>
|
</view>
|
||||||
<rowBeer :beers="item.beers" />
|
<view v-if="featurePageList.length > 0" class="more-btn-box" @click="moreHotActivity">
|
||||||
|
|
||||||
</view> -->
|
|
||||||
<view class="flex-1 list-container" style="padding:0 24rpx 24rpx">
|
|
||||||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="changePage">
|
|
||||||
<view class="activity-item flex" v-for="(it, index) in featurePageList" :key="index" @click="toDetail(it)">
|
|
||||||
<view class="left flex flex-col justify-between align-center">
|
|
||||||
<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;">
|
|
||||||
</image>
|
|
||||||
<text >活动状态</text>
|
|
||||||
<view v-if="it.stage == 0">未开始</view>
|
|
||||||
<view v-if="it.stage == 2">已结束</view>
|
|
||||||
<view v-if="it.stage == 3">已结束</view>
|
|
||||||
<view v-if="it.stage == 4">活动停止</view>
|
|
||||||
<view v-if="it.stage == 1" class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
|
|
||||||
<view v-if="it.stage == 1">
|
|
||||||
<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="right">
|
|
||||||
<view class="title">{{ it.breweryName }}焦糖</view>
|
|
||||||
<!-- <view class="title">{{ it.activityName }}</view> -->
|
|
||||||
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration?it.duration:0}}天内</text></view>
|
|
||||||
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget?it.activityTarget:0}}桶</view>
|
|
||||||
<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
|
|
||||||
<view class="beer-box" v-for="(it, index) in it.beers" :key="index" @click="toReview(it)">
|
|
||||||
<image v-if="it.cover" :src="it.cover" class="cover"></image>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="flex align-center" style="height:40rpx;">
|
|
||||||
<text class="zeng">赠</text>
|
|
||||||
<text style="color: #030303;font-size: 28rpx;">焦糖肉桂红柿子*3L*1</text>
|
|
||||||
</view>
|
|
||||||
<!-- <view class="flex align-center">
|
|
||||||
<text v-if="it.activityRewardType == 2 || (it.activityRewardType == 1 && it.activityRewardGoods)" class="zeng">赠</text>
|
|
||||||
<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
|
|
||||||
<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="cu-load" style="height: 88rpx;"></view>
|
|
||||||
<view class="more-btn-box" @click="moreHotActivity">
|
|
||||||
<view class="more-btn">更多热门活动招募</view>
|
<view class="more-btn">更多热门活动招募</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="weixin-box zixuns">
|
<!-- <view class="weixin-box zixuns">
|
||||||
<text>入驻助理在线服务，1对1咨询使用指南~</text>
|
<text>入驻助理在线服务，1对1咨询使用指南~</text>
|
||||||
@ -144,7 +112,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
getBannerList
|
getBannerList,
|
||||||
|
getActivities
|
||||||
} from '@/api/bar.js'
|
} from '@/api/bar.js'
|
||||||
import {
|
import {
|
||||||
listFeaturePage
|
listFeaturePage
|
||||||
@ -152,11 +121,13 @@
|
|||||||
import commonTitle from '@/components/commonTitle.vue'
|
import commonTitle from '@/components/commonTitle.vue'
|
||||||
import loginPopup from '@/components/loginPopup.vue';
|
import loginPopup from '@/components/loginPopup.vue';
|
||||||
import rowBeer from '@/components/rowBeer.vue'
|
import rowBeer from '@/components/rowBeer.vue'
|
||||||
|
import ActivityItem from '@/components/ActivityItem.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
commonTitle,
|
commonTitle,
|
||||||
loginPopup,
|
loginPopup,
|
||||||
rowBeer
|
rowBeer,
|
||||||
|
ActivityItem
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -166,9 +137,14 @@
|
|||||||
bannerJoin: null, // 认证门店banner
|
bannerJoin: null, // 认证门店banner
|
||||||
showJoinImg: false, // 是否显示认证门店图片
|
showJoinImg: false, // 是否显示认证门店图片
|
||||||
userInfo: null,
|
userInfo: null,
|
||||||
featurePageList: [], // 专辑页列表
|
featurePageList: [], // 活动列表
|
||||||
homeBanner: [], //首页banner
|
homeBanner: [], //首页banner
|
||||||
keyword: '',
|
keyword: '',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
loading: false,
|
||||||
|
finished: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@ -191,12 +167,16 @@
|
|||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.userInfo = uni.getStorageSync('userInfo')
|
this.userInfo = uni.getStorageSync('userInfo')
|
||||||
if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没认证门店
|
if (this.userInfo == null || this.userInfo.userType == '09') {
|
||||||
this.showJoinImg = true
|
this.showJoinImg = true
|
||||||
} else {
|
} else {
|
||||||
this.showJoinImg = false
|
this.showJoinImg = false
|
||||||
}
|
}
|
||||||
this.getFeaturePageListFun() // 专辑页列表
|
// 重置分页参数
|
||||||
|
this.pageNum = 1
|
||||||
|
this.finished = false
|
||||||
|
this.featurePageList = []
|
||||||
|
this.getActivityList() // 获取活动列表
|
||||||
},
|
},
|
||||||
// onPullDownRefresh(){
|
// onPullDownRefresh(){
|
||||||
// this.getFeaturePageListFun() // 专辑页列表
|
// this.getFeaturePageListFun() // 专辑页列表
|
||||||
@ -332,7 +312,48 @@
|
|||||||
changeSearch() {
|
changeSearch() {
|
||||||
// 实现搜索逻辑
|
// 实现搜索逻辑
|
||||||
console.log('搜索关键词:', this.keyword);
|
console.log('搜索关键词:', this.keyword);
|
||||||
|
},
|
||||||
|
// 下拉刷新
|
||||||
|
async onRefresh() {
|
||||||
|
this.pageNum = 1
|
||||||
|
this.finished = false
|
||||||
|
this.featurePageList = []
|
||||||
|
await this.getActivityList()
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
},
|
||||||
|
// 获取活动列表
|
||||||
|
async getActivityList() {
|
||||||
|
if (this.loading || this.finished) return
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
const res = await getActivities({
|
||||||
|
pageNum: this.pageNum,
|
||||||
|
pageSize: this.pageSize
|
||||||
|
})
|
||||||
|
if (res.code === 200) {
|
||||||
|
const { rows, total } = res
|
||||||
|
if (this.pageNum === 1) {
|
||||||
|
this.featurePageList = rows
|
||||||
|
} else {
|
||||||
|
this.featurePageList = [...this.featurePageList, ...rows]
|
||||||
}
|
}
|
||||||
|
this.total = total
|
||||||
|
this.finished = this.featurePageList.length >= total
|
||||||
|
this.pageNum++
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取活动列表失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改页面加载更多方法
|
||||||
|
async changePage() {
|
||||||
|
if (!this.finished) {
|
||||||
|
await this.getActivityList()
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -344,11 +365,10 @@
|
|||||||
|
|
||||||
.page {
|
.page {
|
||||||
background: #F9F9F9;
|
background: #F9F9F9;
|
||||||
height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-y: auto;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
|
||||||
// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box {
|
.search-box {
|
||||||
@ -381,102 +401,48 @@
|
|||||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.section-title {
|
||||||
|
margin: 46rpx 24rpx 32rpx 24rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #030303;
|
||||||
|
}
|
||||||
|
|
||||||
.list-container {
|
.list-container {
|
||||||
// margin-top: -300rpx;
|
|
||||||
// padding-top: 5rpx;
|
|
||||||
|
|
||||||
overflow-y: auto;
|
|
||||||
// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
|
||||||
// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border-radius: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
// 累积活动
|
|
||||||
.activity-item {
|
|
||||||
border-radius: 20rpx;
|
|
||||||
background: #FDFDFD;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #F2F2F2;
|
|
||||||
width: 702rpx;
|
|
||||||
margin-top: 5rpx;
|
|
||||||
margin-bottom: 35rpx;
|
|
||||||
.left {
|
|
||||||
padding: 24rpx 16rpx;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #EFEDE9;
|
|
||||||
width: 180rpx;
|
|
||||||
margin-top: -10rpx;
|
|
||||||
margin-bottom: -10rpx;
|
|
||||||
// height: 428rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
padding: 24rpx 0 22rpx 16rpx;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
.title {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 48rpx;
|
|
||||||
color: #0B0E26;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 40rpx;
|
|
||||||
color: #0B0E26;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
.scroll-img {
|
|
||||||
width: 500rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
white-space: nowrap;
|
|
||||||
height: 144rpx;
|
|
||||||
margin-bottom: 18rpx;
|
|
||||||
|
|
||||||
.beer-box {
|
scroll-view {
|
||||||
width: 100rpx;
|
flex: 1;
|
||||||
background: #FFFFFF;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
// &:nth-child(1) {
|
|
||||||
// margin-left: 32rpx;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
width: 100rpx;
|
|
||||||
height: 144rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.activity-list {
|
||||||
|
padding: 0 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.more-btn-box {
|
||||||
|
width: 92%;
|
||||||
|
height: 88rpx;
|
||||||
|
margin: 32rpx auto;
|
||||||
|
background: linear-gradient(135deg, #19367A, #2C4C99);
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||||||
}
|
}
|
||||||
.zeng {
|
|
||||||
font-size: 20rpx;
|
.more-btn {
|
||||||
font-weight: bold;
|
font-size: 28rpx;
|
||||||
line-height: normal;
|
font-weight: 600;
|
||||||
text-align: center;
|
letter-spacing: 2rpx;
|
||||||
color: #0B0E26;
|
color: #FFFFFF;
|
||||||
padding: 8rpx 12rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
background: #FEE034;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -608,30 +574,6 @@
|
|||||||
color: #9D9D9D;
|
color: #9D9D9D;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.more-btn-box {
|
|
||||||
width: 92%;
|
|
||||||
height: 88rpx;
|
|
||||||
margin: 32rpx auto;
|
|
||||||
background: linear-gradient(135deg, #19367A, #2C4C99);
|
|
||||||
border-radius: 12rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-btn {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 2rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.zixuns {
|
.zixuns {
|
||||||
padding: 0 34rpx 0 20rpx;
|
padding: 0 34rpx 0 20rpx;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
@ -643,19 +585,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.activity-item {
|
.activity-item {
|
||||||
background: #FFFFFF;
|
display: none;
|
||||||
border-radius: 12rpx;
|
|
||||||
padding: 24rpx;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.left {
|
|
||||||
width: 140rpx;
|
|
||||||
margin-right: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user