davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
components/ActivityItem.vue
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"> <template v-if="activityState === 'recruiting'">
<block v-if="activityState === 'recruiting'"> <view class="days-left">
<view class="days-left"> <text class="days-num">{{item.remainingDays}}</text>
<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text> <text class="days-unit">天</text>
<text style="font-size: 24rpx;color: #606060;">天</text> </view>
</view> </template>
</block> <template v-else-if="activityState === 'inProgress'">
<block v-else-if="activityState === 'inProgress'"> <view v-if="item.remainingBeerCount > 0" class="beer-count">
<view v-if="item.remainingBeerCount > 0"> <text>{{item.remainingBeerCount}}</text>
<text style="font-size: 24rpx;color: #0B0E26;">{{item.remainingBeerCount}}</text> <text>桶</text>
<text style="font-size: 24rpx;color: #0B0E26;">桶</text> </view>
</view> </template>
</block> <template v-else-if="activityState === 'completed'">
<block v-else-if="activityState === 'completed'"> <view class="status-text">
<view v-if="!item.barAwardStatus" style="font-size: 24rpx;color: #19367A;font-weight: bold;">待兑付</view> {{!item.barAwardStatus ? '待兑付' : '已完成'}}
<view v-else style="font-size: 24rpx;color: #19367A;font-weight: bold;">已完成</view> </view>
</block> </template>
</view>
</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 {
font-size: 24rpx; display: flex;
font-weight: bold; flex-direction: column;
color: #0B0E26; align-items: center;
text-align: center;
margin-bottom: 8rpx;
}
.city { text {
font-size: 20rpx; color: #606060;
color: #9D9D9D; font-size: 24rpx;
text-align: center; font-weight: bold;
margin-bottom: 16rpx; white-space: nowrap;
} margin-bottom: 46rpx;
}
.status-text { .status-box {
font-size: 20rpx; text-align: center;
color: #0B0E26;
text-align: center;
margin-bottom: 8rpx;
}
.remaining-days { .days-left {
font-size: 40rpx; display: flex;
font-weight: bold; align-items: baseline;
color: #D42E78; justify-content: center;
text-align: center;
margin-bottom: 8rpx;
}
.days-unit { .days-num {
font-size: 20rpx; font-size: 72rpx;
color: #D42E78; color: #D42E78;
text-align: center; font-weight: bold;
line-height: 1;
}
.days-unit {
font-size: 24rpx;
color: #606060;
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;
}
}
} }
} }
} }

94
pages/index/index.vue
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
// 处理数据，计算剩余天数和状态
const processedRows = rows.map(it => {
// 计算剩余天数
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';
}
return {
...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) { if (this.pageNum === 1) {
this.featurePageList = rows this.featurePageList = filteredRows;
} else { } else {
this.featurePageList = [...this.featurePageList, ...rows] this.featurePageList = [...this.featurePageList, ...filteredRows];
} }
this.total = total this.total = total;
this.finished = this.featurePageList.length >= total this.finished = this.featurePageList.length >= total;
this.pageNum++ 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>