southnote-mini-sdk 1.0.0

package/components/bottomSheet/bottomSheet.js

@@ -0,0 +1,473 @@
+import {
+  compressImages
+} from "../../utils/compressImage"
+import sensitive from '../../utils/sensitive'
+
+import {
+  commentPostNew,
+  getUploadToken
+} from "../../services/home"
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    mode: {
+      type: String,
+      value: 'forward' // 'forward' or 'comment'
+    },
+    // 帖子内容+user信息
+    originData: {
+      type: Object,
+      value: null
+    },
+    // 回复的评论内容
+    commentData: {
+      type: Object,
+      value: null
+    },
+    autoFocus: {
+      type: Boolean,
+      value: false
+    },
+
+
+  },
+
+  data: {
+    content: '',
+    alsoComment: false,
+    images: [],
+
+    emojiVisible: false,
+    emojiList: [],
+
+    cursor: 0, // 光标位置
+    textareaHeight: 'calc(100vh - 180rpx)', // 默认高度
+
+    keyboardHeight: 0, // 当前键盘高度
+    sheetBottom: 420, // sheet 的偏移（被顶上去的距离）
+
+    selectedTopic: {}, //转发或者评论选择的话题
+  },
+
+  observers: {
+
+    'selectedTopic': function (topic) {
+      if (topic && topic.name) {
+        this.insertSelectedTopic();
+      }
+    }
+  },
+
+
+
+
+  lifetimes: {
+
+    attached() {
+
+      // 初始化 emoji 列表
+      let list = [];
+      for (let i = 1; i <= 44; i++) {
+        const num = i.toString().padStart(3, '0');
+        list.push(`/assets/images/emoji/smile${num}.png`);
+      }
+      this.setData({
+        emojiList: list
+      });
+
+
+      wx.onKeyboardHeightChange(res => {
+
+        console.log('键盘高度变化:', res.height);
+        if (res.height > 0) {
+          wx.setStorageSync('height', res.height)
+          this.setData({
+            keyboardHeight: res.height,
+            emojiVisible: false, // 有键盘时隐藏emoji面板
+          });
+        } else {
+          this.setData({
+            keyboardHeight: 0,
+          });
+        }
+
+        this.updateSheetPosition(res.height);
+      });
+
+
+    },
+
+    detached() {
+      wx.offKeyboardHeightChange(); // 组件卸载时移除监听
+    }
+  },
+
+
+  methods: {
+    insertSelectedTopic() {
+      const topic = this.data.selectedTopic;
+
+      if (!topic || !topic.name) return;
+
+      const {
+        content,
+        cursor
+      } = this.data;
+      const topicText = `#${topic.name}#`;
+      const newContent =
+        content.slice(0, cursor) + topicText + content.slice(cursor);
+
+      this.setData({
+        content: newContent,
+        cursor: cursor + topicText.length,
+        selectedTopic: null // 插入完清空，避免重复插入
+      });
+
+      // 通知外层或父组件（可选）
+      this.triggerEvent("input", {
+        value: newContent,
+        cursor: this.data.cursor
+      });
+    },
+
+
+    updateSheetPosition(height) {
+      const bottom = height;
+      this.setData({
+        sheetBottom: bottom
+      });
+    },
+    // 点击遮罩时关闭
+    onOverlayTap() {
+      this.closeSheet();
+    },
+
+    stopTap() {},
+
+    closeSheet() {
+      this.setData({
+        visible: false,
+        content: '',
+        alsoComment: false,
+        emojiVisible: false,
+        images: [],
+        cursor: 0
+      });
+    },
+
+    onInput(e) {
+      const v = e.detail.value || '';
+      this.setData({
+        content: v.slice(0, 300),
+        cursor: e.detail.cursor || 0
+      });
+      this.triggerEvent('input', {
+        value: this.data.content,
+        cursor: this.data.cursor
+      });
+    },
+
+    onBlur(e) {
+      this.setData({
+        cursor: e.detail.cursor || 0
+      });
+      this.triggerEvent('blur', {
+        cursor: this.data.cursor
+      });
+    },
+
+    onToggleAlsoComment(e) {
+      const checked = !!(e.detail.value && e.detail.value.length > 0);
+      this.setData({
+        alsoComment: checked
+      });
+      this.triggerEvent('toggleAlsoComment', {
+        value: checked
+      });
+    },
+
+    updateTextareaHeight() {
+      const {
+        emojiVisible,
+        images
+      } = this.data;
+      let height = 'calc(100vh - 180rpx)';
+
+      if (emojiVisible && images.length > 0) height = 'calc(100vh - 780rpx)';
+      else if (emojiVisible) height = 'calc(100vh)';
+      else if (images.length > 0) height = 'calc(100vh - 350rpx)';
+
+      this.setData({
+        textareaHeight: height
+      });
+    },
+
+    /** 选择图片（限制1张） */
+    chooseImage() {
+      if (this.data.images.length >= 1) {
+        wx.showToast({
+          title: '评论只能选取1张照片',
+          icon: 'none'
+        });
+        return;
+      }
+
+      wx.chooseMedia({
+        count: 1,
+        mediaType: ['image'],
+        sourceType: ['album', 'camera'],
+        success: async (res) => {
+          const newImages = [];
+
+          for (let file of res.tempFiles) {
+            const compressed = await compressImages(file.tempFilePath);
+            const info = await new Promise((resolve, reject) => {
+              wx.getFileInfo({
+                filePath: compressed,
+                success: resolve,
+                fail: reject
+              });
+            });
+
+            console.log('压缩后图片路径:', compressed);
+            console.log('压缩后大小（MB）:', (info.size / 1024 / 1024).toFixed(2));
+
+            newImages.push(compressed);
+          }
+
+          const images = this.data.images.concat(newImages).slice(0, 1);
+          this.setData({
+            images
+          }, this.updateTextareaHeight);
+        },
+        fail: (err) => {
+          console.error('选择图片失败：', err);
+        }
+      });
+    },
+
+    removeImage(e) {
+      const index = e.currentTarget.dataset.index;
+      const images = [...this.data.images];
+      images.splice(index, 1);
+      this.setData({
+        images
+      }, this.updateTextareaHeight);
+    },
+
+    chooseTopic() {
+      // this.triggerEvent('chooseTopic', {});
+      wx.navigateTo({
+        url: '/pages/addSubject/addSubject',
+      });
+    },
+
+
+
+    /** 切换表情面板 */
+    toggleEmoji() {
+      const visible = !this.data.emojiVisible;
+
+      if (visible) {
+        // 打开 emoji 面板时收起键盘
+        wx.hideKeyboard();
+      }
+
+      this.setData({
+        emojiVisible: visible,
+        keyboardHeight: 0
+      }, () => {
+        // 更新 sheet 位置
+        this.updateSheetPosition(0);
+      });
+    },
+
+    /** 选择表情并插入到输入框光标处 */
+    selectEmoji(e) {
+      const index = e.currentTarget.dataset.index;
+      const emojiText = `[/` + (index + 1) + `]`;
+
+      setTimeout(() => {
+        const {
+          content,
+          cursor
+        } = this.data;
+        const newContent = content.slice(0, cursor) + emojiText + content.slice(cursor);
+        this.setData({
+          content: newContent,
+          cursor: cursor + emojiText.length
+        });
+      }, 100);
+    },
+
+    toBase64(str) {
+      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+      let result = '';
+      let i = 0;
+
+      str = unescape(encodeURIComponent(str)); // 处理中文
+
+      while (i < str.length) {
+        const byte1 = str.charCodeAt(i++);
+        const byte2 = str.charCodeAt(i++);
+        const byte3 = str.charCodeAt(i++);
+
+        const enc1 = byte1 >> 2;
+        const enc2 = ((byte1 & 3) << 4) | (byte2 >> 4);
+        const enc3 = isNaN(byte2) ? 64 : (((byte2 & 15) << 2) | (byte3 >> 6));
+        const enc4 = isNaN(byte3) ? 64 : (byte3 & 63);
+
+        result += chars.charAt(enc1);
+        result += chars.charAt(enc2);
+        result += enc3 === 64 ? '=' : chars.charAt(enc3);
+        result += enc4 === 64 ? '=' : chars.charAt(enc4);
+      }
+
+      return result;
+    },
+
+    /** 提交评论或转发 */
+    async onSubmit() {
+
+
+      const content = (this.data.content || '').trim();
+      if (!content && this.data.images.length === 0) {
+        wx.showToast({
+          title: '请输入内容或选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+
+       // 敏感词检测
+       const hit = sensitive.detect(content)
+       if (hit) {
+         return wx.showToast({
+           title: `敏感词 ${sensitive.mask(hit)}`,
+           icon: 'none'
+         })
+       }
+
+      try {
+
+        wx.showLoading({
+          title: '发布中...',
+          mask: true
+        });
+
+        const post_id = this.data.originData.post.id
+        const base64Content = this.toBase64(content)
+        let nType
+        if (this.data.alsoComment) {
+          nType = 3
+        } else {
+          nType = this.properties.mode === 'forward' ? 2 : 1;
+        }
+
+        let images = null
+        let tokenId = null;
+
+        if (this.data.images.length > 0) {
+          images = this.data.images; // 这里是图片临时路径数组
+          tokenId = await this.uploadImagesToOSS(images);
+          console.log('上传成功:', tokenId);
+        }
+
+        let parent_comment_id = null
+        if (this.data.commentData) {
+          parent_comment_id = this.data.commentData.id
+        }
+
+        await commentPostNew(post_id, base64Content, tokenId, parent_comment_id, nType, false)
+        wx.hideLoading();
+
+        setTimeout(() => {
+          wx.showToast({
+            title: '发布成功',
+            icon: 'success'
+          });
+        }, 200);
+
+        this.triggerEvent('submitSuccess', {
+          postId: post_id,
+          mode: this.data.mode,
+          content: content,
+          images: this.data.images
+        });
+
+
+        this.closeSheet();
+      } catch (err) {
+        wx.hideLoading();
+        wx.showToast({
+          title: '发布失败' + err,
+          icon: 'none'
+        });
+      } finally {
+
+      }
+    },
+
+    async uploadImagesToOSS(images) {
+      try {
+        const tokenRes = await getUploadToken(images.map(() => 1), false);
+        const {
+          host,
+          list,
+          accessid,
+          id
+        } = tokenRes.data;
+
+        // 生成每张图片的上传 Promise
+        const uploadPromises = images.map((filePath, i) => {
+          const {
+            dir,
+            policy,
+            signature
+          } = list[i];
+
+          return new Promise((resolve, reject) => {
+            wx.uploadFile({
+              url: host,
+              filePath,
+              name: 'file',
+              formData: {
+                key: dir,
+                policy,
+                OSSAccessKeyId: accessid,
+                signature,
+                success_action_status: '200'
+              },
+              success(res) {
+                if (res.statusCode === 200) {
+                  resolve(); // 当前图片上传成功
+                } else {
+                  reject(res);
+                }
+              },
+              fail(err) {
+                reject(err);
+              }
+            });
+          });
+        });
+
+        // 等待所有图片上传完成
+        await Promise.all(uploadPromises);
+
+        return id; // 所有上传完成后返回 token id
+      } catch (err) {
+        console.error('上传失败', err);
+        wx.showToast({
+          title: '上传失败' + err,
+        })
+        throw err;
+      }
+    }
+
+
+  }
+});

package/components/bottomSheet/bottomSheet.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

package/components/bottomSheet/bottomSheet.wxml

@@ -0,0 +1,73 @@
+<view wx:if="{{visible}}" class="overlay" catchtouchmove="true" catch:tap="onOverlayTap">
+  <!-- 弹窗sheet -->
+  <view class="sheet" catchtap="stopTap" style="bottom: {{sheetBottom}}px;">
+
+    <!-- 顶部栏 -->
+    <view class="sheet-header">
+      <view class="close-btn" bindtap="closeSheet">×</view>
+      <text class="sheet-title">{{mode === 'forward' ? '转发' : '评论'}}</text>
+      <view class="submit-btn {{content.length === 0 ? 'disabled' : ''}}" catch:tap="onSubmit" data-disabled="{{content.length === 0}}">发布</view>
+    </view>
+
+    <!-- 输入框 -->
+    <view class="textarea-wrapper">
+      <textarea class="post-input" style="height: 100px;margin-top: 20rpx;" placeholder-style="color: #c1c1c1;" placeholder="{{commentData ?('回复@'+commentData.reply_nickname):((mode === 'forward' ? '转发':'回复')+'@'+originData.user.nickname) }}" maxlength="300" bindinput="onInput" value="{{content}}" cursor="{{cursor}}" bindblur="onBlur" bindfocus="onFocus" focus="{{true}}" adjust-position="{{false}}" />
+
+      <view class="char-count">{{content.length}}/300</view>
+
+      <view class="origin-wrapper">
+        <image class="origin-img" src="{{commentData ? (commentData.avatar): (originData.post.imageArray.length > 0 ? originData.post.imageArray[0] : (originData.user.avatar || '/assets/images/icons/header_placeholder.png' ))}}" mode="aspectFill" />
+        <view class="origin-text">{{commentData ? ('@'+commentData.reply_nickname+':'+ commentData.content): ('@'+originData.user.nickname+':'+originData.post.content)}}</view>
+      </view>
+    </view>
+
+
+
+    <!-- 图片预览 -->
+    <scroll-view class="image-preview" scroll-x="true" enable-flex="true" wx:if="{{images.length > 0}}">
+      <view class="image-container">
+        <view class="image-item" wx:for="{{images}}" wx:key="index">
+          <image src="{{item}}" mode="aspectFill" class="preview-img" />
+          <view class="delete-btn" bindtap="removeImage" data-index="{{index}}">
+            <van-icon name="clear" size="25px" />
+          </view>
+        </view>
+        <view wx:if="{{images.length < 1}}" class="image-item add-image" bindtap="chooseImage">+</view>
+      </view>
+    </scroll-view>
+
+
+
+    <!-- 底部工具栏 -->
+    <view class="toolbar">
+      <view class="toolbar-left">
+        <checkbox-group bindchange="onToggleAlsoComment">
+          <label class="toolbar-left">
+            <checkbox value="1" checked="{{alsoComment}}" />
+            <text class="checkbox-text">{{mode ==='forward' ? '转发并评论':'评论并转发'}}</text>
+          </label>
+        </checkbox-group>
+      </view>
+      <view class="toolbar-right">
+        <view class="toolbar-btn" bindtap="chooseImage">
+          <van-icon name="photo-o" size="50rpx" />
+        </view>
+        <view class="toolbar-btn" bindtap="chooseTopic">
+          <text style="font-size: 50rpx;">#</text>
+        </view>
+        <view class="toolbar-btn" bindtap="toggleEmoji">
+          <van-icon name="smile-o" size="50rpx" />
+        </view>
+      </view>
+    </view>
+
+    <!-- emoji 面板 -->
+    <scroll-view class="emoji-panel" wx:if="{{emojiVisible}}" scroll-y="true">
+      <view class="emoji-grid">
+        <block wx:for="{{emojiList}}" wx:key="index">
+          <image src="{{item}}" class="emoji-img" bindtap="selectEmoji" data-index="{{index}}" mode="aspectFit" />
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+</view>