|
|
Page({ data: { post: null, replyContent: '', replyTarget: { type: '', username: '', replyId: '', replyIndex: null, commentId: '', commentIndex: null }, replyPlaceholder: '输入您的回复...', isInputFocused: false, inputTransformY: '0', isSubmitting: false, showPreview: false, previewImages: [], previewIndex: 0, loading: false, scrollToId: '', currentUser: '当前用户', keyboardHeight: 0 },
onLoad: function(options) { const postId = options.id || '1'; this.loadPostDetail(postId); // 监听键盘高度变化
wx.onKeyboardHeightChange(res => { if (res.height > 0) { this.setData({ keyboardHeight: res.height }); } }); },
// 加载帖子详情
loadPostDetail: function(postId) { this.setData({ loading: true }); // 模拟API请求
setTimeout(() => { const mockPost = { id: 1, username: '技术爱好者', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', time: '2小时前', title: '微信小程序如何实现图片上传和预览功能？', content: '我正在开发一个微信小程序，需要实现图片上传功能，并且能够在上传前预览图片。请问有什么好的实现方案吗？上传的图片大小限制和格式有什么建议？', images: [ 'https://img.yzcdn.cn/vant/cat.jpeg', 'https://img.yzcdn.cn/vant/cat.jpeg' ], tags: ['微信小程序', '图片上传', '前端开发'], likeCount: 12, replyCount: 5, viewCount: 156, liked: false, solved: false, replies: [ { replyId: 'r1_1', username: '前端开发工程师', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', time: '1小时前', content: '可以使用wx.chooseImage选择图片，然后使用wx.uploadFile上传到服务器。预览功能可以使用wx.previewImage实现。', likeCount: 3, liked: false, comments: [ { commentId: 'c1_1', username: '学习者', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', toUsername: '前端开发工程师', time: '30分钟前', content: '感谢分享，请问有具体的代码示例吗？' } ] }, { replyId: 'r1_2', username: '小程序开发者', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', time: '45分钟前', content: '建议将图片大小限制在2MB以内，支持JPG、PNG格式。可以使用云开发存储功能简化上传流程。', likeCount: 2, liked: true, comments: [] } ] }; this.setData({ post: mockPost, loading: false }); }, 500); },
// 滚动监听
onScroll: function(e) { // 可以在这里实现滚动相关逻辑
},
// 输入框获取焦点
onInputFocus: function(e) { this.setData({ isInputFocused: true, inputTransformY: `-${e.detail.height}px` }); },
// 输入框失去焦点
onInputBlur: function() { this.setData({ isInputFocused: false, inputTransformY: '0' }); },
// 回复输入
onReplyInput: function(e) { this.setData({ replyContent: e.detail.value }); },
// 聚焦到输入框
focusReplyInput: function() { this.setData({ replyTarget: { type: 'post', username: this.data.post.username }, replyPlaceholder: `回复 ${this.data.post.username}...`, replyContent: '', isInputFocused: true }); },
// 回复用户
replyToUser: function(e) { const { type, index, replyIndex, commentIndex, username } = e.currentTarget.dataset; const replyTarget = { type: type, username: username }; if (type === 'reply') { replyTarget.replyIndex = parseInt(index); replyTarget.replyId = this.data.post.replies[index].replyId; } else if (type === 'comment') { replyTarget.replyIndex = parseInt(replyIndex); replyTarget.commentIndex = parseInt(commentIndex); replyTarget.commentId = this.data.post.replies[replyIndex].comments[commentIndex].commentId; replyTarget.replyId = this.data.post.replies[replyIndex].replyId; } this.setData({ replyTarget: replyTarget, replyPlaceholder: `回复 @${username}...`, replyContent: '', isInputFocused: true }); // 滚动到输入框位置
setTimeout(() => { this.setData({ scrollToId: type === 'reply' ? `reply-${replyTarget.replyId}` : '' }); }, 100); },
// 清除回复目标
clearReplyTarget: function() { this.setData({ replyTarget: { type: '', username: '', replyId: '', replyIndex: null, commentId: '', commentIndex: null }, replyPlaceholder: '输入您的回复...', replyContent: '' }); },
// 提交回复
submitReply: function() { const { replyContent, replyTarget, post } = this.data; const content = replyContent.trim(); if (!content) { wx.showToast({ title: '请输入内容', icon: 'none' }); return; } if (content.length > 500) { wx.showToast({ title: '回复内容不能超过500字', icon: 'none' }); return; } this.setData({ isSubmitting: true }); // 模拟网络请求
setTimeout(() => { if (replyTarget.type === 'post') { // 回复帖子
this.replyToPost(content); } else if (replyTarget.type === 'reply') { // 回复评论
this.replyToComment(content, replyTarget); } else if (replyTarget.type === 'comment') { // 回复评论的回复
this.replyToCommentReply(content, replyTarget); } else { // 普通回复（直接回复帖子）
this.replyToPost(content); } this.setData({ isSubmitting: false }); }, 500); },
// 回复帖子
replyToPost: function(content) { const post = this.data.post; const replyId = `r${post.id}_${Date.now()}`; const newReply = { replyId: replyId, username: this.data.currentUser, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', time: '刚刚', content: content, likeCount: 0, liked: false, comments: [] }; post.replies.push(newReply); post.replyCount += 1; this.setData({ post: post, replyContent: '', replyTarget: { type: '', username: '', replyId: '', replyIndex: null, commentId: '', commentIndex: null }, replyPlaceholder: '输入您的回复...', isInputFocused: false }); wx.showToast({ title: '回复成功', icon: 'success', duration: 1500 }); // 滚动到最新回复
setTimeout(() => { this.setData({ scrollToId: `reply-${replyId}` }); }, 800); },
// 回复评论
replyToComment: function(content, target) { const post = this.data.post; const replyIndex = target.replyIndex; const reply = post.replies[replyIndex]; const commentId = `c${reply.replyId}_${Date.now()}`; const newComment = { commentId: commentId, username: this.data.currentUser, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', toUsername: target.username, time: '刚刚', content: content }; if (!reply.comments) { reply.comments = []; } reply.comments.push(newComment); this.setData({ post: post, replyContent: '', replyTarget: { type: '', username: '', replyId: '', replyIndex: null, commentId: '', commentIndex: null }, replyPlaceholder: '输入您的回复...', isInputFocused: false }); wx.showToast({ title: '回复成功', icon: 'success', duration: 1500 }); },
// 回复评论的回复
replyToCommentReply: function(content, target) { const post = this.data.post; const reply = post.replies[target.replyIndex]; const originalComment = reply.comments[target.commentIndex]; const commentId = `cc${originalComment.commentId}_${Date.now()}`; const newComment = { commentId: commentId, username: this.data.currentUser, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', toUsername: target.username, time: '刚刚', content: content }; reply.comments.push(newComment); this.setData({ post: post, replyContent: '', replyTarget: { type: '', username: '', replyId: '', replyIndex: null, commentId: '', commentIndex: null }, replyPlaceholder: '输入您的回复...', isInputFocused: false }); wx.showToast({ title: '回复成功', icon: 'success', duration: 1500 }); },
// 图片预览
previewImage: function(e) { const imgIndex = e.currentTarget.dataset.imgIndex; const images = this.data.post.images; this.setData({ showPreview: true, previewImages: images, previewIndex: imgIndex }); },
// 图片预览滑动
onSwiperChange: function(e) { this.setData({ previewIndex: e.detail.current }); },
// 隐藏预览
hidePreview: function() { this.setData({ showPreview: false }); },
// 下拉刷新
onPullDownRefresh: function() { if (this.data.post) { this.loadPostDetail(this.data.post.id); } wx.stopPullDownRefresh(); },
// 页面上拉触底
onReachBottom: function() { // 这里可以实现加载更多回复的逻辑
console.log('加载更多回复'); },
// 页面卸载
onUnload: function() { // 移除键盘高度监听
wx.offKeyboardHeightChange(); }});
|
