微信小程序组件加入购物车（终极上线版）

最新推荐文章于 2024-01-11 10:23:11 发布

weixin_30257433

最新推荐文章于 2024-01-11 10:23:11 发布

阅读量472

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/dianzan/p/7908803.html

版权

// 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

<!-- <view class='outer-list-title pad-lf white flexa f26'>

<text>{{item.title}}</text>

</view> -->

</view>

</view>

</view>

<text>{{item.color}} / {{item.size}}</text>

</view>

<text>￥{{item.price}}</text>

</view>

</view>

</view>

</view>

<text>￥{{total}}</text>

</view>

<text>不含运费及优惠</text>

</view>

</view>

<view>

</view>

<text>购物车空空如也</text>

去

<text bindtap="tobackHome">首页</text>挑几件中意在商品吧!

</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;

}

转载于:https://www.cnblogs.com/dianzan/p/7908803.html

微信 小程序组件 加入购物车 （终极 上线版）

微信小程序组件加入购物车（终极上线版）