373 lines
10 KiB
Vue
373 lines
10 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<view class="bg-white progress-box margin-bottom-sm" style="height: 600rpx;border-radius: 0 0 36rpx 36rpx;"
|
|
:style="{'padding-top': statusBaeHeight + 'px'}">
|
|
<process v-model="processNum" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="335"
|
|
start_color="#FEE034" end_color="#71F4B4" :total="activity.activityTarget"></process>
|
|
<view class="progress-text">
|
|
<view class="margin-bottom-sm">距离达成目标还剩</view>
|
|
<view class="text-red margin-bottom-lg">
|
|
<text v-if="activity.remainingBeerCount <= 0" style="font-size: 48rpx;">已达标</text>
|
|
<template v-else>
|
|
<text class="text-sl text-bold">{{ activity.remainingBeerCount || 0}}</text>桶
|
|
</template>
|
|
</view>
|
|
<view>累积截止 {{ activity.endDate }}</view>
|
|
</view>
|
|
<view class="tab-box">
|
|
<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">活动信息</view>
|
|
<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">累积记录</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="currentTab == 1">
|
|
<view class="bg-white padding margin-bottom-sm" style="border-radius:36rpx;">
|
|
<view class="flex justify-between align-center margin-bottom" @click="toBrand">
|
|
<image :src="activity.beers[0].breweryLogo" class="margin-right"
|
|
style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image>
|
|
<view class="flex-1">
|
|
<view style="color:#979797">活动发起方</view>
|
|
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activity.beers[0].brandName}}</view>
|
|
</view>
|
|
<view class="cuIcon-right"></view>
|
|
</view>
|
|
<template v-if="currentTab == 1">
|
|
<view class="margin-bottom-xs" style="color:#0B0E26">首次扫码开始累计 · <text style="color: #DE3C4B;">{{activity.duration}} 天内</text></view>
|
|
<view class="margin-bottom-xs" style="color:#0B0E26">以下酒款累计扫码 ≥ {{activity.activityTarget}} 桶 </view>
|
|
</template>
|
|
|
|
<rowBeer :beers="activity.beers" />
|
|
</view>
|
|
<!-- 1 商品 2 啤酒币 -->
|
|
<view v-if="activity.activityRewardType == 1" class="bg-white padding margin-bottom-sm"
|
|
style="border-radius:36rpx;">
|
|
<view class="margin-bottom-sm" style="color: #0B0E26;">挑战奖励</view>
|
|
<view v-if="activity.activityRewardGoods" class="flex align-center">
|
|
<image :src="activity.activityRewardGoods.goodsCover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
|
<view class="flex-1">
|
|
<view class="flex flex-1 align-center">
|
|
<view class="flex-1">
|
|
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activity.activityRewardGoods.goodsName}}</view>
|
|
<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
|
|
<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
|
|
</view>
|
|
<view class="text-red text-right">x<text class="text-xxl text-bold">{{activity.activityRewardCount}}</text></view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="activity.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
|
|
style="border-radius:36rpx;">
|
|
<view class="margin-bottom-sm">奖励</view>
|
|
<view class="flex align-center">
|
|
<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
|
|
style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
|
|
<view class="flex flex-1 align-center">
|
|
<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
|
|
<view class="text-red text-right">x<text
|
|
class="text-xxl text-bold">{{ activity.activityRewardCount }}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
<template v-else>
|
|
<view v-if="logs && logs.length > 0" class="log-box">
|
|
<view class="log-item flex justify-between align-center" v-for="(it, index) in logs">
|
|
<view class="left">
|
|
<view class="time">{{ it.date}}</view>
|
|
<view class="title">{{ it.operation}}</view>
|
|
</view>
|
|
<text v-if="it.percent != null">{{it.percent || 0}}%</text>
|
|
</view>
|
|
</view>
|
|
<view v-else class="empty">
|
|
暂无记录
|
|
</view>
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<view class="bg-white flex justify-center align-start padding-top"
|
|
style="border-radius:36rpx 36rpx 0 0;height: 182rpx;width: 100%;position: fixed;bottom:0;gap:50rpx">
|
|
<!-- 活动未开始 -->
|
|
<!-- <template v-if="true">
|
|
<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;" @click="handleScan">
|
|
<text class="cuIcon-qr_code margin-right-xs"></text>
|
|
扫桶标自动开始累计
|
|
</view>
|
|
</template> -->
|
|
<template>
|
|
<view class="flex flex-col justify-center align-start">
|
|
<text style="color: #606060;font-size: 28rpx;margin-bottom: 8rpx;">活动状态</text>
|
|
<text v-if="!reward" style="color: #FDCA40;font-size: 28rpx;">累计中</text>
|
|
<text v-if="reward && reward.rewardStatus == 0" style="color: #4E63E0;font-size: 28rpx;">待确认</text>
|
|
<text v-if="reward && reward.rewardStatus == 1" style="color: #D42E78;font-size: 28rpx;">已确认</text>
|
|
</view>
|
|
<view v-if="!reward" class="bottom-btn" @click="toScan">
|
|
<text class="cuIcon-qr_code margin-right-xs"></text>
|
|
扫码累计
|
|
</view>
|
|
<view v-if="reward && reward.rewardStatus == 0" class="bottom-btn"
|
|
@click="confirmPay"
|
|
>
|
|
确认对付完成
|
|
</view>
|
|
<view v-if="reward && reward.rewardStatus == 1" class="bottom-btn" style="background-color: #efefef;color:#333"
|
|
|
|
>
|
|
对付已确认
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
myJoinDetailApi,
|
|
confirmPayApi
|
|
|
|
} from '@/api/user.js'
|
|
import process from './components/progress.vue';
|
|
import rowBeer from '@/components/rowBeer.vue'
|
|
export default {
|
|
components: {
|
|
process,
|
|
rowBeer
|
|
},
|
|
data() {
|
|
return {
|
|
statusBaeHeight: 40,
|
|
batchId: '',
|
|
activity: {},
|
|
logs:[], // 累积记录
|
|
currentTab: 1,
|
|
reward: null
|
|
};
|
|
},
|
|
onLoad({
|
|
batchId
|
|
}) {
|
|
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
|
this.batchId = batchId
|
|
this.init()
|
|
},
|
|
computed: {
|
|
processNum() {
|
|
if(this.activity.remainingBeerCount != null && this.activity.activityTarget) {
|
|
return (this.activity.activityTarget - this.activity.remainingBeerCount) / this.activity.activityTarget * 100
|
|
// return (this.activity.remainingBeerCount / this.activity.activityTarget).toFixed(0) * 100
|
|
}else {
|
|
return 0
|
|
}
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
myJoinDetailApi(this.batchId).then(res => {
|
|
this.activity = res.data.activity
|
|
this.reward = res.data.reward
|
|
this.logs = res.data.logs
|
|
this.activity.remainingDays = this.getRemainingDays(res.data.activity.endDate)
|
|
})
|
|
},
|
|
changeTab(index) {
|
|
this.currentTab = index
|
|
},
|
|
// 跳转 品牌方
|
|
toBrand() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/brandHome?breweryId=' + this.activity.breweryId
|
|
})
|
|
},
|
|
|
|
// 计算剩余天数
|
|
getRemainingDays(date) {
|
|
const targetDate = new Date(date);
|
|
const currentDate = new Date();
|
|
const timeDiff = targetDate.getTime() - currentDate.getTime();
|
|
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
|
return remainingDays;
|
|
},
|
|
handleScan() {
|
|
uni.scanCode({
|
|
success: (res) => {
|
|
console.log(res)
|
|
uni.navigateTo({
|
|
url: '/pagesActivity/scanResult?result=' + res.result
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 确认兑付
|
|
confirmPay() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认兑付完成？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
|
|
confirmPayApi(this.reward.id).then(res => {
|
|
uni.showToast({
|
|
title: '确认成功',
|
|
icon: 'success',
|
|
})
|
|
this.init()
|
|
})
|
|
}
|
|
},
|
|
})
|
|
|
|
},
|
|
toScan() {
|
|
uni.switchTab({
|
|
url: '/pages/index/scan'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
// overflow-y: auto;
|
|
min-height: 100vh;
|
|
padding-bottom: 200rpx;
|
|
|
|
.progress-box {
|
|
position: relative;
|
|
|
|
.progress-text {
|
|
position: absolute;
|
|
top: 200rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.tab-box {
|
|
position: absolute;
|
|
width: 674rpx;
|
|
top: 475rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 12rpx;
|
|
background: #F2F2F2;
|
|
padding: 8rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.defTab {
|
|
width: 50%;
|
|
border-radius: 12rpx;
|
|
background: #F2F2F2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
padding: 16rpx 48rpx;
|
|
}
|
|
|
|
.active {
|
|
background-color: #4E63E0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
white-space: nowrap;
|
|
height: 490rpx;
|
|
|
|
.beer-box {
|
|
width: 208rpx;
|
|
background: #FFFFFF;
|
|
margin-right: 28rpx;
|
|
margin-bottom: 36rpx;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
|
|
&:nth-child(1) {
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.cover {
|
|
width: 208rpx;
|
|
height: 300rpx;
|
|
border-radius: 30rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #1E2019;
|
|
margin-bottom: 12rpx;
|
|
color: #19191B;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
color: #A5A7B9;
|
|
margin-bottom: 12rpx;
|
|
color: #979797;
|
|
}
|
|
|
|
.num {
|
|
|
|
font-size: 20rpx;
|
|
color: #5F5F63;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 奖励盒子
|
|
.reward-box {
|
|
background: #FFFFFF;
|
|
border-radius: 30rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 36rpx;
|
|
}
|
|
|
|
.log-box {
|
|
padding: 24rpx 36rpx;
|
|
background: #FFFFFF;
|
|
.log-item {
|
|
margin-bottom: 32rpx;
|
|
.time {
|
|
font-size: 28rpx;
|
|
color: #606060;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.title{
|
|
color:#4E63E0;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
.empty{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #A5A7B9;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
.bottom-btn {
|
|
width: 434rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
background: #4E63E0;
|
|
}
|
|
</style> |