303 lines
7.8 KiB
Vue
303 lines
7.8 KiB
Vue
<template>
|
|
<view class="teacherInfo-container">
|
|
<view class="header">
|
|
<div class="header-left">
|
|
<u-icon
|
|
class="header-left-icon"
|
|
name="arrow-left"
|
|
@click="handleLeftClick"
|
|
></u-icon>
|
|
</div>
|
|
<text class="header-title">老师详情</text>
|
|
<div></div>
|
|
</view>
|
|
|
|
<div class="teacher-info-card">
|
|
<div class="card-content">
|
|
<image class="teacher-avatar" :src="teacherInfo.avatar"></image>
|
|
<div class="teacher-info">
|
|
<div class="teacher-name">{{ teacherInfo.name }}</div>
|
|
|
|
<div class="teacher-school">
|
|
<image
|
|
class="school-icon"
|
|
src="/static/common/images/icon_college.png"
|
|
></image>
|
|
<text class="school-text">{{ teacherInfo.school }}</text>
|
|
</div>
|
|
|
|
<div class="teacher-college">
|
|
<image
|
|
class="college-icon"
|
|
src="/static/common/images/icon_major.png"
|
|
></image>
|
|
<text class="college-text">{{ teacherInfo.college }}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="action-btn consult-btn" @click="handleConsult">
|
|
<image
|
|
class="btn-icon"
|
|
src="/static/common/images/icon_consult.png"
|
|
></image>
|
|
<text class="btn-text">在线咨询</text>
|
|
</button>
|
|
<button class="action-btn message-btn" @click="handleMessage">
|
|
<image
|
|
class="btn-icon"
|
|
src="/static/common/images/icon_edit.png"
|
|
></image>
|
|
<text class="btn-text">留言提问</text>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 老师回答 -->
|
|
<view class="teacher-answers">
|
|
<view class="answer-title">老师回答</view>
|
|
|
|
<!-- 问答列表组件 -->
|
|
<answer-list :answerList="answerList"></answer-list>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AnswerList from "@/components/AnswerList/index.vue";
|
|
|
|
export default {
|
|
components: {
|
|
AnswerList,
|
|
},
|
|
data() {
|
|
return {
|
|
teacherId: "",
|
|
teacherInfo: {
|
|
id: 1,
|
|
name: "孙老师",
|
|
school: "江西新能源科技职业学院",
|
|
college: "生命科学与工程学院·生物工程专业",
|
|
avatar: "/static/common/images/avatar2.png",
|
|
online: true,
|
|
},
|
|
answerList: [
|
|
{
|
|
id: 1,
|
|
studentName: "浙江考生13024",
|
|
studentAvatar: "/static/common/images/avatar.png",
|
|
time: "2025/6/26 15:45:12",
|
|
question: "学校在录取时有没有一些专业会有特殊要求?",
|
|
fullAnswer:
|
|
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部",
|
|
},
|
|
{
|
|
id: 2,
|
|
studentName: "浙江考生13024",
|
|
studentAvatar: "/static/common/images/avatar.png",
|
|
time: "2025/6/26 15:45:12",
|
|
question: "学校在录取时有没有一些专业会有特殊要求?",
|
|
fullAnswer:
|
|
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》。",
|
|
},
|
|
{
|
|
id: 3,
|
|
studentName: "浙江考生13024",
|
|
studentAvatar: "/static/common/images/avatar.png",
|
|
time: "2025/6/26 15:45:12",
|
|
question: "学校在录取时有没有一些专业会有特殊要求?",
|
|
fullAnswer:
|
|
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、教育部、原卫生部、见》和人力资源社会保障部、教育部、原卫生部中共发布的相关规定。部分专业确有特殊要求，如航空服务类专业对身高、视力等有特殊要求，艺术类专业要求有艺术基础等。建议考生在填报志愿前，详细了解意向专业的招生要求。",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {},
|
|
onLoad(options) {
|
|
if (options.teacherId) {
|
|
this.teacherId = options.teacherId;
|
|
this.getTeacherInfo();
|
|
}
|
|
|
|
// 在页面加载后检查文本是否超过三行
|
|
this.$nextTick(() => {
|
|
// this.checkTextOverflow();
|
|
});
|
|
},
|
|
methods: {
|
|
handleLeftClick() {
|
|
uni.navigateBack();
|
|
},
|
|
getTeacherInfo() {
|
|
// 模拟获取教师信息的接口
|
|
console.log("获取教师ID为", this.teacherId, "的信息");
|
|
// 实际开发中这里应该调用接口获取教师信息
|
|
},
|
|
handleConsult() {
|
|
console.log("在线咨询");
|
|
// 跳转到咨询页面或者打开咨询对话框
|
|
},
|
|
handleMessage() {
|
|
console.log("留言提问");
|
|
// 打开留言弹窗
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.teacherInfo-container {
|
|
min-height: 100vh;
|
|
padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
|
|
padding: 32rpx;
|
|
padding-top: calc(88rpx + 40rpx);
|
|
|
|
background-image: url(/static//common/images/images_bg.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 50%;
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
z-index: 99;
|
|
|
|
.header-left {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.teacher-info-card {
|
|
// margin: 30rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 26rpx 32rpx 32rpx 32rpx;
|
|
|
|
.card-content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 36rpx;
|
|
|
|
.teacher-avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 30rpx;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.teacher-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 8rpx;
|
|
flex: 1;
|
|
|
|
.teacher-name {
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.teacher-school,
|
|
.teacher-college {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.school-icon,
|
|
.college-icon {
|
|
margin-right: 16rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
.school-text,
|
|
.college-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 46%;
|
|
height: 60rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 32rpx;
|
|
border: none;
|
|
|
|
.btn-icon {
|
|
margin-right: 16rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.consult-btn {
|
|
background-color: #4f6aff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.message-btn {
|
|
background-color: #ffffff;
|
|
color: #4f6aff;
|
|
border: 1px solid #4f6aff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 老师回答区域样式 */
|
|
.teacher-answers {
|
|
margin-top: 50rpx;
|
|
|
|
.answer-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 28rpx;
|
|
}
|
|
}
|
|
|
|
/* 响应式布局 - PC端样式 */
|
|
@media screen and (min-width: 768px) {
|
|
.teacherInfo-container {
|
|
.content {
|
|
max-width: 1200rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|