文章列表与点赞的一些功能实现以及详情页点赞、取消赞操作

一.列表页

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">昵称</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">小礼物Yobo</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'=>""]);
            }

        }
    }

posted @ 2020-12-26 21:53 Conqueror· 阅读(560) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Conqueror

文章列表与点赞的一些功能实现 以及详情页点赞、取消赞操作

一.列表页

公告

文章列表与点赞的一些功能实现以及详情页点赞、取消赞操作