优化活动列表组件样式和布局：1. 调整列表间距 2. 优化滚动体验 3. 修复首个组件遮盖问题
This commit is contained in:
davy
parent
54f3534be4
commit
2e0e29a3d1
@ -311,86 +311,4 @@
|
||||
margin-top: 104rpx; // 筛选栏高度
|
||||
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>
|
||||
@ -58,63 +58,31 @@
|
||||
|
||||
|
||||
<!-- <commonTitle title="热门活动招募"></commonTitle> -->
|
||||
<view style="margin:46rpx 0 16rpx 24rpx;font-size: 40rpx;font-weight:bold;color: #030303;">
|
||||
<text >热门活动招募</text></view>
|
||||
<!-- 专辑列表 -->
|
||||
<!-- <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 class="section-title">
|
||||
<text>热门活动招募</text>
|
||||
</view>
|
||||
<!-- 活动列表容器 -->
|
||||
<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>
|
||||
<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<rowBeer :beers="item.beers" />
|
||||
|
||||
</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 v-if="featurePageList.length > 0" class="more-btn-box" @click="moreHotActivity">
|
||||
<view class="more-btn">更多热门活动招募</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="weixin-box zixuns">
|
||||
<text>入驻助理在线服务，1对1咨询使用指南~</text>
|
||||
@ -144,7 +112,8 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBannerList
|
||||
getBannerList,
|
||||
getActivities
|
||||
} from '@/api/bar.js'
|
||||
import {
|
||||
listFeaturePage
|
||||
@ -152,11 +121,13 @@
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
import loginPopup from '@/components/loginPopup.vue';
|
||||
import rowBeer from '@/components/rowBeer.vue'
|
||||
import ActivityItem from '@/components/ActivityItem.vue'
|
||||
export default {
|
||||
components: {
|
||||
commonTitle,
|
||||
loginPopup,
|
||||
rowBeer
|
||||
rowBeer,
|
||||
ActivityItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -166,9 +137,14 @@
|
||||
bannerJoin: null, // 认证门店banner
|
||||
showJoinImg: false, // 是否显示认证门店图片
|
||||
userInfo: null,
|
||||
featurePageList: [], // 专辑页列表
|
||||
featurePageList: [], // 活动列表
|
||||
homeBanner: [], //首页banner
|
||||
keyword: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
finished: false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
@ -191,12 +167,16 @@
|
||||
},
|
||||
onShow() {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没认证门店
|
||||
if (this.userInfo == null || this.userInfo.userType == '09') {
|
||||
this.showJoinImg = true
|
||||
}else {
|
||||
this.showJoinImg = false
|
||||
}
|
||||
this.getFeaturePageListFun() // 专辑页列表
|
||||
} else {
|
||||
this.showJoinImg = false
|
||||
}
|
||||
// 重置分页参数
|
||||
this.pageNum = 1
|
||||
this.finished = false
|
||||
this.featurePageList = []
|
||||
this.getActivityList() // 获取活动列表
|
||||
},
|
||||
// onPullDownRefresh(){
|
||||
// this.getFeaturePageListFun() // 专辑页列表
|
||||
@ -332,7 +312,48 @@
|
||||
changeSearch() {
|
||||
// 实现搜索逻辑
|
||||
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>
|
||||
@ -344,11 +365,10 @@
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Roboto;
|
||||
// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
||||
// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.search-box {
|
||||
@ -381,102 +401,48 @@
|
||||
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 {
|
||||
// margin-top: -300rpx;
|
||||
// padding-top: 5rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
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;
|
||||
scroll-view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.activity-list {
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
// 累积活动
|
||||
.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;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 24rpx 0 22rpx 16rpx;
|
||||
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;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
height: 144rpx;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.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-size: 20rpx;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
color: #0B0E26;
|
||||
padding: 8rpx 12rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #FEE034;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -608,30 +574,6 @@
|
||||
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 {
|
||||
padding: 0 34rpx 0 20rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
@ -643,19 +585,6 @@
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
background: #FFFFFF;
|
||||
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;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user