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

<template>
	<view>
		<view class="studentWrapper">

			<view v-for="(item,index) in stuNeeds" :key="index">
				<view class="studentList" @click="goDetail(item)">
					<view class="studentLeft">
						<view class="studentLeftTitle">
							<text>{{item.name}}<text style="font-weight: 400; margin-left: 4px">学员</text></text>
						</view>
						<view class="studentNeedCourse">
							<text>科目：</text>
							<text class="needCourse">{{item.subjectBig}}/{{item.subjectSmall}}</text>
						</view>
						<view class="studentExpect">
							<text>期望目标：</text>
							<text class="expect">{{item.goal}}</text>
						</view>
					</view>
					<view class="studentRight">
						<view class="studentRightTitle">
							<text>{{item.salary}}/小时</text>
						</view>
						<view class="studentSex">
							<text>{{item.sex}}</text>
				 	</view>
						<view class="studentRightTitle">
							<text>{{item.kil}}km</text>
						</view>
					</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="queryObj.sex" :localdata="sexs" placeholder="学员性别" />
				</view>
				<view class="search-input" >
					<uni-data-select v-model="queryObj.time" :localdata="time" placeholder="上课时间" />
				</view>
				<view class="search-input" >
					<uni-data-select v-model="queryObj.money" :localdata="money" placeholder="需求金额" />
				</view>
				<view class="search-input" >
					<uni-data-picker placeholder="课程类别" popup-title="课程大纲-具体课程" v-model="queryObj.subject" :localdata="courseTree" preload="true" />
				</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>

</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapState
	} from 'vuex'


	export default {
		mixins: [badgeMix],
		computed: {
			...mapState('m_user', ['location'])
		},
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				stuNeeds: [],
				queryObj: {
					pageNum: 1,
					pageSize: 7,
					sex: '',
					time: '',
					money: '',
					subject: '1-1',
					subjectBig: '',
				},
				total: 0,
				isloading: false,
				// 选择课程
				courseTree: [{
						text: '一年级',
						value: '1-0',
						children: [{
								text: '1.1班',
								value: '1-1'
							}
						]
					}
				],
				// 单选性别数据源
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				time: [{
					text: '上午',
					value: '上午'
				}, {
					text: '下午',
					value: '下午'
				}, {
					text: '晚上',
					value: '晚上'
				}],
				money: [{
					text: '100以内',
					value: '0-100'
				}, {
					text: '100到200以内',
					value: '100-200'
				}, {
					text: '200-400以内',
					value: '200-400'
				}, {
					text: '400以上',
					value: '400-2000'
				}]
			};
		},
		created() {
			this.getAllStuNeeds(),
			this.getPriceAndTree()
		},
		methods: {
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				// console.log(result)
				this.courseTree = result.data.treeCourse
			},
			submit() {
				this.$refs.showRight.close();
				if (this.queryObj.subject !== '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.queryObj.subject) {
								this.queryObj.subjectBig = this.courseTree[x].value 
							}
						}
					}
				}
				
				this.stuNeeds = []
				this.getAllStuNeeds()
				
				// console.log(this.queryObj)
			},
			closeDrawer() {
				this.$refs.showRight.close();
				this.queryObj.sex = ''
				this.queryObj.time = ''
				this.queryObj.money = ''
				this.queryObj.subject = '1-1'
				this.queryObj.subjectBig = ''
				
				this.stuNeeds = []
				this.getAllStuNeeds()
			},
			fabClick() {
				this.$refs.showRight.open();
			},
			async getAllStuNeeds(cb) {
				// 打开节流阀
				this.isloading = true

				// 发起请求
				const {
					data: result
				} = await uni.$http.get('/education/student-requirements/getAllRequirements', this.queryObj)


				// 关闭节流阀
				this.isloading = false
				// 只要数据请求完毕，就立即按需调用 cb 回调函数
				cb && cb()

				for (let i = 0; i < result.data.list.length; i++) {
					let arr = result.data.list[i].locationAl.split(",")
					let kil = this.space(arr[0], arr[1], this.location.latitude, this.location.longitude)
					result.data.list[i].kil = kil
				}

				// 新旧拼接
				this.stuNeeds = [...this.stuNeeds, ...result.data.list]
				this.total = result.data.total

				// console.log(result)
			},
			// 下拉刷新
			onPullDownRefresh() {
				if (this.isloading) return

				this.queryObj.pageNum = 1
				this.total = 0
				this.stuNeeds = []
				this.isloading = false

				this.getAllStuNeeds(() => uni.stopPullDownRefresh())

			},
			// 触底事件
			onReachBottom() {
				// 判断是否有下一页
				if (this.queryObj.pageNum * this.queryObj.pageSize >= this.total)
					return uni.$showMsg('数据加载完毕！')

				// 判断是否正在请求数据
				if (this.isloading) return


				this.queryObj.pageNum += 1
				this.getAllStuNeeds()
			},
			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) // 保留两位小数
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/subpkg/all_stu_require_detail/all_stu_require_detail?item=' + encodeURIComponent(JSON.stringify(item))

				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.button-group {
		display: flex;
		justify-content: space-between;
	}
	
	.studentWrapper {
		height: 100%;
		background-color: #E2F0D9;
		padding: 20rpx;
	}

	.studentList {
		display: flex;
		position: relative;
		/* border: 1rpx solid gray; */
		border-radius: 20rpx;
		background-color: #FFF2CC;
		margin-bottom: 20rpx;
	}

	// .studentList:first-child {
	// 	margin-top: 30rpx;
	// }

	/* 左侧部分 */
	.studentLeft {
		padding: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	.studentLeftTitle,
	.studentExpect,
	.studentNeedCourse {
		padding: 6rpx 0;
	}

	/* 科目 */
	.studentNeedCourse {
		display: flex;
	}


	/* 期望目标 */
	.studentExpect {
		display: flex;
		font-weight: 400;
		font-size: 26rpx;
	}

	/* 期望目标和需求科目详情 */
	.needCourse,
	.expect {
		margin-left: 10rpx;
		width: 240rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 右侧部分定位 */
	.studentRight {
		position: absolute;
		left: 65%;
		color: #FF0000;
		font-size: 32rpx;
	}

	.studentRight,
	.studentSex {
		padding: 10rpx 0;
	}

	/* 设置性别的字体 */
	.studentSex {
		font-weight: bold;
		color: #00B050;
	}
	
	.search-input {
		margin-bottom: 40rpx;
	}

</style>