family-education/education_uni/subpkg/teacher/course/teacher_course_my_collect.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.name}}教员</view>
					<view class="publicSex">{{item.sex}}</view>
					<view class="teachCollege">{{item.school}}</view>
					<view class="teachEdu">{{item.education}}</view>
					<view class="teachDistance">
						<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>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import computeDistance from '@/mixins/compute-distance.js'
	
	export default {
		mixins: [computeDistance],
		computed: {
			...mapState('m_user', ['location'])
		},
		data() {
			return {
				// 老师列表
				teacherList: []
			}
		},
		onShow() {
			this.getTeacherList()
		},
		methods: {
			// 老师细节
			toTeachDetail(item) {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_all_detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 获取老师列表
			async getTeacherList() {
				const { data: result } = await uni.$http.get('/education/my-favorite-courses/findPersonCollection')
				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].name = result.data.course[i].name.slice(0,1)
				}
				this.teacherList = result.data.course
			}
		}
	}
</script>

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

<style scoped lang="scss">
	.itemFather{
		position: relative;
		display: flex;
		padding: 10rpx;
		height: 170rpx;
		align-items: center;
	}
		
	/* 设置单个教员背景 */
	.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;
		
	}
</style>