Applet/pages/activity/details.vue

<template>
	<view class="container">
		<image class="banner" :src="info.image" mode="scaleToFill"></image>
		<uni-section :title="info.topic" titleFontSize="18" type="line">
			<uni-list>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[0]" title="报名时间" :rightText="`${info.regStartTime}至${info.regEndTime}`"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[0]" title="活动时间" :rightText="`${info.startTime}至${info.endTime}`"></uni-list-item>
				<uni-list-item v-if="info.regMaxCount < 999" :show-extra-icon="true" :extra-icon="extraIcon[1]" title="招募人数" :rightText="info.regMaxCount || '不限' + '人'"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[1]" title="负责人" :rightText="info.sponsorName"></uni-list-item>
				<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon[2]" title="联系电话" :rightText="info.sponsorPhone"></uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section title="活动详情" titleFontSize="18" type="line">
			<rich-text image-menu-prevent="true" :nodes="info.description" class="content"></rich-text>
		</uni-section>
		<uni-goods-nav class="goodNav" :fill="true" :options="options" :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
	</view>
</template>

<script>
	import request from '../../api/activity.js';
	import { BASE_URL } from '../../env.js';
	export default {
		onLoad: function (option) {
			this.activityId = option.activityId;
		},
		data() {
			return {
				activityId: '',
				info: null,
				options: [],
				extraIcon: [
					{
						color: '#c60814',
						size: '22',
						type: 'calendar'
					},
					{
						color: '#c60814',
						size: '22',
						type: 'person-filled'
					},
					{
						color: '#c60814',
						size: '22',
						type: 'phone'
					}
				],
				buttonGroup: [
					{
					  text: '报名活动',
					  backgroundColor: '#ff0000',
					  color: '#fff'
					},
					{
					  text: '获取积分',
					  backgroundColor: '#ffa200',
					  color: '#fff'
					}
				],
				statusInfo: true
			}
		},
		mounted() {
			this.query();
		},
		methods: {
			async query() {
				const res = await request.getdetails({ activityId: this.activityId });
				const statusInfo = await request.getstatus({ activityId: this.activityId });
				res.data.image = BASE_URL.fileUrl + res.data.image;
				this.info = res.data;
				this.statusInfo = statusInfo.status
				const newDateTime = new Date().getTime();
				const endTime = Date.parse(res.data.regEndTime);
				const startTime = Date.parse(res.data.regStartTime);
				const startActiveTime = Date.parse(res.data.startTime);
				const endActiveTime = Date.parse(res.data.endTime);

				// 报名按钮状态设置
				if (!statusInfo.status && newDateTime > startTime && newDateTime < endTime) {
					this.buttonGroup[0].backgroundColor = '#ff0000';
					this.buttonGroup[0].text = '报名活动';
					delete this.buttonGroup[0].status
					delete this.buttonGroup[0].disable
					this.buttonGroup[1].disable = true;
					this.buttonGroup[1].backgroundColor = '#999';
				}
				if (statusInfo.status && newDateTime > startTime && newDateTime < endTime) {
					this.buttonGroup[0].backgroundColor = '#ffa200';
					this.buttonGroup[0].text = '取消报名';
					this.buttonGroup[0].status = true;
					delete this.buttonGroup[1].disable;
					this.buttonGroup[1].backgroundColor = '#ffa200';
				}
				if (newDateTime < startTime) {
					this.buttonGroup[0].backgroundColor = '#999';
					this.buttonGroup[0].text = '报名未开始';
					this.buttonGroup[0].disable = true;
				}
				if (newDateTime > endTime) {
					this.buttonGroup[0].backgroundColor = '#999';
					this.buttonGroup[0].text = '报名已结束';
					this.buttonGroup[0].disable = true;
				}

				// 活动状态及积分获取按钮状态
				if (res.data.status == 3) {
					this.buttonGroup[1].text = '活动已结束';
					this.buttonGroup[1].backgroundColor = '#999';
					this.buttonGroup[1].disable = true;
					this.buttonGroup[0].backgroundColor = '#999';
					this.buttonGroup[0].text = '报名已结束';
					this.buttonGroup[0].disable = true;

				}
				if(res.data.status == 0) {
					if(newDateTime < startActiveTime){
						this.buttonGroup[1].text = '活动未开始';
						this.buttonGroup[1].backgroundColor = '#999';
						this.buttonGroup[1].disable = true;		
					}
					// if(newDateTime > endActiveTime){
					// 	this.buttonGroup[1].text = '活动已结束';
					// 	this.buttonGroup[1].backgroundColor = '#999';
					// 	this.buttonGroup[1].disable = true;		
					// }
					if(statusInfo.status && newDateTime > startActiveTime){
						this.buttonGroup[1].text = '获取积分';
						this.buttonGroup[1].backgroundColor = '#ffa200';
						delete this.buttonGroup[1].disable;
					}
					if (!statusInfo.status && newDateTime < endActiveTime && newDateTime > startActiveTime){
						this.buttonGroup[1].text = '活动进行中';
						this.buttonGroup[1].backgroundColor = '#999';
						this.buttonGroup[1].disable = true;	
					}	
				}
			},
			buttonClick(e) {
				if (e.index == 0){
					if (e.content.disable) return;
					if (e.content.status) {
						this.offReport();
						return;
					};
					this.report();
				} else {
					if (e.content.disable) return;
					this.submitPhoto();
				}
			},
			async report() {
				const res = await request.report({ activityId: this.activityId });
				if (res.code == 200) {
					wx.showToast({
						title: '报名成功'
					})
					this.query();
				}
			},
			async offReport() {
				const res = await request.offReport({ activityId: this.activityId });
				if (res.code == 200) {
					wx.showToast({
						title: '取消报名成功'
					})
					this.query();
				}
			},
			async submitPhoto() {
				uni.navigateTo({ url: `/pages/activity/uploadFiel?activityId=${this.activityId}` })
			}
		}
	}
</script>

<style>
	.container {
		position: relative;
		padding-bottom: 12vw;
		background-color: #fff;
	}
	.banner {
		width: 100%;
		height: 50vw;
	}
	.content {
		display: block;
		width: 90%;
		margin: 10px auto;
	}
	.goodNav {
		width: 100%;
		height: 12vw;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>