daoshiyuyue-teacher/pages/index/index.vue

<template>
	<view class="index">
		<!-- 实名认证弹框 -->
		<u-popup v-model="real_show" mode="center" border-radius="42" :mask-close-able=false>
			<view class="real_name">
				<image src="../../static/images/shiming.png" mode=""></image>
				<view class="title">
					完善您个人信息
				</view>
				<view class="text">
					根据学院要求，请尽快完善个人信息
					以免影响您后期的正常使用。
				</view>
				<view class="popup-bt">
					<view class="log_out" @click="log_out">
						退出登录
					</view>
					<view class="go_perfect" @click="go_perfect">
						去完善
					</view>
				</view>

			</view>
		</u-popup>
		<u-popup v-model="stu_show" mode="center" border-radius="42" width="85%">
			<view class="student-show">
				<view class="stu-title">
					学生基本信息
				</view>
				<view class="stu-mess">
					<image :src="stu_detail.student ? stu_detail.student.headimg : '../../static/images/avator.png'"
						mode="">
					</image>
					<view class="right">
						<view class="stu-text">
							姓名：{{stu_detail.student?stu_detail.student.truename:'--'}}
						</view>
						<view class="stu-text">
							学号：{{stu_detail.student?stu_detail.student.account:'--'}}
						</view>
						<view class="stu-text">
							班级：{{stu_detail.student &&stu_detail.student.grade  ? stu_detail.student.grade.name :'--'}}
						</view>
						<!-- <view class="stu-text">
							手机号：{{stu_detail.student ? stu_detail.student.mobile :'--'}}
						</view> -->

					</view>
				</view>
				<view class="e-mail">
					<u-icon name="email"></u-icon>：{{stu_detail.student ? stu_detail.student.email : '--'}}
				</view>
				<view class="remark-title">
					{{stu_detail.student?stu_detail.student.sex==2?"她":"他":'--'}}的备注
				</view>
				<view class="remark">
					{{stu_detail.remark?stu_detail.remark:'暂无'}}
				</view>
			</view>

		</u-popup>
		<view class="top">
			<view class="wrap">
				<u-swiper :list="swiper_list" :border-radius='24' :height="280" @click="clickSwiper"></u-swiper>
			</view>
			<!-- 通知公告 -->
			<view class="ad" v-if="notice">
				<view class="left">
					{{notice.title}}
				</view>
				<view class="right" @click="adDetail(notice.id)">
					前往查看
				</view>
			</view>
		</view>

		<view class="content">
			<view class="content-top">
				<view class="title">
					新闻资讯
					<view class="shadow">
						NEWS
					</view>
				</view>

				<view class="date" @click="toNews()">
					<view class="">
						<view class="uni-input">查看更多 <u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="news" v-if="news.length && news.length>0">
				<view class="list-item" @click="adDetail(item.id)" v-for="(item,index) in news" :key='index'>
					<view class="tips" v-if="item.category_id==2">
						<text>已报名人数：</text> <text
							class="sign-num">{{item.sign_up_count}}/{{item.max_sign_up_count}}</text>
					</view>
					<view class="image"
						:style="{backgroundImage:'url('+ (item.cover_resource ? item.cover_resource.url : '../../static/images/avator.png') +')'}">

					</view>
					<!-- <image :src="item.cover_resource ? item.cover_resource.url : '../../static/images/avator.png'"
						mode="">
					</image> -->
					<view class="right">
						<view class="title">
							{{item.title? item.title :'--'}}
						</view>
						<view class="text">
							<text class="tag" v-for="(tag,index) in item.tags" :key='index'>{{tag}}</text>
						</view>
						<view class="time">
							<view class="">
								<u-icon name="clock-fill"></u-icon>{{getTime(item.created_at)}}
							</view>
							<view class="">
								<u-icon name="eye-fill"></u-icon>{{item.view_count? item.view_count :'--'}}
							</view>
							<view class="">
								<u-icon name="account-fill"></u-icon>{{item.admin_name? item.admin_name :'--'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<view class="enptyStatus">
					<image src="../../static/empty.png" mode=""></image>
					<view class="words">
						暂无本草时讯
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="content-top">
				<view class="title">
					我的值班
					<view class="shadow">
						MY DUTY
					</view>
				</view>
				<view class="date" @click="show = true">
					<view class="">
						<picker mode="date" :value="day" @change="bindDateChange">
							<view class="uni-input">{{day ? day :'全部'}}</view>
						</picker>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="date1" v-if="day" @click="all">
					<view class="">
						全部
					</view>
				</view>
			</view>
			<view class="list" v-if="list.length>0">
				<view class="item" v-for="(item,index) in list " :key='index'>


					<view class="left">
						<view class="left-time" v-if="item.student">
							距离值班
							<text class="time">剩余{{item.zh_time}}</text>
						</view>
						<view class="left-time1" v-else>
							暂无人预约
						</view>

						<view class="left-tip1">
							<view class="text1">
								值班时间：
								<text>{{item.day}}（{{item.start_time}}--{{item.end_time}})）</text>
							</view>
							<!-- <view class="text1">
								日期　：
								<text>{{item.day}}</text>
							</view> -->
							<view class="text">
								值班教室
								<text>{{item.room_name}}</text>
							</view>
						</view>

					</view>
					<!-- <view class="right">
						<image src="../../static/images/index_class.png" mode=""></image>
					
					</view> -->
				</view>

			</view>
			<view class="empty" v-else>
				<view class="enptyStatus">
					<image src="../../static/empty.png" mode=""></image>
					<view class="words">
						暂无排班信息
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				swiper_list: [],
				list: [], //值班列表
				show: false,
				real_show: false, //实名认证弹窗
				stu_show: false, //学生信息弹框
				day: '', //排班日期
				teacher_id: '',
				notice: '', //通知公告
				stu_detail: '', //查看学生详情
				mine: '',
				swiper: [],
				news: []
			}
		},
		onLoad() {
			if (this.is_weixin()) {
				this.navTitle()
			}

			this.teacher_id = this.$store.state.vuex_user.type_id

			//this.getAdlist()
			//this.getSwiper()
			//this.getNewList()
			this.getHome()
		},
		onShow() {
			this.getList()
			this.$u.get('/base/auth/me').then(res => {
				this.mine = res.data
				if (res.data.type_model.is_register == 0) {
					this.real_show = true
				} else {
					this.real_show = false
				}
			})
		},
		methods: {
			//截取时间
			getTime(time) {
				if (!time) return '--'
				else return time.split(' ')[0]
			},
			toNews() {
				uni.switchTab({
					url: '../activity/index'
				})
			},
			//获取首页接口
			getHome() {
				this.$u.get('/page/teacher/home').then(res => {
					// console.log(res,'首页接口')
					let swiper = res.data.banners
					this.notice = res.data.notice
					this.news = res.data.news
					let arr = []
					swiper.map(item => {
						arr.push({
							image: item.cover_resource.url,
							title: item.name
						})
					})
					this.swiper_list = arr
				})
			},
			//点击轮播图跳转
			clickSwiper(index) {
				console.log(this.swiper[index], 'ppp----------------------------------')
				let item = this.swiper[index]
				if (item.click_type == 'Link') {
					window.location.href = item.click_body
				}
			},
			//判断是否是微信
			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'
			},
			//判断是否是微信
			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'
			},
			//日期筛选全部日期
			all() {
				this.day = ''
				this.getList()
			},
			//获取轮播图
			getSwiper() {
				this.$u.get('/base/banner').then(res => {
					// console.log(res, '轮播图')
					let swiper = res.data.list
					this.swiper = res.data.list
					let arr = []
					swiper.map(item => {
						arr.push({
							image: item.cover_resource.url,
							title: item.name
						})
					})
					this.swiper_list = arr
				})
			},
			//通知公告列表
			getAdlist() {
				this.$u.get('/inform/information', {
					category_id: 1,
					check_status: 1,
					page: 1
				}).then(res => {
					this.notice = res.data.list[0]
					// console.log(this.notice, '通知公告')
				})
			},
			//本草咨询
			getNewList() {
				this.$u.get('/inform/information', {
					check_status: 1,
					per_page: 3
				}).then(res => {
					this.news = res.data.list
				})
			},
			//通知公告详情
			adDetail(id) {
				console.log('ppp')
				uni.navigateTo({
					url: '../activity/details?id=' + id
				})
			},
			//获取值班列表
			getList() {
				let data = {
					teacher_id: this.teacher_id,
					day: this.day,
					eg_end: 1
				}
				this.$u.get('/mentor/scheduling', data).then(res => {
					// console.log(res, '我的值班信息')
					this.list = res.data.list
				})
			},
			//日期选择
			bindDateChange: function(e) {
				this.day = e.target.value
				this.getList()
			},
			//点击去实名认证
			go_perfect() {
				uni.navigateTo({
					url: './realname?type=1'
				})
			},
			//退出登录
			log_out() {
				this.$u.get('/base/auth/logout').then(res => {
					this.$u.vuex('vuex_token', '');
					this.$u.vuex('vuex_user', '');
					uni.reLaunch({
						url: '../login/index'
					})
				})
			},
			//查看学生
			stuDetail(item) {
				// console.log(item,'item')
				this.stu_show = true
				this.stu_detail = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F9F9FB;
	}

	.news {
		padding: 10px 0 0;

		.list-item {
			background: #FFFFFF;
			opacity: 1;
			border-radius: 12px;
			padding: 12px;
			position: relative;
			display: flex;
			align-items: center;
			margin-top: 8px;

			.tips {
				position: absolute;
				// width: 52px;
				display: inline-block;

				padding: 0 7px;
				text-align: center;
				background: #FFAA1D;
				top: 0;
				right: 0;
				opacity: 1;
				border-radius: 0px 4px 0px 4px;
				font-size: 8px;

				color: #fff;

				.sign-num {
					font-size: 12px;
					font-weight: 600;
				}
			}

			.image {
				flex: 0 0 60px;
				width: 60px;
				height: 60px;
				margin-right: 6px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.right {
				flex: 1;
				padding-left: 5px;
				overflow: hidden;
				width: calc(100% - 170px);

				view {
					height: 19px;
					line-height: 19px;
				}

				.title {
					width: 220px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #0C0C0C;
					opacity: 1;
					white-space: nowrap;
					/*设置不换行*/
					overflow: hidden;
					/*设置隐藏*/
					text-overflow: ellipsis;
					/*设置隐藏部分为省略号*/
				}

				.text {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 3px;
					width: 230px;
					white-space: nowrap;
					/*设置不换行*/
					overflow: hidden;
					/*设置隐藏*/
					text-overflow: ellipsis;

					/*设置隐藏部分为省略号*/
					.tag {
						display: inline-block;
						padding: 0 8px;
						color: #FFFFFF;
						background-color: #d13a2d;
						font-size: 10px;
						border-radius: 12px;
						margin-right: 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 100%;
					}
				}

				.time {
					display: flex;


					font-size: 10px;
					color: #858585;
					align-items: center;


					view:nth-child(2) {
						width: 50px;
						margin-left: 20px;
						margin-right: 10px;
					}
				}
			}
		}
	}

	//查看学生信息弹框
	.student-show {
		padding-bottom: 5px;

		.stu-title {
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			opacity: 1;
			text-align: center;
			padding: 20px 0 20px;
		}

		.stu-mess {
			display: flex;
			padding: 0 22px;

			image {
				height: 75px;
				width: 75px;
				margin-right: 14px;
				border-radius: 9px;
			}

			.right {
				flex: 1;

				.stu-text {
					font-size: 13px;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20px;
					color: #282828;
					overflow: hidden;
					display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
					text-overflow: ellipsis; //溢出部分用省略号代替
					-webkit-line-clamp: 2; //设置文本显示两行
					-webkit-box-orient: vertical; //从上到下排列子元素;
					white-space: normal;

				}
			}
		}

		.e-mail {
			margin: 10px 22px 0px;
			height: 36px;
			line-height: 36px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(40, 40, 40, .78);
			border-bottom: 1px solid rgba(112, 112, 112, .06);
		}

		.remark-title {
			margin: 10px 22px 0px;
			padding: 5px;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			opacity: 0.61;
		}

		.remark {
			margin: 0px 22px 22px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 20px;
			color: #282828;
			opacity: 0.54;
			padding: 5px;
			overflow: hidden;
			display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;

			text-overflow: ellipsis; //溢出部分用省略号代替

			-webkit-line-clamp: 3; //设置文本显示两行

			-webkit-box-orient: vertical; //从上到下排列子元素;

			white-space: normal;
			// border-bottom: 1px solid rgba(112, 112, 112, .06);
		}
	}


	//实名认证弹出层
	.real_name {
		// width: 100%;
		width: 320px;

		image {
			height: 196px;
		}

		.title {
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 20px;
			color: #282828;
			opacity: 1;
			margin-top: 25px;
			margin-bottom: 13px;
			text-align: center;
		}

		.text {
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 26px;
			color: #BCBCBC;
			opacity: 1;
			text-align: center;
			margin: 0 30px;
		}


		.popup-bt {
			display: flex;

			.go_perfect {
				height: 44px;
				line-height: 44px;
				// padding: 0 30px;
				margin: 28px auto;
				text-align: center;
				width: 128px;
				background: #3B7653;
				opacity: 1;
				border-radius: 24px;
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 20px;
			}

			.log_out {
				height: 44px;
				line-height: 44px;
				// padding: 0 30px;
				margin: 28px auto;
				text-align: center;
				width: 128px;
				border: solid 1px #3B7653;
				opacity: 1;
				border-radius: 24px;
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3B7653;
				margin-left: 20px;
			}
		}

	}

	.index {
		.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;
			}
		}

		.top {
			background: #FFFFFF;
			padding: 15px 15px 23px;

			.ad {
				height: 46px;
				margin-top: 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6px;
				padding: 0 25px;
				background-image: url(../../static/images/ad-bg.png);
				background-repeat: no-repeat;
				background-size: 100% auto;

				.left {
					flex: 1;
					font-size: 16px;
					font-family: PingFang HK;
					font-weight: 600;
					line-height: 20px;
					white-space: nowrap;
					/*设置不换行*/
					overflow: hidden;
					/*设置隐藏*/
					text-overflow: ellipsis;
					/*设置隐藏部分为省略号*/
					color: #84705D;
				}

				.right {
					text-align: center;
					padding: 3px 9px;
					border: 1px solid #84715E;
					opacity: 1;
					border-radius: 11px;
					font-size: 11px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #9A7C5D;
				}
			}
		}

		.content {
			padding: 15px 15px 0;

			.content-top {
				display: flex;
				justify-content: center;
				align-items: center;

				.title {
					width: 70px;
					font-size: 18px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #282828;
					flex: 1;
					opacity: 1;
					position: relative;

					.shadow {
						width: 70px;
						position: absolute;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 20px;
						color: #84705E;
						opacity: 0.24;
						top: 12px;
						text-align: center;
					}
				}

				.date {
					height: 17px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #282828;
					text-align: center;
					opacity: 0.39;
				}

				.date1 {
					height: 19px;
					line-height: 19px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #282828;
					background-color: #adadad;
					padding: 0 6px;
					text-align: center;
					opacity: 0.39;
					border-radius: 8px;
					margin-left: 5px;
				}
			}

			.list {
				margin-top: 20px;

				.item {
					position: relative;
					padding: 24px 18px 8px;
					background: #FFFFFF;
					opacity: 1;
					display: flex;
					justify-content: space-between;
					border-radius: 12px;
					margin-bottom: 16px;

					.tips {
						position: absolute;
						top: 10px;
						right: 0;
						padding: 3px 10px;
						background: #E8FFF2;
						opacity: 0.97;
						border-radius: 0 12px 0px 12px;
						color: #4FC47E;
						font-size: 13px;
					}

					.tips1 {
						position: absolute;
						top: 10px;
						right: 0;
						background: #E1CA8B;
						opacity: 0.97;
						padding: 3px 10px;
						border-radius: 0 12px 0px 12px;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #656565;
						opacity: 1;
					}

					.left {

						.left-time {
							display: flex;
							align-items: center;
							font-size: 14px;
							font-family: PingFang SC;
							font-weight: 400;
							color: #6B6B6B;
							opacity: 1;

							.time {
								display: inline-block;
								width: 77px;
								height: 21px;
								background-color: #FEF2CC;
								border-radius: 11px 11px 11px 0px;
								color: #FC7435;
								margin-left: 5px;
								text-align: center;
							}

						}

						.left-time1 {
							display: flex;
							align-items: center;
							font-size: 18px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #6C6C6C;
							opacity: 1;

							.time1 {
								color: #F55965;
							}

						}

						.left-tip {
							font-size: 15px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #888888;
							opacity: 1;
							margin-top: 13px;

							image {
								width: 14px;
								height: 14px;
								margin-right: 10px;
							}

							.text {
								margin-bottom: 3px;
							}
						}

						.left-tip1 {
							font-size: 15px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #888888;
							opacity: 1;
							margin-top: 13px;

							.text1 {
								margin-bottom: 3px;
							}

							image {
								width: 14px;
								height: 14px;
								margin-right: 10px;
							}
						}
					}

					.right {
						margin-right: 15px;
						margin-top: 10px;

						image {
							width: 108px;
							height: 81px;
						}
					}
				}
			}
		}
	}
</style>