southnote-mini-sdk 1.0.0

package/pages/message/messageCommentsAndAt/messageCommentsAndAt.js

@@ -0,0 +1,178 @@
+import {
+  queryUserMessages
+} from '../../../services/home';
+import {
+  parseContent
+} from '../../../utils/parseContent';
+Page({
+  data: {
+    list: [],
+    page: 1,
+    isRefreshing: false,
+    isLoadingMore: false,
+    hasMore: true,
+    myAvatar: '',
+    loading: true,
+  },
+
+  onLoad() {
+    this.fetchData(true);
+
+    this.setData({
+      myAvatar: wx.getStorageSync('avatar') || '/assets/images/icons/header_placeholder.png',
+    })
+  },
+
+  onPullDownRefresh() {
+    if (this.data.isRefreshing) return;
+
+    this.setData({
+      page: 1,
+      isRefreshing: true,
+      hasMore: true
+    }, () => {
+      this.fetchData(true);
+    });
+  },
+
+  onReachBottom() {
+    if (!this.data.hasMore || this.data.isLoadingMore) return;
+
+    this.setData({
+      isLoadingMore: true
+    }, () => {
+      this.fetchData(false);
+    });
+  },
+
+  fetchData(isRefresh) {
+    const page = this.data.page;
+
+    queryUserMessages(page, 3).then(res => {
+      let newList = Array.isArray(res.data) ? res.data : [];
+
+      newList = newList.map(item => {
+        let cover = '/assets/images/icons/header_placeholder.png';
+
+        if (item.main?.post?.images) {
+          cover = item.main.post.images.split(',')[0];
+        } else if (item.main?.user?.avatar) {
+          cover = item.main.user.avatar;
+        }
+
+        item.mainCover = cover;
+
+        // 时间
+        item.operation._timeText = this.formatTime(item.operation.created_at);
+
+        // ✅ 直接用你封装好的方法
+        item.roleContentParts = parseContent(
+          item.role?.post?.content || ''
+        );
+        item.mainContentParts = parseContent(
+          item.main?.post?.content || ''
+        );
+
+        // 解析 upper，如果存在
+        if (item.upper) {
+          const parts = [];
+
+          // 添加 @user.nickname
+          if (item.upper.user?.nickname) {
+            parts.push({
+              text: `@${item.upper.user.nickname}`,
+              color: '#406ce3'
+            });
+          }
+
+          // 如果 upper.post 有 reply_nickname
+          if (item.upper.post?.reply_nickname) {
+            parts.push({
+              text: ' 回复 ',
+              color: '#333'
+            });
+            parts.push({
+              text: `@${item.upper.post.reply_nickname}`,
+              color: '#406ce3'
+            });
+          }
+
+          // 补冒号
+          if (item.upper.post?.status !== 3) {
+            parts.push({
+              text: ': ',
+              color: '#333'
+            });
+          }
+
+          // 拼接正文
+          if (item.upper.post?.content) {
+            parts.push(...parseContent(item.upper.post.content));
+          }
+
+
+
+          // 图片数组转成 [查看图片]
+          if (item.upper.post?.images) {
+            const imgArray = item.upper.post.images.split(',');
+            imgArray.forEach((src, idx) => {
+              parts.push({
+                text: '[图片]',
+                type: 'view_img',
+                src,
+                index: idx,
+                from: 'upper',
+              });
+            });
+          }
+          item.upperContentParts = parts;
+        }
+
+        // 如果你暂时不处理图片，这里可以先不加任何逻辑
+
+        return item;
+      });
+
+      this.setData({
+        list: isRefresh ? newList : this.data.list.concat(newList),
+        page: isRefresh ? 2 : page + 1,
+        hasMore: newList.length > 0,
+        isRefreshing: false,
+        isLoadingMore: false
+      });
+
+      wx.stopPullDownRefresh();
+    }).finally(() => {
+      this.setData({
+        loading: false
+      });
+    });
+  },
+
+  formatTime(timestamp) {
+    const date = new Date(timestamp * 1000);
+    const m = date.getMonth() + 1;
+    const d = date.getDate();
+    const h = date.getHours();
+    const mi = date.getMinutes();
+    return `${m}-${d} ${h}:${mi < 10 ? '0' + mi : mi}`;
+  },
+
+  goDetail(e) {
+    const postId = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/post/post?id=${postId}`
+    });
+  },
+  goUserDetail(e) {
+    const userId = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/user/user?id=${userId}`
+      // url: '/pages/customNavPage/customNavPage'
+
+    });
+  },
+
+
+
+});

package/pages/message/messageCommentsAndAt/messageCommentsAndAt.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "评论和@",
+  "enablePullDownRefresh": true,
+  "usingComponents": {}
+}

package/pages/message/messageCommentsAndAt/messageCommentsAndAt.wxml

@@ -0,0 +1,93 @@
+<van-van-skeleton title avatar row="8" loading="{{ loading }}">
+  <view class="container">
+    <!-- 列表 -->
+    <block wx:for="{{list}}" wx:key="index">
+      <view class="cell" catchtap="goDetail" data-id="{{item.role.post.id}}">
+        <!-- 左侧头像 -->
+        <image class="avatar" src="{{item.role.user.avatar || '/assets/images/icons/header_placeholder.png'}}" mode="cover" catchtap="goUserDetail" data-id="{{item.role.user.id}}" />
+
+        <!-- 右侧内容 -->
+        <view class="right">
+          <!-- 上行昵称 + 动作文字 -->
+          <view class="top">
+            <span class="nickname">{{item.role.user.nickname}}</span>
+            <span class="action-text">
+              {{item.operation.type === 'share' ? '转发了你' : (item.operation.type === 'comment' ? '回复了你' : ' @了你')}}
+            </span>
+            <text wx:if="{{item.operation.is_read === 0}}" style="background-color: #f44336;font-size: 20rpx;font-weight: bold;color: white;padding: 5rpx 9rpx;border-radius: 10rpx; margin-left:8rpx;">新</text>
+          </view>
+
+          <!-- 第二行：role.post内容 -->
+          <view class="comment-text" wx:if="{{item.roleContentParts.length}}">
+            <block wx:for="{{item.roleContentParts}}" wx:for-item="part" wx:key="index">
+              <!-- 普通文字 -->
+              <span wx:if="{{!part.type}}" style="color: {{part.color || '#333'}}; font-weight: {{part.bold ? 'bold' : 'normal'}};">{{part.text}}</span>
+
+              <!-- emoji -->
+              <image wx:if="{{part.type === 'emoji'}}" class="emoji" src="{{part.src}}" style="width:24rpx;height:24rpx;vertical-align:middle;" />
+
+              <!-- 换行 -->
+              <span wx:if="{{part.type === 'br'}}"><br /></span>
+
+              <!-- @用户 -->
+              <span wx:if="{{part.type === 'at'}}" data-userid="{{part.userId}}" bindtap="goUserDetail">{{part.text}}</span>
+
+              <!-- #话题# -->
+              <span wx:if="{{part.type === 'topic'}}">{{part.text}}</span>
+            </block>
+
+
+            <!-- upper 内容 -->
+            <span wx:if="{{item.upperContentParts && item.upperContentParts.length}}">//</span>
+            <block wx:if="{{item.upperContentParts && item.upperContentParts.length}}" wx:for="{{item.upperContentParts}}" wx:for-item="part" wx:key="index">
+              <span wx:if="{{!part.type}}" style=" font-weight: {{part.bold ? 'bold' : 'normal'}};">{{part.text}}</span>
+              <image wx:if="{{part.type === 'emoji'}}" class="emoji" src="{{part.src}}" style="width:24rpx;height:24rpx;vertical-align:middle;" />
+              <span wx:if="{{part.type === 'br'}}"><br /></span>
+              <span wx:if="{{part.type === 'at'}}" data-userid="{{part.userId}}" bindtap="goUserDetail">{{part.text}}</span>
+              <span wx:if="{{part.type === 'topic'}}">{{part.text}}</span>
+              <span wx:if="{{part.type === 'view_img'}}" bindtap="viewImage" data-src="{{part.src}}">[查看图片]</span>
+            </block>
+
+          </view>
+
+
+
+          <!-- 原帖内容 -->
+          <view class="post-content" wx:if="{{item.main && item.main.post}}">
+            <image class="post-img" src="{{item.mainCover }}" mode="cover" />
+            <view class="post-text" style="color: #919191;">
+              <span style="color: #919191; font-weight: {{part.bold ? 'bold' : 'normal'}};">@{{item.main.user.nickname}}：</span>
+
+              <block wx:for="{{item.mainContentParts}}" wx:for-item="part" wx:key="index">
+                <span wx:if="{{!part.type}}" style="color: #919191; font-weight: {{part.bold ? 'bold' : 'normal'}};">{{part.text}}</span>
+                <image wx:if="{{part.type === 'emoji'}}" class="emoji" src="{{part.src}}" style="width:24rpx;height:24rpx;vertical-align:middle;" />
+                <span wx:if="{{part.type === 'br'}}"><br /></span>
+                <span wx:if="{{part.type === 'at'}}" data-userid="{{part.userId}}" bindtap="goUserDetail">{{part.text}}</span>
+                <span wx:if="{{part.type === 'topic'}}">{{part.text}}</span>
+              </block>
+            </view>
+          </view>
+
+          <!-- 原帖已删除 -->
+          <view wx:if="{{item.main && !item.main.post}}" class="post-content deleted">
+            原文已被删除
+          </view>
+
+          <view wx:if="{{item.main && item.main.user.status === 3}}" class="post-content deleted">
+            原文账户被封禁，已无法查看
+          </view>
+
+          <!-- 操作时间 -->
+          <view class="time">{{item.operation._timeText}}</view>
+        </view>
+      </view>
+    </block>
+
+    <!-- 列表为空 -->
+    <view wx:if="{{list.length === 0 && !isRefreshing}}" class="no-data">暂无消息</view>
+
+    <!-- 底部加载/无更多 提示 -->
+    <view class="list-footer" wx:if="{{isLoadingMore}}">加载中...</view>
+    <view class="list-footer" wx:if="{{!hasMore && list.length>0}}">没有更多了</view>
+  </view>
+</van-van-skeleton>

package/pages/message/messageCommentsAndAt/messageCommentsAndAt.wxss

@@ -0,0 +1,177 @@
+/* 容器 */
+.container {
+  background-color: #f5f4f9;
+  padding: 0;
+  min-height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+/* 每一条 cell */
+.cell {
+  display: flex;
+  width: 100%;
+  padding: 10px 20px;
+  background-color: #fff;
+  border-radius: 6px;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+/* 头像 */
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #eee;
+  flex-shrink: 0;
+}
+
+/* 右侧内容 */
+.right {
+  flex: 1;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 上行昵称 + 动作文字 */
+.top {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.nickname {
+  font-weight: bold;
+  margin-right: 6px;
+  font-size: 14px;
+  color: #333;
+}
+
+.action-text {
+  color: #666;
+  font-size: 14px;
+}
+
+/* comment-text 和 post-text */
+.comment-text,
+.post-text {
+  font-size: 14px;
+  line-height: 1.4;
+
+  display: -webkit-box;              /* 关键 */
+  -webkit-box-orient: vertical;       /* 关键 */
+  -webkit-line-clamp: 2;              /* 显示 2 行 */
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  word-break: break-word;
+
+}
+
+
+/* 内部 span 和 emoji */
+.comment-text span,
+.comment-text image,
+.post-text span,
+.post-text image {
+  /* display: inline-block; */
+  vertical-align: middle;
+}
+
+/* emoji 图片 */
+.comment-text .emoji,
+.post-text .emoji {
+  width: 18px;
+  height: 18px;
+  margin: 0 2px;
+  vertical-align: middle;
+}
+
+/* 游戏、网页链接、话题、@用户 */
+.comment-text .game,
+.comment-text .jump_url,
+.comment-text .topic,
+.comment-text .at,
+.post-text .game,
+.post-text .jump_url,
+.post-text .topic,
+.post-text .at {
+  color: #406ce3;
+  cursor: pointer;
+}
+
+/* [查看图片] 占位 */
+.comment-text .view_img,
+.post-text .view_img {
+  color: #406ce3;
+  cursor: pointer;
+}
+
+/* 换行 */
+.comment-text .br,
+.post-text .br {
+  display: block;
+  height: 4px;
+}
+
+/* 加粗文字 */
+.comment-text .bold,
+.post-text .bold {
+  font-weight: bold;
+}
+
+/* 原帖内容块 */
+.post-content {
+  display: flex;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  margin: 6px 0;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+/* 已删除的原帖 */
+.post-content.deleted {
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+  font-size: 14px;
+}
+
+/* 原帖图片 */
+.post-img {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  object-fit: cover;
+  background-color: #ddd;
+}
+
+/* 操作时间 */
+.time {
+  margin-top: 3rpx;
+  font-size: 12px;
+  color: #999;
+}
+
+/* 列表为空提示 */
+.no-data {
+  text-align: center;
+  color: #999;
+  margin-top: 20px;
+}
+
+/* 底部加载提示 */
+.list-footer {
+  text-align: center;
+  padding: 12px 0;
+  color: #999;
+  font-size: 13px;
+}

package/pages/message/messageEntire/messageEntire.js

@@ -0,0 +1,112 @@
+import {
+  queryUserNotRead,
+  cleanUserMessages
+} from '../../../services/home'
+
+
+
+Page({
+  data: {
+    selectedType: 'like',
+    unread: {
+      like: 0,
+      fans: 0,
+      comment: 0
+    },
+    messages: {
+      like: [],
+      fans: [],
+      comment: []
+    },
+    statusBarHeight: 20,
+    navHeight: 44
+  },
+
+  onLoad() {
+    const systemInfo = wx.getWindowInfo();
+    const statusBarHeight = systemInfo.statusBarHeight;
+    const navHeight = 44; // 自定义导航栏高度
+    this.setData({
+      statusBarHeight,
+      navHeight,
+      topOffset: statusBarHeight + navHeight
+    });
+  },
+
+  onShow() {
+    this.getUnreadCounts(); // 每次显示页面刷新角标
+  },
+
+  // 获取未读数量
+  getUnreadCounts() {
+    queryUserNotRead().then(res => {
+      if (res.count && Array.isArray(res.count)) {
+        const [like = 0, fans = 0, comment = 0] = res.count;
+        this.setData({
+          unread: {
+            like,
+            fans,
+            comment
+          }
+        });
+      }
+    }).catch(err => {
+      console.error('获取未读消息失败', err);
+    });
+  },
+
+  // 切换顶部选项
+  selectOption(e) {
+    const type = e.currentTarget.dataset.type;
+    this.setData({
+      [`unread.${type}`]: 0
+    });
+
+    if (type === 'like') {
+      wx.navigateTo({
+        url: '/pages/message/messageLikeAndCollect/messageLikeAndCollect',
+      })
+    }
+    if (type === 'fans') {
+      wx.navigateTo({
+        url: '/pages/message/messageNewFans/messageNewFans',
+      })
+    }
+    if (type === 'comment') {
+      wx.navigateTo({
+        url: '/pages/message/messageCommentsAndAt/messageCommentsAndAt',
+      })
+    }
+
+  },
+
+  // 返回上一页
+  goBack() {
+    wx.navigateBack();
+  },
+
+  // 清空所有未读消息
+  clearAllMessages() {
+    cleanUserMessages(0).then(res => {
+      wx.showToast({
+        title: '已将所有消息标注为已读',
+        icon: 'success'
+      });
+      // 清空本地角标显示
+      this.setData({
+        unread: {
+          like: 0,
+          fans: 0,
+          comment: 0
+        }
+      });
+    }).catch(err => {
+      console.error('清空消息失败', err);
+      wx.showToast({
+        title: '清空失败',
+        icon: 'error'
+      });
+    });
+  }
+
+});

package/pages/message/messageEntire/messageEntire.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom"
+  
+}

package/pages/message/messageEntire/messageEntire.wxml

@@ -0,0 +1,44 @@
+<!-- 自定义导航栏 -->
+<view class="custom-nav" style="height: {{navHeight}}px; padding-top: {{statusBarHeight}}px;">
+  <!-- 返回按钮 -->
+  <view class="back-btn" bindtap="goBack">
+    <van-icon name="arrow-left" size="24" />
+  </view>
+
+  <!-- 标题 -->
+  <view class="title">
+    <span>消息</span>
+    <image src="/assets/images/icons/clear.png" mode="" style="width: 25px;height: 25px;margin-left: 10px;color: #9e9e9e;" catch:tap="clearAllMessages" />
+  </view>
+
+  <view style="width: 30px;"></view>
+
+
+</view>
+
+<!-- 顶部三选项 -->
+<view class="top-options" style="margin-top: {{topOffset}}px;">
+  <view class="option" bindtap="selectOption" data-type="like">
+    <view class="icon-wrapper" style="background-color: #ffebcd;">
+      <van-icon name="like" size="36" color="#ff9800" />
+      <view wx:if="{{unread.like > 0}}" class="badge">{{unread.like}}</view>
+    </view>
+    <text>赞和收藏</text>
+  </view>
+
+  <view class="option" bindtap="selectOption" data-type="fans">
+    <view class="icon-wrapper" style="background-color: #d3eafd;">
+      <van-icon name="friends" size="36" color="#2196f3" />
+      <view wx:if="{{unread.fans > 0}}" class="badge">{{unread.fans}}</view>
+    </view>
+    <text>新增粉丝</text>
+  </view>
+
+  <view class="option" bindtap="selectOption" data-type="comment">
+    <view class="icon-wrapper" style="background-color: #dcefdd;">
+      <van-icon name="comment" size="36" color="#4caf50" />
+      <view wx:if="{{unread.comment > 0}}" class="badge">{{unread.comment}}</view>
+    </view>
+    <text>评论和@</text>
+  </view>
+</view>

package/pages/message/messageEntire/messageEntire.wxss

@@ -0,0 +1,88 @@
+/* =====================
+   自定义导航栏
+===================== */
+.custom-nav {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 10px;
+  padding-right: 10px;
+  box-shadow: 0 1px 0 #eaeaea;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+
+.back-btn {
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 18px;
+  align-self: center;
+  display: flex;
+  align-items: center;
+}
+
+.clear-icon {
+  font-size: 24px;
+  color: #333;
+}
+
+/* =====================
+   顶部选项
+===================== */
+.top-options {
+  display: flex;
+  justify-content: space-around;
+  background-color: #fff;
+  padding: 30px 0;
+  /* margin-top 由动态 topOffset 控制 */
+}
+
+.option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.option text {
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+/* 图标背景容器 */
+.icon-wrapper {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  /* 可改圆角 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 角标放在背景右上角 */
+.badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background-color: red;
+  color: #fff;
+  font-size: 12px;
+  line-height: 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  text-align: center;
+  z-index: 2;
+}