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

<template>
	<view>
		<view v-for="(item, index) in stuNeeds" :key="index">
			<view class="publicItem" @click="goDetail(item.requireId)">
				<view class="hotStudent">
					<template v-if="item.profilePhoto">
						<image class="teachImg" :src="item.profilePhoto"></image>
					</template>
					<template v-else-if="item.sex === '女'">
						<image class="teachImg" src="../../static/girl.png"></image>
					</template>
					<template v-else>
						<image class="teachImg" src="../../static/boy.png"></image>
					</template>
					<view class="hotStudentText">
						<view class="studentTitle">{{item.nickname}}学员</view>
						<view class="publicSex">{{item.sex}}</view>
						<view class="stuGoal">{{item.goal}}</view>
						<view class="studentDistance" v-if="isShowDistance">
							<uni-icons type="location" color="#3ed598" ></uni-icons>
							<text>{{item.kil}}</text>km
						</view>
					</view>
					<view class="stuSubject">{{item.subjectBig + "/" + item.subjectSmall}}</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="queryObj.sex" :localdata="sexs" placeholder="学员性别" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObj.time" :localdata="time" placeholder="上课时间" />
				</view>
				<view class="searchInput" >
					<uni-data-select v-model="queryObj.money" :localdata="money" placeholder="需求金额" />
				</view>
				<view class="searchInput" >
					<uni-data-picker placeholder="课程类别" popup-title="课程大纲-具体课程" v-model="queryObj.subject" :localdata="courseTree" preload="true" />
				</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 badgeMix from '@/mixins/tabbar-badge.js'
	import computeDistance from '@/mixins/compute-distance.js'
	import { mapState } from 'vuex'

	export default {
		mixins: [badgeMix, computeDistance],
		computed: {
			...mapState('m_user', ['location','token'])
		},
		data() {
			return {
				isShowDistance: false,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#3ed598',
					buttonColor: '#3ed598',
					iconColor: '#fff'
				},
				stuNeeds: [],
				queryObj: {
					pageNum: 1,
					pageSize: 10,
					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'
				}]
			};
		},
		watch: {
			'token': {
				handler() {
					if (this.token !== '') {
						this.isShowDistance = true
						this.stuNeeds = []
						this.getAllStuNeeds()
					} else {
						this.isShowDistance = false
					}
				}
			}
		},
		created() {
			if (this.token !== '') {
				this.isShowDistance = true
			}
			this.getAllStuNeeds(),
			this.getPriceAndTree()
		},
		methods: {
			// 树形结构的课程和价格表
			async getPriceAndTree() {
				const {
					data: result
				} = await uni.$http.get('/education/course-price/treeAndPrice')
				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.queryObj.pageNum = 1
				this.queryObj.pageSize = 10
				this.stuNeeds = []
				this.getAllStuNeeds()
				this.queryObj.subject = '1-1'
				this.queryObj.subjectBig = ''
			},
			closeDrawer() {
				this.$refs.showRight.close();
				this.queryObj.pageNum = 1
				this.queryObj.pageSize = 10
				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.post('/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
					result.data.list[i].nickname = result.data.list[i].name.slice(0,1)
					if (result.data.list[i].goal.length == 0) {
						result.data.list[i].goal = "无"
					}
				}

				// 新旧拼接
				this.stuNeeds = [...this.stuNeeds, ...result.data.list]
				this.total = result.data.total
			},
			// 下拉刷新
			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()
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_all_detail?requireId=' + encodeURIComponent(id)
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>

	.button-group {
		padding: 100rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.searchInput {
		margin-bottom: 40rpx;
	}
	
	/* 教员、学员头像 */
	.teachImg,
	.studentImg{
		width: 25%;
		height: 95%;
		border-radius: 20%;
	}
	
	.stuSubject{
		position: absolute;
		left: 200rpx;
		top: 60rpx;
		// border: 0rpx solid gray;
		padding: 5rpx 10rpx;
		border-radius: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}
	
	.studentTitle{
		font-size: 14px;
		position: absolute;
		left: 200rpx;
		top: 10rpx;
		font-weight: bold;
		color: #6d6d6d;
	}
	
	/* 距离 */
	.studentDistance{
		position: absolute;
		left: 300rpx;
		top: 10rpx;
		font-weight: bold;
		color: #3ed598;
		font-size: 12px;
	}
		
	.stuGoal{
		border: 2px solid #3ed598;
		border-radius: 30rpx;
		padding: 0rpx 10rpx;
		font-size: 12px;
		position: absolute;
		left: 200rpx;
		top: 115rpx;
		color: #3ed598;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
		
	/* item */
	.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;
	}
	
	.hotStudent{
		position: relative;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: center;
	}
	
	/* 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;
	}
	
	.myButton1{
		// border: 0rpx solid gray;
		padding: 10rpx 60rpx;
		border-radius: 50rpx;
		background-color: #35b882;
		color: #ffffff;
		font-size: 14px;
	}
	
	/* myButton1 */
	.myButton2{
		// border: 0rpx solid gray;
		padding: 10rpx 60rpx;
		border-radius: 50rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 14px;
	}
</style>