jp-railway/pages/staffHome/activityCenter/activityDetail.vue

<template>
	<view>
		<u-navbar title="活动详情"></u-navbar>
		
		<view class="main" v-html="info.content">
			
		
		
		
		</view>
		<view class="bottom" v-if="!userInfo" >
					
					<u-button  @click="issueMethod()">未登录</u-button>
		</view>
		
		 <view class="bottom" v-else-if="info.status=='77d93870-e1e1-4369-b2b6-629e8645e8d9'" >
			<u-button  >活动已结束</u-button>
		 </view>
		 <view class="bottom" v-else   >
					<u-button  type="primary"  v-if="!info.isJoin"
					@click="enrollMethod()" >线上报名</u-button>
					
					<u-button v-else @click="cancelMethod()" >已报名</u-button>
					<!-- <u-button type="info">发布作品</u-button> -->
		 </view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/activity.js'
	
	export default {
		data() {
			return {
				userInfo:null,
				id:'',
				info:{},
			}
		},
		onLoad(op){
			this.userInfo=this.carhelp.getPersonInfo()
			console.log(this.userInfo)
			if(op.id){
				this.id=op.id
				this.getInfo()
			}
			
		},
		methods: {
			cancelActivity(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.cancelActivity(this.id).then((res) => {
					//this.list=response.data.data
					this.info.isJoin=false;
					uni.hideLoading();
					uni.showToast({
						title:"取消报名"
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			joinActivity(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.joinActivity(this.id).then((res) => {
					//this.list=response.data.data
					this.info.isJoin=true;
					uni.hideLoading();
					uni.showToast({
						title:"报名成功！"
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			cancelMethod(){
				
					var _this=this;
					uni.showModal({
						title:_this.info.title,
						content:"确认是否取消报名？",
						confirmText:"取消报名",
						showCancel:true,
						success: (res)=> {
							if(res.confirm){
								_this.cancelActivity()
							}
							
						}
					})
			},
			enrollMethod(){
				var _this=this;
				uni.showModal({
					title:_this.info.title,
					content:"确认是否参与本活动报名？",
					confirmText:"报名",
					showCancel:true,
					success: (res)=> {
						if(res.confirm){
							_this.joinActivity()
						}
						
					}
				})
			},
			issueMethod(){
				uni.showModal({
					title:"提示",
					content:"未登录,登录后参与分享活动",
					confirmText:"前往登录",
					showCancel:true,
					success: function (res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/login/index'
							})
						}
						
					
					}
				})
				
				
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.edit(this.id).then((res) => {
					
					uni.hideLoading();
					//this.list=response.data.data
					this.info=res.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
	}
	
	.main{
		margin: 24rpx 32rpx 0 32rpx;
		// 活动介绍
		.introduction{
			margin-top: 24rpx;
			font-family: 'Regular';
			.title{
				color: rgba(16, 16, 16, 1);
				font-size: 18px;
				line-height: 26px;
			}
			.content{
				color: rgba(51, 51, 51, 1);
				line-height: 24px;
				margin-top: 16rpx;
			}
		}
		
	// 活动时间
	.date{
		font-family: 'Regular';
		margin-top: 32rpx;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			line-height: 26px;
		}
		.item{
			margin-top:16rpx;
			display: flex;
			color: rgba(51, 51, 51, 1);
			line-height: 20px;
			.item-title{
				margin-right: 24rpx;
			}
			.name{
				width: 100rpx;
			}
		}
	}
	
	}
	// 积分获取
	.integral{
		margin-top: 32rpx;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			line-height: 26px;
			font-family: 'Regular';
		}
		.integral-group{
			margin-top: 24rpx;
			background-color: #fff;
			.item{
				display: flex;
				justify-content: space-between;
				line-height: 44px;
				padding-left: 16rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				border-bottom: solid 1px #e6e6e6;
				font-size: 14rpx;
				.value{
					width: 170rpx;
					text-align: center;
				}
			}
			.item1{
				color: rgba(16, 16, 16, 1);
				font-size: 16px;
			}
		}
	}
 
 
   .bottom{
	   padding: 16rpx 32rpx;
	   background-color: #fff;
	   position: fixed;
	   bottom: 0;
	   left: 0;
	   right: 0;
	   font-family: Arial;
	 
   }
  
</style>