family/education_uni/pages/teacher/teacher.vue

<template>
	<view>
		<view class="head">
			<uni-row>
				<uni-col :span="3">
					<view class="img-head">
						<image src="../../static/teachers.png"></image>
					</view>
				</uni-col>
				<uni-col :span="21">
					<view class="title-head"  @click="switchIcon">
						<uni-title type="h4" title="找老师"></uni-title>
						<uni-icons :type="iconType" size="20"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
			
			<view v-if="content">
				<view class="content">
					<uni-data-select class="ff" v-model="queryObject.course" :localdata="educations" placeholder="课程详情"/>
					<uni-data-select class="ff" v-model="queryObject.identify" :localdata="identifies" placeholder="老师身份" />
					<uni-data-select class="ff" v-model="queryObject.education" :localdata="educations" placeholder="老师学历" />
				</view>
				<view class="content, content2">
					<uni-data-select class="ff" v-model="queryObject.sex" :localdata="sexs" placeholder="老师性别" />
					<uni-data-select class="ff" v-model="queryObject.school" :localdata="schools" placeholder="毕业学校" />
					<uni-data-select class="ff" v-model="queryObject.mode" :localdata="modes" placeholder="老师照片" />
				</view>
			</view>
		</view>
		
		<!-- 筛选区与老师列表区之间的间隔 -->
		<view class="interval"></view>
		
		<view v-if="!isSearch">没有找到符合条件的信息</view>
		<view v-if="isSearch">
			<view class="teachInfo" @click="toTeachDetail(item)" v-for="(item, index) in teacherList" :key="index" >
				<image class="teachImg" mode="widthFix" :src="item.imgUrl"></image>
				<view class="introduce">
					<text class="teachName">{{item.name}}老师</text>
					<text class="attribute">{{item.teacherType}}</text>
					<text class="day">{{item.datetime}}</text>
					<view class="ageContainer">
						<text class="teachAgeIcon">龄</text>
						<text class="teachYears">{{item.teachAge}}年教龄</text>
					</view>
					<view class="courseList">
						<text>可授课科目：</text>
						<text>{{item.subject}}</text>
					</view>
					<view class="introduceDetail">
						<view>自我介绍：</view>
						<text>{{item.introduce || '无'}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				isLoading: false,	// 请求阀
				iconType: 'bottom',
				content: false,
				isSearch: true,
				// 老师列表
				teacherList: [],
				// 查询总数量
				total: 0, 
				// 查询对象
				queryObject: {
					pageNum: 1,
					pageSize: 10,
					course: '',
					identify: '',
					education: '',
					sex: '',
					school: '',
					mode: '',
					imgUrl: '/static/teacher.png'
				},
				educations: [{
					value: '专科在读',
					text: '专科在读'
				}, {
					value: '专科毕业',
					text: '专科毕业'
				}, {
					value: '本科在读',
					text: '本科在读'
				}, {
					value: '本科毕业',
					text: '本科毕业'
				}, {
					value: '硕士在读',
					text: '硕士在读'
				}, {
					value: '硕士毕业',
					text: '硕士毕业'
				}, {
					value: '博士在读',
					text: '博士在读'
				}, {
					value: '博士毕业',
					text: '博士毕业'
				}],
				// 单选老师身份
				identifies: [{
					text: '专职老师',
					value: '专职老师'
				}, {
					text: '在校大学生',
					value: '在校大学生'
				}],
				// 单选性别数据源
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				schools: [{
					text: '四川大学',
					value: '四川大学'
				}, {
					text: '电子科技大学',
					value: '电子科技大学'
				}, {
					text: '西南交通大学',
					value: '西南交通大学'
				}, {
					text: '四川师范大学',
					value: '四川师范大学'
				}, {
					text: '成都大学',
					value: '成都大学'
				}],
				modes: [{
					text: '老师上门',
					value: '老师上门'
				}, {
					text: '学员上门',
					value: '学员上门'
				}, {
					text: '线上辅导',
					value: '线上辅导'
				}],
			}
		},
		created() {
			this.getTeacherList()
		},
		methods: {
			// 老师细节
			toTeachDetail(item) {
				let teacher = JSON.stringify(item)
				uni.navigateTo({
					url: '/subpkg/teacher_detail/teacher_detail?item=' + encodeURIComponent(teacher)
				})
			},
			// 展开搜索栏
			switchIcon() {
				if (this.iconType === 'bottom') {
					this.iconType = 'top'
					this.content = true
				} else {
					this.iconType = 'bottom'
					this.content = false
				}
			},
			// 获取老师列表
			async getTeacherList(cb) {
				// 打开节流阀
				this.isLoading = true
				
				const { data: result } = await uni.$http.post('/education/teacher-courses/showCourse', this.queryObject)
				
				this.isLoading = false
				
				// 加载完数据执行
				cb && cb()
				if (result.code !== 20000) return uni.$showMsg('获取数据失败')
				
				this.teacherList = [...this.teacherList, ...result.data.course]
				
				for (let i = 0; i < this.teacherList.length; i++) {
					
					// let str = Base64.encode(this.teacherList[i].imgUrl)
					let str = this.teacherList[i].profilePhoto
					// console.log(str)
					this.teacherList[i].imgUrl = 'data:image/png;base64,' + str
				}
				// console.log(this.teacherList)
				this.total = result.data.count
			},
			// 触底事件
			onReachBottom() {
				// 判断是否有下一页的数据
				if (this.queryObject.pageNum * this.queryObject.pageSize >= this.total) return uni.$showMsg('数据加载完毕！')
				
				// 判断是否正在请求其他数据
				if (this.isLoading) return
				
				this.queryObject.pageNum += 1
				// 重新获取数据
				this.getTeacherList()
			},
			// 下拉刷新事件
			onPullDownRefresh() {
				// 1. 重置关键数据
				this.queryObject.pageNum = 1
				this.total = 0
				this.isLoading = false
				this.teacherList = []
				// 2.重新发起请求
				this.getTeacherList(() => uni.stopPullDownRefresh())
			}
		}
	}
</script>

<style scoped lang="scss">
	.head {
		
		// position: sticky;
		// top: 0;
		// z-index: 999;
		
		image {
			height: 80rpx;
			width: 80rpx;
		}
		
		.title-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.content {
			display: flex;
			justify-content: space-around;
			
			.ff {
				width: 100px;
			}
		}
		
		.content2 {
			margin-top: 10rpx;
			padding-bottom: 10rpx;
		}
		
	}
	
	/* 搜索区下方的隔离区 */
	.interval{
	    height: 5rpx;
	    // margin-top: 20rpx;
	    background-color: gray;
	}
	
	/* 老师列表 */
	.teachInfo {
	    width: 96%;
	    display: flex;
	    margin-top: 20rpx;
	    margin-left: 10rpx;
	    padding: 10rpx 0;
	    /* border: 1rpx solid red; */
	    border-bottom: 1rpx solid gray;
	}
	
	/* 老师头像 */
	.teachImg {
	    width: 20%;
	    margin: 0 10rpx;
	    border-radius: 20rpx;
	}
	
	/* 老师介绍外容器 */
	.introduce {
	    width: 70%;
	    /* height: 400rpx; */
	    /* border: 1rpx solid red; */
	    padding: 10rpx;
	}
	
	/* 老师名字 */
	.teachName {
	    font-weight: bold;
	}
	
	/* 老师资质 */
	.attribute {
	    margin-left: 20rpx;
	    color: rgb(12, 182, 12);
	    font-size: 26rpx;
	}
	
	/* 日期 */
	.day {
	    float: right;
	    color: pink;
	    font-size: 28rpx;
	}
	
	/* 成交记录 */
	.transactionContainer {
	    margin-top: 10rpx;
	    display: flex;
	}
	/* 教龄和成交记录的标签 */
	.teachAgeIcon,
	.transaction {
	    /* margin: 10rpx; */
	    padding: 2rpx;
	    border: 1rpx solid;
	    border-radius: 10rpx;
	    font-size: 26rpx;
	    color: white;
	}
	/* 教龄标签的背景色 */
	.teachAgeIcon {
	    background-color: rgba(255, 0, 0, .6);
	}
	/* 成交记录标签的背景色 */
	.transaction {
	    background-color: rgba(0, 128, 0, .6);
	}
	/* 教龄和成交记录标签后的文字 */
	.teachYears,
	.transactionTotal {
	    font-size: 24rpx;
	    margin-left: 10rpx;
	}
	
	/* 最新接单 */
	.transactionList {
	    margin-top: 10rpx;
	    color: green;
	    font-size: 24rpx;
	}
	
	/* 可授课科目 */
	.courseList {
	    margin-top: 10rpx;
	    font-size: 30rpx;
	}
	
	/* 自我介绍 */
	.introduceDetail {
	    margin-top: 10rpx;
	    font-size: 28rpx;
	}
	/* 自我介绍的内容 */
	.introduceDetail text {
		white-space: nowrap;
	    overflow: hidden;
		text-overflow: ellipsis;
	    display: -webkit-box;
	    /*设置对齐模式*/
	    -webkit-box-orient: vertical;
	    /*设置多行的行数，本例为两行*/
	    -webkit-line-clamp: 4;
	}
</style>