微信小程序购物车实现案例及代码

     微信小程序的功能不断更新，为了方便大家通过微信小程序购物，小程序功能更新了一个小程序购物车，微信小程序实现购物车功能时是需要费一些时间的，小编就在此分享关于微信小程序购物车实现案例及代码。有需要的小伙伴们快快来瞧瞧。

　　微信小程序购物车案例效果图：

　　微信小程序购物车小程序代码：

　　var app=getApp()

　　Page({

　　data: {

　　userInfo: {},

　　selectAll:true,

　　totalsum:0,

　　totalnum:0,

　　loadingHidden: false

　　},

　　//事件处理函数

　　bindMinus:function(e){

　　var $index=parseInt(e.currentTarget.dataset.index);

　　var num=this.data.userShopcarSocks[$index].num;

　　if(num>0){

　　num--;

　　}

　　var minsStatus=num<=0?true:false;

　　var minusStatuses=this.data.minusStatuses;

　　minusStatuses[$index]=minsStatus;

　　var userShopcarSocks = this.data.userShopcarSocks;

　　userShopcarSocks[$index].num = num;

　　this.setData({

　　userShopcarSocks:userShopcarSocks,

　　minusStatuses:minusStatuses

　　})

　　if(this.data.userShopcarSocks[$index].selected){

　　this.getTotal();

　　bindPlus:function(e){

　　var $index = parseInt(e.currentTarget.dataset.index);

　　var num = this.data.userShopcarSocks[$index].num;

　　num++;

　　var minsStatus = num <= 0 ? true : false;

　　var minusStatuses = this.data.minusStatuses;

　　minusStatuses[$index] = minsStatus;

　　userShopcarSocks: userShopcarSocks,

　　if (this.data.userShopcarSocks[$index].selected) {

　　bindSelectOne:function(e){

　　var selected=this.data.userShopcarSocks[$index].selected;

　　selected=!selected;

　　var userShopcarSocks=this.data.userShopcarSocks;

　　userShopcarSocks[$index].selected=selected;

　　userShopcarSocks:userShopcarSocks

　　});

　　bindSelectAllhah:function(){

　　var $selectAll=this.data.selectAll;

　　$selectAll=!$selectAll;

　　var $userShopcarSocks=this.data.userShopcarSocks;

　　if($selectAll){

　　for (var i = 0, len = $userShopcarSocks.length; i < len; i++) {

　　$userShopcarSocks[i].selected=true;

　　}else{

　　$userShopcarSocks[i].selected = false;

　　selectAll: $selectAll,

　　userShopcarSocks:$userShopcarSocks

　　bindbuynow:function(){

　　var $buyShopcarSocks=[];

　　var j=0;

　　console.log("shopcar's length is "+$userShopcarSocks);

　　for(var i=0,len=$userShopcarSocks.length;i

　　if($userShopcarSocks[i].selected){

　　$buyShopcarSocks[j++]=$userShopcarSocks[i];

　　console.log("shopcar is "+$buyShopcarSocks);

　　wx.setStorageSync("buyShopcarSocks",$buyShopcarSocks);

　　wx.navigateTo({

　　url:'../confirmorder/confirmorder?totalnum='+this.data.totalnum+'&totalsum='+this.data.totalsum+'&buyShopcarSocks='+$buyShopcarSocks

　　getTotal:function(){

　　//计算总价价格总件数

　　var $userShopcarSocks = this.data.userShopcarSocks;

　　var $totalnum = 0;

　　var $totalsum = 0;

　　var $count = 0;

　　var $selectAll = false;

　　if ($userShopcarSocks[i].selected) {

　　console.log("结算");

　　$count++;

　　$totalnum += $userShopcarSocks[i].num;

　　$totalsum += parseFloat($userShopcarSocks[i].sock.price * $userShopcarSocks[i].num);

　　if ($count == len) {

　　$selectAll = true;

　　totalnum: $totalnum,

　　totalsum: $totalsum.toFixed(2),

　　selectAll: $selectAll

　　onLoad: function () {

　　console.log('onLoad')

　　var that = this

　　var $openid=wx.getStorageSync("user").openid;

　　//调用应用实例的方法获取全局数据

　　app.getUserInfo(function (userInfo) {

　　//更新数据

　　that.setData({

　　userInfo: userInfo

　　onShow:function(){

　　//获取初始化数据

　　var that=this;

　　wx.request({

　　url: app.globalData.serverPath + 'wechat/findUserShopcarSocks?openid=' + $openid,

　　data: {},

　　method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

　　// header: {}, // 设置请求的 header

　　success: function (res) {

　　// success

　　console.log(res.data.userShopcarSocks);

　　//修改合适数据

　　var minusStatuses=[];

　　for (var i = 0, len = res.data.userShopcarSocks.length;i

　　if (res.data.userShopcarSocks[i].sock.title.length>10){

　　res.data.userShopcarSocks[i].sock.title = res.data.userShopcarSocks[i].sock.title.substring(0,9)+"...";

　　if (res.data.userShopcarSocks[i].selected=="true"){

　　res.data.userShopcarSocks[i].selected=true;

　　res.data.userShopcarSocks[i].selected = false;

　　minusStatuses[i]=false;

　　userShopcarSocks: res.data.userShopcarSocks,

　　sockPicUrl: app.globalData.serverPath + "img/uploadSockImg/",

　　that.getTotal();

　　setTimeout(function () {

　　loadingHidden: true

　　}, 1500)

　　fail: function (res) {

　　// fail

　　complete: function (res) {

　　// complete

　　微信小程序购物车实现案例及代码就分享到这里，小编希望帮助大家进一步了解微信小程序购物车，也可以快快用到微信小程序商城里去，更多微信小程序尽在微小乔，在此感谢大家对微小乔的大力支持。

　　更多阅读推荐：

　　微信小程序读取本地json数据示例

　　微信小程序form表单组件详解实例

　　微信小程序购物车demo详解