微信小程序实现电商的购物车页面

效果如图：

思路讲解：
{id:1,name:‘西瓜’,src:‘…/…/img/01.png’,color:‘white’,dprice:40,zprice:0,num:0},

通过颜色来判断是否被选中，color为白色表示没有被选中，green表示选中，dprice表示单价，zprice:0表示总价，单价*数量就是总价，点击一次+或者-钱的总量就+或者-单价，num表示商品的数量

Page({data: {//sum用来计算钱的总量sum:0,//k用来判断是否已经全选k:0,//t用来判断单选点击了几个t:0,//color用来控制全选的背景色color:'white',list:[{id:1,name:'西瓜',src:'../../img/01.png',color:'white',dprice:40,zprice:0,num:0},{id:2,name:'冰淇淋',src:'../../img/02.png',color:'white',dprice:40,zprice:0,num:0},{id:3,name:'虾',src:'../../img/03.png',color:'white',dprice:40,zprice:0,num:0},{id:4,name:'汉堡',src:'../../img/11.png',color:'white',dprice:40,zprice:0,num:0},{id:5,name:'蜂蜜',src:'../../img/09.png',color:'white',dprice:40,zprice:0,num:0},{id:6,name:'樱桃',src:'../../img/06.png',color:'white',dprice:40,zprice:0,num:0},{id:7,name:'酒水',src:'../../img/07.png',color:'white',dprice:40,zprice:0,num:0},{id:8,name:'口红',src:'../../img/08.png',color:'white',dprice:40,zprice:0,num:0},]},select:function(e){console.log('选择了某个商品');//获取当前点击的idvar id = e.currentTarget.dataset.id-1;//拼接数组对象的color属性的字符串var color = "list[" + id + "].color";//获取当前商品的总价var znum = this.data.list[id].zprice;//获取当前的总金额var sumx = this.data.sum;//选择某个商品if(this.data.list[id].color == 'white'){var cs = this.data.t+1;console.log(cs);this.setData({t:cs})//单选次数等于列表的数量，表示全选if(this.data.t==this.data.list.length){this.setData({color:'green'})}//总金额加上当前商品的金额sumx = sumx+znum;//设置属性this.setData({sum:sumx,[color] : "green"})}//取消选择else{var cs = this.data.t-1;this.setData({t:cs})//单选次数等于列表的数量，表示全选if(this.data.t!=this.data.list.length){this.setData({color:'white'})}//总金额减去当前商品的金额sumx = sumx-znum;//设置属性//获取当前列表商品的单价字符串var dprice = "list[" + id + "].dprice";//获取当前列表商品的总价字符串var zprice = "list[" + id + "].zprice";var num = "list[" + id + "].num";this.setData({sum:sumx,[color] : "white",[zprice]:0,[num]:0})}//判断选择了几个（判断商品的总价格）},//全选selectall:function(){var money=0;//k==0表示没有全选if(this.data.k==0){//获取全部列表的属性var list = this.data.list;//len为列表的长度var len = list.length;console.log(len);//把全部列表的属性背景色变成绿色for(var i=0;i<list.length;i++){//获取当前商品的总价var num = this.data.list[i].zprice;//拼接数组对象的color属性的字符串var color = "list[" + i + "].color";//计算总金额money+=num;this.setData({//k设置为1k:1,[color] : "green",t:len})}this.setData({color:'green',sum:money})}else{//获取全部列表的属性var list = this.data.list;//把全部列表的属性背景色变成绿色for(var i=0;i<list.length;i++){//获取当前商品的金额var num = this.data.list[i].price;//计算总金额money-=num;//拼接数组对象的color属性的字符串var color = "list[" + i + "].color";//获取当前列表商品的总价字符串var zprice = "list[" + i + "].zprice";var num = "list[" + i + "].num";this.setData({//k设置为0k:0,[color] : "white",[zprice]:0,[num]:0,cs:0})}this.setData({color:'white',sum:0})}},add:function(e){console.log('add');//获取当前列表元素的idvar id = e.currentTarget.dataset.id-1;//获取当前列表商品的数量字符串和数量+1var num = "list[" + id + "].num";var k=this.data.list[id].num+1;console.log(k);//获取当前列表商品的单价字符串var dprice = "list[" + id + "].dprice";//获取当前列表商品的总价字符串var zprice = "list[" + id + "].zprice";//把金额设置为数量*单价var money=this.data.list[id].dprice*k;//获取当前的总价钱var t=this.data.sum;//总价钱加单价t=t+this.data.list[id].dprice;//拼接数组对象的color属性的字符串var color = "list[" + id + "].color";if(this.data.list[id].color=='white'){var cs = this.data.t+1;console.log(cs);this.setData({t:cs})//单选次数等于列表的数量，表示全选if(this.data.t==this.data.list.length){this.setData({color:'green'})}}this.setData({[color]:'green',[num]:k,[zprice]:money,sum:t,})},jian:function(e){//获取当前列表元素的idvar id = e.currentTarget.dataset.id-1;//获取当前列表商品的数量字符串和数量-1var num = "list[" + id + "].num";var k=this.data.list[id].num-1;//获取当前列表商品的单价var dprice = "list[" + id + "].dprice";//获取当前列表商品的总价var zprice = "list[" + id + "].zprice";//把金额设置为数量*单价var money=this.data.list[id].dprice*k;//获取当前的总价钱var t=this.data.sum;//总价钱减去单价if(this.data.list[id].color=='green'){var cs = this.data.t-1;this.setData({t:cs})//单选次数等于列表的数量，表示全选if(this.data.t!=this.data.list.length){this.setData({color:'white'})}}if(k>=0){t=t-this.data.list[id].dprice;} if(t<0){t=0;}//拼接数组对象的color属性的字符串var color = "list[" + id + "].color";if(k<=0){this.setData({[color]:'white',[num]:0,[zprice]:0,sum:t,})}else{this.setData({[num]:k,[zprice]:money,sum:t})}}})

wxml:

<view class="pay"><view class="selectAll"><view bindtap="selectall" style="background-color: {{color}};"></view></view><view class="priceSum">合计:{{sum}}</view><view class="money">去结算</view>
</view>
<view class="v1"><scroll-view scroll-y="true" style="height: 400px;"><block wx:for="{{list}}" wx:key="id"><view class="v2"><view class="v21"><view class="v211" bindtap="select" style="background-color:{{item.color}};" data-id="{{item.id}}" data-num="{{item.num}}"></view></view><view class="v22"><image src="{{item.src}}"></image></view><view class="v23"><view class="v231">{{item.name}}</view><view class="v232"><view class="v2321">￥：{{item.zprice}}<text>\n 单价：{{item.dprice}}</text></view><view class="v2322" bindtap="jian" data-id="{{item.id}}">-</view><view class="v2323">{{item.num}}</view><view class="v2324" bindtap="add" data-id="{{item.id}}">+</view></view></view></view></block></scroll-view></view>

wxss:


.v2{width: 100%;height: 80px;margin-top: 20px;display: flex;border: 1px solid red;
}
.v21{flex: 1;background-color: black;
}
.v21 .v211{width: 15px;height: 15px;border: 1px solid green;cursor: pointer;margin-top: 30px;margin-left: 30px;border-radius: 50%;
}
.v22{flex: 1;background-color: pink;
}
.v23{text-align: center;flex: 3;display: flex;flex-direction: column;}
.v23 view{flex: 1;}
image{width: 100%;height: 100%;
}
.v231{background-color: gray;line-height: 40px;
}
.v232{text-align: center;display: flex;line-height: 40px;}
.v232 .v2321{flex: 3;font-size: 10px;line-height: 20px;border: 1px solid green;
}
.v232 .v2322{flex: 1;border: 1px solid green;cursor: pointer;
}
.v232 .v2323{flex: 2;border: 1px solid green;
}
.v232 .v2324{flex: 1;border: 1px solid green;cursor: pointer;
}
.pay{width: 100%;height: 50px;bottom: 10px;left: 0;background-color: yellow;display: flex;
}
.pay .selectAll{flex: 1;background-color: tomato;
}
.pay .selectAll view{width: 20px;height: 20px;border: 1px solid black;border-radius: 50%;margin-top: 15px;margin-left: 5px;cursor: pointer;
}
.pay .priceSum{flex: 4;background-color: violet;line-height: 50px;text-align: center;
}
.pay .money{flex: 4;background-color: white;text-align: center;line-height: 50px;color: black;cursor: pointer;background-color: red;
}

微信小程序实现电商的购物车页面相关推荐

微信小程序为电商插上翅膀
微信小程序从2017年1月上线开始到现在即将满2周岁了,而2018年可以说是微信小程序的爆发年,它也向我们展示了惊人的成长速度.据统计,截至到2018年9月底,已上线微信小程序超过200 微信小程序从 ...
微信小程序，电商又一春！
不管愿不愿意,小程序已经成为另一种连接方式,它足够快捷,一个点击就可能整合多个营销环节,并且在设计之初就被赋予了商业的愿望. 微趋道,就是小程序资本加速入局,小程序暗流涌动据不完全统计,2017 ...
从淘宝到微信小程序，电商平台变革新时
都知道淘宝在前几年的火热,要想创业阿里的淘宝就是最佳的选择,因为入驻商户不是很多.只要在上面开店,稍微运营一下基本上都会有收入,稍微有点口碑了店铺就可以起来.但在这两年,淘宝店铺增多,管理更加严格导致 ...
微信小程序实现电商平台中的添加商品规格
技术交流请加QQ:2272172668 .也可以通过QQ号搜索微信. 在电商平台中肯定少不了添加商品规格的功能.上传动态图失败了,哎,只能看静态图了.如图: 就是一个商品里边有很多给个好多个属性. ...
【微信小程序】电商移动前端API文档
文章目录一.文档更新说明 1.返回值调整 2.分类页图片 3.订单支付接口二.路径说明三.电商登录实现方式四.API详情 1.全局权限访问 (1)主页API 获取首页轮播图数据获取首页分类选 ...
微信小程序社区电商demo模板
今天上线了一款基础的社区电商小程序,欢迎大家给出宝贵意见,并可免费赠送基础版源码,如有需要可进行商务合作,定制开发等.uni插件市场地址:https://ext.dcloud.net.cn/plugi ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
小程序高级电商前端第1周走进Web全栈工程师＜二＞
业务对象的重要性: 在上一次小程序高级电商前端第1周走进Web全栈工程师<一>----小程序注册.开发工具推荐.<风袖>首页布局详尽分析.Webstorm开发小程序必配配置.m ...
小程序做电商的硬伤 “正规军”入驻草根望尘莫及
如今的天猫店.淘宝店渐渐成为品牌的天下,曾经在淘宝混的不错的中小卖家,能够坚守下去,把品牌做大的只有寥寥几家.而这个时候,微信小程序打算在移动电商市场再"搏"一把,对于中小卖家来说 ...

微信小程序实现电商的购物车页面

微信小程序实现电商的购物车页面相关推荐

最新文章

热门文章