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

<template>
	<view>
		<u-navbar title="活动详情"></u-navbar>
		<view class="main" v-html="info.content">
			
		
		
		
		</view>
		<view class="bottom2" v-if="!userInfo" >
					
					<u-button type="info" @click="issueMethod()">未登录</u-button>
		</view>
		<view class="bottom2" v-else-if="info.status=='eaab19ae-893f-40e7-b730-85a13af00137'" >
					
					<u-button type="info">活动未开始</u-button>
		</view>
		 <view class="bottom2" v-else-if="info.status=='77d93870-e1e1-4369-b2b6-629e8645e8d9'" >
			
			<u-button type="info">活动已过期</u-button>
		 </view>
		 <view class="bottom" v-else @click="gotoUrl('pages/mine/issue?id='+info.id)" >
		 			<button>发布作品</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: {
			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;
	   uni-button{
		   border-radius: 8px;
		   background-color: rgba(31, 74, 153, 1);
		   color: rgba(255, 255, 255, 1);
		   font-size: 16px;
		   line-height: 40px;
		   
	   }
	   
   }
   .bottom2{
   	   padding: 16rpx 32rpx;
   	   background-color: rgba(243, 244, 244, 1);
   	   position: fixed;
   	   bottom: 0;
   	   left: 0;
   	   right: 0;
   	   uni-button{
   		   border-radius: 8px;
   		   background-color: rgba(255, 255, 255, 1);
   		   color: #303133;
   		   font-size: 16px;
   		   line-height: 40px;
   		   
   	   }
   	   
   }
</style>