daoshiyuyue-teacher/pages/activity/details.vue

<template>
	<view class="news_detail">
		<!-- <view class="top">
			<u-navbar title="活动详情" :background="background" :border-bottom='false' title-color='#fff'></u-navbar>
		</view> -->
		<view class="title">
			{{notice.title}}            
		</view>
		<view class="person">
				发布人：{{notice.admin_name}}
		</view>
		<view class="time">
			{{notice.created_at}}
		</view>
		<view class="top">
			<u-parse :html="notice.body"></u-parse>
		</view>
		<!-- 如果有管理员要做权限的话  (this.role_id == 1 || this.role_id == 2) -->
		<view class="active_someone" v-show="(this.studentList.length > 0 && this.ids == this.admin_id)">
			<view class="headers">
				他们刚刚报名了活动：
			</view>
			<view class="bodys" >
				<view class="sames" v-for="(item,index) in studentList" :key="index">
					<image class="avator" :src="item.student.headimg" mode=""></image>
					<view class="names">
						{{item.student.truename}}
					</view>
				</view>
			</view>
			<!-- <view class="empty">
				<view class="enptyStatus">
					<image src="../../static/empty.png" mode=""></image>
					<view class="words">
						暂无报名信息
					</view>
				</view>
			</view> -->
		</view>
		<!--  如果有超级管理员要做权限的话 (this.role_id == 1 || this.role_id == 2) -->
		<view v-show="(this.studentList.length > 0 && this.ids == this.admin_id)" class="active_btn" @click="changeActive">
			查看报名信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				notice: '',
				list_id:'',
				studentList:[],
				ids:'',
				admin_id:'',
				role_id:'',
			}
		},
		async onLoad(options) {
			if (this.is_weixin()) {
				this.navTitle()
			}
			this.list_id = options.id
			console.log(options)
			await this.$u.get('/inform/information/' + options.id).then(res => {
				this.notice = res.data
			})
			console.log(this.notice.admin_id, 'admin_id')
			this.admin_id = this.notice.admin_id
			this.ids = this.vuex_user.id
			this.role_id = this.vuex_user.role_id
			console.log(this.vuex_user, '拿到所有信息000')
			console.log(this.ids, '拿到所有信息1111')
			console.log(this.role_id, '拿到所有信息222')
			this.getList()
		},
		// onShow(){
		// 	this.getList()
		// },
		methods: {
			//判断是否是微信
			is_weixin() {
				let ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') != -1;
			},
			navTitle() {
				let navTitle = document.getElementsByTagName('uni-page-head');
				navTitle[0].style.display = 'none'
			},
			// getInformation(){
			// 	uni.getStorage({
			// 		ids = 
			// 	})
			// },
			async getList() {
				// let vuex_user
				// uni.getStorage({
				// 	vuex_user : 'vuex_user'
				// })
				// this.ids = this.$u.vuex_user
				// 报名列表信息接口
				await this.$u
					.get('/inform/information-activity', {
						information_id: this.list_id
					})
					.then(res => {
						uni.hideLoading();
						console.log(res.data, '报名列表数据');
						this.studentList = res.data.list;
					});
				
			},
			
			// 查看报名信息
			changeActive(){
				console.log(this.list_id, '学生信息id')
				uni.navigateTo({
					url:'./details_list?student_id=' + this.list_id 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news_detail{
		padding: 16px;
		.title{
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
			color: #1A1A1A;
			line-height: 24px;
			opacity: 1;
			text-align: center;
		}
		.person{
			text-align: center;
			margin-top: 8px;
			font-weight: 400;
			line-height: 14px;
			font-size: 12px;
			color: #858585;
			opacity: 0.8;
		}
		.time{
			text-align: center;
			margin-top: 4px;
			font-weight: 400;
			line-height: 14px;
			font-size: 12px;
			color: #858585;
			opacity: 0.8;
		}
		
		.top{
			margin-top: 15px;
			line-height: 24px;
			font-size: 15px;
			// text-indent: 2em;
		}
		.active_someone{
			margin-bottom: 80px;
			// height: 110px;
			.enptyStatus{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 30px 10px;
				image{
					width: 80px;
					height: 110px;
				}
				.words{
					color: #ffae21;
					font-size: 14px;
					padding-top: 10px;
				}
			}
			border-radius: 8px;
			background: rgba($color: #DBECE4, $alpha: 0.3);
			.headers{
				height: 18px;
				font-size: 13px;
				color: #138E57;
				font-weight: 500;
				// : 11px 0 13px 15px;
				margin-left: 15px;
				padding-top: 11px;
				margin-bottom: 11px;
			}
			.bodys{
				margin: 10px;
				// margin-bottom: 50px;
				max-height: 170px;
				overflow-y: hidden;
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap;
				.sames{
					height: 50px;
					margin: 15px 8px;
					// width: 38px;
					text-align: center;
					.avator{
						width: 32px;
						height: 32px;
						border-radius: 50%;
					}
					.names{
						font-size: 12px;
						line-height: 17px;
						color: #858585
					}
				}
			}
			
		}
		.active_btn{
			position: fixed;
			bottom: 30px;
			padding: 0 80px;
			left: 16%;
			height: 40px;
			margin-top: 50px;
			background: #138E57;
			border-radius: 25px;
			font-size: 16px;
			text-align: center;
			line-height: 40px;
			color: #FFFFFF;
		}
	}
</style>