YingXingAI/pages/notes/index.vue

<template>
  <div class="notes-page">
    <PageHeader
      title="留言板"
      :is-back="false"
      :border-bottom="false"
    />
    <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>
      <div class="space"></div>
    </view>

    <div class="content-wrapper">
      <scroll-view class="message-list" scroll-y>
        <view v-for="(item, index) in currentMessages" :key="index" class="message-wrapper">
          <MessageItem 
            :item="item" 
            :itemIndex="index"
            :defaultAvatar="defaultAvatar"
            @delete="handleDelete"
            @open-swipe="handleOpenSwipe"
            @reply="handleReply"
            @toggle-expand="toggleExpand"
          />
        </view>
        <view class="empty-tip" v-if="currentMessages.length === 0">
          暂无留言数据
        </view>
      </scroll-view>
    </div>

    <TabBar :currentPath="'/pages/notes/index'" @change="handleTabChange" />

    <u-modal
      v-model="showDevModal"
      :show-cancel-button="false"
      title="提示"
      content="该功能正在开发中，敬请期待！"
      @confirm="showDevModal = false"
    ></u-modal>
  </div>
</template>

<script>
import TabBar from "@/components/TabBar.vue";
import PageHeader from "@/components/PageHeader.vue";
import MessageItem from "@/components/MessageItem.vue";

export default {
  name: "NotesPage",
  components: {
    TabBar,
    PageHeader,
    MessageItem
  },
  data() {
    return {
      tabList: [{ name: "未回复" }, { name: "已回复" }],
      tabCurrent: 0,
      activeTab: "unread",
      showDevModal: false,
      defaultAvatar: "/static/avatar/default-avatar.png",
      unreadMessages: [
        {
          id: 1,
          avatar: "",
          username: "浙江理工生13024",
          time: "2023/6/26 15:45:12",
          question: "学校在录取时有没有一些专业会有特殊要求?",
          reply: "",
          expanded: false,
          show: false,
        },
        {
          id: 2,
          avatar: "",
          username: "理工13024",
          time: "2023/6/26 15:45:12",
          question: "在录取时有没有一些专业会有特殊要求?",
          reply: "",
          expanded: false,
          show: false,
        },
      ],
      repliedMessages: [
        {
          id: 3,
          avatar: "",
          username: "浙江理工生13024",
          time: "2023/6/26 15:45:12",
          question: "学校在录取时有没有一些专业会有特殊要求?",
          reply:
            "学生与体健康状况必须符合教育部、卫生部、中国残疾人联合会印发的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、原卫生部、原教育部、原公安部、原国家人口计划生育委员会制定的有关规定。原卫生部、原教育部、原公安部、原国家人口计划生育委员会制定的有关规定。",
          replyUser: "系统回复",
          expanded: false,
          show: false,
        },
      ]
    };
  },
  computed: {
    currentMessages() {
      return this.activeTab === "unread"
        ? this.unreadMessages
        : this.repliedMessages;
    },
  },
  methods: {
    onTabChange(index) {
      this.tabCurrent = index;
      // 根据索引设置activeTab值
      this.activeTab = index === 0 ? "unread" : "replied";
      // 切换选项卡时关闭所有打开的滑动按钮
      this.closeAllSwipe();
    },
    switchTab(tab) {
      this.activeTab = tab;
      // 更新tabCurrent以匹配activeTab
      this.tabCurrent = tab === "unread" ? 0 : 1;
      // 切换选项卡时关闭所有打开的滑动按钮
      this.closeAllSwipe();
    },
    handleTabChange(path, index) {
      console.log("切换到标签页:", path, index);
    },
    handleReply(item) {
      this.showDevModal = true;
    },
    toggleExpand(item) {
      item.expanded = !item.expanded;
    },
    handleDelete(index) {
      // 删除当前消息
      if (this.activeTab === "unread") {
        this.unreadMessages.splice(index, 1);
      } else {
        this.repliedMessages.splice(index, 1);
      }
    },
    handleOpenSwipe(index) {
      // 打开滑动按钮时，关闭其他打开的滑动按钮
      this.closeOther(index);
    },
    closeOther(index) {
      // 关闭除当前外的所有滑动按钮
      if (this.activeTab === "unread") {
        this.unreadMessages.forEach((item, idx) => {
          if (idx !== index) {
            item.show = false;
          }
        });
      } else {
        this.repliedMessages.forEach((item, idx) => {
          if (idx !== index) {
            item.show = false;
          }
        });
      }
    },
    closeAllSwipe() {
      // 关闭所有滑动按钮
      this.unreadMessages.forEach((item) => {
        item.show = false;
      });
      this.repliedMessages.forEach((item) => {
        item.show = false;
      });
    }
  },
};
</script>

<style scoped>
.notes-page {
  height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header {
  background-color: #fff;
  padding-top: 10px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding: 10px 0;
}

.custom-tabs-box {
  display: flex;
}

.space {
  width: 100%;
  height: 100%;
  background: #fff;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px; /* 为底部导航栏预留空间 */
  overflow-y: auto; /* 允许内容滚动 */
}

/* 留言列表样式 */
.message-list {
  box-sizing: border-box;
  padding: 26rpx;
  flex: 1;
}

.message-wrapper {
  margin-bottom: 10px;
}

.empty-tip {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}
</style>