效果图
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');
}