YingXingAI/pages/home/messageBoard/index.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>