zdtap-uniapp-main/pagesActivity/myActivityDetail.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: #909090;font-size: 28rpx;">活动状态</text>
					<text v-if="!reward" style="color: #FFD52B;font-size: 28rpx;">累计中</text>
					<text v-if="reward && reward.rewardStatus == 0" style="color: #FFD52B;font-size: 28rpx;">待确认</text>
					<text v-if="reward && reward.rewardStatus == 1" style="color: #FFD52B;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: #0B0E26;
					padding: 16rpx 48rpx;
				}

				.active {
					background-color: #71F4B4;
				}
			}
		}

		.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:#39E5B1;
					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-size: 28rpx;
		color: #FFFFFF;
		border-radius: 12rpx;
		background: #39E5B1;
	}
</style>