daoshiyuyue-teacher/pages/mine/record.vue

<template>
	<view class="record">
		<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.headimg ? stu_detail.headimg : '../../static/images/avator.png'" mode="">
					</image>
					<view class="right">
						<view class="stu-text">
							姓名：{{stu_detail.truename}}
						</view>
						<view class="stu-text">
							学号：{{stu_detail.account}}
						</view>
						<view class="stu-text">
							班级：{{stu_detail.class ? stu_detail.class :'--'}}
						</view>
						<view class="stu-text">
							手机号：{{stu_detail.mobile ? stu_detail.mobile :'--'}}
						</view>

					</view>
				</view>
				<view class="e-mail">
					<u-icon name="email"></u-icon>{{stu_detail.email ? stu_detail.email :'--'}}
				</view>
				<view class="remark-title">
					{{stu_detail.sex==2?"她":"他"}}的需求
				</view>
				<view class="remark">
					{{stu_detail.demand}}
				</view>
			</view>

		</u-popup>
		<view class="" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key='index'>
				<view class="item-left">
					<view class="image" :style="{backgroundImage:'url('+ item.teacher.headimg +')'}">
						
					</view>
					<!-- <image :src="item.teacher.headimg" mode=""></image> -->
					<view class="name">
						{{item.teacher.truename}}
					</view>
				</view>
				<view class="item-right">
					<view class="text">

						值班时间:
						<view class="time">
							{{item.start_time}}-{{item.end_time}}
						</view>
					</view>
					<view class="text">
						值班日期:
						<view class="time">
							{{item.day}}
						</view>
					</view>
					<view class="text">
						有无预约:
						<view class="time">
							{{item.student ? '有预约' :'无预约' }}
						</view>
					</view>
				</view>
				<view class="cancel" v-if="item.student" @click="stuDetail(item.student)">
					查看学生
				</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>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				stu_show: false,
				stu_detail: '',
				teacher_id: '',
				last: false
			}

		},
		onShow() {
			if(this.is_weixin()){
				this.navTitle()
			}
			this.list = []
			this.page = 1
			this.last = false
			this.getList()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			console.log(this.page)
			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'
			},
			getList() {
				let teacher_id = this.$store.state.vuex_user.type_id
				this.$u.get('/mentor/scheduling', {
					teacher_id: teacher_id,
					page: this.page,
					per_page:15
				}).then(res => {
					let data = res.data.list
					console.log(res, 'course1')
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
					}
				})
			},
			stuDetail(item) {
				this.stu_show = true
				this.stu_detail = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		padding: 0 20px;
	}
.enptyStatus{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 30px 10px;
			image{
				width: 120px;
				height: 150px;
				margin-top: 100px;
			}
			.words{
				color: #ffae21;
				font-size: 18px;
				padding-top: 18px;
			}
		}
	.item {
		display: flex;
		position: relative;
		align-items: center;
		padding: 10px;
		margin-top: 12px;
		font-size: 13px;
		background: rgba(234, 237, 242, .28);
		border-radius: 7px;
		
		.tips {
			position: absolute;
			width: 57px;
			height: 20px;
			background: #C1915A;
			line-height: 20px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 1;
			opacity: 1;
			right: 12px;
			z-index: 2;
			top: 0;
			text-align: center;
			border-radius: 0px 0px 6px 6px;
		}

		.item-left {
			text-align: center;
			width: 30%;
			.image {
				height: 42px;
				width: 42px;
				border: solid 1px;
				border-radius: 50%;
				display: inline-block;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.name {
				font-size: 10px;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: center;
				line-height: 20px;
				color: #292929;
				opacity: 1
			}
		}

		.item-right {
			width: 47%;

			.text {
				line-height: 17px;

				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #282828;
				opacity: 1;



				.time {
					font-family: PingFang SC;
					font-weight: 400;
					color: #282828;
					opacity: 1;
					display: inline-block;
					margin-left: 15px;

					margin-top: 5px;
				}
			}
		}

		.cancel {
			// width: 60px;
			display: inline-block;
			padding: 2px 10px;
			// height: 23px;
			// line-height: 23px;
			border: 1px solid rgba(193, 145, 90, 0.44);
			border-radius: 12px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 20px;
			color: #C1915A;
			opacity: 1;
			text-align: center;
		}
	}

	//查看学生信息弹框
	.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: 35px 0;




		}

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

		.e-mail {
			margin: 18px 22px 22px;
			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);
		}
	}
</style>