微信小程序购物车功能实现

wxml文件

<!--pages/cart/cart.wxml-->
<block wx:if="{{hasList}}">
<view class="cart-box" >
<!-- wx:for 渲染购物车列表 -->
<view wx:for="{{carts}}" wx:key="key" class="cart_container">
<!-- wx:if 是否选择显示不同图标 -->
<view class="item-select">
<icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
<icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
</view>
<!-- 点击商品图片可跳转到商品详情 -->
<navigator url="../post/post?id={{item.goods_id}}">
<image class="item-image" src="{{item.original_img}}" ></image>
</navigator>
<view class="column">
<text class="title">{{item.goods_name}}</text>
<view class="row">
<text class="sku-price">¥{{item.shop_price}}</text>
<!-- 增加减少数量按钮 -->
<view class="sku">
<text bindtap="minusCount" data-index="{{index}}">-</text>
<text>{{item.num}}</text>
<text bindtap="addCount" data-index="{{index}}">+</text>
</view>
</view>
</view>
<!-- 删除按钮 -->
<text bindtap="deleteList" data-index="{{index}}" class='del' data-delId="{{item.goods_id}}"> × </text>
</view>
</view>

<!-- 底部操作栏 -->
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="row">
<!-- wx:if 是否全选显示不同图标 -->
<view class="item-allselect">
<icon wx:if="{{selectAllStatus}}" type="success_circle" color="red" bindtap="selectAll" />
<icon wx:else type="circle" bindtap="selectAll"/>
</view>
<text class="small_text">全选</text>
<!-- 总价 -->
<text>¥{{totalPrice}}</text>
<!-- <button wx:if="{{carts[index]['selected']}}"class="button-red" bindtap="toBuy" formType="submit" data-cartid="{{carts[index]}}" >去结算</button> -->
<button class="button-red" bindtap="toBuy" formType="submit" >去结算</button>
</view>
</view>
</block>

<block wx:else>
<view class='noCart' bindtap='toHome'>
<view>购物车为空,快去添加商品吧!!</view>
</view>
</block>

wxss文件

.cart_container {display: flex;flex-direction: row;}
.scroll { margin-bottom: 120rpx;}
.column {display: flex;flex-direction: column;}
.row {display: flex;flex-direction: row;align-items: center;}
.sku { margin-top: 60rpx; margin-left: 80rpx;}
.sku text{ margin-right: 30rpx;}
.del{ position: relative; top:50px; left: 25rpx;}
.sku-price {color: red;position: relative;margin-top: 70rpx;}
.price {color: red;position: relative;}
.title {font-size: 38rpx;margin-top: 40rpx;}
.small_text {font-size: 28rpx;margin-right: 40rpx;margin-left: 20rpx;}
.item-select {width: 40rpx;height: 40rpx; margin-top: 90rpx; margin-left: 20rpx;}
.item-allselect { width: 40rpx; height: 40rpx;margin-left: 10rpx; margin-top: -60rpx;}
.item-image {width: 180rpx;height: 180rpx;margin: 20rpx;}
.bottom_line { width: 100%; height: 2rpx;background: lightgray;}
.bottom_total { position: fixed;display: flex;flex-direction: column;bottom: 0;width: 100%;
height: 120rpx;
line-height: 120rpx;
background: white;
}
.button-red {
background-color: #f44336; /* 红色 */
}
button {
position: fixed;
right: 0;
color: white;
text-align: center;
display: inline-block;
font-size: 30rpx;
border-radius: 0rpx;
width: 30%;
height: 120rpx;
line-height: 120rpx;
}


.noCart{
width: 50%;
text-align: center;
margin: 200rpx auto;
color: red;
}

js文件

Page({
data: {
// carts: [], // 购物车列表
// hasList: false, // 列表是否有数据
totalPrice: 0, // 总价,初始为0
selectAllStatus:false // 全选状态,默认全选
},

onShow: function () {
// console.log(option.id);
var that = this;
var goods_arr = wx.getStorageSync('goods_arr');//拿添加到购物车中商品的id数组
var shuliang = wx.getStorageSync('shuliang');
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);
if (post_id != "") {
wx.request({
url: "后台接口" + post_id,
data: {

},
header: {
"Content-type": "json"
},
success: function (res) {
// console.log(res.data);
var carts = res.data;
var hasList;
if(carts.length==0){
hasList=false;
}else{
hasList = true;
}
for (var i = 0; i < carts.length; i++) {
var goods_id = carts[i].goods_id;
carts[i].num = shuliang[goods_id];
// console.log(carts[i].num);
}
that.setData({
carts: res.data,
hasList:hasList,
})
}
})
}
},
getTotalPrice() {
let carts = this.data.carts; // 获取购物车列表
let total = 0;
for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
if (carts[i].selected) { // 判断选中才会计算价格
total += carts[i].num * carts[i].shop_price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
carts: carts,
totalPrice: total.toFixed(2)
});
},

selectList(e) {
const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
let carts = this.data.carts; // 获取购物车列表
let selectAllStatus = this.data.selectAllStatus; //获取全选状态
const selected = carts[index].selected; // 获取当前商品的选中状态
carts[index].selected = !selected; // 改变状态
carts[index]['selected'] = !selected;
//判断有一个没有选中,全选取消
let j=0;
for (let i = 0; i < carts.length; i++) {
if (carts[i].selected ==true) {
j++;
continue;
}else{
selectAllStatus = false;
}
}
if(j==carts.length){
selectAllStatus = true;
}
//如果都选中,全选也选中实现
this.setData({
carts: carts,
selectAllStatus: selectAllStatus,
});
this.getTotalPrice(); // 重新获取总价
},

selectAll(e) {
let selectAllStatus = this.data.selectAllStatus; // 是否全选状态
selectAllStatus = !selectAllStatus;
let carts = this.data.carts;
for (let i = 0; i < carts.length; i++) {
carts[i].selected = selectAllStatus;
carts[i]['selected'] = selectAllStatus; // 改变所有商品状态
}
this.setData({
selectAllStatus: selectAllStatus,
carts: carts
});
this.getTotalPrice(); // 重新获取总价
},

// 增加数量
addCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
// 减少数量
minusCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
if (num <= 1) {
return false;
}
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},

toBuy: function (e) {
// var postId = event.currentTarget.dataset.postid;
var that = this;
var cart = [];
var carts = this.data.carts;
var address = wx.getStorageSync('addressInfo');
// console.log(user)
for (let i = 0; i < carts.length; i++) {
if (carts[i].selected == true) {
cart.push(carts[i]) //获取选中的项
}
}
wx.setStorageSync('order', cart);//过滤掉未选中的购物车商品
// console.log(cart);
var order = wx.getStorageSync('order');
// console.log(order);
// 未选中商品不能跳转
if (order.length == 0) {
wx.showModal({
title: '请选择商品',
// content: '未选中商品',
success: function (res) {
if (res.confirm) {
// console.log('用户点击确定')
} else if (res.cancel) {
// console.log('用户点击取消')
}
}
})
} else {
wx.navigateTo({
url: '../pay/pay?totalPrice=' + that.data.totalPrice
})
}

},

deleteList: function (e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
var that = this;
wx.showModal({
title: '提示',
content: '你正准备从购物车中删除这个商品',
success: function (res) {
if (res.confirm) {
var delId = e.currentTarget.dataset.delid;//转过来的商品id
var goods_arr = wx.getStorageSync('goods_arr');
delete goods_arr[delId];//删除对象中的元素
var shuliang = wx.getStorageSync('shuliang');//拿添加到购物车中商品的订购量数组
delete shuliang[delId];//删除对象中的元素
carts.splice(index, 1); // 删除购物车列表里这个商品
if (carts.length == 0) {
var hasList = false;
}
that.setData({
carts: carts,
hasList: hasList
});
wx.setStorageSync('goods_arr', goods_arr);//重新设缓存
wx.setStorageSync('shuliang', shuliang);//重新设缓存
wx.showToast({
title: '删除成功',
icon: 'success',
duration: 1000
});
setTimeout(function () {
wx.switchTab({
url: "../home/home"
})
}, 2000);
}
}
})
},


阅读更多
换一批

没有更多推荐了,返回首页