微信 小程序组件 加入购物车 ，终极 上线版
JS
// pages/shop/shop.js
Page({
/**
* 页面的初始数据
*/
data: {
//判断购物车是否为空时的页面
hasList: false,
carts:[],
},
// 实现bindSelectAll事件，改变全选状态
selectedAllStatus: true,
// 合计
total: '',
// 页面打开时的短暂加载数据初始化1
newload: '',
// minusStatuses: "disabled",
shuaXin:function(){
var that = this;
var user = wx.getStorageSync('user')
// 初始化数据请求
wx.request({
url: 'https://www.didu86.com/Clothes-manager-web/queryShoppingcar',
data: {
pid: user.id
},
success: function (res) {
var result = res.data;
// console.log(result);
if (result.length != 0) {
for (var i = 0; i < result.length; i++) {
result[i].selected = true;
}
// console.log(result)
that.setData({
carts: result,
hasList: true
});
console.log(result)
that.newload();
// -----------
// 购物车专场列表数据控制函数
// 减号被禁用时在初始化数据函
that.minusStatuses();
// 计算总的金额
that.sum();
}
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
if (wx.getStorageSync('user')) {
that.shuaXin()
} else {
wx.redirectTo({
url: "/pages/register/register?change=1"
})
}
},
// -----------
// 页面打开时的短暂加载函数3
newload: function () {
wx.showLoading({
title: '加载中',
});
setTimeout(function () {
wx.hideLoading()
}, 1000);
},
// // -------------
// // 购物车删除
deleteList(e) {
var that=this
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let id = carts[index].id
// console.log(id)
carts.splice(index, 1); // 删除购物车列表里这个商品
wx.request({
url: 'https://www.didu86.com/Clothes-manager-web/removeShoppingcar',
data: {
id: id,
},
success: function (res) {
var result = res.data;
// console.log(result)
that.setData({
keylist: result
});
}
});
this.setData({
carts: carts
});
if (!carts.length) { // 如果购物车为空
this.setData({
hasList: false // 修改标识为false，显示购物车为空页面
});
} else { // 如果不为空
this.sum(); // 重新计算总价格
}
},
//-------------
// 减号被禁用时在初始化数据函
minusStatuses: function () {
var minusStatuses = [];
var length = this.data.carts.length;
for (var i = 0; i < length; i++) {
minusStatuses.push("disabled");
}
this.setData({
minusStatuses: minusStatuses
});
},
bindMinus: function (e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
var sum = this.data.carts[index].sum;
var price = this.data.carts[index].price;
// console.log(1);
// 如果只有1件了，就不允许再减了
if (num > 1) {
num--;
}
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = (num <= 1 ? 'disabled' : 'normal');
// 购物车数据
var carts = this.data.carts;
carts[index].num = num;
carts[index].sum = (num * price).toFixed(1);
// 按钮可用状态
var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 将数值与状态写回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
this.sum();
},
bindPlus: function (e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
var sum = this.data.carts[index].sum;
var price = this.data.carts[index].price;
// console.log(num);
// 自增
num++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = (num <= 1) ? 'disabled' : 'normal';
// 购物车数据
var carts = this.data.carts;
carts[index].num = num;
carts[index].sum = (num * price).toFixed(1);
// 按钮可用状态
var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;
// 将数值与状态写回
this.setData({
carts: carts,
minusStatuses: minusStatuses
});
this.sum();
},
// -------------------------
// 单击复选框是否选中
bindCheckbox: function (e) {
/*绑定点击事件，将checkbox样式改变为选中与非选中*/
//拿到下标值，以在carts作遍历指示用
var index = parseInt(e.currentTarget.dataset.index);
//原始的icon状态
var selected = this.data.carts[index].selected;
var carts = this.data.carts;
// 对勾选状态取反
carts[index].selected = !selected;
// console.log(carts[index].selected);
// 写回经点击修改后的数组
this.setData({
carts: carts
});
this.sum();
},
// ---------------
// 全选复选框是否选中
bindSelectAll: function () {
// 环境中目前已选状态
var selectedAllStatus = this.data.selectedAllStatus;
// 取反操作
selectedAllStatus = !selectedAllStatus;
// 购物车数据，关键是处理selected值
var carts = this.data.carts;
// 遍历
for (var i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
}
this.setData({
selectedAllStatus: selectedAllStatus,
carts: carts
});
this.sum();
},
// -----------------
// 全选
bindCheckout: function () {
// 初始化toastStr字符串
var toastStr = 'cid:';
// 遍历取出已勾选的cid
for (var i = 0; i < this.data.carts.length; i++) {
if (this.data.carts[i].selected) {
toastStr += this.data.carts[i].cid;
toastStr += ' ';
}
}
//存回data
this.setData({
// toastHidden: false,
// toastStr: toastStr
});
},
bindToastChange: function () {
this.setData({
// toastHidden: true
});
},
// -----------------------
// 计算总的金额
sum: function () {
var carts = this.data.carts;
// 计算总金额
var total = 0;
for (var i = 0; i < carts.length; i++) {
if (carts[i].selected) {
total += carts[i].num * carts[i].price;
}
}
total = total.toFixed(2);
// 写回经点击修改后的数组
this.setData({
carts: carts,
total: total
});
},
// -----------------------------------------------------------
// ------------------------------------------------------------------
// 回tabar中的首页
tobackHome: function () {
wx.switchTab({
url: '/pages/index/index'
})
},
// -----------------------------------------------------------
// 判断购物车已有商品是否有被选中
// 立即结算点击处理函数
orderInto: function () {
var che = { total:'',carts:''}
var that=this;
var total=this.data.total;
var carts = this.data.carts;
// console.log(carts);
// var selectedTotal = 0;
var sel = [];
for (var i = 0; i < carts.length; i++) {
// selectedTotal += carts[i].selected;
if (carts[i].selected){
sel.push(carts[i])
}
}
carts = sel
che.total = total;
che.carts = carts;
if (che.carts.length > 0) {
// 立即结算跳转至提交订单页面函数
//--------------------------
// 获取需要的数据
// +'&&carts=' + JSON.stringify(carts)
wx.navigateTo({
url: "/pages/shopcar/order/order?che="+JSON.stringify(che)
})
} else {
// if(){}
wx.showToast({
title: '请选择要结算的商品',
icon: 'success',
duration: 2000
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// this.shuaXin()
var that = this;
// console.log("hhhhh")
if (wx.getStorageSync('user')) {
var user = wx.getStorageSync('user')
// 初始化数据请求
wx.request({
url: 'https://www.didu86.com/Clothes-manager-web/queryShoppingcar',
data: {
pid: user.id
},
success: function (res) {
var result = res.data;
if (result.length != 0) {
for (var i = 0; i < result.length; i++) {
result[i].selected = true;
}
// console.log(result)
that.setData({
carts: result,
hasList: true
});
console.log(result)
that.newload();
that.minusStatuses();
// 计算总的金额
that.sum();
}
else{
that.setData({
carts: result,
hasList: false
});
}
}
});
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
//--------------------------------------------------------------------------------------------------------------------------------------------------
wxml
<!--pages/shop/shop.wxml-->
<view wx:if="{{hasList}}" class='outer-box'>
<!-- <block wx:key="list" wx:for="{{cartslist}}" wx:for-index=""> -->
<!-- <view class='outer-list'> -->
<!-- <view class='outer-list-title pad-lf white flexa f26'>
<image src='../../imgs/shopcar/cart.png'></image>
<text>{{item.title}}</text>
</view> -->
<view class="container carts-list">
<view wx:key="isshop" wx:for="{{carts}}" class="carts-item">
<view class="carts-choice">
<icon wx:if="{{item.selected}}" type="success" color="rgba(255,67,66,1)" size="30" bindtap="bindCheckbox" data-index="{{index}}" />
<icon wx:else type="success" color="rgba(255,67,66,0.1)" size="30" bindtap="bindCheckbox" data-index="{{index}}" />
</view>
<view class="carts-image">
<image src="http://www.didu86.com/Clothes-manager-web/{{item.url}}"></image>
</view>
<view class="carts-text">
<view class="carts-title text_overflow">
<text>{{item.name}}</text>
</view>
<view class="carts-type">
<text>{{item.color}} / {{item.size}}</text>
</view>
<view class="carts-subtitle">
<text>￥{{item.price}}</text>
</view>
</view>
<view class="delete">
<!-- 垃圾桶删除 -->
<view class="delete-img" bindtap="deleteList" data-index="{{index}}">
<image src="../../imgs/shopcar/delete.png"></image>
</view>
<!-- 加减号控制数量---------------------------------------- -->
<view class="stepper">
<!-- 减号 -->
<text class="{{minusStatuses[index]}}" disabled="true" data-index="{{index}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<!-- <input type="number" bindchange="bindManual" value="{{item.num}}" /> -->
<view class="number" bindchange="bindManual">{{item.num}}</view>
<!-- 加号 -->
<text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
</view>
</view>
</view>
</view>
<!-- </view> -->
<!-- </block> -->
<!-- 全选和结算---------------------------------------- -->
<view class="carts-footer">
<view class="all-chioce">
<view class="footer-left">
<icon wx:if="{{selectedAllStatus}}" type="success" color="rgba(255,67,66,1)" size="30" bindtap="bindSelectAll" />
<icon wx:else type="success" color="rgba(255,67,66,0.1)" size="30" bindtap="bindSelectAll" />
<text>全选</text>
</view>
<view class="footer-right">
<view class="right-text">
<text>合计</text>
<text>￥{{total}}</text>
</view>
<view class="free">
<text>不含运费及优惠</text>
</view>
</view>
</view>
<view class="button" bindtap="orderInto">立即结算</view>
</view>
</view>
<!-- 购物车缺省页 -->
<view wx:if="{{!hasList}}" class="carts-default">
<view>
<view class='default-img'>
<image src='../../imgs/shopcar/shopping_default.png'></image>
</view>
<text>购物车空空如也</text>
<view class="back-box">
去
<text bindtap="tobackHome">首页</text>挑几件中意在商品吧!
</view>
</view>
</view>
//--------------------------------------------------------------------------------------------------------------------------------------------------
.outer-box{
padding-bottom: 100rpx;
}
.outer-list{
margin-bottom: 20rpx;
}
/* .outer-box .outer-list:last-child{
margin-bottom: 0;
} */
.outer-list-title{
margin-bottom: 1px;
height: 70rpx;
}
.outer-list-title>image{
width: 30rpx;
height: 30rpx;
}
.outer-list-title>text{
margin-left: 20rpx;
}
/*外部容器*/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
/*整体列表*/
.carts-list {
display: flex;
flex-direction: column;
}
/*每行单元格*/
.carts-item {
display: flex;
flex-direction: row;
height:240rpx;
/*width属性解决标题文字太短而缩略图偏移*/
width:100%;
align-items: center;
">white;
margin-bottom: 1px;
position: relative;
}
/* 对号图标 */
.carts-choice{
margin-right: 20rpx;
margin-left: 24rpx;
}
/*左部图片*/
.carts-image {
width:160rpx;
height:200rpx;
margin-right: 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
.carts-image image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
/*右上部分标题*/
.carts-text{
width: 380rpx;
height: 160rpx;
}
.carts-title {
/* margin: 10rpx; */
/* width: 320rpx; */
height: 76rpx;
font-size: 28rpx;
/* padding-right: 40rpx; */
color: #333333;
}
/*右下部分价格与数量尺寸 型号*/
.carts-type{
font-size: 20rpx;
margin: 11rpx 0;
}
.carts-subtitle {
font-size: 30rpx;
color:#ff4342;
}
/*加减号控制数量*/
.stepper{
margin-top: 72rpx;
margin-left: 13rpx;
display: flex;
border-radius: 5px;
text-align: center;
}
.stepper text{
display: block;
width: 50rpx;
height: 50rpx;
border:1px solid #ddd;
line-height: 50rpx;
color: #cccccc;
}
.stepper text.normal{
border:1px solid rgba(221,221,221,1);
}
.stepper text.disabled{
border:1px solid rgba(221,221,221,0.3);
}
.stepper .number{
width: 80rpx;
font-size: 28rpx;
height: 50rpx;
border: 1px solid #ddd;
line-height: 50rpx;
color: #333333;
}
.stepper text:first-child{
border-right: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.stepper text:last-child{
border-left: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.carts-list .delete{
flex: 1;
height: 100%;
position: absolute;
right: 0;
top:0;
padding-right: 24rpx;
}
.delete-img{
width: 32rpx;
height: 32rpx;
margin-left: 170rpx;
margin-top: 31rpx;
/* position: absolute; */
/* right: 24rpx; */
/* bottom: 20rpx; */
}
.delete-img image{
width: 100%;
height: 100%;
vertical-align: top;
}
/* 全选和区结算按钮 ********************************/
/*底部按钮*/
.carts-footer {
width: 100%;
height: 120rpx;
display: flex;
/* flex-direction: row; */
/* justify-content: space-between; */
align-items: center;
position: fixed;
left: 0;
bottom: 0;
">white;
}
/*复选框*/
.carts-footer icon {
margin-left: 20rpx;
margin-right: 15rpx;
}
/*全选字样*/
.carts-footer text {
font-size: 30rpx;
margin-left: 8rpx;
line-height: 10rpx;
}
.all-chioce{
height: 100%;
border-top: 1px solid #dddddd;
box-sizing: border-box;
flex: 1;
display: flex;
justify-content: space-between;
}
.footer-left{
width: 190rpx;
display: flex;
align-items: center;
}
.footer-right{
padding-right: 25rpx;
flex: 1;
direction: rtl;
}
.right-text{
line-height: 80rpx;
}
.right-text text:last-child{
color: #ff4342;
}
.footer-right .free{
font-size: 20rpx;
color:#cccccc;
}
/*立即结算按钮*/
.carts-footer .button {
line-height: 120rpx;
text-align: center;
width:260rpx;
height: 120rpx;
">#ff4342;
color: white;
font-size: 36rpx;
border-radius: 0;
border: 0;
}
/* 全选和区结算按钮 ********************************/
/*复选框样式*/
/* .carts-list icon {
margin-top: 60rpx;
margin-right: 20rpx;
} */
/* 购物车缺省页************** */
.carts-default{
width: 100%;
height: 1000rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
}
.carts-default view{
text-align: center;
}
.default-img{
margin: 0 auto;
margin-bottom: 50rpx;
}
.carts-default .default-img{
width: 232rpx;
height: 220rpx;
}
.carts-default .default-img image{
width: 100%;
height: 100%;
}
.carts-default .back-box text{
color: #FE481A;
text-decoration:underline;
}
.carts-default .back-box{
line-height: 50rpx;
}