文章列表與點讚的一些功能實現 以及詳情頁點贊、取消贊操作
阿新 • • 發佈：2020-12-26
一.列表頁
wxml程式碼部分
1 <!-- index.wxml --> 2 <view class="container"> 3 <!-- 彈出框 data-weui-theme="dark" --> 4 <!-- <mp-dialog title="test" ext-class="修改元件內部樣式" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認'}]}}"> 5 <view>test content</view>6 </mp-dialog> --> 7 <block wx:for="{{listdata}}" wx:key="keys"> 8 <navigator class="lists" url="/pages/detail/detail?aid={{item.aid}}"> <!-- 跳轉頁面 攜帶引數 --> 9 <view class="user"> 10 <image class="headimg" src="/common/image/xzys.png" lazy-load="true"></image> 11 <text>qianbao很鼓{{item.aid}}</text> 12 </view> 13 <view class="title">{{item.title}}</view> 14 <view class="desc">{{item.artcom}}</view> 15 <view class="comment"> 16 <mp-icon type="field" icon="comment"size="{{20}}" color="#C8C8C8"></mp-icon> 17 <text>55</text> 18 <block wx:if="{{item.class}}"> 19 <mp-icon type="outline" icon="like" size="{{20}}" color="#e43130"></mp-icon> 20 </block> 21 <block wx:else> 22 <mp-icon type="outline" icon="like" size="{{20}}" color="#C8C8C8"></mp-icon> 23 </block> 24 <text>{{item.count}}</text> 25 </view> 26 </navigator> 27 </block> 28 <navigator class="btn" url="/pages/fabu/fabu">+ 寫文章</navigator> 29 <!-- 元件tabbar --> 30 <mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar> 31 </view>
js程式碼部分
//index.js //獲取應用例項 const app = getApp() Page({ data: { list: [{ "text": "首頁", "iconPath": "/common/image/home.png", "selectedIconPath": "/common/image/homes.png", }, { "text": "我的", "iconPath": "/common/image/member.png", "selectedIconPath": "/common/image/members.png", }], listdata:[] }, //事件處理函式 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { let that=this //從快取中獲取使用者的id wx.getStorage({ key: 'userid', success (res) { let userid=res.data //獲取使用者的id 傳送請求 wx.request({ url: 'http://www.xxxxxx.com/index.php/lists', data: { id:userid }, header: {'content-type':'application/json'}, method: 'GET', dataType: 'json', responseType: 'text', success: (result)=>{ console.log(result.data.data) that.setData({ listdata:result.data.data }) }, fail: ()=>{}, complete: ()=>{} }); } }) }, getUserInfo: function(e) { }, tabChange(e) { var url = e.detail.index == 1?'/pages/member/member':'/pages/index/index' wx.navigateTo({ url: url, }) } })
wxss部分即樣式 （可自行修改）
.container{ display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding-bottom: 120rpx; } .lists{ display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 30rpx; border-bottom: 1px solid #f0f0f0; } .user{ display: flex; flex-direction: row; height: 60rpx; align-items: center; } .headimg{ width: 50rpx; height: 50rpx; border-radius: 50%; } .user text{ font-size: 26rpx; color: #666; margin-left: 10rpx; } .title{ font-size: 34rpx; color: #333; } .desc{ margin-top: 10rpx; font-size: 28rpx; color: #888; line-height: 40rpx; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; display: -webkit-box;/*彈性盒子伸縮模型*/ -webkit-box-orient: vertical;/*彈性盒子的子元素排列方式*/ } .comment{ display: flex; align-items: baseline; height: 60rpx; } .comment text{ font-size: 26rpx; color: #C8C8C8; margin-left: 4rpx; display: block; height: 60rpx; line-height: 60rpx; } .btn{ width: 240rpx; height: 78rpx; background-color: #EA6F5A; color: #fff; font-size: 34rpx; line-height: 78rpx; text-align: center; position: fixed; bottom: 198rpx; border-radius: 40rpx; left: 50%; margin-left: -120rpx; } .imgtext{ display: flex; flex-direction: row; box-sizing: border-box; } .imgtext .text{ display: flex; flex-direction: column; margin-right: 20rpx; }
php邏輯處理部分（獲取文章，根據使用者判斷是否點過贊迴圈出列表）
1 //接受使用者id查詢資料 查詢文章 2 public function lists(){ 3 $id=input('id'); 4 // $id="23"; 5 //查詢文章和文章的點贊數 6 //SELECT article.*,COUNT(article.aid) as count FROM article JOIN u_a ON article.aid=u_a.aid GROUP BY article.aid 7 $data=collection(Article::join('u_a',"article.aid=u_a.aid","left") 8 ->field("article.*,COUNT(article.aid) as count") 9 ->group("article.aid")->select())->toArray(); 10 // print_r($data); 11 // 查詢使用者點過那些文章 12 //SELECT aid FROM users JOIN u_a on users.id=u_a.uid where users.id=23 13 $userzan=collection(\app\wxxcx\model\Users::join('u_a'," users.id=u_a.uid") 14 ->field('aid') 15 ->where('users.id',$id)->select())->toArray(); 16 //將二維陣列轉為一維陣列 17 $userzan = array_column($userzan,'aid'); 18 //迴圈 看使用者點過讚的文章是否在$data(這些文章當中) 如果存在則新增一個引數並賦值 19 foreach ($data as $k=>$v){ 20 if (in_array($v['aid'],$userzan)){ 21 $data[$k]['class']=true; 22 } 23 } 24 //將資料傳送返回 25 return json(['code'=>200,'msg'=>'success','data'=>$data]); 26 }
二.詳情頁
wxml程式碼部分
1 <view class="container"> 2 <view class="title">{{data.title}}</view> 3 <view class="author"> 4 <image class="headimg" src="/common/image/tx.jpg" mode="widthFix"></image> 5 <view class="name">sun☀</view> 6 <image class="huizhang" src="/common/image/hz.png" mode="widthFix"></image> 7 <view class="tag">簡書創作者</view> 8 </view> 9 <view class="liuliang"> 10 <view class="shijian">2020-06-28 03:10 ·</view> 11 <view class="count">字數:6666 ·</view> 12 <view class="yuedu">閱讀:{{data.COUNT}}</view> 13 </view> 14 <view>{{data.artcom}}</view> 15 <view class="tuijian"> 16 <text class="wenzi">小禮物走一走,小手點一點</text> 17 <text class="zanshang">讚賞支援</text> 18 </view> 19 <view class="shengming"> 20 <view class="dianzan"> 21 <block wx:if="{{data.red}}"> 22 <mp-icon icon="like" color="#F09788" size="{{23}}" bind:tap="dianzan" data-id="{{data.aid}}"></mp-icon> 23 {{data.COUNT}} 24 </block> 25 <block wx:else> 26 <mp-icon icon="like" color="#cccccc" size="{{23}}" bind:tap="dianzan" data-id="{{data.aid}}"></mp-icon> 27 {{data.COUNT}} 28 </block> 29 </view> 30 </view> 31 </view>
js程式碼部分
1 Page({ 2 3 /** 4 * 頁面的初始資料 5 */ 6 7 data: { 8 htmlSnip: htmlSnip, 9 pl: false, 10 data: [], 11 12 }, 13 14 /** 15 * 生命週期函式--監聽頁面載入 16 */ 17 onLoad: function (options) { 18 19 //獲取頁面跳轉後傳遞過來的文章id 20 let aid = options.aid 21 let that = this 22 console.log(aid) 23 24 //從快取中獲取使用者的id 25 wx.getStorage({ 26 key: 'userid', 27 success(res) { 28 wx.request({ 29 url: 'http://www.xxxxxx.com/index.php/read', 30 data: { 31 uid: res.data, 32 aid: aid 33 }, 34 dataType: "json", 35 success(res) { 36 if (res.data.code == 200) { 37 console.log(res.data.data) 38 that.setData({ 39 data: res.data.data 40 }) 41 } 42 } 43 }) 44 45 } 46 }) 47 }, 48 49 //點贊觸控事件 50 dianzan(e) { 51 //得到文章id 52 let aid = e.target.dataset.id 53 let that=this 54 //從快取中獲取使用者id 55 wx.getStorage({ 56 key: 'userid', 57 success(res) { 58 //賦值時宣告 59 let uid = res.data; 60 //傳送請求 61 wx.request({ 62 url: 'http://www.xxxxx.com/index.php/dianzan', //的介面地址 63 data: { 64 uid:uid, 65 aid:aid 66 }, 67 method:"GET", 68 responseType:"text", 69 dataType:"json", 70 header: { 71 'content-type': 'application/json' // 預設值 72 }, 73 success(res) { 74 if(res.data.code==200){ 75 that.setData({ 76 data:res.data.data 77 }) 78 79 } 80 console.log(res.data) 81 } 82 }) 83 84 } 85 }) 86 87 },
wxss樣式部分
1 .container{ 2 width: 100%; 3 display: flex; 4 flex-direction: column; 5 padding: 0 30rpx; 6 box-sizing: border-box; 7 } 8 .title{ 9 font-size: 40rpx; 10 height: 100rpx; 11 line-height: 100rpx; 12 color: #000; 13 } 14 .author{ 15 display: flex; 16 width: 100%; 17 height: 100rpx; 18 align-items: center; 19 } 20 .author .name{ 21 font-size: 28rpx; 22 font-weight: bold; 23 color: #000; 24 margin: 0 10rpx; 25 } 26 .headimg{ 27 width: 80rpx; 28 height: 80rpx; 29 border-radius: 50%; 30 } 31 .huizhang{ 32 width: 44rpx; 33 height: 44rpx; 34 } 35 .author .tag{ 36 font-size: 28rpx; 37 margin-left: 10rpx; 38 } 39 .liuliang{ 40 display: flex; 41 flex-direction: row; 42 font-size: 24rpx; 43 color: #666; 44 margin-top: 20rpx; 45 } 46 .liuliang .count,.liuliang .yuedu{ 47 padding-left: 10rpx; 48 } 49 .content{ 50 width: 100%; 51 box-sizing: border-box; 52 font-size: 32rpx; 53 line-height: 52rpx; 54 margin: 20rpx 0; 55 } 56 .div_class .p{ 57 margin-bottom: 20rpx; 58 } 59 .tuijian{ 60 display: flex; 61 flex-direction: column; 62 width: 100%; 63 font-size: 32rpx; 64 align-items: center; 65 margin-top: 20rpx; 66 } 67 .tuijian .zanshang{ 68 background-color: #EA6F5A; 69 width: 200rpx; 70 height: 68rpx; 71 line-height: 68rpx; 72 text-align: center; 73 color: #fff; 74 border-radius: 8rpx; 75 font-size: 26rpx; 76 margin: 20rpx 0; 77 } 78 .shengming{ 79 display: flex; 80 flex-direction: row; 81 width: 100%; 82 justify-content: space-between; 83 height: 60rpx; 84 align-items: center; 85 } 86 .dianzan{ 87 font-size: 28rpx; 88 color: #666; 89 } 90 .banquan{ 91 font-size: 24rpx; 92 color: #999; 93 } 94 .pinglun{ 95 background-color: #F5F5F5; 96 width: 100%; 97 font-size: 28rpx; 98 padding: 30rpx; 99 box-sizing: border-box; 100 } 101 .pl-tit{ 102 display: flex; 103 justify-content: space-between; 104 font-weight: bold; 105 color: #666; 106 } 107 .list{ 108 display: flex; 109 flex-direction: row; 110 justify-content: space-between; 111 margin-right: 10rpx; 112 margin-top: 30rpx; 113 margin-bottom: 48rpx; 114 } 115 .list .list-l{ 116 display: flex; 117 flex-direction: row; 118 } 119 .pl-tx{ 120 width: 68rpx; 121 height: 68rpx; 122 border-radius: 50%; 123 } 124 .pl-name{ 125 font-weight: bold; 126 font-size: 32rpx; 127 } 128 .cont{ 129 margin-left: 20rpx; 130 } 131 .pl-c{ 132 font-size: 32rpx; 133 margin: 12rpx 0; 134 } 135 .pl-sj{ 136 font-size: 24rpx; 137 color: #999; 138 } 139 .recom{ 140 padding-left: 40rpx; 141 font-size: 30rpx; 142 font-weight: bold; 143 color: #000; 144 margin: 20rpx; 145 }
php程式碼邏輯（詳情頁 點贊與取消贊）
//文章詳情 並做讚的顏色 public function read(){ //接受引數 得到當前使用者的id和文章的id $uid=input('uid'); $aid=input('aid'); //原生SQL 在詳情頁查詢文章的點贊總數 並檢視該使用者是否對該文章點過贊 //SELECT article.*,COUNT(*) as COUNT, IF((SELECT uid FROM u_a WHERE uid=23 and aid=6),TRUE,FALSE) AS red FROM article LEFT JOIN u_a on article.aid=u_a.aid WHERE article.aid=6 GROUP BY u_a.aid $data=Article::field("article.*,COUNT(*) as COUNT,IF((SELECT uid FROM u_a WHERE uid={$uid} and aid={$aid}),TRUE,FALSE) AS red") ->join('u_a','article.aid=u_a.aid','LEFT') ->where('article.aid',$aid) ->group('article.aid')->find()->toArray(); //返回資料 if($data){ return json(['code'=>200,'msg'=>'success','data'=>$data]); }else{ return json(['code'=>500,'msg'=>'error','data'=>""]); } } //點贊與取消讚的介面 public function dianzan(Request $request){ $param=$request->param(); $uid=$param['uid']; $aid=$param['aid']; // print_r($param); //根據uid與aid 去關係表中查詢資料 如果有資料則刪除 即取消贊 如果沒有則新增提條資料 即點贊 $count=Db::table('u_a')->where('uid',$uid)->where('aid',$aid)->count(); //如果count 為0時代表沒有點過贊 if ($count==0){ $datas=[ 'uid'=>$uid, 'aid'=>$aid ]; //插入一條資料 關係表 即點贊 $data=Db::table('u_a')->insert($datas); if ($data){ $datas=Article::field("article.*,COUNT(*) as COUNT,IF((SELECT uid FROM u_a WHERE uid={$uid} and aid={$aid}),TRUE,FALSE) AS red") ->join('u_a','article.aid=u_a.aid','LEFT') ->where('article.aid',$aid) ->group('article.aid')->find()->toArray(); return json(['code'=>200,'msg'=>'點贊成功','data'=>$datas]); }else{ return json(['code'=>500,'msg'=>'點贊失敗','data'=>""]); } }else{ //如果count結果不為你0是即點過贊 接下來的操作是取消贊 $data=Db::table('u_a')->where('uid',$uid)->where('aid',$aid)->delete(); if ($data){ $datas=Article::field("article.*,COUNT(*) as COUNT,IF((SELECT uid FROM u_a WHERE uid={$uid} and aid={$aid}),TRUE,FALSE) AS red") ->join('u_a','article.aid=u_a.aid','LEFT') ->where('article.aid',$aid) ->group('article.aid')->find()->toArray(); return json(['code'=>200,'msg'=>'取消成功','data'=>$datas]); }else{ return json(['code'=>500,'msg'=>'取消失敗','data'=>""]); } } }