小程序学习-购物车及商品清单功能实现

今天试着自己写了1页商品清单及购物车功能也，虽然还需要美观，但是基本功能应该算是实现了：

商品选择后添加到购物车，再次选择就将数字+1，同时显示该商品已添加；
点击购物车图标弹出自制弹出遮罩层（没有自带弹窗功能），用于显示购物车内商品清单；
购物车内增加、减少商品数量、可手动修改；
每次修改，购物车总价都会自动变化更新

以下是完整代码（目前商品数据设置的静态的）

WXML部分

<view class="goodslist"><view class="goodsitems" wx:for="{{goods}}" wx:key="id"><view class="goodsimg"><image src="{{item.goodsimg}}"></image></view><view class="goodsdetail"><view class="goodsname">{{item.goodsname}}</view><view class="goodsdesc">{{item.goodsdesc}}</view><view class="select"><view class="goodsprice">{{item.goodsprice}} \t ({{item.goodsunit}})</view><view class="selectgoods"  id="{{item.id}}" data-name="{{item.goodsname}}" data-price="{{item.goodsprice}}" bindtap="selectgoods"><image src="../../images/add.png"></image></view></view></view><view wx:if="{{hasbeenselected[0][item.goodsname]==1}}" class="beenselected">已添加</view></view>
</view>
<view class="loadingmsg">{{loadingmsg}}</view><!--购物车图标-->
<view class="goodcart"><image src="../../images/goodscart.png" bindtap="showcart"></image><view class="listnum" wx:if="{{selectedgoods.length>0}}">{{selectedgoods.length}}</view>
</view><!--透明遮罩层-->
<view class="cartdetails" wx:if="{{showcart}}"></view>
<!--购物车清单层-->
<view class="cartitems"  wx:if="{{showcart}}"><view class="closethis" bindtap="closecart"><image src="../../images/closethis.png"></image></view><scroll-view class="cartlists" scroll-y="true" style="height: 500rpx;"><view wx:if="{{selectedgoods==''}}">购物车为空</view><view wx:for="{{selectedgoods}}" wx:key="id" wx:if="{{item.selectnum>=0}}"><view class="cartlist"><view class="cgoodsname">{{item.goodsname}}</view><view class="cgoodsprice">{{item.goodprice}}</view><view class="selectnum"><image bindtap="{{item.selectnum>=1 ? 'cartreduce':''}}" id="{{index}}" src="../../images/reduce.png"></image><input class="nums" value="{{item.selectnum<1? 1 :item.selectnum}}" id="{{index}}" bindinput="cartnuminput"></input><image bindtap="cartadd" id="{{index}}" src="../../images/add.png"></image></view></view></view></scroll-view><view class="chartbottom"><view class="totalfee">总金额：{{totalfee}}</view><view class="gotopay" bindtap="cartconfirm">确认选择</view></view>
</view>

JS部分

Page({/*** 页面的初始数据*/data: {goods: [{ id: 1, goodsimg:"../../images/goodsimg.jpg", goodsname: "五常大米",  goodsdesc:"这个是商品说明",  goodsprice: "50.00", goodsunit: "元/千克" }, { id: 2, goodsimg:"../../images/goodsimg.jpg", goodsname: "橄榄油",  goodsdesc:"这个是商品说明",  goodsprice: "150.00", goodsunit: "元/桶" },{ id: 3, goodsimg:"../../images/goodsimg.jpg", goodsname: "白猫洗洁精",  goodsdesc:"这个是商品说明",  goodsprice: "10.00", goodsunit: "元/瓶" },{ id: 4, goodsimg:"../../images/goodsimg.jpg", goodsname: "精品砂锅",  goodsdesc:"这个是商品说明",  goodsprice: "30.00", goodsunit: "元/个" },{ id: 5, goodsimg:"../../images/goodsimg.jpg", goodsname: "保温桶",  goodsdesc:"这个是商品说明",  goodsprice: "6.50", goodsunit: "元/个" },{ id: 6, goodsimg:"../../images/goodsimg.jpg", goodsname: "美的电磁炉",  goodsdesc:"这个是商品说明",  goodsprice: "350.50", goodsunit: "元/台" },{ id: 7, goodsimg:"../../images/goodsimg.jpg", goodsname: "九阳豆浆机",  goodsdesc:"这个是商品说明",  goodsprice: "650.00", goodsunit: "元/台" },{ id: 8, goodsimg:"../../images/goodsimg.jpg", goodsname: "牛排礼盒",  goodsdesc:"这个是商品说明",  goodsprice: "200.00", goodsunit: "元/套" },],loadingmsg:"没有更多数据啦！",selectedgoods:[],  //购物车添加明细清单hasbeenselected:[{}],  //这个是用来显示该商品是不是已经添加用的showcart:false,   //显示、隐藏购物车明细totalfee:0.00   //购物车金额合计，初始为0},//在页面中添加商品至购物车selectgoods(e){var selectedgoods = this.data.selectedgoods;var goodsid = e.currentTarget.id;var goodsname = e.currentTarget.dataset.name;var goodprice = e.currentTarget.dataset.price;//获取已经选择商品数组var hasbeenselected = this.data.hasbeenselected; //Number是将字符串转话为数字用的var totalfee = Number(this.data.totalfee);  //如果购物车为空是,或者已选择购物清单为空时，先push当前选择进购物车数组if (selectedgoods.length == 0 || selectedgoods.length == null || hasbeenselected[0][goodsname] !== 1) {  selectedgoods.push({ "id": goodsid, "goodsname": goodsname, "goodprice": goodprice, "selectnum": 1 });//+=是用来给totalfee加数字后求和用的totalfee += Number(goodprice);   //将当前商品名：1添加到已选择商品数组，用于前端显示已选择及后面判断hasbeenselected[0][goodsname] = 1;  }else{   //当购物车数组不为空时for (var i = 0; i<selectedgoods.length; i++){    //循环历遍购物车数组if (selectedgoods[i].goodsname == goodsname){var selectnum = selectedgoods[i].selectnum;   //当数组中有当前商品的购物数量时，获取已添加数量selectedgoods[i].selectnum = selectnum + 1;   //将数组中有当前商品的购物数量在原来基础上+1totalfee += Number(goodprice);}}}var that = this;that.setData({selectedgoods: selectedgoods,hasbeenselected: hasbeenselected,totalfee: (Number(totalfee)).toFixed(2)})
//    console.log(selectedgoods)
//    console.log(totalfee)
//    console.log(hasbeenselected)},//在购物车中减少cartreduce(e) {var selectedgoods = this.data.selectedgoods;var goodsid = e.currentTarget.id;///将数组中有当前商品的购物数量在原来基础上-1selectedgoods[goodsid].selectnum = selectedgoods[goodsid].selectnum - 1;var totalfee = Number(this.data.totalfee);var hasbeenselected = this.data.hasbeenselected;var goodsname = selectedgoods[goodsid].goodsname;totalfee -= (Number(selectedgoods[goodsid].goodprice));console.log(selectedgoods)//当购物车数组内该商品选择数量为0时，通过splice从数组中删除对应数据，同时将已选择商品清单中对应的商品值设成0if (selectedgoods[goodsid].selectnum==0){  selectedgoods.splice(goodsid, 1);hasbeenselected[0][goodsname] = 0;}console.log(totalfee)var that = this;that.setData({selectedgoods: selectedgoods, hasbeenselected: hasbeenselected,totalfee: (Number(totalfee)).toFixed(2)})},//在购物车中添加cartadd(e){var selectedgoods = this.data.selectedgoods;var goodsid = e.currentTarget.id;var totalfee = Number(this.data.totalfee);totalfee += (Number(selectedgoods[goodsid].goodprice));selectedgoods[goodsid].selectnum = selectedgoods[goodsid].selectnum+1;console.log(selectedgoods)var that=this;that.setData({selectedgoods: selectedgoods,totalfee: (Number(totalfee)).toFixed(2)})},//购物车里直接更改数字cartnuminput(e){var selectedgoods = this.data.selectedgoods;var goodsid = e.currentTarget.id;//下面是设置当用户自己输入数值小于1时，自动将input值变成1，防止用户误删以及数量变成0之后商品还在购物清单中的bugif (e.detail.value<1){var inputvalue=1;}else{var inputvalue = e.detail.value}selectedgoods[goodsid].selectnum = Number(inputvalue);console.log(selectedgoods)var that = this; //下面是将购物车总价重置成0之后，循环历遍购物车数组，将商品*数量，得出的商品价格相加后算出总价var totalfee = 0.00;for(var i=0; i<selectedgoods.length; i++){totalfee += selectedgoods[i].goodprice * selectedgoods[i].selectnum}that.setData({selectedgoods: selectedgoods,totalfee: (Number(totalfee)).toFixed(2)})},//显示购物车showcart(e){var that=this;that.setData({showcart:true,})},//隐藏购物车closecart(e) {var that = this;that.setData({showcart: false,})},})

WXSS部分

.goodslist{margin:20rpx auto;width:95%;
}
.goodsitems{display: flex;flex-direction: row;background: #fff;height:200rpx;padding:10rpx;margin:20rpx auto;border-radius: 10rpx;box-shadow: 10rpx 10rpx 15rpx #DCDCDC;/*for Android*/-webkit-box-shadow:10rpx 10px 15px #DCDCDC;/*for IOS*/
}
.goodsimg image{width:180rpx;height:180rpx;margin-top:10rpx;
}
.goodsdetail{display: flex;flex-direction: column;margin:0rpx 20rpx;width:80%;
}
.goodsname{display: flex;flex-direction: row;font-size:30rpx;font-weight: bolder;margin: 5rpx;padding:5rpx 0rpx;overflow: hidden;
}
.goodsdesc{font-size:28rpx;height:80rpx;margin: 5rpx;overflow: hidden;
}
.select{display: flex;flex-direction: row;
}
.selectgoods{width:60rpx;display: flex;float:right;
}
.selectgoods image{width:60rpx;height:60rpx;margin:10rpx auto;
}
.beenselected{width:120rpx;height: 50rpx;font-size:30rpx;color:#50aaff;text-align: right;margin-left:-100rpx;
}.goodsprice{font-size:30rpx;margin: 20rpx 0rpx 10rpx;width:90%;
}
.loadingmsg{margin:30rpx auto;width:95%;font-size:30rpx;color:#7d7d7d;text-align: center;
}.goodcart{position: fixed;display: flex;flex-direction: row;bottom:5rpx;right:10rpx;
}
.goodcart image{width:80rpx;height:80rpx;margin:10rpx auto;float: right;
}
.cartdetails{background: #000;width:100%;height:100%;position: fixed;top:0;left:0;opacity: 0.3;
}
.cartitems{background: #fff;border-radius: 10rpx;width:85%;height:620rpx;position: fixed;display: flex;flex-direction: column;top:50%;left:5%;margin-top:-300rpx;padding:20rpx;
}
.closethis image{margin-top:-30rpx;margin-right:-30rpx;width: 60rpx;height: 60rpx;float: right;
}
.cartlists{background-color: #f5f5f5;
}
.cartlist{display: flex;flex-direction: row;border-radius: 10rpx;background:#fff;padding:10rpx;width:95%;margin:10rpx;font-size:28rpx;align-items: center;  /**垂直对齐*/justify-content: center;  /**水平对齐*/
}
.cgoodsname{width:60%;margin-left:10rpx;
}
.cgoodsprice{width:20%;
}
.selectnum{width:20%;display: flex;flex-direction: row;
}
.selectnum image{width:50rpx;height:50rpx;margin-top:8rpx;
}
.nums{width:70rpx;margin:5rpx;border:1rpx solid #DCDCDC;padding:5rpx;
}
.listnum{position: fixed;display: flex;bottom:60rpx;right:10rpx;color:#fff;background: #0787ff;border-radius: 50%;width:34rpx;height:34rpx;font-size:24rpx;align-items: center;  /**垂直对齐*/justify-content: center;  /**水平对齐*/
}
.chartbottom{display: flex;flex-direction: row;
}
.gotopay{width:200rpx;height:60rpx;display: inline-block;margin:10rpx;padding:20rpx;text-align: center;align-items: center;  /**垂直对齐*/justify-content: center;  /**水平对齐*/color:#fff;background: #50aaff;border-radius: 10rpx;
}
.totalfee{display: inline-block;width:60%;
}

后面有时间的时候，再把购物车清单提交、我的购物清单、以及后端接口给做上，可惜小程序是个人的，没法使用微信支付功能，不然就可以尝试自己做个小商城了，呵呵！

我是一个想做码农的行政文员

小程序学习-购物车及商品清单功能实现相关推荐

微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习记录（一）
如何定义一个全局变量: 1,在根目录下app.js中添加 App({globalData: {g_isPlayingMusic : false,g_currentMusicPostId :null,d ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
小程序飞入购物车特效
小程序飞入购物车特效小程序加入购物车动画效果:点击商品,出现一个小的商品图,呈现曲线(贝塞尔曲线/抛物线)飞向购物车的图标里. app.js App({onLaunch: function () { ...
C语言小案例_小程序学习（三）
小程序学习--页面设置案例一 float页面布局效果 1.案例的整体介绍设计一个小程序,利用float布局来实现页面的布局效果.有两种效果分别是上左右下和上左中右下. 2.案例的代码详解 (1) ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...

小程序学习-购物车及商品清单功能实现

WXML部分

JS部分

WXSS部分

小程序学习-购物车及商品清单功能实现相关推荐

最新文章

热门文章