education/education_uni - 副本/pages/teacher/teacher.vue

<template>
	<view>
		<view class="teachWrapper">
			<view v-for="(item, index) in teacherList" :key="index">
				<view class="teachDetail" @click="toTeachDetail(item)">
				    <image class="teachImg" :mode="aspectFit" :src="item.profilePhoto"></image>
				    <view class="teachIntro">
				        <view class="teachIntroTop">
				            <view>
				                <view class="name">
				                    <text>{{item.name}}教员</text>
				                </view>
				                <view class="course">
				                    <text>科目：</text>
				                    <text class="teachCourse">{{item.subject}}</text>
				                </view>
				                <view class="school">
				                    <text class="schoolType">{{item.school}}</text>
				                </view>
				            </view>
				            <view class="teachIntroRight">
				                <view class="teachEduAndAge">
				                    <view>
				                        <text>{{item.education}}</text>
				                    </view>
				                    <view>
				                        <text class="teachAgeIcon">龄</text>
				                        <text class="teachAge">{{item.teachAge}}</text>
				                    </view>
				                </view>
				                <view>
				                    <view class="teachDistance">
				                        <text>距你</text>
				                        <text class="distance">{{item.kil}}</text>
				                        <text>km</text>
				                    </view>
				                </view>
				            </view>
				        </view>
				        <view class="experience">
				            <text>成功经验：</text>
				            <text class="teachExperience">{{item.experience}}</text>
				        </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="search-input" >
		    			<uni-data-select v-model="queryObject.sex" :localdata="sexs" placeholder="学员性别" />
		    		</view>
		    		<view class="search-input" >
		    			<uni-data-select v-model="queryObject.time" :localdata="time" placeholder="上课时间" />
		    		</view>
		    		<view class="search-input" >
		    			<uni-data-select v-model="queryObject.mode" :localdata="modes" placeholder="上门方式" />
		    		</view>
		    		<view class="search-input" >
		    			<uni-data-picker placeholder="课程类别" popup-title="课程大纲-具体课程" v-model="queryObject.course" :localdata="courseTree" preload="true" />
		    		</view>
					<view class="search-input" >
						<uni-data-select v-model="queryObject.identify" :localdata="identifies" placeholder="教员类型" />
					</view>
					<view class="search-input" >
						<uni-data-select v-model="queryObject.education" :localdata="educations" placeholder="教员学历" />
					</view>
					<view class="search-input" >
						<uni-data-select v-model="queryObject.school" :localdata="schools" placeholder="教员毕业学校" />
					</view>
		    		<view class="button-group">
		    			<button @click="submit" size="mini" type="primary">开始搜索</button>
		    			<button @click="closeDrawer" size="mini" type="warn">取消搜索</button>
		    		</view>
		    	</scroll-view>
		    </uni-drawer>
		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_user', ['location'])
		},
		data() {
			return {
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1-1'
							}
						]
					}
				],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					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: '线上辅导'
				}],
			}
		},
		created() {
			this.getTeacherList()
			this.getPriceAndTree()
		},
		methods: {
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				// console.log(result)
				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()
				
				// console.log(this.queryObject)
			},
			closeDrawer() {
				this.$refs.showRight.close();
				this.queryObject.sex = ''
				this.queryObject.time = ''
				this.queryObject.mode = ''
				this.queryObject.course = '1-1'
				this.queryObject.school = ''
				this.queryObject.education = ''
				this.queryObject.identify = ''
				
				this.teacherList = []
				this.getTeacherList()
			},
			// 老师细节
			toTeachDetail(item) {
				let teacher = JSON.stringify(item)
				uni.navigateTo({
					url: '/subpkg/teacher_detail/teacher_detail?item=' + encodeURIComponent(teacher)
				})
			},
			// 获取老师列表
			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 str = Base64.encode(this.teacherList[i].imgUrl)
					let str = result.data.course[i].profilePhoto
					// console.log(str)
					result.data.course[i].profilePhoto = 'data:image/png;base64,' + str
					
					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
				}
				console.log(this.teacherList)
				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.isLoading = false
				this.teacherList = []
				// 2.重新发起请求
				this.getTeacherList(() => uni.stopPullDownRefresh())
			},
			space(lat1, lng1, lat2, lng2) {
				// console.log(lat1, lng1, lat2, lng2)
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000; // 单位千米
				return s.toFixed(2) // 保留两位小数
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 设置页面背景 */
	.teachWrapper{
	    background-color: #E2F0D9;
	    height: 100%;
	    padding: 20rpx;
	}
	
	/* 设置单个教员背景 */
	.teachDetail{
	    display: flex;
	    position: relative;
	    /* border: 1rpx solid gray; */
	    padding: 10rpx 0;
	    border-radius: 20rpx;
	    background-color: #FFF2CC;
	    margin-bottom: 20rpx;
	    font-weight: bold;
	    font-size: 28rpx;
	}
	
	.teachIntroTop{
	    display: flex;
	}
	/* 教员头像 */
	.teachImg{
	    width: 22%;
		height: 150rpx;
	    margin: 10rpx;
	    border-radius: 20rpx;
	}
	
	.teachIntro{
	    margin-left: 10rpx;
	}
	
	.school {
		margin-bottom: 8rpx;
	}
	
	.schoolType {
		width: 252rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.name {
		margin-bottom: 8rpx;
	}
	
	/* 科目 */
	.course{
	    display: flex;
		margin-bottom: 8rpx;
	}
	.teachCourse{
	    margin-left: 10rpx;
	    width: 160rpx;
	    display: block;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
	/* 右侧部分定位 */
	.teachIntroRight{
	    position: absolute;
	    /* right: 30rpx; */
	    left: 65%;
	}
	
	/* 教员学历和教龄 */
	.teachEduAndAge{
	    display: flex;
	}
	
	/* 教龄图标 */
	.teachAgeIcon {
	    margin-left: 20rpx;
	    padding: 2rpx;
	    border: 1rpx solid;
	    border-radius: 10rpx;
	    font-size: 26rpx;
	    color: white;
	    background-color: #FF6666;
	}
	
	/* 教龄 */
	.teachAge{
	    margin-left: 10rpx;
	    font-weight: bold;
	    color: red;
	}
	
	/* 距离 */
	.teachDistance{
	    margin-top: 20rpx;
	    color: red;
	}
	/* 距离数字 */
	.distance{
	    margin: 0 10rpx;
	    font-size: 40rpx;
	    font-weight: bold;
	}
	
	/* 成功经验 */
	.experience{
	    display: flex;
	}
	.teachExperience{
	    width: 300rpx;
	    margin-left: 10rpx;
	    display: block;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.search-input {
		margin-bottom: 40rpx;
	}
</style>