微信小程序评论

后台请求

class Article
{
    //
    /**
     * 文件上传
     * @return \think\response\Json
     */
    public function upload()
    {
        //要上传文件的临时路径
        $filePath = $_FILES['file']['tmp_name'];
        //阿里云上传对象存储
        $fileName = (new Oss())->uploadFile($filePath);
//        dd($fileName);
        return json(['code'=>200,'msg'=>'上传成功','url'=>$fileName]);

    }

    /**
     * 添加数据
     * @param Request $request
     * @return \think\response\Json
     */

    public function articleForm(Request $request)
    {
        $param = $request->param();

        $data = \app\api\model\Article::create($param);
        if ($data) {
            return json(['code' => 200, 'data' => '', 'msg' => 'ok']);
        }
        return json(['code' => 10000, 'data' => '', 'msg' => 'no']);
    }

    /**
     *
     * 详情页面
     * @param Request $request
     * @return \think\response\Json
     * @throws \think\db\exception\DataNotFoundException
     * @throws \think\db\exception\DbException
     * @throws \think\db\exception\ModelNotFoundException
     */

    public function detail(Request $request)
    {
        $data=\app\api\model\Article::where('id',$request['id'])->find();
//        dd($data);
        $com=Comment::with(['user'])->where('article_id',$request['id'])->select();
        return json(['code'=>200,'data'=>$data,'com'=>$com,'msg'=>'ok']);
    }

    /**
     * 评论页面
     * @param Request $request
     * @return \think\response\Json
     */
    public function commentOrder(Request $request)
    {
        $param=$request->param();
        $param['uid']=$request->uid;
//        dd($param);
        $result=Comment::create($param);
        if ($result){
            return json(['code'=>200,'data'=>'','msg'=>'ok']);
        }
        return json(['code'=>1000,'data'=>'','msg'=>'no']);
    }

    /**
     * 分页加载
     * @param Request $request
     * @return \think\response\Json
     * @throws \think\db\exception\DbException
     */

    public function articleList(Request $request)
    {
        $page=$request->get('page');
        $result=\app\api\model\Article::paginate(8);
        $result&&$result=$result->toArray();
        return json(['code'=>200,'data'=>$result,'msg'=>'ok']);
    }
}

模型层

class Comment extends Model
{
    //
    protected $table="comment";


    public function user()
    {
        return $this->hasOne('user','id','article_id');
    }
}

小程序

<form bindsubmit="saveAddress">
    <l-form-item label="标题:" name="title">
        <l-input id="title" bind:lininput="title" value="{{title}}" hide-label show-row="{{false}}"/>
    </l-form-item>
 
    <l-form-item label="文章:" name="text">
        <l-textarea id="text" bind:lininput="text"  />
    </l-form-item>
 
    <l-form-item label="地址:" name="address">
        <l-input id="address" bindtap="map" value="{{address}}" hide-label show-row="{{false}}"/>
    </l-form-item>
    <l-image-picker count="9" bind:linchange="onChangeTap" />
 
    <view slot="submit">
       
<button class="weui-btn" type="primary" form-type="submit">保存</button>

    </view>
   
</form>

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
          title:'',
          text:'',
          latitude:'',
          longitude:'',
          address:'',
          urls: [],
  },
  title(e){
          // console.log(e.detail.value);
          this.setData({
                  title:e.detail.value
          })
  },
  text(e){
          // console.log(e.detail.value);
          this.setData({
                  text:e.detail.value
          })
  },
  map(e){

          wx.chooseLocation({
                  latitude:0,
                  success:ret=>{
                          console.log(ret);
                          this.setData({
                                  latitude:ret.latitude,
                                  longitude:ret.longitude,
                                  address:ret.name
                          })
                  }
                })
  },
  saveAddress(e){
    console.log(e)
        
          wx.request({
            url: 'http://www.shopcart.com/index.php/api/articleForm',
            data:{
                    title:this.data.title,
                    text:this.data.text,
                    latitude:this.data.latitude,
                    longitude:this.data.longitude,
                    address:this.data.address,
                    pic:this.data.urls
            },
            header:{'token':wx.getStorageSync('token')},
            method:"POST",
            success:res=>{
                    console.log(res);
                    if(res.data.code==200){
                            wx.navigateTo({
                              url: '/pages/list/list',
                            })
                    }
            }
          })
  },
  onChangeTap(e){
     // console.log(e.detail);
     let filePath = e.detail.current;
     // console.log(tempFilePaths);
     //定义一个空数组，进行存放上传图片url
     var urlArr = [];
     for( let index=0;index<filePath.length;index++){
             wx.uploadFile({
                     filePath: filePath[index],
                     name: 'file',
                     url: 'http://www.shopcart.com/index.php/api/upload',
                     header:{'token':wx.getStorageSync('token')},
                     success:res=>{

                             // console.log(res);
                             //json解码
                             const data = JSON.parse(res.data);
                             // console.log(data);
                             //追加进data的数组中
                           urlArr.push(data.data)
                           this.setData({
                             urls: urlArr
                           })
                     //       console.log(this.data.urls);
                   }
                   })

     }
     
}

})

<!--pages/list/list.wxml-->
<navigator url="/pages/my/my">
<button>添加</button>
</navigator>
 
        <block wx:for="{{list}}">
<navigator url="/pages/detail/detail?id={{item.id}}">
        <l-card type="avatar"l-class="card"
    title="{{item.title}}" describe="18个小时前">
        <!-- 此处为content -->
        <view class="avter-content">
        {{item.text}}
        </view>
        <view class="avter-share-container">
        </view>
  </l-card>
</navigator>
</block>
 

js

// pages/list/list.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
          list:[],
          page:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
          wx.request({
            url: 'http://www.shopcart.com/index.php/api/articlelist',
            data:{page:this.data.page},
            header:{'token':wx.getStorageSync('token')},
            success:res=>{
                //     console.log(res);
                    this.setData({
                            list:res.data.data.data,
                            page:this.data.page+1
                    })
            }
          })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
          wx.request({
            url: 'http://www.shopcart.com/index.php/api/articlelist',
            data:{page:this.data.page},
            header:{'token':wx.getStorageSync('token')},
            success:res=>{
                    console.log(res.data.data.data);
                    if(this.data.page<5){
                            this.setData({
                          list:this.data.list.concat(res.data.data.data),
                          page:this.data.page+1
                  })
                  console.log(this.data.list);
                    }
                    
            }
          })
  }
})

xml

<!--pages/detail/detail.wxml-->
<l-card type="avatar"l-class="card"
    title="{{detail.title}}" describe="18个小时前">
        <!-- 此处为content -->
        <view class="avter-content">
        {{detail.text}}
        </view>
        <view class="avter-share-container">
        </view>
  </l-card>
  <view>评论</view>
  <block wx:for="{{com}}">
  <view>
  <view>{{item.user.nickname}}</view>
   <view>{{item.text}}</view>
  </view>
  </block>
  <l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">



    <l-form-item label="内容:" name="text">
        <l-textarea id="text" bind:lininput="text"  />
    </l-form-item>

    <view slot="submit">
        <l-button>提交</l-button>
    </view>
</l-form>

js

// pages/detail/detail.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
          detail:'',
          com:[],
          text:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
          wx.lin.initValidateForm(this)
          var id=options.id
          wx.request({
            url: 'http://www.shopcart.com/index.php/api/detail',
            data:{id:id},
            header:{'token':wx.getStorageSync('token')},
            success:res=>{
                //     console.log(res.data);
                    this.setData({
                            detail:res.data.data,
                            com:res.data.com
                    })
            }
          })
  },
  text(e){
          console.log(e);
          this.setData({
                  text:e.detail.value
          })
  },
  submit(e){
          console.log(e)
          let id=this.data.detail.id
          wx.request({
            url: 'http://www.shopcart.com/index.php/api/commentorder',
            data:{
                    text:this.data.text,
                    article_id:this.data.detail.id,
            },
            method:"post",
            header:{'token':wx.getStorageSync('token')},
            success:res=>{
                //     console.log(res);
                    if(res.data.code==200){
                            wx.navigateTo({
                              url: "/pages/detail/detail?id="+this.data.detail.id,
                            })
                    }
            }
          })
  }
})