273 lines
6.7 KiB
Vue
273 lines
6.7 KiB
Vue
<template>
|
||
<view class="activity-item flex" v-if="isActivityVisible" @click="handleClick">
|
||
<view class="left">
|
||
<image :src="item.brandLogo"></image>
|
||
<view class="status-content">
|
||
<text v-if="activityState === 'recruiting' && item.remainingDays > 0">招募剩余天数</text>
|
||
<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0">活动招募已结束</text>
|
||
<text v-else-if="activityState === 'inProgress'">距离达成还剩</text>
|
||
<view class="status-box">
|
||
<template v-if="activityState === 'recruiting' && item.remainingDays > 0">
|
||
<view class="days-left">
|
||
<text class="days-num">{{item.remainingDays}}</text>
|
||
<text class="days-unit">天</text>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="activityState === 'recruiting' && item.remainingDays <= 0">
|
||
<view class="status-text">
|
||
<view class="end-date">{{formatDate(item.endDate)}}</view>
|
||
<view>已结束</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="activityState === 'inProgress'">
|
||
<view v-if="item.remainingBeerCount > 0" class="beer-count">
|
||
<text>{{item.remainingBeerCount}}</text>
|
||
<text>桶</text>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="activityState === 'completed'">
|
||
<view class="status-text">
|
||
{{!item.barAwardStatus ? '待兑付' : '已完成'}}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="title">{{ item.breweryName }}</view>
|
||
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{item.duration}}天内</text></view>
|
||
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ item.activityTarget}}桶</view>
|
||
<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img">
|
||
<view class="beer-box" v-for="(beer, beerIndex) in item.beers" :key="beerIndex" @click.stop="handleReview(beer)">
|
||
<image v-if="beer.cover" :src="beer.cover" class="cover"></image>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="flex align-center">
|
||
<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
|
||
<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
|
||
<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
|
||
<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'activity-item',
|
||
props: {
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
created() {
|
||
console.log('ActivityItem created', this.item)
|
||
},
|
||
mounted() {
|
||
console.log('ActivityItem mounted', this.item)
|
||
},
|
||
computed: {
|
||
// 判断活动是否可显示
|
||
isActivityVisible() {
|
||
// 获取用户所在城市
|
||
const userCity = uni.getStorageSync('userCity');
|
||
// 未登录用户或未设置城市的用户，只显示全国活动
|
||
if (!userCity) {
|
||
return this.item.city === '全国';
|
||
}
|
||
// 已登录用户，显示全国活动和所在城市的活动
|
||
return this.item.city === '全国' || this.item.city === userCity;
|
||
},
|
||
activityState() {
|
||
if (this.item.activityStatus === 1) {
|
||
return 'recruiting';
|
||
} else if (this.item.activityStatus === 2) {
|
||
return 'inProgress';
|
||
} else if (this.item.activityStatus === 3) {
|
||
return 'completed';
|
||
}
|
||
return '';
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
console.log('ActivityItem clicked', this.item)
|
||
this.$emit('click', this.item)
|
||
},
|
||
handleReview(beer) {
|
||
console.log('ActivityItem review clicked', beer)
|
||
this.$emit('review', beer)
|
||
},
|
||
formatDate(dateString) {
|
||
if (!dateString) return '';
|
||
const date = new Date(dateString);
|
||
const year = date.getFullYear();
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||
const day = date.getDate().toString().padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 活动项容器样式 */
|
||
.activity-item {
|
||
position: relative;
|
||
width: 702rpx;
|
||
margin-bottom: 48rpx;
|
||
|
||
// &:last-child {
|
||
// margin-bottom: 0;
|
||
// }
|
||
|
||
.right {
|
||
width: 702rpx;
|
||
min-height: 428rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx 24rpx 24rpx 200rpx;
|
||
box-sizing: border-box;
|
||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 48rpx;
|
||
color: #0B0E26;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.sub {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 40rpx;
|
||
color: #0B0E26;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.scroll-img {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
white-space: nowrap;
|
||
height: 144rpx;
|
||
margin-bottom: 18rpx;
|
||
overflow-x: auto;
|
||
|
||
.beer-box {
|
||
width: 100rpx;
|
||
background: #FFFFFF;
|
||
margin-right: 20rpx;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -12rpx;
|
||
height: calc(100% + 24rpx);
|
||
width: 180rpx;
|
||
padding: 40rpx 24rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
box-sizing: border-box;
|
||
border: 1px solid #EFEDE9;
|
||
z-index: 1;
|
||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.status-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
text {
|
||
color: #606060;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
margin-bottom: 46rpx;
|
||
}
|
||
|
||
.status-box {
|
||
text-align: center;
|
||
|
||
.days-left {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
|
||
.days-num {
|
||
font-size: 72rpx;
|
||
color: #D42E78;
|
||
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;
|
||
|
||
.end-date {
|
||
font-size: 20rpx;
|
||
color: #606060;
|
||
font-weight: normal;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |