316 lines
7.5 KiB
Vue
316 lines
7.5 KiB
Vue
<template>
|
|
<view class="admissions-container">
|
|
<header-bar title="在线咨询" @leftClick="handleLeftClick"></header-bar>
|
|
|
|
<view class="admissions-content">
|
|
<!-- 自定义tab -->
|
|
<view class="custom-tab">
|
|
<view
|
|
v-for="tab in tabList"
|
|
:key="tab.id"
|
|
:class="['tab-item', { active: activeTab === tab.id }]"
|
|
@click="switchTab(tab.id)"
|
|
>
|
|
<text class="tab-text">{{ tab.name }}</text>
|
|
<view class="tab-underline" v-if="activeTab === tab.id"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="teacher-list">
|
|
<!-- 教师列表 -->
|
|
<view
|
|
class="teacher-item"
|
|
v-for="(teacher, index) in teacherList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
class="teacher-avatar"
|
|
src="/static/common/images/avatar.png"
|
|
></image>
|
|
<view class="teacher-info">
|
|
<view class="teacher-detail">
|
|
<view class="teacher-name">
|
|
<text>{{ teacher.name }}</text>
|
|
<view v-if="teacher.presence" class="online-status">
|
|
<view class="online-dot"></view>
|
|
<text>在线</text>
|
|
</view>
|
|
</view>
|
|
<view class="teacher-department">{{ teacher.collegeName }}</view>
|
|
</view>
|
|
<view class="ask-button" @click="handleAskQuestion(teacher)">
|
|
立即提问
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 留言弹出层 -->
|
|
<!-- <leave-message
|
|
:show.sync="showLeaveMessage"
|
|
:teacher="currentTeacher"
|
|
@submit="handleMessageSubmit"
|
|
/> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
|
|
// import LeaveMessage from "@/components/LeaveMessage.vue";
|
|
|
|
export default {
|
|
components: {
|
|
HeaderBar, // 注册头部组件
|
|
// LeaveMessage,
|
|
},
|
|
data() {
|
|
return {
|
|
// showLeaveMessage: false,
|
|
// currentTeacher: null,
|
|
activeTab: 0, // 当前激活的tab
|
|
tabList: [
|
|
{ id: 0, name: "招生在线" },
|
|
{ id: 1, name: "迎新在线" },
|
|
],
|
|
teacherList: [
|
|
{
|
|
id: 1,
|
|
name: "孙老师",
|
|
department: "招就处",
|
|
avatar: "/static/common/images/avatar.png",
|
|
online: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "杨老师",
|
|
department: "电子信息学院",
|
|
avatar: "/static/common/images/student.png",
|
|
online: false,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {},
|
|
created() {
|
|
this.getTeacherList();
|
|
},
|
|
methods: {
|
|
switchTab(id) {
|
|
this.activeTab = id;
|
|
this.getTeacherList();
|
|
},
|
|
handleLeftClick() {
|
|
uni.navigateBack();
|
|
},
|
|
handleAskQuestion(teacher) {
|
|
// 跳转老师详情
|
|
uni.navigateTo({
|
|
url: `/pages/home/teacherInfo/index?teacherId=${teacher.id}`,
|
|
});
|
|
|
|
return;
|
|
// 留言相关的没用了，先注释
|
|
if (!teacher.online) {
|
|
// 留言
|
|
this.currentTeacher = teacher;
|
|
this.showLeaveMessage = true;
|
|
} else {
|
|
}
|
|
},
|
|
// 提交留言(此方法废弃)
|
|
handleMessageSubmit(data) {
|
|
console.log("提交留言:", data.content, "教师:", data.teacher?.name);
|
|
|
|
// 成功提示已经在组件内部处理，这里不需要重复提示
|
|
// uni.showToast({
|
|
// title: "留言成功",
|
|
// icon: "success",
|
|
// });
|
|
|
|
// 这里可以进行其他操作，如更新页面数据等
|
|
if (data.success) {
|
|
console.log("留言提交成功，可以进行后续操作");
|
|
// 例如刷新列表或其他业务逻辑
|
|
}
|
|
},
|
|
|
|
// 刷新当前对话的消息详情(后续添加下拉加载分页)
|
|
getTeacherList() {
|
|
this.$u.api
|
|
.GetTeacherListApi({
|
|
"Item1.ConsultationType": this.activeTab,
|
|
PageIndex: 1,
|
|
PageSize: 10,
|
|
})
|
|
.then((res) => {
|
|
if (res.succeed) {
|
|
this.teacherList = res.data.item1 || [];
|
|
}
|
|
})
|
|
.finally(() => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.admissions-container {
|
|
min-height: 100vh;
|
|
padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
|
|
padding-top: 88rpx;
|
|
background-color: #ffffff;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.admissions-content {
|
|
.custom-tab {
|
|
padding: 0 30rpx;
|
|
margin: 24rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tab-item {
|
|
position: relative;
|
|
padding: 12rpx 0;
|
|
margin-right: 60rpx;
|
|
cursor: pointer;
|
|
|
|
.tab-text {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #505866;
|
|
letter-spacing: 0.04rpx;
|
|
}
|
|
|
|
&.active .tab-text {
|
|
color: #4f6aff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-underline {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
right: 0;
|
|
width: 80rpx;
|
|
height: 4rpx;
|
|
background-color: #4f6aff;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.teacher-list {
|
|
.teacher-item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
padding: 0 30rpx;
|
|
// margin-bottom: 30rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.teacher-avatar {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
margin-right: 24rpx;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.teacher-info {
|
|
// padding: 30rpx 0;
|
|
height: 150rpx;
|
|
flex: 1;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #f2f2f2;
|
|
|
|
.teacher-detail {
|
|
.teacher-name {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-bottom: 12rpx;
|
|
|
|
.online-status {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 16rpx;
|
|
|
|
.online-dot {
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
border-radius: 50%;
|
|
background-color: #4cd964;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.teacher-department {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.ask-button {
|
|
color: #ffffff;
|
|
background-color: #4f6aff;
|
|
font-size: 24rpx;
|
|
width: 152rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 响应式布局 - PC端样式 */
|
|
@media screen and (min-width: 768px) {
|
|
.admissions-container {
|
|
.content {
|
|
max-width: 1200rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|