family-education/education_uni/subpkg/student/require/student_require_my_collect.vue

<template>
	<view>
		<view class="itemWrapper" 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.name}}学员</view>
						<view class="publicSex">{{item.sex}}</view>
						<view class="stuGoal">{{item.goal}}</view>
						<view class="studentDistance">
							<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>
</template>

<script>
	import { mapState } from 'vuex'
	import computeDistance from '@/mixins/compute-distance.js'
	export default {
		mixins: [computeDistance],
		computed: {
			...mapState('m_user', ['location'])
		},
		data() {
			return {
				stuNeeds: [],
			};
		},
		onShow() {
			this.getAllStuNeeds()
		},
		methods: {
			async getAllStuNeeds() {
				// 发起请求
				const { data: result } = await uni.$http.get('/education/my-favorite-needs/findPersonCollectInfo')
				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].name = result.data.list[i].name.slice(0,1)
				}
				this.stuNeeds = result.data.list
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_all_detail?requireId=' + encodeURIComponent(id) 
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.itemWrapper{
		height: 220rpx;
	}
/* 教员、学员头像 */
	.teachImg,
	.studentImg{
		width: 25%;
		height: 95%;
		border-radius: 20%;
	}

	.stuSubject{
		position: absolute;
		left: 200rpx;
		top: 60rpx;
		border: 0rpx solid gray;
		padding: 10rpx 20rpx;
		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{
		margin-top: 10rpx;
		border: 2px solid #3ed598;
		border-radius: 30rpx;
		padding: 0rpx 10rpx;
		font-size: 12px;
		position: absolute;
		left: 200rpx;
		top: 125rpx;
		color: #3ed598;
		display: block;//将文本设置为块元素，否则overflow无效
		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: 30rpx;
		background-color: #3ed598;
		color: #ffffff;
		font-size: 12px;
	}
</style>