southnote-mini-sdk 1.0.0

package/pages/sevenDaySignDetail/sevenDaySignDetail.wxss

@@ -0,0 +1,173 @@
+.page-root {
+  height: 100%;
+  background: linear-gradient(to bottom, #d2deff 0%, #ffffff 100%);
+}
+
+.page-scroll {
+  height: 100%;
+}
+
+.header {
+  padding: 20rpx 60rpx 40rpx 60rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #0b2a7f;
+  margin: 60rpx 0 40rpx 0;
+}
+
+.summary-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summary-item {
+  margin-left: 30rpx;
+  font-size: 26rpx;
+  color: #333;
+}
+
+.em {
+  color: #002fa7;
+  font-weight: 700;
+  margin: 0 6rpx;
+}
+
+.rewards-section {
+  margin-top: 60rpx;
+  padding: 0 40rpx;
+}
+
+.rewards-grid {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20rpx;
+}
+
+.reward-cell {
+  width: calc((100vw - 140rpx) / 4);
+  height: 250rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+  border: 2rpx solid transparent;
+}
+
+.border-highlight {
+  border-color: #eca900;
+}
+
+.cell-top-left {
+  position: absolute;
+  left: -2rpx;
+  top: -2rpx;
+  background-color: #ee7f13;
+  color: #fff;
+  padding: 8rpx 14rpx;
+  border-bottom-right-radius: 10rpx;
+  font-size: 22rpx;
+}
+
+.cell-top-right {
+  position: absolute;
+  right: 6rpx;
+  top: 6rpx;
+  font-size: 18rpx;
+  color: #333;
+}
+
+.item-image {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 8rpx;
+  margin-top: 56rpx;
+  object-fit: contain;
+}
+
+.item-name {
+  margin-top: 14rpx;
+  font-size: 24rpx;
+  color: #222;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.cell-btn {
+  position: absolute;
+  bottom: 0;
+  color: white;
+  width: 100%;
+  height: 54rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #002fa7;
+  border: none;
+  border-bottom-left-radius: 12rpx;
+  border-bottom-right-radius: 12rpx;
+  font-size: 26rpx;
+}
+
+.btn-view {
+  background-color: #859bd5;
+}
+
+.btn-now {
+  background-color: #eca900;
+  border: 2rpx solid #eca900;
+}
+
+.btn-normal {
+  background-color: #002fa7;
+}
+
+.desc-wrapper {
+  padding: 40rpx;
+  margin-top: 70rpx;
+}
+
+.desc-inner {
+  border: 2rpx solid #859bd5;
+  padding: 20rpx;
+  border-radius: 10rpx;
+}
+
+.desc-title {
+  font-size: 32rpx;
+  color: #002fa7;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+  text-align: center;
+}
+
+.time-row {
+  margin-top: 24rpx;
+  font-size: 24rpx;
+  color: #333;
+}
+
+.rule {
+  margin-top: 16rpx;
+  font-size: 22rpx;
+  color: #444;
+}
+
+@media (max-width: 840rpx) {
+  .reward-cell {
+    width: calc((100% - 80rpx) / 3);
+  }
+}

package/pages/topic/topic.js

@@ -0,0 +1,266 @@
+import {
+  queryTopic,
+  collectTopic
+} from "../../services/home"
+import formatUTC from "../../utils/formatPost.js"
+import querySelect from "../../utils/query-select"
+import {
+  throttle
+} from "underscore"
+
+const throttleQuerySelect = throttle(querySelect, 100)
+
+Page({
+  data: {
+    topic: {},
+    posts: [],
+    currentPage: 1, // 已加载的页码（已确认）
+    order: 1, // 1=热度，2=时间
+    isLoading: false,
+    hasMore: true,
+    topic_name: "",
+    isCollected: false,
+    currentPlayingVideoId: null, //当前播放视频帖子id
+  },
+
+  onLoad(options) {
+    const topic_name = decodeURIComponent(options.topic_name || options.id || "") || options.id
+    this.setData({
+      topic_name
+    })
+    // 明确传入第一页并标记为刷新
+    this.getTopicData(1, true)
+
+    wx.setNavigationBarTitle({
+      title: topic_name || '话题中心',
+    })
+  },
+
+  onShareAppMessage() {
+    const {
+      topic
+    } = this.data;
+
+    const title = topic.name || '查看话题详情';
+
+    return {
+      title,
+      // 分享路径携带 gameId 参数
+      path: `/pages/topic/topic?id=${title}`
+    };
+  },
+
+  onCollect(e) {
+
+    const {
+      is_fans,
+      id
+    } = this.data.topic
+    const nType = is_fans === 1 ? 2 : 1
+    collectTopic(id, nType).then(res => {
+      this.setData({
+        'topic.is_fans': is_fans === 1 ? 0 : 1
+      })
+      wx.showToast({
+        title: nType === 1 ? '收藏成功' : '取消收藏成功',
+      })
+    })
+  },
+
+  /**
+   * 获取话题数据（明确传入 page）
+   * @param {number} page - 要请求的页码（从1开始）
+   * @param {boolean} isRefresh - 是否是刷新（重置数据）
+   */
+  async getTopicData(page = 1, isRefresh = false) {
+    if (this.data.isLoading) return
+    if (!this.data.hasMore && !isRefresh && page > this.data.currentPage) return
+
+    this.setData({
+      isLoading: true
+    })
+
+    try {
+      const res = await queryTopic(this.data.topic_name, page, this.data.order)
+      const postsFromRes = (res?.data?.posts) || []
+      const topic = (res?.data?.topic) || this.data.topic
+      const formatPosts = this.formatPost({
+        data: {
+          posts: postsFromRes
+        }
+      })
+
+      if (isRefresh) {
+        this.setData({
+          topic,
+          posts: formatPosts,
+          currentPage: 1,
+          hasMore: postsFromRes.length > 0
+        })
+      } else {
+        // ✅ 追加新数据，使用索引方式 setData，性能更好
+        const currentLength = this.data.posts.length
+        const update = {}
+        formatPosts.forEach((item, idx) => {
+          update[`posts[${currentLength + idx}]`] = item
+        })
+        this.setData({
+          ...update,
+          topic,
+          currentPage: postsFromRes.length > 0 ? page : this.data.currentPage,
+          hasMore: postsFromRes.length > 0
+        })
+      }
+    } catch (err) {
+      console.error("话题加载失败", err)
+    } finally {
+      this.setData({
+        isLoading: false
+      })
+      wx.stopPullDownRefresh()
+    }
+  },
+
+  formatPost(post) {
+    if (!post || !Array.isArray(post.data.posts)) return []
+    return post.data.posts.map(item => {
+      const newItem = {
+        ...item,
+        post: {
+          ...item.post,
+          formatTime: formatUTC(item.post.created_at),
+          imageArray: item.post.images ? item.post.images.split(",") : []
+        }
+      }
+      if (item.shared && item.shared.post) {
+        newItem.shared = {
+          ...item.shared,
+          post: {
+            ...item.shared.post,
+            formatTime: formatUTC(item.shared.post.created_at),
+            imageArray: item.shared.post.images ? item.shared.post.images.split(",") : []
+          }
+        }
+      }
+      return newItem
+    })
+  },
+
+  /** van-tabs change 事件：切换排序（重置到第一页并刷新） */
+  onTabChange(event) {
+    const index = event.detail.index
+    const newOrder = index + 1
+    if (this.data.order === newOrder) return
+
+    // 重置 posts, currentPage, hasMore，再加载第一页
+    this.setData({
+      order: newOrder,
+      posts: [],
+      currentPage: 1,
+      hasMore: true
+    }, () => {
+      this.getTopicData(1, true)
+    })
+  },
+
+  /** 下拉刷新：重新加载第一页 */
+  onPullDownRefresh() {
+    this.setData({
+      currentPage: 1,
+      posts: [],
+      hasMore: true
+    })
+    this.getTopicData(1, true)
+  },
+
+  /** 触底加载更多：请求 nextPage 并显式传入 */
+  async onReachBottom() {
+    if (this.data.isLoading || !this.data.hasMore) return
+    const nextPage = this.data.currentPage + 1
+    this.getTopicData(nextPage, false)
+  },
+
+  gotoGameDetail(e) {
+    const gameId = e.currentTarget.dataset.game.id
+    wx.navigateTo({
+      url: `/pages/game/game?id=${gameId}`
+    });
+  },
+
+  onPublish() {
+    wx.navigateTo({
+      url: '/pages/post-editor/post-editor',
+    })
+  },
+
+  onFollowChanged(e) {
+    const {
+      userId,
+      isFans
+    } = e.detail;
+    const {
+      posts
+    } = this.data;
+
+    let updatedPosts;
+
+    if (Array.isArray(posts)) {
+      // posts 是数组
+      updatedPosts = posts.map(p => {
+        if (p.user.id === userId) {
+          p.user.is_fans = isFans ? 1 : 0;
+        }
+        return p;
+      });
+    } else if (posts && typeof posts === 'object') {
+      // posts 是按某种分组的对象
+      updatedPosts = {};
+      Object.keys(posts).forEach(key => {
+        const arr = posts[key];
+        if (Array.isArray(arr)) {
+          updatedPosts[key] = arr.map(p => {
+            if (p.user.id === userId) {
+              p.user.is_fans = isFans ? 1 : 0;
+            }
+            return p;
+          });
+        } else {
+          updatedPosts[key] = arr;
+        }
+      });
+    } else {
+      updatedPosts = posts;
+    }
+
+    this.setData({
+      posts: updatedPosts
+    });
+
+    wx.showToast({
+      title: isFans ? '关注成功' : '已取消关注',
+      icon: 'success'
+    });
+  },
+
+  onVideoPlay(e) {
+
+    const postId = e.detail.id;
+    const prevId = this.data.currentPlayingVideoId;
+
+    if (prevId && prevId !== postId) {
+      // 1️⃣ 获取上一个视频所在的组件实例
+      const prevIndex = this.data.posts.findIndex(p => p.post.id === prevId);
+      const prevComponent = this.selectComponent(`#postItem-${prevIndex}`);
+      if (prevComponent) {
+        prevComponent.pauseVideo();
+      }
+    }
+
+    // 更新当前播放视频
+    this.setData({
+      currentPlayingVideoId: postId
+    });
+  },
+
+
+})

package/pages/topic/topic.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "post-item": "/components/post-item/post-item"
+  },
+  "enablePullDownRefresh": true
+}

package/pages/topic/topic.wxml

@@ -0,0 +1,77 @@
+<!-- 话题详情页 -->
+<view class="topic-page">
+
+  <!-- 顶部话题信息 -->
+  <view class="topic-header">
+    <image wx:if="{{topic.icon}}" class="topic-icon" src="{{topic.icon}}" mode="aspectFill" />
+    <van-icon wx:else class="topic-icon" name="comment-o" size="30" style="background-color: #efefef;" />
+    <view class="topic-info">
+      <text class="topic-name">{{topic.name}}</text>
+      <text class="topic-meta">阅读 {{topic.view_count}}　帖子 {{topic.posts_count}}</text>
+    </view>
+    <button class="collect-btn" size="mini" type="default" catchtap="onCollect" style="background-color: {{topic.is_fans === 1 ? '#f7f7f7' : '#002fa7'}}; color: {{topic.is_fans === 1 ? '#b0b0b0' : '#ffffff'}}; font-size: 28rpx;padding: 5rpx 30rpx;">
+      {{topic.is_fans === 1 ? '已收藏' : '收藏'}}
+    </button>
+  </view>
+
+  <view class="divider"></view>
+
+  <!-- 相关游戏横向滚动 -->
+  <view class="game-card" wx:if="{{topic.games.length > 0}}">
+    <text class="title">相关游戏</text>
+
+    <scroll-view class="game-scroll" scroll-x="true" show-scrollbar="false">
+      <view class="game-list">
+        <block wx:for="{{topic.games}}" wx:for-index="index" wx:key="index">
+          <view class="game-item" catchtap="gotoGameDetail" data-game="{{item}}">
+            <image class="game-icon" src="{{item.icon+'?x-oss-process=image/resize,w_256'}}" mode="aspectFill" />
+            <text class="game-name">{{item.name}}</text>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+  <view class="divider" wx:if="{{topic.games.length > 0}}"></view>
+
+
+  <!-- van-tabs tab切换 -->
+  <van-tabs class="custom-tabs" active="{{order-1}}" bind:change="onTabChange" swipeable animated color="gray" line-width="20">
+    <van-tab title="按热度">
+      <!-- 帖子列表 -->
+      <block wx:for="{{posts}}" wx:for-index="index" wx:key="index">
+        <post-item item="{{item}}" itemType="subject" bind:followChanged="onFollowChanged" bind:videoPlay="onVideoPlay" id="postItem-{{index}}"/>
+      </block>
+
+      <!-- 加载中提示 -->
+      <view wx:if="{{isLoading}}" style="text-align:center; padding:20rpx; color:#999;">
+        <text>加载中...</text>
+      </view>
+
+      <!-- 无更多提示 -->
+      <view wx:elif="{{!hasMore}}" style="text-align:center; padding:20rpx; color:#ccc;">
+        <text>—— 没有更多了 ——</text>
+      </view>
+    </van-tab>
+    <van-tab title="按时间">
+      <!-- 帖子列表 -->
+      <block wx:for="{{posts}}" wx:for-index="index" wx:key="index">
+        <post-item item="{{item}}" bind:followChanged="onFollowChanged" bind:videoPlay="onVideoPlay" id="postItem-{{index}}"/>
+      </block>
+
+      <!-- 加载中提示 -->
+      <view wx:if="{{isLoading}}" style="text-align:center; padding:20rpx; color:#999;">
+        <text>加载中...</text>
+      </view>
+
+      <!-- 无更多提示 -->
+      <view wx:elif="{{!hasMore}}" style="text-align:center; padding:20rpx; color:#ccc;">
+        <text>—— 没有更多了 ——</text>
+      </view>
+    </van-tab>
+  </van-tabs>
+
+
+
+  <!-- 悬浮发布按钮 -->
+  <view class="fab" bindtap="onPublish">+发布</view>
+</view>

package/pages/topic/topic.wxss

@@ -0,0 +1,162 @@
+.topic-page {
+  background-color: #f8f8f8;
+  min-height: 100vh;
+  padding-bottom: 100rpx;
+}
+
+/* 顶部话题信息 */
+.topic-header {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  padding: 24rpx;
+}
+
+.topic-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 20rpx;
+}
+
+.topic-info {
+  flex: 1;
+  margin-left: 20rpx;
+}
+
+.topic-name {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #000;
+}
+
+.topic-meta {
+  display: block;
+  margin-top: 6rpx;
+  color: #999;
+  font-size: 26rpx;
+}
+
+.collect-btn {
+  border-radius: 30rpx;
+  padding: 0 20rpx;
+  font-size: 26rpx;
+  color: #333;
+}
+
+
+.game-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 18rpx;
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+.title {
+  font-size: 30rpx;
+  font-weight: 700;
+}
+.game-scroll {
+  overflow-x: scroll;
+  margin-top: 20rpx;
+}
+
+.game-list {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  background-color: #F7F7F7;
+  padding: 20rpx;
+  border-radius: 10rpx;
+}
+
+.game-item {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 10rpx;
+}
+
+.game-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 20rpx;
+}
+
+.game-name {
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: #333;
+  max-width: 120rpx;
+  /* 限制宽度，适配你的布局 */
+  overflow: hidden;
+  /* 超出隐藏 */
+  white-space: nowrap;
+  /* 不换行 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  text-align: center;
+  /* 居中对齐（可选） */
+}
+
+
+.divider {
+  height: 20rpx;
+  background-color: #f1f1f1;
+  width: 100%;
+}
+
+/* tab切换 */
+.tab-bar {
+  display: flex;
+  justify-content: space-around;
+  background: #fff;
+  border-bottom: 2rpx solid #eee;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.tab-item.active {
+  color: #000;
+  font-weight: bold;
+  border-bottom: 4rpx solid #000;
+}
+.van-sticky-wrap {
+  background-color: white;
+}
+.custom-tabs .van-tabs__wrap {
+  width: 50%;
+  /* 控制顶部导航条宽度 */
+}
+
+.custom-tabs .van-tabs__content {
+  width: 100%;
+  /* 控制内容区宽度 */
+}
+
+
+
+
+.fab {
+  position: fixed;
+  left: 50%;
+  bottom: 80rpx;
+  transform: translateX(-50%); /* ✅ 水平居中关键 */
+  width: 200rpx;               /* ✅ 你想要的宽度 */
+  height: 80rpx;
+  background-color: #002fa7;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+  border: none;                /* 移除系统边框 */
+  border-radius: 40rpx;
+  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}