142 lines
4.3 KiB
Vue
142 lines
4.3 KiB
Vue
<template>
|
||
<view class="message-board-page">
|
||
<header-bar title="留言板" @leftClick="handleLeftClick"></header-bar>
|
||
<view class="custom-tabs-box">
|
||
<u-tabs
|
||
:list="tabList"
|
||
:current="tabCurrent"
|
||
@change="onTabChange"
|
||
:is-scroll="false"
|
||
:height="80"
|
||
:font-size="28"
|
||
active-color="#4A6CF7"
|
||
inactive-color="#333333"
|
||
:bar-width="120"
|
||
:bar-height="4"
|
||
bg-color="#ffffff"
|
||
:item-width="200"
|
||
></u-tabs>
|
||
</view>
|
||
|
||
<!-- 内容区域包装器 -->
|
||
<view class="content-wrapper">
|
||
<!-- 问答列表组件 -->
|
||
<message-board
|
||
:answerList="answerList"
|
||
@delete="handleDelete"
|
||
></message-board>
|
||
</view>
|
||
|
||
<!-- 提示 -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderBar from "@/components/HeaderBar.vue";
|
||
import MessageBoard from "@/components/AnswerList/messageBoard.vue";
|
||
|
||
export default {
|
||
components: {
|
||
HeaderBar,
|
||
MessageBoard,
|
||
},
|
||
data() {
|
||
return {
|
||
tabList: [{ name: "未回复" }, { name: "已回复" }],
|
||
tabCurrent: 0,
|
||
activeTab: "unread",
|
||
|
||
answerList: [
|
||
{
|
||
id: 1,
|
||
studentName: "浙江考生13024",
|
||
studentAvatar: "/static/common/images/avatar.png",
|
||
time: "2025/6/26 15:45:12",
|
||
question: "学校在录取时有没有一些专业会有特殊要求?",
|
||
fullAnswer:
|
||
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部",
|
||
isReply: false,
|
||
},
|
||
{
|
||
id: 2,
|
||
studentName: "浙江考生13024",
|
||
studentAvatar: "/static/common/images/avatar.png",
|
||
time: "2025/6/26 15:45:12",
|
||
question: "学校在录取时有没有一些专业会有特殊要求?",
|
||
teacherName: "招生办 张老师",
|
||
teacherAvatar: "/static/common/images/avatar.png",
|
||
replyTime: "2025/6/26 15:45:12",
|
||
fullAnswer:
|
||
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》。",
|
||
isReply: true,
|
||
},
|
||
{
|
||
id: 3,
|
||
studentName: "浙江考生13024",
|
||
studentAvatar: "/static/common/images/avatar.png",
|
||
time: "2025/6/26 15:45:12",
|
||
question: "学校在录取时有没有一些专业会有特殊要求?",
|
||
teacherName: "招生办 张老师",
|
||
// teacherAvatar: "/static/common/images/avatar.png",
|
||
replyTime: "2025/6/26 15:45:12",
|
||
fullAnswer:
|
||
"考生身体健康状况必须符合教育部、原卫生部中国残疾人联合的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、教育部、原卫生部、见》和人力资源社会保障部、教育部、原卫生部中共发布的相关规定。部分专业确有特殊要求，如航空服务类专业对身高、视力等有特殊要求，艺术类专业要求有艺术基础等。建议考生在填报志愿前，详细了解意向专业的招生要求。",
|
||
isReply: true,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
handleLeftClick() {
|
||
uni.navigateBack();
|
||
},
|
||
onTabChange(index) {
|
||
this.tabCurrent = index;
|
||
// 根据索引设置activeTab值
|
||
this.activeTab = index === 0 ? "unread" : "replied";
|
||
},
|
||
handleDelete(item, callback) {
|
||
console.log("handleDelete", item);
|
||
|
||
setTimeout(() => {
|
||
this.$refs.uToast.show({
|
||
title: "撤回成功",
|
||
type: "success",
|
||
});
|
||
callback(true);
|
||
}, 1500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.message-board-page {
|
||
height: 100vh;
|
||
background-color: #f5f6fa;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
padding-top: 88rpx;
|
||
|
||
.custom-tabs-box {
|
||
display: flex;
|
||
align-items: center;
|
||
position: fixed;
|
||
top: 88rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 98;
|
||
background-color: #ffffff;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 30rpx;
|
||
margin-top: 80rpx; /* 为固定的tabs留出空间，与u-tabs的height属性值保持一致 */
|
||
}
|
||
}
|
||
</style>
|