最近学习了微信小程序，于是乎，研究了一下评论功能。
首先我们的环境是：微信小程序+thinkphp6
上代码
微信小程序 jwt 登录：https://blog.csdn.net/lh25946/article/details/119044247?spm=1001.2014.3001.5501
表字段：order 订单表
用户表：user
评论表：loading
点赞表：give
商品名称表：good
列表页面：
/**
* 订单列表数据
*/
public function orderList(Request $request)
{
//下拉加载分页
$page = $request->get('page')??1;
$limit = $request->get('limit')??5;
$offset = ($page-1)*$limit;
$id = 1;
//查询不同状态下的订单
// $allOrder = Order::with(['goods','user'])->where('user_id',$id)->limit($offset,$limit)->select();
$received = Order::with(['goods','user'])->order('create_time asc')->where('user_id',$id)->limit($offset,$limit)->select();
$notReceived = Order::with(['goods','user'])->whereOr('order_state',0)->where('user_id',$id)->limit($offset,$limit)->select();
return json(['code'=>0,'msg'=>'成功','received'=>$received,'notReceived'=>$notReceived]);
}
/**
* @param Request $request
* @return \think\response\Json
* 订单详情页面
*/
public function orderDetail(Request $request)
{
$order_id = $request->get('order_id');
try {
$orderDetail = Order::with(['goods','user'])->find($order_id);
$commentData = Loading::where('order_id',$order_id)->select();
return json(['code'=>0,'msg'=>'成功','orderDetail'=>$orderDetail,'commentData'=>$commentData]);
}catch (Exception $e){
return json(['code'=>500,'msg'=>'内部错误']);
}
}
微信小程序wxml页面
// pages/my/my.js
Page({
/**
* 页面的初始数据
*/
data: {
allOrder:[],
received:[],
notReceived:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
url: 'http://www.trends.com/orderman/order_list',
dataType:'json',
header:{
'token':wx.getStorageSync('token')
},
success:res=>{
// console.log(res.data.allOrder)
console.log(res.data.received)
console.log(res.data.notReceived)
this.setData({
// allOrder:res.data.allOrder,
received:res.data.received,
notReceived:res.data.notReceived
})
}
})
},
})
"l-tabs":"/miniprogram_npm/lin-ui/tabs",
"l-tabpanel":"/miniprogram_npm/lin-ui/tabpanel",
"l-card":"/miniprogram_npm/lin-ui/card"
wxml页面
<l-tabs bind:linchange="changeTabs">
<l-tabpanel tab="浏览次数" key="one" slot="one">
<l-card type="cover" wx:for="{{received}}" wx:key="item"
image="{{item.goods.goods_image}}"
title="{{item.goods.goods_name}}">
<view class="content">
<navigator url="/pages/find/find?id={{item.id}}"> 价格：{{item.order_price}}
订单号:{{item.order_number}}</navigator>
<navigator url="/pages/comment/comment?id={{item.id}}&name={{item.goods.goods_name}}"><button>评论</button></navigator>
</view>
</l-card>
</l-tabpanel>
<l-tabpanel tab="创建时间" key="two" slot="two">
<l-card type="cover" wx:for="{{notReceived}}" wx:key="item"
image="{{item.goods.goods_image}}"
title="{{item.goods.goods_name}}">
<view class="content">
价格：{{item.order_price}}
订单号:{{item.order_number}}
<navigator url="/pages/comment/comment"><button>评论</button></navigator>
</view>
</l-card>
</l-tabpanel>
</l-tabs>
详情页面 ：pages/find/find
// pages/find/find.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.request({
url: 'http://www.trends.com/orderman/order_detail',
dataType:'json',
header:{
'token':wx.getStorageSync('token')
},
data:{
order_id:options.id
},
handleContact (e) {
},
success:res=>{
console.log(res)
this.setData({
leng:res.data.commentData.length,
commentData:res.data.commentData,
orderDetail:res.data.orderDetail.goods
})
}
})
},
})
<view>
商品名称:{{orderDetail.goods_name}}
<view>商品价格:{{orderDetail.goods_price}}</view>
</view>
<navigator url="/pages/give/give?id={{orderDetail.id}}"><button>点赞</button></navigator>
点赞数:({{leng}})
<view wx:for="{{commentData}}" class="a1">
<view>评论用户:{{item.user_id}}</view>
<view>评论内容：{{item.loading_content}}</view>
<view>评论时间：{{item.create_time}}</view>
</view>
点赞页面：
public function giveList(){
//文章的id
$id=input('id');
//用户id
$uid=request()->id;
//查询一条数据 查询有没有 文章id 以及用户id
$arr=Give::where('g_id',$id)->find();
//如果没有就添加入库 点赞成功 并且点赞数量加1
if(empty($arr)){
$arr['g_id']=$id;
$arr['uid']=$uid;
$res= Give::create($arr);
//添加结果
if($res){
$arr=Give::where('g_id',$id)->find();
Give::where('g_id',$id)->update(['number'=>$arr['number']+1]);
return json(['code'=>200,'msg'=>'点赞成功','data'=>null]);
}else{
return json(['code'=>400,'msg'=>'点赞失败','data'=>null]);
}
}else{
//如果点赞过了就取消点赞删除这个点赞记录
$del=Give::where('g_id',$id)->delete();
if($del){
return json(['code'=>300,'msg'=>'取消成功','data'=>$id]);
}else{
return json(['code'=>500,'msg'=>'取消失败','data'=>null]);
}
}
}
public function giveFind()
{
$data=Give::select();
if($data){
return json(['code'=>200,'msg'=>'查询成功','data'=>$data]);
}else{
return json(['code'=>400,'msg'=>'查询失败','data'=>'']);
}
}
js页面
// pages/my/give.js
Page({
/**
* 页面的初始数据
*/
data: {
number:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let id=options.id
wx.request({
url: 'http://www.trends.com/api/give_list?id='+id,
dataType:'json',
header:{
'token':wx.getStorageSync('token')
},
success:res=>{
if(res.data.code==200){
wx.request({
url: 'http://www.trends.com/api/give_find',
header:{
'token':wx.getStorageSync('token')
},
success:res=>{
console.log(res)
this.setData({
number:res.data.data
})
}
})
wx.showToast({
title: '点赞成功',
icon:'success',
})
}
if(res.data.code==300){
this.setData({
number:''
})
wx.showToast({
title: '取消成功',
})
}
}
})
},
})
评论页面：
<view>
评价商品名称：{{name}}
</view>
<form bindsubmit="add">
<!-- <l-textarea name="loading_content" placeholder="输入你的评论..." /> -->
<textarea class="textarea-bg font_s33 font_c31"
id="information" maxlength='20' placeholder="请输入遇到的问题或建议" name="loading_content" value="{{information}}"bindinput="getDataBindTap">
<view class='word' id="counter">{{lastArea}}/20</view>
</textarea>
<button type="primary" form-type="submit">立即评论</button>
</form>
// pages/my/comment.js
Page({
/**
* 页面的初始数据
*/
data: {
id:'',
name:'',
img:''
},
add:function(e){
if(e.detail.value.loading_content == ''){
wx.showToast({
title: '内容不能为空',
icon:"none"
})
return false;
}
wx.request({
url: 'http://www.trends.com/orderman/add_comment',
method:'POST',
dataType:'json',
data:{
loading_content:e.detail.value.loading_content,
loading_file:this.data.img,
order_id:this.data.id
},header:{
'token':wx.getStorageSync('token')
},success:res=>{
if(res.data.code != 0){
wx.showToast({
title: res.data.msg,
icon:"none",
})
}else{
wx.showToast({
title: '评论成功',
})
wx.navigateTo({
url: '/pages/my/my',
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
id:options.id,
name:options.name
})
},
getDataBindTap: function(e) {
var information = e.detail.value;//输入的内容
var value = e.detail.value.length;//输入内容的长度
var lastArea = 20 - value;//剩余字数
var that = this;
that.setData({
information: information,
lastArea: lastArea
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
样式
.textarea-bg {
background-color: #fff;
padding:30rpx;
width:700rpx;
}
.word{
position: absolute;
bottom:30rpx;
right:30rpx;
}
添加功能
public function addComment(Request $request)
{
//接收数据
$commentData = $request->post();
//validate验证
try {
$this->validate($commentData,[
'loading_content'=>'require|max:255',
// 'loading_file'=>'require'
]);
}catch (Exception $e){
return json(['code'=>511,'msg'=>$e->getMessage()]);
}
//判断评论内容是否合规
$audit = new \app\common\Audit();
$check = $audit->contentAudit($commentData['loading_content']);
if ($check['conclusion'] != '合规'){
return json(['code'=>511,'msg'=>'你的评论内容不合规']);
}
//入库保存
$commentData['user_id'] = $request->uid;
// print_r($commentData);die();
$commentData['loading_state'] = 1;
try {
$addOut = Loading::create($commentData);
}catch (Exception $e){
return json(['code'=>511,'msg'=>$e->getMessage()]);
}
return json(['code'=>0,'msg'=>'评论成功']);
}