微信小程序云开发-树洞小程序Treehole（评论帖子/发布话题实现）

这一节介绍的是评论帖子，还有发布话题功能的实现。

首先说说评论帖子的功能。

先看一下效果图：

从上一节可知，进行评论跳转的时候需要带来一些关于帖子的数据。

这一个页面对于布局来说，也是十分的重要。评论栏固定在底部， 评论之后实时刷新，删除自己的评论等。

首先是布局的wxml

<view class='top'>
  <view class='top1'>
    <image class='icon' src="{
  {PostUserData[0].User_head_url}}"></image>
    <text class='name'>{
  {PostUserData[0].Username}}</text>
    <text class='time'>{
  {PageData.Time}}</text>
  </view>

  <view class='top2'>
    <text>{
  {PageData.Context}}</text>
  </view>

  <view class='top3'>
    <block wx:for="{
  {PageData.Photo_arr}}" wx:key="key">
      <image src="{
  {item}}"></image>
    </block>
  </view>
  <view class='top4'></view>
</view>

<view class='mid'>
  <block wx:for="{
  {dataArray}}" wx:key="key" wx:index="index">

    <view class='top1'>
      <image class='icon' src='{
  {item.image}}'></image>
      <text class='name'>{
  {item.name}}</text>
      <text class='time'>{
  {item.PageTime}}</text>
    </view>

    <view class='top2'>
      <text bindlongpress="showModal" data-target="bottomModal">{
  {item.context}}</text>

      <block wx:if="{
  {dataArray[index]._openid==ReplyOpenId}}">
        <view class='b_11' bindtap='Remove_Post' data-post_id="{
  {item._id}}">
          <image src='/images/del1.png'></image>
          <label>删除</label>
        </view>
      </block>
      <view class='line'></view>
    </view>
  </block>
</view>
  <view style="height:130rpx;"></view>
  <form bindsubmit="formSubmit" style="position:fixed;bottom:0;">
    <view class='buttom'>
      <view class='inp'>
        <!-->
        <image src='/images/topic/fb.png'></image>
        <-->
          <input placeholder="写评论..." name="userName" value="{
  {inputMessage}}" cursor-spacing="20"></input>
      </view>
      <button form-type="submit">
        <text class='fb'>发表</text>
      </button>
    </view>
  </form>

下面是实现功能的js代码，定义所需要用到的变量data。

var time = require('../../utils/util.js')
var app = getApp();
const db = wx.cloud.database();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    discussShow: false,
    inputMessage: '',
    SendTime: '',
    Time: '',
    HeadImageUrl: '',
    UserName: '',
    PageId: '',
    UpPageId: '',
    RemoveId: '',
    PostUserId: '',
    ReplyOpenId: '',
    PageData: [],
    dataArray: [],
    PostUserData: [],
  },

进入页面时候，首先要获取是否已经别人评论的信息。

像这个效果图中，在之前已经有其他人进行评论，现在就要把其内容显示出来。

onLoad: function (options) {
    var that = this;
    wx.getStorage({
      key: 'key',
      success(res) {
        that.setData({
          PageId: res.data.post_id,
          PostUserId: res.data.postopenid
        })

        //根据贴子ID来查找贴子的内容
        db.collection('Assistant_DataSheet').doc(that.data.PageId).get({
          succe