137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<template>
|
||
<view class="activity-item flex" @click="handleClick">
|
||
<view class="left flex flex-col justify-between align-center">
|
||
<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
|
||
<text>活动状态</text>
|
||
<view v-if="item.audit_status == 0" style="color: #9E9E9E;font-size: 24rpx;">待审核</view>
|
||
<view v-if="item.audit_status == 2" style="color: #DE3C4B;font-size: 24rpx;">未通过</view>
|
||
<view v-if="item.audit_status == 1">
|
||
<block v-if="item.activity_status == 1">
|
||
<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募进行中</view>
|
||
<view>
|
||
<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>天
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view style="color: #9E9E9E;font-size: 24rpx;">活动已结束</view>
|
||
</block>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'activity-item',
|
||
props: {
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
this.$emit('click', this.item)
|
||
},
|
||
handleReview(beer) {
|
||
this.$emit('review', beer)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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;
|
||
|
||
.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> |