family/education_uni/subpkg/teacher_detail/teacher_detail.vue

<template>
	<view>
		<view class="teachDeatil">
		    <view class="head">
		        <image class="teachImg" mode="widthFix" :src="teacherCourse.imgUrl"></image>
		        
		        <view class="headDetail">
		            <text class="teachName">{{teacherCourse.name}}老师</text>
		            <text class="attribute">身份：{{teacherCourse.teacherType}}</text>
		            <view class="transactionContainer">
		            	<text class="transaction">成</text>
		            	<text class="transactionTotal">{{teacherCourse.count}}条家教记录</text>
		            </view>
		            <view class="transactionList">
		            	<text>最新接单：</text>
		            	<text>{{teacherCourse.latest}}</text>
		            </view>
		        </view>
				
		    </view>
		    <view class="midArea">
		        <text>高校：{{teacherCourse.school}}</text>
		        <text>专业：{{teacherCourse.major}}</text>
		        <text>学历：{{teacherCourse.education}}</text>
		        <text>籍贯：{{teacherCourse.nativePlace}}</text>
		    </view>
		    <view class="course">
		        <text>可授科目：</text>
		        <view class="courseList">{{teacherCourse.subject}}</view>
		    </view>
			<view class="introduceDetail">
			    <text class="introduce-title">自我介绍</text>
			    <text class="introduce-body">{{teacherCourse.introduce}}</text>
			</view>
		    <view class="introduceDetail">
		        <text class="introduce-title">成功经验</text>
		        <text class="introduce-body">{{teacherCourse.experience}}</text>
		    </view>
		</view>
		
		<!-- 底部功能区 -->
		<view class="bottomContainer">
		    <view class="myCollect" bindtap="toStuCollectionTeach">我收藏的老师</view>
		    <view class="collection" v-if="true" @click="collectTeacher">
		        加入收藏
		    </view>
		    <view class="collection" v-else>
		        已收藏
		    </view>
		    <view class="inviteTeach">预约老师</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teacherCourse: {
					education: '',
					major: '',
					nativePlace: '',
					school: ''
				}
			};
		},
		onLoad(option) {
			let teacherDemo = decodeURIComponent(option.item)
			this.teacherCourse = JSON.parse(teacherDemo)
			for (let i = 0; i < this.teacherCourse.length; i++) {
				let str = this.teacherCourse[i].profilePhoto
				this.teacherCourse[i].imgUrl = 'data:image/png;base64,' + str
			}
			this.getCountAndLastTime()
			this.getInfosByUid()
			
		},
		methods:{
			// 获取最近成交时间和成交次数
			async getCountAndLastTime() {
				const query = {
					uid: this.teacherCourse.uid
				}
				const { data: result } = await uni.$http.get('/education/teacher-courses/queryCountAndLastTime', query)
				this.teacherCourse.count = result.data.count
				this.teacherCourse.latest = result.data.time
			},
			// 根据uid获取该老师学校学历等
			async getInfosByUid() {
				const { data: result } = await uni.$http.get('/education/teacher-certifications/findInfosByUid', { uid: this.teacherCourse.uid })
				this.teacherCourse.education = result.data.one.education
				this.teacherCourse.major = result.data.one.major
				this.teacherCourse.nativePlace = result.data.one.nativePlace
				this.teacherCourse.school = result.data.one.school
			}
			
		}
	}
</script>

<style lang="scss" scoped>
/* 整个页面样式 */
.teachDeatil{
    display: flex;
    position: relative;
    flex-direction: column;
    margin-left: 20rpx;
}
.head{
    display: flex;
}
.headDetail{
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    font-size: 28rpx;
}
.teachName{
    font-weight: bold;
}
.headDetail text{
    padding-bottom: 10rpx;
}
/* 头像设置 */
.teachImg{
    width: 200rpx;
}
.settledDay{
    display: block;
    float: right;
}

/* 中部区域 */
.midArea{
    display: flex;
    /* border: 1rpx solid red; */
    width: 96%;
    margin-top: 10rpx;
    justify-content: space-between;
    flex-wrap: wrap;
}
.midArea text{
    /* display: block; */
    width: 48%;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
}

/* 可授课程 */
.course{
    margin-top: 40rpx;
}
.courseList{
    margin-top: 10rpx;
}

/* 可授课区域 */
.teachAera{
    margin-top: 40rpx;
}
.teachAreaDetail{
    margin-top: 10rpx;
}

/* 自我介绍及案例 */
.introduceDetail{
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
}
.introduce-title{
    margin-bottom: 20rpx;
    color: yellowgreen;
    font-weight: bold;
}
.introduce-body{
    line-height: 50rpx;
    font-size: 28rpx;
}

/* 底部区域 */
.bottomContainer{
    width: 99%;
    display: flex;
    position: absolute;
    bottom: 50rpx;
    /* background-color: #bfa; */
    /* border: 1rpx solid red; */
    justify-content: space-around;
}

.myCollect,
.collection,
.inviteTeach{
    width: 30%;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: bold;
    border: 1rpx solid red;
    border-radius: 30rpx;
    text-align: center;
}
/* 我收藏的老师 */
.myCollect{
    color: red;
    /* background-color: blue; */
}
/* 收藏老师 */
.collection{
    color: yellowgreen;
}
/* 邀请老师 */
.inviteTeach{
    color: pink;
}
/* 成交记录 */
	.transactionContainer {
	    margin-top: 10rpx;
	    display: flex;
	}
	/* 成交记录标签的背景色 */
	.transaction {
	    background-color: rgba(0, 128, 0, .6);
	}
	/* 教龄和成交记录标签后的文字 */
	.teachYears,
	.transactionTotal {
	    font-size: 24rpx;
	    margin-left: 10rpx;
	}
	
	/* 最新接单 */
	.transactionList {
	    margin-top: 10rpx;
	    color: green;
	    font-size: 24rpx;
	}
</style>