family-education/education_uni/pages/teacher/teacher.vue

<template>
	<view>
		<view v-for="(item, index) in teacherList" :key="index">
			<view class="publicItem" @click="toTeachDetail(item)">
				<view class="itemFather">
					<image class="teachImg" :src="item.profilePhoto"></image>
					<view class="teachTitle">{{item.nickname}}教员</view>
					<view class="publicSex">{{item.sex}}</view>
					<view class="teachCollege">{{item.school}}</view>
					<view class="teachEdu">{{item.education}}</view>
					<view class="teachDistance" v-if="isShowDistance">
						<uni-icons type="location" color="#3ed598" ></uni-icons>
						<text>{{item.kil}}</text>km</view>
					<view class="teachSubject">{{item.subject}}</view>
					<view class="teachYears">教龄 {{item.teachAge}}</view>
				</view>
			</view>
		</view>
		
		<uni-fab :pattern="pattern" horizontal="left" vertical="bottom" @fabClick="fabClick"></uni-fab>
		
		<uni-drawer ref="showRight" mode="left" width="280">
			<scroll-view style="height: 100%;" scroll-y="true">
				<uni-section title="条件搜索" type="line"></uni-section>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.sex" :localdata="sexs" placeholder="教员性别" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.time" :localdata="time" placeholder="上课时间" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.mode" :localdata="modes" placeholder="上课方式" />
				</view>
				<view class="searchInput" >
					<uni-data-picker placeholder="课程类别" popup-title="课程大纲-具体课程" v-model="queryObject.course" :localdata="courseTree" preload="true" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.identify" :localdata="identifies" placeholder="类型" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.education" :localdata="educations" placeholder="学历" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObject.school" :localdata="schools" placeholder="毕业学校" />
				</view>
				<view class="button-group">
					<button @click="submit" class="myButton1">搜索</button>
					<button @click="closeDrawer" class="myButton2">取消</button>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import computeDistance from '@/mixins/compute-distance.js'
	import badgeMix from '@/mixins/tabbar-badge.js'
	import { mapState } from 'vuex'
	
	export default {
		mixins: [badgeMix, computeDistance],
		computed: {
			...mapState('m_user', ['location','token'])
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				isShowDistance: false,
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1-1'
							}
						]
					}
				],
				pattern: {
					color: '#3ed598',
					backgroundColor: '#3ed598',
					selectedColor: '##3ed598',
					buttonColor: '##3ed598',
					iconColor: '#fff'
				},
				isLoading: false,	// 请求阀
				// 老师列表
				teacherList: [],
				// 查询总数量
				total: 0, 
				// 查询对象
				queryObject: {
					pageNum: 1,
					pageSize: 10,
					course: '1-1',
					identify: '',
					education: '',
					sex: '',
					school: '',
					mode: '',
					time: ''
				},
				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: '女'
				}],
				time: [{
					text: '上午',
					value: '上午'
				}, {
					text: '下午',
					value: '下午'
				}, {
					text: '晚上',
					value: '晚上'
				}],
				schools: [{
					text: '四川大学',
					value: '四川大学'
				}, {
					text: '电子科技大学',
					value: '电子科技大学'
				}, {
					text: '西南交通大学',
					value: '西南交通大学'
				}, {
					text: '四川师范大学',
					value: '四川师范大学'
				}, {
					text: '成都大学',
					value: '成都大学'
				}],
				modes: [{
					text: '老师上门',
					value: '老师上门'
				}, {
					text: '学员上门',
					value: '学员上门'
				}, {
					text: '线上辅导',
					value: '线上辅导'
				}],
			}
		},
		watch: {
			'token': {
				handler() {
					if (this.token !== '') {
						this.isShowDistance = true
						this.teacherList = []
						this.getTeacherList()
					} else {
						this.isShowDistance = false
					}
				}
			}
		},
		created() {
			if (this.token !== '') {
				this.isShowDistance = true
			}
			this.getTeacherList()
			this.getPriceAndTree()
		},
		methods: {
			
	
			
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				this.courseTree = result.data.treeCourse
			},
			fabClick() {
				this.$refs.showRight.open();
			},
			submit() {
				this.$refs.showRight.close();
				// 课程科目
				if (this.queryObject.course !== '1-1') {
					for (let x = 0; x < this.courseTree.length; x++) {
						for (let y = 0; y < this.courseTree[x].children.length; y++) {
							if (this.courseTree[x].children[y].value === this.queryObject.course) {
								this.queryObject.course = this.courseTree[x].value + '/' + this.queryObject.course
							}
						}
					}
				}
				this.teacherList = []
				this.getTeacherList()
			},
			closeDrawer() {
				this.$refs.showRight.close();
				this.queryObject = {}
				this.queryObject.pageNum = 1
				this.queryObject.pageSize = 10
				this.queryObject.course = '1-1'
				this.teacherList = []
				this.getTeacherList()
			},
			// 老师细节
			toTeachDetail(item) {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_all_detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 获取老师列表
			async getTeacherList(cb) {
				// 打开节流阀
				this.isLoading = true
				const { data: result } = await uni.$http.post('/education/teacher-courses/showCourse', this.queryObject)
				this.isLoading = false
				
				// 加载完数据执行
				cb && cb()
				for (let i = 0; i < result.data.course.length; i++) {
					let arr = result.data.course[i].locationAl.split(",")
					let kil = this.space(arr[0], arr[1], this.location.latitude, this.location.longitude)
					result.data.course[i].kil = kil
					result.data.course[i].nickname = result.data.course[i].name.slice(0,1)
				}

				this.teacherList = [...this.teacherList, ...result.data.course]
				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.teacherList = []
				// 2.重新发起请求
				this.getTeacherList(() => uni.stopPullDownRefresh())
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		//background-color: #FFF2CC;
	}
</style>

<style scoped lang="scss">
	.itemFather{
		position: relative;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: center;
	}
	
	.searchInput {
		margin-bottom: 40rpx;
	}
		
	/* 设置单个教员背景 */
	.publicItem{
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx ;
		margin-bottom: 10rpx ;
		// border: 0rpx solid gray;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
	}
	
	.teachTitle{
		font-size: 14px;
		position: absolute;
		left: 200rpx;
		top: 10rpx;
		font-weight: bold;
		color: #6d6d6d;
	}

	/* 教员头像 */
	.teachImg{
		width: 25%;
		height: 95%;
		border-radius: 20%;
	}
	
	/* 距离 */
	.teachDistance{
		position: absolute;
		left: 330rpx;
		top: 10rpx;
		font-weight: bold;
		color: #3ed598;
		font-size: 12px;
		
	}
	
	/* teachsex */
	.publicSex{
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		// border: 0rpx solid gray;
		padding: 5rpx 10rpx;
		border-radius: 50%;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}
	/* teachEdu */
	.teachEdu{
		position: absolute;
		right: 10rpx;
		top: 60rpx;
		// border: 0rpx solid gray;
		padding: 5rpx 10rpx;
		border-radius: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}
	/* teach课程 */
	.teachSubject{
		position: absolute;
		left: 200rpx;
		top: 115rpx;
		// border: 0rpx solid gray;
		padding: 5rpx 12rpx;
		border-radius: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}
	
	/* teach课程 */
	.teachYears{
		position: absolute;
		right: 10rpx;
		top: 115rpx;
		border: 2px solid  #3ed598;
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		color: #3ed598;
		font-size: 12px;
		font-weight: bold;
	}
	
	.teachCollege{
		border: 2px solid #3ed598;
		border-radius: 30rpx;
		padding: 0rpx 10rpx;
		font-size: 12px;
		position: absolute;
		left: 200rpx;
		top: 60rpx;
		color: #3ed598;
		
	}

	.button-group {
		padding: 100rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}
	/* myButton1 */
	.myButton1{
		// border: 0rpx solid gray;
		padding: 15rpx 60rpx;
		border-radius: 50rpx;
		background-color: #35b882;
		color: #ffffff;
		font-size: 14px;
	}
	
	/* myButton1 */
	.myButton2{
		// border: 0rpx solid gray;
		padding: 15rpx 60rpx;
		border-radius: 50rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 14px;
	}
	::v-deep .uni-fab__circle {
		background-color: #3ed598 !important;
	}
</style>