小程序学习-购物车及商品清单功能实现
今天试着自己写了1页商品清单及购物车功能也，虽然还需要美观，但是基本功能应该算是实现了：
- 商品选择后添加到购物车，再次选择就将数字+1，同时显示该商品已添加；
- 点击购物车图标弹出自制弹出遮罩层（没有自带弹窗功能），用于显示购物车内商品清单；
- 购物车内增加、减少商品数量、可手动修改；
- 每次修改，购物车总价都会自动变化更新
以下是完整代码（目前商品数据设置的静态的）
WXML部分
{{item.goodsname}}
{{item.goodsdesc}}
{{item.goodsprice}} \t ({{item.goodsunit}})
已添加
{{loadingmsg}}
{{selectedgoods.length}}
购物车为空
{{item.goodsname}}
{{item.goodprice}}
总金额：{{totalfee}}
确认选择
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; iWXSS部分
.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%;
}后面有时间的时候，再把购物车清单提交、我的购物清单、以及后端接口给做上，可惜小程序是个人的，没法使用微信支付功能，不然就可以尝试自己做个小商城了，呵呵！
我是一个想做码农的行政文员