family-education/education_uni/subpkg/teacher_detail/teacher_detail.vue

<template>
	<view>
		<my-coursedetail :item="course" :location="location" :marker="marker" :timeAM="timeAM" :timePM="timePM" :timeEvening="timeEvening" buttonMessage="邀请" :collect="collect" :isShowCollect="true" @collecting="collecting" @publishButton="invite"></my-coursedetail>

		<my-invite :isShowInvite="isShowInvite" :item11="myNeeds" @cancelChosed="cancelChosed" @commitChosed="commitChosed" @clickRadio="clickRadio"></my-invite>
	
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				isShowInvite: false,
				initeNeeds: '',
				myNeeds: [],
				collect: false,
				course: {},
				courseWeekday: [],
				location: [],
				marker: [{
					id: 1,
					joinCluster:true,
					latitude: 0,
					longitude: 0,
					width: 40,
					height: 40,
					iconPath: '/static/location.png',
				}],
				// 上课时间
				// 上午
				timeAM: [{
						value: 'A1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'A2',
						checked: false
					},
					{
						name: '3',
						value: 'A3',
						checked: false
					},
					{
						name: '4',
						value: 'A4',
						checked: false
					},
					{
						name: '5',
						value: 'A5',
						checked: false
					},
					{
						name: '6',
						value: 'A6',
						checked: false
					},
					{
						name: '7',
						value: 'A7',
						checked: false
					}
				],
				// 下午
				timePM: [{
						value: 'P1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'P2',
						checked: false
					},
					{
						name: '3',
						value: 'P3',
						checked: false
					},
					{
						name: '4',
						value: 'P4',
						checked: false
					},
					{
						name: '5',
						value: 'P5',
						checked: false
					},
					{
						name: '6',
						value: 'P6',
						checked: false
					},
					{
						name: '7',
						value: 'P7',
						checked: false
					}
				],
				// 晚上
				timeEvening: [{
						name: '1',
						value: 'E1',
						checked: false
					},
					{
						name: '2',
						value: 'E2',
						checked: false
					},
					{
						name: '3',
						value: 'E3',
						checked: false
					},
					{
						name: '4',
						value: 'E4',
						checked: false
					},
					{
						name: '5',
						value: 'E5',
						checked: false
					},
					{
						name: '6',
						value: 'E6',
						checked: false
					},
					{
						name: '7',
						value: 'E7',
						checked: false
					}
				],
			};
		},
		onLoad(option) {
			this.course = JSON.parse(decodeURIComponent(option.item))
			this.location = this.course.locationAl.split(",")
			this.marker[0].latitude = Number(this.location[0])
			this.marker[0].longitude = Number(this.location[1])
			this.courseWeekday = this.course.teachTime.split(",")
			// console.log("选中的日期：" + this.courseWeekday)
			for (let i = 0; i < this.courseWeekday.length; i++) {
				for (let x = 0; x < this.timeAM.length; x++) {
					if (this.courseWeekday[i] == this.timeAM[x].value) {
						this.timeAM[x].checked = true
					}
				}
				
				for (let y = 0; y < this.timePM.length; y++) {
					if (this.courseWeekday[i] == this.timePM[y].value) {
						// console.log(this.timePM[y].value)
						this.timePM[y].checked = true
					}
				}
				
				for (let z = 0; z < this.timeEvening.length; z++) {
					if (this.courseWeekday[i] == this.timeEvening[z].value) {
						this.timeEvening[z].checked = true
					}
				}
			}
			this.getIsCollection()
			this.showMyStuNeeds()
			this.recordViewCount()
		},
		methods:{
			// 记录viewCount
			async recordViewCount() {
				const {data: result} = await uni.$http.get('/education/teacher-courses/recordCountByCourseId', {courseId: this.course.courseId})
				this.course.viewedCount = result.data.count
			},
			// 查看是否收藏过
			async getIsCollection() {
				const { data: result } = await uni.$http.get('/education/my-favorite-courses/findPersonCollect')
				// console.log(result)
				const list = result.data.requires
				for (let i = 0; i < list.length; i++) {
					if (this.course.courseId === list[i]) {
						this.collect = true
					}
				}
			},
			// 收藏、取消收藏
			async collecting() {
				// console.log(this.item)
				const queryObj = {
					courseId: this.course.courseId
				}
				
				if (!this.collect) {
					
					const { data: result1 } = await uni.$http.get('/education/my-favorite-courses/collect', queryObj)
					// console.log(result)
					if (result1.message === '收藏成功') {
						this.collect = true
						
					} else if (result1.message === '收藏失败') {
						uni.$showMsg('收藏失败')
					}
					
				} else if (this.collect) {
					
					const { data: result } = await uni.$http.get('/education/my-favorite-courses/cancelCollect', queryObj)
					if (result.message === '取消收藏成功') {
						this.collect = false
					
					} else if (result.message === '取消收藏失败') {
						uni.$showMsg('取消收藏失败')
					}
				}
				
			},
			async showMyStuNeeds() {
				const { data: result } = await uni.$http.get('/education/student-requirements/queryPersonSomeInfo')
				// console.log(result)
				this.myNeeds = result.data.list
				console.log(this.myNeeds)
			},
			// 获取最近成交时间和成交次数
			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
			},
			invite() {
				this.isShowInvite = true
			},
			cancelChosed() {
				this.isShowInvite = false
			},
			async commitChosed() {
				if (this.initeNeeds === '') return uni.$showMsg('请选择邀请的课程')
				this.initeNeeds.toUid = this.course.uid
				this.initeNeeds.courseId = this.course.courseId
				this.initeNeeds.fromUname = this.initeNeeds.name
				this.initeNeeds.toUname = this.course.name
				// console.log(this.initeNeeds)
				
				const {data: result} = await uni.$http.post('/education/invite-info/sendTeacherInvite', this.initeNeeds)
				uni.$showMsg(result.message)
				this.isShowInvite = false
			},
			clickRadio(item) {
				this.initeNeeds = item
			}
			
		}
	}
</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>