最近学习了微信小程序，于是乎，研究了一下评论功能。
首先我们的环境是：微信小程序+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\'=>\'评论成功\']);
}