微信小程序购物车删除个别商品实例

时间：2023-07-01 14:05 阅读数：103 人阅读分类：知识百科

现在从传统的购物的到虚拟网络购物，都少不了将所需的商品加入购物车。传统的商品你不喜欢或不想要了可以直接拿出来，那微信小程序购物车可以删除购物车里个别商品吗?据小编了解是可以的，那微信小程序购物车怎么删除购物车里个别商品呢？

　　首先，我们在知道微信小程序购物车怎么删除购物车里个别商品时，我们得明白，微信小程序购物车页面怎么制作的。下面就让小编带大家了解下微信小程序购物车页面和删除购物车中个别商品的相关代码。

　　1、商品详细页

　　tocar: function (event) {//event必须要加不然用不了event.currentTarget.dataset。这个函数已经被formSubmit函数取代

　　var goods_id = event.currentTarget.dataset.carId;//点击事件的获取商品id

　　//console.log(goods_id);

　　var goods_arr = wx.getStorageSync('goods_arr');

　　if (goods_arr) {

　　goods_arr[goods_id] = goods_id;

　　wx.setStorageSync('goods_arr', goods_arr);

　　} else {

　　var goods_arr = {};//开空对象

　　goods_arr[goods_id] = goods_id;//key和value都是goodsId

　　wx.setStorageSync('goods_arr', goods_arr);//更多的商品加入到购物车时，以多数组形式保存

　　}

　　//wx.setStorageSync('goods_id', goods_id);

　　wx.switchTab({//接着跳到购物车页

　　url: "../car/car"

　　});

　　}, formSubmit: function (event) {

　　var goods_id = event.detail.value.goods_id;

　　var qidingliang = event.detail.value.qidingliang;

　　//console.log(qidingliang);

　　if(qidingliang ==""){

　　wx.showToast({

　　title: '请输入订购量',

　　icon: 'loading',

　　duration: 2000

　　})

　　}else{

　　var goods_arr = wx.getStorageSync('goods_arr');//拿购物车中商品id数组

　　var qingling_arr = wx.getStorageSync('qingling_arr');//拿购物车中订购量数组

　　//console.log(qingling_arr);

　　if (goods_arr && qingling_arr) {//都有的情况下，进行对应的添加

　　goods_arr[goods_id] = goods_id;

　　qingling_arr[goods_id] = qidingliang;

　　wx.setStorageSync('goods_arr', goods_arr);

　　wx.setStorageSync('qingling_arr', qingling_arr);

　　} else {//没的情况下，开空数组，然后同上进行对应的添加

　　var qingling_arr = {};

　　var goods_arr = {};

　　goods_arr[goods_id] = goods_id;

　　qingling_arr[goods_id] = qidingliang;

　　wx.setStorageSync('goods_arr', goods_arr);

　　wx.setStorageSync('qingling_arr', qingling_arr);

　　}

　　//wx.setStorageSync('goods_id', goods_id);

　　wx.switchTab({//完成后跳到购物车页面重

　　url: "../car/car"

　　});

　　}

　　2、微信小程序购物车页面

　　onShow: function () {

　　var that = this;

　　var goods_arr = wx.getStorageSync('goods_arr');//拿添加到购物车中商品的id数组

　　var qingling_arr = wx.getStorageSync('qingling_arr');//拿添加到购物车中商品的订购量数组

　　//console.log(qingling_arr);

　　if (!goods_arr || JSON.stringify(goods_arr) == "{}") {//不存在或把购物车删干净后提示后跳转

　　this.orClear(1)

　　wx.showModal({

　　title: '提示',

　　content: '你还没添加礼品呢，请先去挑选',

　　success: function (res) {

　　if (res.confirm) {

　　wx.switchTab({

　　url: "../index/index"

　　})

　　}

　　})

　　}else{

　　this.countTotal(that,goods_arr,qingling_arr);//交给countTotal自定义函数处理

　　this.user_address();

　　var vip_code=wx.getStorageSync('vip_code');

　　//console.log(vip_code);

　　this.setData({

　　vipCode:vip_code

　　})

　　}

　　countTotal:function(that,goods_arr,qingling_arr){

　　var arr = [];//开空数组

　　//console.log(goods_arr);

　　for (var i in goods_arr) {//对商品id组进行遍历

　　var subject = goods_arr[i];

　　arr.push(subject);//通过push统一转移

　　}

　　var post_id = arr.join();//将arr数组通过join方法转为字符串

　　console.log(post_id);

　　var url = ".xxxxxxxxxxxxxxxx";//交给后台做处理

　　//console.log(url);

　　var money=[];//开金钱空数组

　　wx.request({

　　url: url,

　　data: {

　　gallery_id: post_id//去吧一连串有商品ID组成的字符串

　　method: 'POST',

　　header: { 'content-type': 'application/json' },

　　success: function (res) {

　　//console.log(res);

　　//console.log(qingling_arr[803]);

　　for (var i = 0; i < res.data.length; i++) {//后台返回的结果是带有该商品所有信息的数组，这里遍历出来

　　var goods_id = res.data[i].goods_id;//为下一步做准备的赋值。

　　res.data[i]['qinglingliang'] = qingling_arr[goods_id];//缓存的订购量数组出场，拿由上一步中后台结果给出的商品id带到订购量数组中的key中出，直接得出用户的订购量

　　//console.log(res.data[i]['qinglingliang']);

　　var marke=res.data[i].costPrice;

　　money[i]= marke * res.data[i]['qinglingliang'];//开个总价空组数，把各个商品的价钱放进去

　　}

　　//console.log(money);

　　var sum=0;

　　for (var i = 0; i < money.length; i++){

　　sum += parseInt(money[i]);//遍历算总价，所有商品的总价

　　}

　　//console.log(sum);

　　that.setData({

　　goods_list_key: res.data,

　　total_money:sum

　　});

　　}

　　});

　　}

　　3、删除购物车中个别商品

　　del_goods: function (event) {

　　wx.showModal({

　　title: '提示',

　　content: '你正准备从购物车中删除这个商品',

　　success: function (res) {

　　if (res.confirm) {

　　//wx.removeStorageSync('goods_arr');

　　var delId = event.currentTarget.dataset.delId;//转过来的商品id

　　var goods_arr = wx.getStorageSync('goods_arr');

　　delete goods_arr[delId];//删除对象中的元素

　　var qingling_arr = wx.getStorageSync('qingling_arr');//拿添加到购物车中商品的订购量数组

　　delete qingling_arr[delId];//删除对象中的元素

　　wx.setStorageSync('goods_arr', goods_arr);//重新设缓存

　　wx.setStorageSync('qingling_arr', qingling_arr);//重新设缓存

　　wx.showToast({

　　title: '删除成功',

　　icon: 'success',

　　duration: 1000

　　});

　　setTimeout(function () {

　　wx.switchTab({

　　url: "../index/index"

　　})

　　}, 2000);

　　}

　　})

　　}

　　4、判断购物车页是否为空的简易处理

　　orClear:function(e){

　　//console.log(e);为空是1，购物车有缓存为2，显示界面做简单处理

　　this.setData({

　　carClear: e

　　})

　　}

以上就是微信小程序购物车删除个别商品的全部内容啦。虽说微信小程序购物车功能比较简单，但是里面涉及到微信小程序的知识点还是比较多的，希望对大家的学习有所帮助。想知道更多精彩内容就请关注微信小程序商店。