qingnianyexiao2.0/pages/center/teacherDetail.vue

<template>
	<view class="box flex justify-start align-items flex-column">
		<view class="detali flex align-items " style="justify-content: space-between;">

			<view class="detali-left">
				<image :src="detail.head_image" mode="" style="width: 240rpx;height: 300rpx;"></image>
			</view>
			<view class="detali-right flex justify-center flex-column">
				<span class="name white-space">{{detail.name}}</span>
				<span class="jigou white-space">{{detail.shop.name}}</span>
				<view class="flex align-items flex-start look" @click="toMeDetail(detail.shop_id)">
					<span>查看机构</span>
					<image src="../../static/center/right.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
				</view>
				<span class="line"></span>
				<view class="detali-footer flex align-items" style="justify-content: space-between;">
					<view class="f-left flex flex-column">
						<span class="pingfen">教师评分</span>
						<span class="rate">
							<u-rate :count="count" active-color="#FFBC2C" v-model="detail.teacher_star" allowHalf="true"
								readonly></u-rate>
						</span>
					</view>
					<view class="f-right">
						{{detail.teacher_star}}分
					</view>
				</view>
			</view>
		</view>
		<!-- 教师简介 -->
		<view class="teacher flex flex-column" style="justify-content: flex-start;">
			<view class="teacher-header flex align-items space-between">
				<image src="../../static/center/teacherDetail.png" mode="" style="width: 168rpx; height: 48rpx;">
				</image>
			</view>
			<view class="tea-center">
				<u-parse :content="detail.expert_content"></u-parse>
				<!-- <view class="" v-html="detail.expert_content"></view> -->
			</view>
		</view>
		<!-- 全部课程 -->
		<view class="total flex flex-column" style="justify-content: flex-start;">
			<view class="total-header flex align-items space-between">
				<image src="../../static/center/TotalClass.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
				<view class="flex align-items" @click.stop="totalClass()">
					<span class="more">更多</span>
					<image src="../../static/center/right.png" mode="" style="width: 34rpx; height: 34rpx;"></image>
				</view>
			</view>
			<view class="totalBox">
				<view class="flex" v-for="(item,index) in list" :key="index">
					<view class="con-center justify-start flex  flex-column" style="align-items: flex-start;"
						@click="toDetail(item.id)">
						<image :src="item.headimage" mode="" style="width: 280rpx; height: 200rpx;"></image>
						<span class="jita white-space">{{item.title}}</span>
						<view class="mingePos flex justify-center align-items">
							<image src="../../static/index/mine.png" mode="" style="width: 36rpx;height: 36rpx;">
							</image>
							<span class="minge">{{ Number(item.sign_num + item.virtual_num)}} /
								{{item.limit_num}}名额</span>
						</view>
						<span class="line-row"></span>
						<span class="money" v-if="item.feel == 0">￥{{item.price}}</span>
						<span class="money" v-if="item.feel == 1">免费</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 教师评价 -->
		<view class="pingjia flex flex-column" style="justify-content: flex-start;">
			<view class="pingjia-header flex align-items space-between">
				<image src="../../static/center/pingjia.png" mode="" style="width: 168rpx; height: 48rpx;"></image>
			</view>
			<view class="pjBox flex flex-column" v-for="(item,index) in pjList" :key="index">
				<view class="pj-top flex align-items" style="justify-content: space-between;">
					<view class="pj-left flex space-between">
						<image :src="item.image" mode="" style="width: 86rpx;height: 86rpx;"></image>
						<view class="flex flex-column " style="margin-left: 24rpx;">
							<span class="name">{{item.nickname}}</span>
							<span class="time">{{item.evaluate_time_text}}</span>
						</view>
					</view>
					<view class="pj-right flex flex-column align-items">
						<span class="pj">{{item.teacher_star + '分'}}</span>
						<span class="rate">
							<u-rate :count="item.count" active-color="#FFBC2C" v-model="item.teacher_star"
								allowHalf="true" readonly></u-rate>
						</span>
					</view>
				</view>
				<view class="pj-center flex">
					{{item.message_text}}
				</view>
			</view>

		</view>
		<u-loadmore :status="loadStatus" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 1,
				detail: {},
				count: 5,
				value: 5,
				page: 1,
				limit: 10,
				pjPage: 1,
				pjLimit: 10,
				list: [],
				loadStatus: 'loading',
				pjList: [],
				last_page: 0,
			};
		},
		onShareTimeline() {
			return {
				title: this.detail.name,//分享的标题
				imageUrl: this.detail.head_image,//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				 query: `id=${this.id}`
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail(option.id)
			this.getList(option.id)
			this.getpjList(option.id)
		},
		onReachBottom() {
			if (this.pjPage < this.last_page) {
				this.pjPage++;
				this.getpjList(this.id);
			}
		},
		methods: {
			// 获取教师详情
			getDetail(id) {
				uni.$u.http.get('/api/school/teacher/detail', {
					params: {
						id: id,
					}
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data.detail
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						// _this.$api.toast(res.msg);
					}
				}).catch(error => {

				});
			},
			totalClass() {
				uni.navigateTo({
					url: "/packageA/center/teacherClass?id=" + this.id
				})
			},
			//评价列表
			getpjList(id) {
				uni.$u.http.get('/api/school.evaluate/evaluate_list', {
					params: {
						teacher_id: id,
						page: this.pjPage,
						limit: this.pjLimit,
					}
				}).then(res => {
					if (res.code == 1) {
						this.last_page = res.data.last_page
						this.pjList = [...this.pjList, ...res.data.list];
						if (this.pjList.length >= res.data.count) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loading';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						this.loadStatus = 'nomore';
						// _this.$api.toast(res.msg);
					}
				}).catch(error => {
					this.loadStatus = 'loading';
				});
			},
			// 教师课程
			getList(id) {
				uni.$u.http.get('/api/school/classes/classes_list', {
					params: {
						page: 1,
						limit: 10,
						teacher_id: id,
						order: 'normal',
						is_expire: 2
					}
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.list.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						// _this.$api.toast(res.msg);
					}
				}).catch(error => {

				});
			},
			// 机构详情
			toMeDetail(id) {
				uni.navigateTo({
					url: "/pages/center/MechanismDetail?id=" + this.detail.shop_id
				})
			},
			// 跳转详情
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/center/detail?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				#F1F2F8 0%,
				#FFFFFF 30%,
				#F1F2F8 50%,
				#F1F2F8 70%,
				#F1F2F8 100%)
	}

	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.flex-start {
		align-items: flex-start;
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.space-between {
		justify-content: space-between;
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}

	.detali {
		width: 642rpx;
		margin-top: 46rpx;

		.detali-right {
			margin-left: 42rpx;

			.name {
				// height: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 52rpx;
				color: #4B4B4B;
				width: 400rpx;
				// line-height: 26rpx;
			}

			.jigou {
				width: 336rpx;
				// height: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #008CFF;
				// line-height: 26rpx;
				margin: 38rpx 0 8rpx 0;
			}

			.look {
				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #008CFF;
					margin-right: 8rpx;
				}
			}

			.line {
				margin: 19rpx 0 11rpx 0;
				width: 372rpx;
				height: 1rpx;
				background: #008CFF;
			}

			.detali-footer {
				width: 380rpx;

				.f-left {
					.pingfen {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #008CFF;
						margin-bottom: 9rpx;
					}

					.rate {}
				}

				.f-right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 42rpx;
					color: #FFBC2C;
				}
			}
		}
	}

	.teacher {
		width: 642rpx;

		.teacher-header {
			padding-top: 64rpx;
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #008CFF;
		}

		.tea-center {
			margin-top: 13rpx;
		}
	}

	.total {
		width: 690rpx;
		// margin-top: 62rpx;

		.total-header {
			padding-top: 64rpx;
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #008CFF;

			.more {
				// width: 48rpx;
				// height: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #008CFF;
				font-style: normal;
				text-transform: none;
				margin-right: 8rpx;
			}
		}

		.totalBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}

	}

	.pingjia {
		width: 690rpx;
		// margin-top: 62rpx;

		.pingjia-header {
			padding-top: 64rpx;
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #008CFF;
		}

		.pjBox {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background-color: white;
			padding: 24rpx;
			margin-top: 25rpx;

			.pj-top {
				.pj-left {
					image {
						border-radius: 50%;
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 34rpx;
						color: #181818;
					}

					.time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7A7A7A;
						margin-top: 14rpx;
					}
				}

				.pj-right {
					.pj {
						width: 104rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						font-size: 42rpx;
						color: #FFBC2C;
						padding-bottom: 13rpx;
						border-bottom: 1rpx solid #FFBC2C;
					}

					.rate {
						margin-top: 11rpx;
					}
				}

			}

			.pj-center {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #7A7A7A;
				line-height: 38rpx;
				margin-top: 20rpx;
				word-break: break-all;
			}
		}
	}

	.con-center {
		width: 280rpx;
		position: relative;
		padding: 32rpx 16rpx;

		.imgPos {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 999;
		}

		.jita {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #343434;
			margin: 14rpx 0 16rpx 0;
		}

		.line-row {
			width: 280rpx;
			height: 1rpx;
			background: #008CFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin: 12rpx 0 12rpx 0;
		}

		.mingeBox {
			.minge {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #7A7A7A;
			}
		}

		.iconPos {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #7A7A7A;
			line-height: 32rpx;
			margin-top: 14rpx;
		}

		.mingePos {

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #474747;
			line-height: 32rpx;
		}

		.money {
			display: flex;
			align-self: flex-end;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #FF2323;
			line-height: 32rpx;
			margin-top: 24rpx;
		}
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}
</style>