daoshiyuyue-teacher/pages/mine/shuangchuang_detail.vue

<template>
	<view class="scdetail">
		<!-- <view class="tab">
			<view v-for="(item,index) in tab_list" :key='index' :class="current_tab==item.id ? 'active-item' : 'item'"
				@click="changTab(item.id)">
				<view class="week">
					{{item.name}}
				</view>
				<text class="line" v-if="current_tab==item.id">
				</text>
			</view>
		
		</view> -->
		<!-- <view class="info" v-if="current_tab==0">
			<view class="title">
				项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="yaoqiu" v-if="current_tab==1">
			
		</view>
		<view class="stu" v-if="current_tab==2">
			
		</view> -->
		<view class="detail_info">
			<view class="title">
				{{detail.title}}
			</view>
			<view class="info_wrap">
				<view class="tea item">
					<text>导师：</text><text class="content">{{detail.truename}}</text>
				</view>

				<view class="subject item">
					<text>学科：</text><text class="content">{{detail.subject}}</text>
				</view>
				<view class="" v-if="detail.is_student">
					<view class="start_time item">
						<text>报名开始时间：</text><text class="content">{{getTime(detail.apply_start_time)}}</text>
					</view>
					<view class="end_time item">
						<text>报名结束时间：</text><text class="content">{{getTime(detail.apply_end_time)}}</text>
					</view>
					<view class="num item">
						<text>报名人数/招收人数：</text><text
							class="content">{{detail.sign_up_count}}/{{detail.student_nums}}</text>
					</view>
				</view>

			</view>

		</view>
		<view class="jieshao">
			<view class="info_title">
				<view class="line"></view>
				<text>项目介绍</text>
			</view>
			<view class="content">
				<view class="empty"  v-if="!detail.body">
					<u-empty text="暂无内容哦!" mode="list"></u-empty>
				</view>
				<u-parse :html="detail.body"></u-parse>

			</view>
		</view>
		<view class="jieshao"  v-if="detail.is_student">
			<view class="info_title">
				<view class="line">

				</view>
				<text>招收要求</text>
			</view>
			<view class="content">
				<view class="empty" v-if="!detail.conditions">
					<u-empty text="暂无内容哦!" mode="list" ></u-empty>
				</view>
				<u-parse :html="detail.conditions"></u-parse>
			</view>
		</view>
		<view class="jieshao zhaosheng" v-if="detail.is_student">
			<view class="info_title">
				<view class="line">

				</view>
				<text>报名学生</text>
			</view>
			<view class="stu_wrap">
				<view class="empty" v-if="studentList.length==0">
					<u-empty text="暂无学生报名哦!" mode="list" ></u-empty>
				</view>
				<view class="list_content" v-for="(item,index) in studentList" :key='index'
					@click="student_detail(item.student.id)">
					
					<view class="top">
						<view class="headimg">
							<image :src="item.student.headimg" mode="aspectFill"></image>
							<view class="name">
								{{item.student.truename}}
							</view>
						</view>
						
					</view>
				</view>
				
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: '',
				studentList: [], //报名学生
				information_id: '', //项目id
				is_part: false, //是否报名 false 未报名，true 已报名
				tab_list: [{
					name: '项目信息',
					id: 0
				}, {
					name: '招生要求',
					id: 1
				}, {
					name: '报名学生',
					id: 2
				}],
				current_tab: 0,
				list: []
			}
		},
		async onLoad(options) {
			console.log(this.$store.state.vuex_user, 'this.$store.state.vuex_user')
			this.innovation_id = options.id
			console.log(options, 'option')
			await this.getDetail(options.id)
			this.getList(this.innovation_id )
		},
		methods: {
			changTab(id) {
				console.log(id, 'idididdiS')
				this.current_tab = id
				this.page = 1
				this.last = false
				// this.getList()
			},
			async getDetail(id) {
				this.$u.get('/innovation/info/' + id).then(res => {
					this.detail = res.data
					console.log(this.detail, 'detail')
					// this.studentList = res.data.activity

				})
			},
			//截取时间
			getTime(time) {
				if (!time) return '--'
				else return time.split(' ')[0]
			},
			async getList(id) {
				// 报名列表信息接口
				await this.$u
					.get('/innovation//sign-up', {
						innovation_id: id
					})
					.then(res => {
						uni.hideLoading();
						console.log(res.data, '报名列表数据');
						this.studentList = res.data.list
					});
			},
			student_detail(id){
				uni.navigateTo({
					url:'../student/details?id=' +id
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #F7F7F7;
	}

	.scdetail {
		padding-bottom: 20px;

		.tab {
			display: flex;
			align-items: center;
			width: 80%;
			margin: 0 auto;

			.item,
			.active-item {
				margin-top: 17px;

				view {
					display: block;
				}

				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: rgba(113, 113, 113, .43);
				opacity: 0.43;
				opacity: 1;
				flex: 1;
				text-align: center;

				.week {
					padding-bottom: 12px;
				}

				.line {
					width: 30px;
					height: 4px;
					background: #3B7653;
					opacity: 1;
					border-radius: 2px;
					display: block;
					margin: 0 auto;

				}
			}

			.active-item {
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #3B7653;

				.week {
					padding-bottom: 8px;
				}

			}
		}

		.info {
			padding: 15px;

			.title {
				font-size: 16px;
				color: #333;
			}
		}

		.yaoqiu {
			padding: 15px;
		}

		.stu {
			padding: 15px;
		}

		.detail_info {
			padding: 15px;
			background-color: #fff;

			.title {
				font-size: 16px;
				font-weight: 550;
				color: #333;
			}

			.info_wrap {
				margin-top: 10px;

				.item {
					color: #666;
					line-height: 22px;
					font-size: 14px;
				}

				.num {
					.content {
						// font-size: 16px;
						font-weight: 550;
						color: #3B7653;
					}
				}
			}
		}

		.jieshao {
			margin-top: 10px;
			background-color: #fff;
			padding: 15px;

			.info_title {
				padding-bottom: 10px;
				font-size: 16px;
				display: flex;
				align-items: center;
				.line {
					display: inline-block;
					margin-right: 5px;
					height: 11px;
					width: 3px;
					background-color: #3B7653;
					vertical-align: middle;
					// margin-top: 1px;
				}
				text{
					display: inline-block;
					vertical-align: middle;
				}
			
			}

			.content {
				text-align: justify;
				word-break: break-all;
				word-wrap: break-word;
			}
		}

		.zhaosheng {
			.stu_wrap {
				display: flex;
				flex-wrap: wrap;
				margin: 0 -5px;
				.empty{
					width: 100%;
				}
				.list_content {
					flex-shrink: 0;
					background-color: #FFFFFF;
					border-radius: 5px;
					padding: 5px;
					position: relative;
					
					.top {

						.headimg {
								width: 60px;
							text-align: center;
							image {
								height: 44px;
								width: 44px;
								border-radius: 50%;
							}
							.name{
								display: block;
								color: #0C0C0C;
								font-style: normal;
								font-weight: 500;
								font-size: 13px;
							}

						}

						
					}

					.bottom {
						border-top: 0.5px solid #DDDDDD;
						display: flex;
						height: 63px;
						line-height: 20px;
						margin: 6px 15px;
						padding: 10px 0;

						.left {
							width: 40px;
							color: #666666;
							font-size: 13px;
							opacity: 0.8
						}

						.right {
							width: 260px;
							overflow: hidden; //超出部分隐藏
							text-overflow: ellipsis; //超出部分使用省略号
							display: -webkit-box; //布局
							-webkit-line-clamp: 2;
							line-clamp: 2; //设置两行显示
							-webkit-box-orient: vertical;
							word-break: break-all;
						}
					}
				}
			}
		}

		.active_btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 60px;
			margin-top: 60px;
			left: 0;
			background-color: #FFFFFF;
			line-height: 50px;
			border-top: solid 1px #DDDDDD;
			text-align: center;

			.bt {
				height: 40px;
				margin-top: 10px;
				background: #138E57;
				border-radius: 25px;
				font-size: 16px;
				text-align: center;
				width: 80%;
				line-height: 40px;
				display: inline-block;
				color: #FFFFFF;
			}

			.bt1 {
				height: 40px;
				margin-top: 10px;
				background: #F5F5F5;
				border-radius: 25px;
				font-size: 16px;
				text-align: center;
				width: 80%;
				line-height: 40px;
				display: inline-block;
				color: #666666;
			}
		}
	}
</style>