fix: 修复活动列表点击事件处理方法名称不一致的问题

This commit is contained in:
davy 2025-04-05 20:57:13 +08:00
parent 69ffc1fd00
commit b70b87cdb6
2 changed files with 177 additions and 84 deletions

View File

@ -1,28 +1,29 @@
<template> <template>
<view class="activity-item flex" @click="handleClick"> <view class="activity-item flex" v-if="isActivityVisible" @click="handleClick">
<view class="left flex flex-col justify-between align-center"> <view class="left">
<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;"></image> <image :src="item.brandLogo"></image>
<text style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;"> <view class="status-content">
<block v-if="activityState === 'recruiting'">活动招募还剩</block> <text v-if="activityState === 'recruiting'">招募剩余天数</text>
<block v-else-if="activityState === 'inProgress'">距离达成还剩</block> <text v-else-if="activityState === 'inProgress'">距离达成还剩</text>
</text>
<view class="status-box"> <view class="status-box">
<block v-if="activityState === 'recruiting'"> <template v-if="activityState === 'recruiting'">
<view class="days-left"> <view class="days-left">
<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text> <text class="days-num">{{item.remainingDays}}</text>
<text style="font-size: 24rpx;color: #606060;"></text> <text class="days-unit"></text>
</view> </view>
</block> </template>
<block v-else-if="activityState === 'inProgress'"> <template v-else-if="activityState === 'inProgress'">
<view v-if="item.remainingBeerCount > 0"> <view v-if="item.remainingBeerCount > 0" class="beer-count">
<text style="font-size: 24rpx;color: #0B0E26;">{{item.remainingBeerCount}}</text> <text>{{item.remainingBeerCount}}</text>
<text style="font-size: 24rpx;color: #0B0E26;"></text> <text></text>
</view>
</template>
<template v-else-if="activityState === 'completed'">
<view class="status-text">
{{!item.barAwardStatus ? '待兑付' : '已完成'}}
</view>
</template>
</view> </view>
</block>
<block v-else-if="activityState === 'completed'">
<view v-if="!item.barAwardStatus" style="font-size: 24rpx;color: #19367A;font-weight: bold;">待兑付</view>
<view v-else style="font-size: 24rpx;color: #19367A;font-weight: bold;">已完成</view>
</block>
</view> </view>
</view> </view>
<view class="right"> <view class="right">
@ -53,7 +54,24 @@ export default {
required: true required: true
} }
}, },
created() {
console.log('ActivityItem created', this.item)
},
mounted() {
console.log('ActivityItem mounted', this.item)
},
computed: { computed: {
//
isActivityVisible() {
//
const userCity = uni.getStorageSync('userCity');
//
if (!userCity) {
return this.item.city === '全国';
}
//
return this.item.city === '全国' || this.item.city === userCity;
},
activityState() { activityState() {
if (this.item.activityStatus === 1) { if (this.item.activityStatus === 1) {
return 'recruiting'; return 'recruiting';
@ -67,9 +85,11 @@ export default {
}, },
methods: { methods: {
handleClick() { handleClick() {
console.log('ActivityItem clicked', this.item)
this.$emit('click', this.item) this.$emit('click', this.item)
}, },
handleReview(beer) { handleReview(beer) {
console.log('ActivityItem review clicked', beer)
this.$emit('review', beer) this.$emit('review', beer)
} }
} }
@ -155,7 +175,7 @@ export default {
top: -12rpx; top: -12rpx;
height: calc(100% + 24rpx); height: calc(100% + 24rpx);
width: 180rpx; width: 180rpx;
padding: 24rpx 16rpx; padding: 40rpx 24rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 20rpx; border-radius: 20rpx;
box-sizing: border-box; box-sizing: border-box;
@ -165,49 +185,66 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between;
.brand-logo { image {
width: 148rpx; width: 132rpx;
height: 148rpx; height: 132rpx;
border-radius: 12rpx; border-radius: 6rpx;
margin-bottom: 16rpx; margin-bottom: 40rpx;
} }
.brewery-name { .status-content {
display: flex;
flex-direction: column;
align-items: center;
text {
color: #606060;
font-size: 24rpx; font-size: 24rpx;
font-weight: bold; font-weight: bold;
color: #0B0E26; white-space: nowrap;
text-align: center; margin-bottom: 46rpx;
margin-bottom: 8rpx;
} }
.city { .status-box {
font-size: 20rpx;
color: #9D9D9D;
text-align: center; text-align: center;
margin-bottom: 16rpx;
}
.status-text { .days-left {
font-size: 20rpx; display: flex;
color: #0B0E26; align-items: baseline;
text-align: center; justify-content: center;
margin-bottom: 8rpx;
}
.remaining-days { .days-num {
font-size: 40rpx; font-size: 72rpx;
font-weight: bold;
color: #D42E78; color: #D42E78;
text-align: center; font-weight: bold;
margin-bottom: 8rpx; line-height: 1;
} }
.days-unit { .days-unit {
font-size: 20rpx; font-size: 24rpx;
color: #D42E78; color: #606060;
text-align: center; margin-left: 4rpx;
}
}
.beer-count {
text {
font-size: 24rpx;
color: #0B0E26;
&:last-child {
margin-left: 4rpx;
}
}
}
.status-text {
font-size: 24rpx;
color: #19367A;
font-weight: bold;
}
}
} }
} }
} }

View File

@ -67,15 +67,13 @@
scroll-y="true" scroll-y="true"
@scrolltolower="changePage" @scrolltolower="changePage"
:scroll-anchoring="true" :scroll-anchoring="true"
:refresher-enabled="true"
@refresherrefresh="onRefresh"
> >
<view class="activity-list" style="margin-top: 16rpx;"> <view class="activity-list" style="margin-top: 16rpx;">
<activity-item <activity-item
v-for="(item, index) in featurePageList" v-for="(item, index) in featurePageList"
:key="index" :key="index"
:item="item" :item="item"
@click="toDetail" @click="handleActivityClick"
@review="toReview" @review="toReview"
/> />
</view> </view>
@ -147,6 +145,27 @@
finished: false, finished: false,
}; };
}, },
created() {
console.log('Index page created')
},
mounted() {
console.log('Index page mounted')
},
onReady() {
console.log('Index page ready')
//
if (this.featurePageList.length === 0) {
this.getActivityList()
}
},
watch: {
featurePageList: {
handler(newVal) {
console.log('featurePageList changed', newVal)
},
deep: true
}
},
onLoad() { onLoad() {
// setTimeout(() => { // setTimeout(() => {
// uni.setNavigationBarColor({ // uni.setNavigationBarColor({
@ -163,7 +182,8 @@
uni.showShareMenu({ uni.showShareMenu({
menus: ['shareAppMessage', 'shareTimeline'] menus: ['shareAppMessage', 'shareTimeline']
}) })
//
uni.stopPullDownRefresh()
}, },
onShow() { onShow() {
this.userInfo = uni.getStorageSync('userInfo') this.userInfo = uni.getStorageSync('userInfo')
@ -181,7 +201,10 @@
// onPullDownRefresh(){ // onPullDownRefresh(){
// this.getFeaturePageListFun() // // this.getFeaturePageListFun() //
// }, // },
onPullDownRefresh() {
//
uni.stopPullDownRefresh()
},
methods: { methods: {
loginSuccess() { loginSuccess() {
this.userInfo = uni.getStorageSync('userInfo') this.userInfo = uni.getStorageSync('userInfo')
@ -313,14 +336,6 @@
// //
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() { async getActivityList() {
if (this.loading || this.finished) return if (this.loading || this.finished) return
@ -332,14 +347,48 @@
}) })
if (res.code === 200) { if (res.code === 200) {
const { rows, total } = res const { rows, total } = res
if (this.pageNum === 1) {
this.featurePageList = rows //
} else { const processedRows = rows.map(it => {
this.featurePageList = [...this.featurePageList, ...rows] //
const targetDate = new Date(it.endDate);
const currentDate = new Date();
const timeDiff = targetDate.getTime() - currentDate.getTime();
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
//
let activityState = 'recruiting';
if (it.activityStatus === 2) {
activityState = 'in_progress';
} else if (it.activityStatus === 3) {
activityState = 'completed';
} }
this.total = total
this.finished = this.featurePageList.length >= total return {
this.pageNum++ ...it,
remainingDays,
activityState,
remainingBeerCount: it.remainingBeerCount || 0,
barAwardStatus: it.barAwardStatus || 0
};
});
//
const filteredRows = processedRows.filter(item => {
if (item.activityState === 'recruiting') {
return item.remainingDays >= 0
}
return true
});
if (this.pageNum === 1) {
this.featurePageList = filteredRows;
} else {
this.featurePageList = [...this.featurePageList, ...filteredRows];
}
this.total = total;
this.finished = this.featurePageList.length >= total;
this.pageNum++;
} }
} catch (error) { } catch (error) {
console.error('获取活动列表失败:', error) console.error('获取活动列表失败:', error)
@ -354,6 +403,13 @@
await this.getActivityList() await this.getActivityList()
} }
}, },
//
handleActivityClick(item) {
console.log('handleActivityClick called', item)
uni.navigateTo({
url: "/pagesActivity/activityDetail?id=" + item.id
})
},
} }
} }
</script> </script>
@ -585,6 +641,6 @@
} }
.activity-item { .activity-item {
display: none; display: block;
} }
</style> </style>