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

<template>
	<view v-if="showTeacher && showStudent">
		<official-account></official-account>

		<uni-swiper-dot :info="info" :current="current">
			<swiper class="swiper-box" autoplay circular @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 热门教员区域 -->
		<view>
		    <!-- 热门教员 -->
		    <view class="hotTitle">
		        <uni-icons type="star" size="20" color="#b2b2b2" ></uni-icons>
		        <text style	="color:#b2b2b2;font-size: 12px;" >教员</text>
		    </view>
			<view v-for="(Info,index) in hotTeacherList" :key="index">
				<view class="publicItem" @click="goTeacherDetail(Info)">
					<view class="hotTeacher">
						<image class="teachImg" :src="Info.profilePhoto"></image>
						<view class="teachTitle">{{Info.nickname}}教员</view>
						<view class="publicSex">{{Info.sex}}</view>
						<view class="teachCollege">{{Info.school}}</view>
						<view class="teachEdu">{{Info.education}}</view>
						<view class="teachDistance" v-if="isShowDistance">
							<uni-icons type="location" color="#3ed598" ></uni-icons>
							<text>{{Info.kil}}</text>km
						</view>
						<view class="teachSubject">{{Info.subject}}</view>
						<view class="teachYears">教龄 {{Info.teachAge}}</view>
					</view>	        
				</view>
			</view>
		</view>
		
		<!-- 热门学员区域 -->
		<view>
		    <!-- 热门学员标题 -->
		    <view class="hotTitle">
				<uni-icons type="staff" size="20" color="#b2b2b2" ></uni-icons>
				<text style	="color:#b2b2b2;font-size: 12px;" >学员</text>
			</view>
			
			<view v-for="(item, index) in hotstuNeed" :key="index">
				<view class="publicItem" @click="goStudentDetail(item.requireId)">
					<view class="hotStudent">
						<template v-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>
		</view>
		
		<!-- 攻略 -->
		<view>
		    <view class="hotTitle">
				<uni-icons type="map" size="20"	color="#b2b2b2" ></uni-icons>
				<text style	="color:#b2b2b2;font-size: 12px;" >攻略</text>
			</view>
			
			<view class="cooperationContent">
				<scroll-view class="cooperationScroll" enable-flex scroll-x>
					<view class="scrollItem" v-for="(item, index) in strategyImg" :key="index" @click="clickpreviewImg(index)">
						<image :src="item"></image>
					</view>
			   </scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import computeDistance from '@/mixins/compute-distance.js'
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		mixins: [badgeMix, computeDistance],
		computed: {
			...mapState('m_user', ['location', 'token', 'recoUID'])
		},
		data() {
			return {
				showTeacher: false,
				showStudent: false,
				info: [],
				current: 0,
				hotTeacherList: [],
				hotstuNeed: [],
				isShowDistance: false,
				strategyImg: [],
				previewImg: []
			}
		},
		watch: {
			'token': {
				handler() {
					if (this.token !== '') {
						this.isShowDistance = true
					} else {
						this.isShowDistance = false
					}
				}
			}
		},
		/**
		 * 如果是从分享的卡片打开的，则可以取到分享者的uid，否则recomID是undefined
		 * recoUID为推荐者的uid,当用户作为新用户注册时，如果取到了这个uid,才做为推荐者的uid存入
		 * 老用户，取到这个uid也不存入了。
		 */
		onLoad(options) {
			 this.updateRecoUID(options.uid) // 久化存储到本地,可在其它页面调用
			 // console.log("推荐码为：" + this.recoUID)
			 this.getSwiperList()
			 this.getStrategyImg()
			 this.getPreviewImg()
		},
		onShow() {
			if (this.token !== '') {
				this.isShowDistance = true
			}
			this.hotTeacher()
			this.hotStudent()
		},
		methods: {
			// 调用 mapMutations 辅助方法，把 m_user 模块中的 updateRecoUID 映射到当前组件中使用
			...mapMutations('m_user', ['updateRecoUID']),
			goStudentDetail(id) {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_all_detail?requireId=' + encodeURIComponent(id)
				})
			},
			goTeacherDetail(item) {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_all_detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			async hotTeacher() {
				const { data: result } = await uni.$http.get('/education/home/getHottestTeacher')
				if (result.data.teacher !== undefined) {
					for (let i = 0; i < result.data.teacher.length; i++) {
						let arr = result.data.teacher[i].locationAl.split(",")
						let kil = this.space(arr[0], arr[1], this.location.latitude, this.location.longitude)
						result.data.teacher[i].kil = kil
						result.data.teacher[i].nickname = result.data.teacher[i].name.slice(0,1)
					}
					this.hotTeacherList = result.data.teacher
					this.showTeacher = true
				}
			},
			async hotStudent(){
				const { data: result } = await uni.$http.get('/education/home/getHottestStuNeed')
				if (result.data.stuNeed !== undefined) {
					for (let i = 0; i < result.data.stuNeed.length; i++) {
						let arr = result.data.stuNeed[i].locationAl.split(",")
						let kil = this.space(arr[0], arr[1], this.location.latitude, this.location.longitude)
						result.data.stuNeed[i].kil = kil
						result.data.stuNeed[i].nickname = result.data.stuNeed[i].name.slice(0,1) 
						if (result.data.stuNeed[i].goal.length == 0) {
							result.data.stuNeed[i].goal = "无"
						}
					}
					this.hotstuNeed = result.data.stuNeed
					this.showStudent = true
				}
			},
			// 获取轮播图列表
			async getSwiperList() {
				const {
					data: result
				} = await uni.$http.get('/education/swiper/getSwiperList')
				this.info = result.data.list
			},
			// 滑动轮播图触发
			change(e) {
				this.current = e.detail.current
			},
			clickpreviewImg(index) {
				uni.previewImage({
					current: index,
					urls: this.previewImg
				})
			},
			async getStrategyImg() {
				const {
					data: result
				} = await uni.$http.get('/education/strategy/getBigPig')
				this.strategyImg = result.data.list
			},
			async getPreviewImg() {
				const {
					data: result
				} = await uni.$http.get('/education/strategy/getSmallPig')
				this.previewImg = result.data.list
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-box {
		height: 500rpx;
	}
	
	.swiper-item {
		display: block;
		height: 500rpx;
		line-height: 500rpx;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 60rpx;
		}
	}

	/* 轮播图 */
	.swWrapper {
		height: 400rpx;
	}

	.swImg {
		width: 100%;
		height: 400rpx;
	}

	/* 热门教员、热门学员标题 */
	.hotTitle {
		display: flex;
		margin-top: 5rpx;
		justify-content: center;
		align-items: center;
	}
	
	/* 热门教员、热门学员标题前后的线条 */
	.hotTitle::before {
		content: "";
		margin-right: 20rpx;
		margin-left: 40rpx;
		height: 1px;
		border: none;
		border-top: 1px solid #b2b2b2;
		flex: 1 1 0rpx;
	}
	
	.hotTitle::after {
		content: "";
		margin-right: 40rpx;
		margin-left: 20rpx;
		height: 1px;
		border: none;
		border-top: 1px solid #b2b2b2;
		flex: 1 1 0rpx;
	}

	.scrollItem{
		margin-right: 20rpx;
		width: 350rpx;
	}
	
	.scrollItem image{
		width: 350rpx;
		height: 300rpx;
		border-radius: 40rpx;
	}
	
	/* 攻略区 */
	.cooperationContent{
		height: 350rpx;
		margin-left: 20rpx;
	}
	
	/* 攻略图片 */
	.cooperationScroll{
		display: flex;
		height: 300rpx;
	}

	/* 热门教员、热门学员 */
	.hotTeacher,
	.hotStudent{
		position: relative;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: center;
	}

	/* 教员、学员头像 */
	.teachImg,
	.studentImg{
		width: 25%;
		height: 95%;
		border-radius: 20%;
	}
	
	/* 教员、学员性别 */
	.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 10rpx;
		border-radius: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}

	/* 教龄 */
	.teachYears{
		position: absolute;
		right: 10rpx;
		top: 115rpx;
		border: 2px solid  #3ed598;
		padding: 2rpx 20rpx;
		border-radius: 30rpx;
		color: #3ed598;
		font-size: 12px;
		font-weight: bold;
	}

	/* stu课程 */
	.stuSubject{
		position: absolute;
		left: 200rpx;
		top: 60rpx;
		// border: 0rpx solid gray;
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}

	.teachTitle,
	.studentTitle{
		font-size: 14px;
		position: absolute;
		left: 200rpx;
		top: 10rpx;
		font-weight: bold;
		color: #6d6d6d;
	}
	
	/* 距离 */
	.teachDistance,
	.studentDistance{
		position: absolute;
		left: 300rpx;
		top: 10rpx;
		font-weight: bold;
		color: #3ed598;
		font-size: 12px;
	}
	
	.teachCollege{
		border: 2px solid #3ed598;
		border-radius: 30rpx;
		padding: 0rpx 10rpx;
		font-size: 12px;
		position: absolute;
		left: 200rpx;
		top: 60rpx;
		color: #3ed598;
	}
		
	.stuGoal{
		margin-top: 10rpx;
		border: 2px solid #3ed598;
		border-radius: 30rpx;
		padding: 0rpx 10rpx;
		font-size: 12px;
		position: absolute;
		left: 200rpx;
		top: 125rpx;
		color: #3ed598;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
		
	/* item */
	.publicItem{
		margin: 10rpx 20rpx;
		// border: 0rpx solid gray;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
	}
</style>