YingXingAI/pages/notes/index.vue

<template>
  <view 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>
      <view class="space"></view>
    </view>

    <!-- 内容区域包装器 -->
    <view class="content-wrapper">
      <!-- 留言列表 -->
      <scroll-view class="message-list" scroll-y>
        <view v-for="(item, index) in currentMessages" :key="index">
          <u-swipe-action
            :options="swipeOptions"
            :show="item.show"
            :index="index"
            @click="handleSwipeClick"
            @open="(e) => handleSwipeOpen(e, index)"
            @close="(e) => handleSwipeClose(e, index)"
            @content-click="() => closeOther(index)"
            :btn-width="80"
            :disabled="false"
          >
            <view class="message-item">
              <view class="message-header">
                <view class="user-info">
                  <image
                    class="avatar"
                    :src="item.avatar || defaultAvatar"
                  ></image>
                  <text class="username">{{ item.username }}</text>
                </view>
                <view class="message-time">{{ item.time }}</view>
              </view>

              <view class="message-content">
                <view class="question">
                  <view class="question-icon">问</view>
                  <view class="question-text">{{ item.question }}</view>
                </view>

                <view
                  class="reply-button"
                  @click.stop="handleReply(item)"
                  v-if="!item.reply"
                >
                  <u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
                  <text>回复</text>
                </view>

                <view class="reply-content" v-if="item.reply">
                  <view class="reply-header">
                    <view class="reply-icon">答</view>
                    <view class="reply-info">
                      <text>{{ item.replyUser }}</text>
                    </view>
                  </view>
                  <view
                    class="reply-text"
                    :class="{ expanded: item.expanded }"
                    >{{ item.reply }}</view
                  >
                  <view
                    class="expand-button"
                    v-if="item.reply.length > 100"
                    @click.stop="toggleExpand(item)"
                  >
                    {{ item.expanded ? "收起" : "展开" }}
                    <u-icon
                      :name="item.expanded ? 'arrow-up' : 'arrow-down'"
                      size="12"
                    ></u-icon>
                  </view>
                </view>

                <view
                  class="reply-button"
                  @click.stop="handleReply(item)"
                  v-if="item.reply"
                >
                  <u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
                  <text>回复</text>
                </view>
              </view>
            </view>
          </u-swipe-action>
        </view>

        <!-- 无数据提示 -->
        <view class="empty-tip" v-if="currentMessages.length === 0">
          暂无留言数据
        </view>
      </scroll-view>
    </view>

    <!-- 使用TabBar组件 -->
    <TabBar :currentPath="'/pages/notes/index'" @change="handleTabChange" />

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

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

export default {
  name: "NotesPage",
  components: {
    TabBar,
    PageHeader,
  },
  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,
        },
      ],
      swipeOptions: [
        {
          text: "删除",
          style: {
            backgroundColor: "#fa3534",
            color: "#ffffff",
            fontSize: "15px",
          },
        },
      ],
    };
  },
  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;
    },
    handleSwipeClick(e) {
      const { index } = e; // 当前点击的滑动单元格索引
      const btnIndex = e.index; // 点击的按钮索引

      if (btnIndex === 0) {
        // 删除按钮
        // 删除当前消息
        if (this.activeTab === "unread") {
          this.unreadMessages.splice(index, 1);
        } else {
          this.repliedMessages.splice(index, 1);
        }
      }
    },
    handleSwipeOpen(e, index) {
      // 打开滑动按钮时，关闭其他打开的滑动按钮
      this.closeOther(index);
    },
    handleSwipeClose(e, index) {
      // 处理滑动关闭事件
      if (this.activeTab === "unread") {
        this.unreadMessages[index].show = false;
      } else {
        this.repliedMessages[index].show = false;
      }
    },
    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;
}


.custom-tabs-box {
  display: flex;
  align-items: center;
}

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

.custom-tabs-box >>> .u-tabs__wrapper__nav__item {
  padding: 0 20px 0 0 !important; /* 调整标签项的padding */
}

.custom-tabs-box >>> .u-tabs__wrapper__nav__line {
  bottom: 0 !important; /* 确保下划线位于底部 */
  height: 4px !important; /* 设置下划线高度 */
  border-radius: 2px !important; /* 圆角 */
}

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

/* 留言列表样式 */
.message-list {
  flex: 1;
  padding: 10px;
}

.message-item {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #eee;
}

.username {
  font-size: 12px;
  color: #666;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-content {
  position: relative;
}

.question {
  display: flex;
  margin-bottom: 10px;
}

.question-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #4a6cf7;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.question-text {
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.reply-button {
  height: 32px;
  background-color: #f0f2fd;
  color: #4a6cf7;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}

.reply-button text {
  margin-left: 5px;
}

.reply-content {
  background-color: #f8f8f8;
  border-radius: 4px;
  padding: 10px;
  margin-top: 10px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.reply-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff9500;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.reply-info {
  font-size: 12px;
  color: #666;
}

.reply-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin-left: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.reply-text.expanded {
  -webkit-line-clamp: unset;
}

.expand-button {
  text-align: right;
  font-size: 12px;
  color: #4a6cf7;
  margin-top: 5px;
  cursor: pointer;
}

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