微信小程序之 收藏功能

效果图

js

// pages/detail/detail.js

Page({
  data: {
    collect: "",
    collect_star: 'collect-icon.png',      // 显示图片
    id:'',
    genre:'',
    content:[]
  },

  // 展示详情页数据
  onLoad: function (options) {
    var self=this;
    // console.log(options.id);
    // console.log(options.type);
    var sessionid = wx.getStorageSync('session_id');
    wx.request({
      url: 'https://....com/Index/detail',
      data: {
        id: options.id,
        genre: options.type,
        sessionid: sessionid,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        // status 是 1 的话，就显示收藏，2就不显示 

        self.setData({
          content: res.data,
          id: options.id,
          genre: options.type,
          collect: res.data.collect
        });
        if(res.data.collect == 'isCollect')
        {
          self.setData({
            collect_star: 'collect-icon-slt.png'
          });
        }
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  //点击收藏

  tapCollect: function (e) {
    console.log('走到收藏');
    var that = this;
    // var id = e.currentTarget.dataset.id;
    var id = that.data.id;
    var type = that.data.genre;
    var sessionid = wx.getStorageSync('session_id');
    // 如果是 isCollect 就说明已收藏，触发的就是取消收藏
    // 如果是 空的，就说明触发的是 收藏操作
    var collectt = that.data.collect;   // 页面初始 的值
    // console.log(collectt);

    wx.request({
      url: 'https://...com/Index/collect',
      data: {
        id: id,
        genre: type,
        collectt: collectt,
        sessionid: sessionid
      },
      header: {
        'content-type': 'application/json' 
      },
      success: function (res) {
        if (res.data == 'fk') {  
            if (collectt == 'isCollect'){   // 取消收藏
              console.log('取消收藏');   
              that.setData({
                collect_star: 'collect-icon.png',
                collect: ''
              });
            }else{                    		// 收藏成功
              console.log('进行收藏');
              that.setData({
                collect_star: 'collect-icon-slt.png',
                collect: 'isCollect'
              });
            }
        }else{
          that.setData({
            collect_star: 'collect-icon.png',
            collect: ''
          });
        }
      }
    })
  },



  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

wxml

<view class="page__bt page-flex">
    <view class="bottom-items">
        <image src="../../images/share.png" />
    </view>
    <view class="bottom-items" bindtap='tapCollect'>
        <image src="../../images/{{collect_star}}"/>
    </view>
    <view class="bottom-items">
        <image src="../../images/news.png" />
    </view>
</view>

图片分别是

collect-icon-slt.png 已收藏图片

collect-icon.png 未收藏图片

news.png

wxss

/* 下面摘得底部收藏的样式 */

.page__bt {
    position: fixed;
    bottom: 0;
    height: 80rpx;
    border-top: solid 1px #ebebeb;
    background: #ffffff;
    width: 670rpx;
    padding: 20rpx 40rpx;    
}

.bottom-items {
    
}
.bottom-items image {
    margin: 28rpx 72rpx 28rpx 72rpx;
    width: 86rpx;
    height: 86rpx;
    display: block;
}

对应控制器

###    onload 对应的控制器


public function detail(){
        $id=I('get.id');            
        $sessionid = I('get.sessionid');

        $pat_model = M('patent');
        $wxcollect_model = M('wxcollect');
  
        $where['id'] = $id;
        $list = $pat_model->where($where)->find();

        // 是否收藏
        
        $cc['sessionid'] = $sessionid;
        $cc['art_id'] = $id;
        $cc['art_type'] = pat;

        $collect = $wxcollect_model->where($cc)->find();

        if(empty($collect) || $collect['status'] == 2){

            $list['collect'] = '';

        }else if($collect['status'] == 1)
        {
            $list['collect'] = 'isCollect';
        }
        

        if(empty($list)){
            $data=array(
                "status"=>0,
                "message"=>"数据异常",
                );
            
            $this->ajaxReturn($data,'JSON');
        }
        $this->ajaxReturn($list,'JSON');
    }

tapCollect 对应的 收藏控制器

// 前台通过字段来判断 显示哪个图标，是收藏状态还是未收藏状态

// 如果是 isCollection, 说明触发的 取消收藏
// 如果是 空的，就说明触发的是 收藏操作
// var collectt = that.data.collect;

public function collect(){

    $wxcollect_model = M('wxcollect');

    $data['sessionid'] = I('get.sessionid');  
    $data['art_id'] = I('get.id');
    $data['art_type'] = I('get.genre'); 
    
    $cc = I('get.collectt'); 

    $re = $wxcollect_model->where($data)->find();

    if($cc == 'isCollect')   // 进行取消收藏
    {
      
        $d['status'] = 2;
        $ret = $wxcollect_model->where($data)->save($d);
    }else{
        // 已存在情况下，把 status 改成2，如果从未存在就 add
    
        if($re){
            $d['status'] = 1;
            $ret = $wxcollect_model->where($data)->save($d);
        }else{
            $data['status'] = 1; 
            $ret = $wxcollect_model->add($data);
        }
    }

    if(empty($ret)){
        $data=array(
            "status"=>0,
            "message"=>"数据异常",
            );
        $this->ajaxReturn($data,'JSON');
    }

    $this->ajaxReturn('ok','JSON');
}