效果图
js
// pages/detail/detail.jsPage({ 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');}
