wxamp-ymtxUser/pagesB/pages/onlineAsk/onlineAsk.js

// pages/forum/forum.js
Page({
  data: {
    // 帖子列表数据
    posts: [],
    // 是否显示发帖弹窗
    showPostModal: false,
    // 发帖标题
    postTitle: '',
    // 发帖内容
    postContent: '',
    // 标签输入
    tagInput: '',
    // 已选标签
    selectedTags: [],
    // 当前回复的帖子索引
    activeReplyIndex: -1,
    // 回复内容
    replyContent: '',
    // 加载状态
    loading: false,
  },

  onLoad: function() {
    // 页面加载时获取帖子数据
    this.loadPosts();
  },

  onPullDownRefresh: function() {
    // 下拉刷新
    this.loadPosts();
    wx.stopPullDownRefresh();
  },

  // 加载帖子数据
  loadPosts: function() {
    this.setData({ loading: true });
    
    // 模拟网络请求
    setTimeout(() => {
      // 模拟数据
      const mockPosts = [
        {
          id: 1,
          username: '技术爱好者',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          time: '2小时前',
          title: '微信小程序如何实现图片上传和预览功能？',
          content: '我正在开发一个微信小程序，需要实现图片上传功能，并且能够在上传前预览图片。请问有什么好的实现方案吗？上传的图片大小限制和格式有什么建议？',
          tags: ['微信小程序', '图片上传', '前端开发'],
          likeCount: 12,
          replyCount: 5,
          viewCount: 156,
          liked: false,
          solved: false,
          showAllReplies: false,
          replies: [
            {
              username: '前端开发工程师',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '1小时前',
              content: '可以使用wx.chooseImage选择图片，然后使用wx.uploadFile上传到服务器。预览功能可以使用wx.previewImage实现。'
            },
            {
              username: '小程序开发者',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '45分钟前',
              content: '建议将图片大小限制在2MB以内，支持JPG、PNG格式。可以使用云开发存储功能简化上传流程。'
            }
          ]
        },
        {
          id: 2,
          username: '产品经理小王',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          time: '昨天 14:30',
          title: '如何设计一个用户友好的注册流程？',
          content: '我们正在设计一个新产品的注册流程，希望既保证安全性又尽量简化步骤。大家有什么好的设计建议或参考案例吗？',
          tags: ['产品设计', '用户体验', '注册流程'],
          likeCount: 8,
          replyCount: 3,
          viewCount: 89,
          liked: true,
          solved: true,
          showAllReplies: false,
          replies: [
            {
              username: 'UX设计师',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '昨天 16:45',
              content: '建议采用手机号验证码注册，配合第三方登录选项。关键是将必填信息减到最少，其他信息可以后续引导补充。'
            }
          ]
        },
        {
          id: 3,
          username: '后端开发',
          avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
          time: '3天前',
          title: 'RESTful API设计的最佳实践有哪些？',
          content: '我正在设计一组RESTful API，想了解一些最佳实践，比如URL命名规范、状态码使用、版本控制等方面有什么推荐的做法？',
          tags: ['后端开发', 'API设计', 'RESTful'],
          likeCount: 15,
          replyCount: 7,
          viewCount: 234,
          liked: false,
          solved: false,
          showAllReplies: false,
          replies: [
            {
              username: '架构师',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '2天前',
              content: '建议使用名词复数形式作为资源端点，合理使用HTTP状态码，API版本可以通过URL路径或请求头来管理。'
            },
            {
              username: '全栈工程师',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '1天前',
              content: '不要忘记实现合适的错误处理机制，返回清晰的错误信息。同时考虑API限流和身份验证机制。'
            },
            {
              username: '资深开发者',
              avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
              time: '1天前',
              content: '推荐使用Swagger或OpenAPI规范来文档化你的API，这对前后端协作非常有帮助。'
            }
          ]
        }
      ];
      
      this.setData({
        posts: mockPosts,
        loading: false
      });
    }, 800);
  },

  // 显示发帖弹窗
  showPostModal: function() {
    this.setData({
      showPostModal: true
    });
  },

  // 隐藏发帖弹窗
  hidePostModal: function() {
    this.setData({
      showPostModal: false,
      postTitle: '',
      postContent: '',
      selectedTags: [],
      tagInput: ''
    });
  },

  // 防止弹窗内点击事件冒泡
  preventTap: function() {
    // 阻止事件冒泡
  },

  // 发帖标题输入
  onPostTitleInput: function(e) {
    this.setData({
      postTitle: e.detail.value
    });
  },

  // 发帖内容输入
  onPostContentInput: function(e) {
    this.setData({
      postContent: e.detail.value
    });
  },




  // 提交帖子
  submitPost: function() {
    const { postTitle, postContent, selectedTags } = this.data;
    
    if (!postTitle.trim()) {
      wx.showToast({
        title: '请输入标题',
        icon: 'none'
      });
      return;
    }
    
    if (!postContent.trim()) {
      wx.showToast({
        title: '请输入内容',
        icon: 'none'
      });
      return;
    }
    
    // 创建新帖子
    const newPost = {
      id: Date.now(),
      username: '当前用户',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      time: '刚刚',
      title: postTitle,
      content: postContent,
      tags: selectedTags,
      likeCount: 0,
      replyCount: 0,
      viewCount: 0,
      liked: false,
      solved: false,
      showAllReplies: false,
      replies: []
    };
    
    // 添加到帖子列表顶部
    const posts = this.data.posts;
    posts.unshift(newPost);
    
    this.setData({
      posts: posts,
      showPostModal: false,
      postTitle: '',
      postContent: '',
      selectedTags: [],
      tagInput: ''
    });
    
    wx.showToast({
      title: '发布成功',
      icon: 'success'
    });
  },



  // 显示回复输入框
  showReplyInput: function(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      activeReplyIndex: index,
      replyContent: ''
    });
  },

  // 回复内容输入
  onReplyInput: function(e) {
    this.setData({
      replyContent: e.detail.value
    });
  },

  // 提交回复
  submitReply: function(e) {
    const index = e.currentTarget.dataset.index;
    const replyContent = this.data.replyContent.trim();
    
    if (!replyContent) {
      wx.showToast({
        title: '请输入回复内容',
        icon: 'none'
      });
      return;
    }
    
    const posts = this.data.posts;
    const post = posts[index];
    
    // 创建新回复
    const newReply = {
      username: '当前用户',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      time: '刚刚',
      content: replyContent
    };
    
    post.replies.push(newReply);
    post.replyCount += 1;
    
    this.setData({
      posts: posts,
      activeReplyIndex: -1,
      replyContent: ''
    });
    
    wx.showToast({
      title: '回复成功',
      icon: 'success'
    });
  },

  // 切换显示全部回复
  toggleReplies: function(e) {
    const index = e.currentTarget.dataset.index;
    const posts = this.data.posts;
    const post = posts[index];
    
    post.showAllReplies = !post.showAllReplies;
    
    this.setData({
      posts: posts
    });
  }
});