设计思路
用户打开商品详情界面,系统先判断用户是否登录,再缓存中查看是否有用户数据,没有的话需要先登录获取用户数据,有的话点击收藏按钮,实现用户添加收藏接口,再实现用户收藏商品后,下一次再打开此商品是,收藏按钮是被激活的状态,最后实现取消收藏接口。
CREATE TABLE `shancloudy`.`ims_shangcheng_xk_goods_collect` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`user_id` INT NOT NULL COMMENT '用户id' ,
`goods_id` INT NOT NULL COMMENT '商品id' ,
`create_time` INT NOT NULL COMMENT '收藏时间' ,
PRIMARY KEY (`id`)) ENGINE = InnoDB;
商品收藏功能界面goods.wxml
<view class="collect active" data-goodsId="{{ goodsInfo.id }}" bindtap="goodsCollect" wx:if="{{ collect ==1 }}">
<image src="http://www.shancloudy.com/attachment/images/2/2020/07/NE9yJ3byEvzyaA8t7873Ty8rd8GtZj.png" mode="widthFix"></image>
<text>收藏</text>
</view>
<view class="collect" data-goodsId="{{ goodsInfo.id }}" bindtap="goodsCollect" wx:else>
<image src="http://www.shancloudy.com/attachment/images/2/2020/07/QxKp25u0khmO0QoxuOOp5ub1MmnMOU.png" mode="widthFix"></image>
<text>收藏</text>
</view>
商品收藏功能界面goods.js
// shangcheng_xk/pages/goods/goods.js
var WxParse = require('../../resource/wxParse/wxParse.js');
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
screenHeight: '',
goodsInfo: '',
collect: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
// 获取屏幕滚动区域的高度
wx.getSystemInfo({
success: function (res) {
var screenHeight = res.windowHeight - 60
that.setData({
screenHeight: screenHeight
})
},
})
//获取商品详情数据
var goodsid = options.goodsid
app.util.request({
url: 'entry/wxapp/goodsInfo',
data: {
m: 'shangcheng_xk',
goodsid: goodsid
},
success(res) {
that.setData({
goodsInfo: res.data.data
})
WxParse.wxParse('article', 'html', res.data.data.detail, that, 0);
}
})
//打开商品判断是否被收藏
var goods_id = options.goodsid
var member = wx.getStorageSync('member')
var user_id = member.id
app.util.request({
url: 'entry/wxapp/goodsCollectType',
data: {
m: 'shangcheng_xk',
goods_id: goods_id,
user_id: user_id
},
success(res) {
if (res.data.data.status == 1) {
that.setData({
collect: 1
})
} else {
that.setData({
collect: 0
})
}
}
})
},
// 点击收藏按钮后,实现收藏功能
goodsCollect: function (e) {
var memberInfo = wx.getStorageSync('member')
if (!memberInfo) {
wx.switchTab({
url: '/shangcheng_xk/pages/member/member',
})
wx.showToast({
title: '请先登录!',
icon:'success',
duration:2000
})
} else {
var that = this
var goods_id = e.currentTarget.dataset.goodsid
var member = wx.getStorageSync('member')
var user_id = member.id
//将商品id和用户id发送到开发者服务器
app.util.request({
url: 'entry/wxapp/goodsCollect',
data: {
m: 'shangcheng_xk',
goods_id: goods_id,
user_id: user_id
},
success(res) {
if (res.data.data.status == 1) {
that.setData({
collect: 1
})
wx.showToast({
title: '添加收藏成功!',
icon: 'success',
duration: 2000
})
} else {
app.util.request({
url: 'entry/wxapp/goodsCollectCancel',
data: {
m: 'shangcheng_xk',
goods_id: goods_id,
user_id: user_id
},
success(res) {
that.setData({
collect: 0
})
wx.showToast({
title: '取消收藏成功!',
icon: 'success',
duration: 2000
})
}
})
}
}
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
商品收藏功能界面wxapp.php
// 收藏商品数据接口
public function doPageGoodsCollect(){
global $_W,$_GPC;
$errno = 0;
$message = '返回消息';
$data = array();
// 判断此商品是否被此用户收藏
$data = [
'user_id' =>$_GPC['user_id'],
'goods_id' =>$_GPC['goods_id'],
];
$collectRes = pdo_get('shangcheng_xk_goods_collect',$data);
if($collectRes){
$data['status'] = 0;
return $this->result($errno, $message, $data);
}else{
$data['create_time'] = time();
$collectData = pdo_insert('shangcheng_xk_goods_collect',$data);
$data['status'] = 1;
return $this->result($errno, $message, $data);
}
}
//打开商品判断商品是否被收藏
public function doPageGoodsCollectType(){
global $_W,$_GPC;
$errno = 0;
$message = '返回消息';
$data = array();
$data = [
'user_id' =>$_GPC['user_id'],
'goods_id' =>$_GPC['goods_id'],
];
$collectRes = pdo_get('shangcheng_xk_goods_collect',$data);
if($collectRes){
$data['status'] = 1;
return $this->result($errno, $message, $data);
}else{
$data['status'] = 0;
return $this->result($errno, $message, $data);
}
}
// 取消收藏
public function doPageGoodsCollectCancel(){
global $_W,$_GPC;
$errno = 0;
$message = '返回消息';
$data = array();
$data = [
'user_id' =>$_GPC['user_id'],
'goods_id' =>$_GPC['goods_id'],
];
$collectRes = pdo_delete('shangcheng_xk_goods_collect',$data);
if($collectRes){
$data['status'] = 1;
return $this->result($errno, '商品取消收藏成功', $data);
}else{
$data['status'] = 0;
return $this->result($errno, '商品取消收藏失败', $data);
}
}
以上就是本节课的主要内容,如果有看不懂的同学可以联系小编,还有一个好消息,就是如果文字教程大家看着比较费劲的话,可以关注小编,在8月份小编录制的视频教程就要正式上线了,到时候会对微擎框架进行更有深度的解析,与大家一起交流学习心得。