ec.uniapp-master/pages/index/activity/detail.vue

<template>
	<view>
		<lf-nav title="活动详情" :showIcon="true"></lf-nav>
		<view class="content" v-if="$isRight(activity_details)">
			<view class="title">{{activity_details.name}}</view>
			<view class="level2-title">
				{{activity_details.username}}
			</view>
			<view class="level3-title">
				<text>活动时间：</text>
				<text class="color1">{{activity_details.time_start}}~{{activity_details.time_end}}</text>
			</view>
			<view class="level3-title">
				<text>报名时间：</text>
				<text class="color2">{{activity_details.apply_start}}~{{activity_details.apply_end}}</text>
			</view>
			<view class="level3-title lf-flex">
				<text>活动内容：</text>
				<rich-text :nodes="activity_details.content" v-if="activity_details.content"></rich-text>
			</view>
			<view class="level3-title">
				<text>活动人数：</text>
				<text class="color2">{{activity_details.member_count}}人</text>
			</view>
			<view class="level3-title">
				<text>活动报名：</text>
				<text class="color1" v-if="activity_details.price == 0">免费</text>
				<text class="color1" v-else>{{activity_details.price}}</text>
			</view>
			<view class="level3-title lf-flex">
				<view>活动规则：</view>
				<view class="color2">
					<view>{{activity_details.rule}}</view>
				</view>
			</view>
			<button v-if="enter_type==0" class="btn" 
				hover-class="lf-opacity" 
				:disabled="is_end" 
				:class="{'lf-opacity': is_end}"
				@click="submit">{{ is_end ? '名额已满' : '立即报名' }}
			</button>
			
			<button v-if="activity_details.apply != null" class="btn lf-opacity"
				:disabled="true" 
				>
				已经报名
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				is_end: false ,// 是否可报名，false为活动为结束可报名，否则不可报名
				activity_id: 0,
				activity_details: '',
				enter_type: 0
			}
		},
		onLoad(e){
			this.activity_id = e.activity_id;
			this.enter_type = e.enter_type;
			if(e.is_end == 0) {
				this.is_end = false;
			}else {
				this.is_end = true;
			}
			console.log('传来的type',this.is_end);
			this.getActivityDetails();
		},
		methods: {
			getActivityDetails() {
				this.$http
				    .get({
				        api: 'api/activity/detail',
						data: {
							activity_id: this.activity_id
						},
						header: {
						   Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
				        if (res.data.code == 200) {
				            if (res.data.status) {
				        		this.activity_details = res.data.data;
				               console.log('活动详情',this.activity_details);
				            } else {
				                wx.showModal({
				                    content: res.message || '请下拉页面刷新重试',
				                    showCancel: false
				                });
				            }
				        } else {
				            wx.showModal({
				                content: '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			submit(){
				if(this.is_end) return;
				this.$url('/pages/index/activity/confirm?activity_id='+this.activity_id);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		width: 750rpx;
		height: max-content;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			color: #222222;
			font-weight: bold;
			min-height: 100rpx;
		}
		.level2-title{
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.level3-title{
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #777777;
		}
		.btn{
			width: 550rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #15716E;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			margin-top: 60rpx;
		}
	}
	.color1{
		color: #F63434;
	}
	.color2{
		color: #222222;
	}
</style>