微信小程序——评论功能

1.前端数据渲染

<view class="list">
  <view>{{goodsitem.id}}</view>
  <view>{{goodsitem.name}}</view>
  <view>{{goodsitem.price}}</view>
  <view>{{goodsitem.desc}}</view>
</view>


<view>
  <view><input type="text" bindinput="speak"  placeholder="请输入评论内容"/></view>
  <button bindtap="formsubmit" data-pid="{{zero}}">发布评论</button>
</view>


<view>
    <text style="font-size: 26px;color: brown;">评论</text>
      <view wx:for="{{ data }}" wx:key="index">
          <view>
              {{item.speak}}
              <view wx:for="{{ item.sub }}" wx:key="index" wx:for-item="itemName" style="margin: 20rpx;background-color: bisque;">
                  {{itemName.speak}}
              </view>
          </view>
          <view><input type="text" bindinput="speak"  placeholder="请输入评论内容"/></view>
          <button bindtap="formsubmit" data-pid="{{item.id}}">发布评论</button>
      </view>
</view>

2.js页面

  /**
   * 页面的初始数据
   */
  data: {
    zero:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this
    let id = options.id
    wx.request({
      url: 'http://www.five.com/index.php/api/goodsitem', //仅为示例，并非真实的接口地址
      data: {
       id
      },
      header: {
        'content-type': 'application/json' // 默认值
},
      success:function(res) {
          let data = res.data.data
          let goodsitem = res.data.goodsitem
          that.setData({
            data:data,
            goodsitem:goodsitem
          })
      }
    })
  },
  speak(c){
    let speak = c.detail.value
    this.setData({
      speak:speak
    })
  },
  formsubmit(c){
    let that = this
    let speak = this.data.speak
    let pid = c.currentTarget.dataset.pid
    wx.request({
      url: 'http://www.five.com/index.php/api/addSpeak', //仅为示例，并非真实的接口地址
      method:'post',
      data: {
        speak:speak,
        uid:1,
        wid:wid,
        pid:pid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        if(res.data.code == 200){
          let data = res.data.data
          let goodsitem = res.data.goodsitem
          that.setData({
            data:data,
            goodsitem:goodsitem
          })
        }
      }
    })
  },

3.API后台接口

    //详情信息
    public function goodsitem(){
        $id = \request()->get('id');
        $data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();
        //调用递归方法
        $data =  $this->subTree($data);
        //查询详情数据
        $goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();
        return json_encode(['code' => 200,'msg' => '查询成功','data' => $data,'goodsitem' => $goodsitem]);
    }

    public function addSpeak(){
        $data = \request()->all()
        //评论添加入库
        Speak::insert($data);
        //评论后重新调用详情信息
        $id = $data['wid'];
        $data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();
        //调用递归方法
        $data =  $this->subTree($data);
        //查询详情数据
        $goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();
        return json_encode(['code' => 200,'msg' => '评论成功','data' => $data,'goodsitem' => $goodsitem]);
    }


    public function subTree($data,  $pid = 0) {
        // 返回的结果
        $arr = [];
        foreach ($data['speak'] as $val) {
            // 给定的PID是当前记录的上级ID
            if ($pid == $val['pid']) {
                // 递归
                $val['sub'] = $this->subTree($data,$val['id']);
                $arr[] = $val;
            }
        }
        return $arr;
    }

4.没有样式