最近學習了微信小程序，於是乎，研究了一下評論功能。
首先我們的環境是：微信小程序+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'=>'評論成功']);
}