php 全选计算总价格,小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]...

代码注释很容易理解

{{edit_name}}

{{item.title}}

规格 : {{item.pro_name}}

收藏

￥{{item.price}}

-

{{item.num}}

+

全选

合计：￥{{totalPrice}}

提交订单

购物车是空的哦~

/* 列表 */

.list{

position: relative;

width: 100%;

height: 185rpx;

/* background-color: red; */

border-bottom: 1rpx solid #e9e9e9;

}

/* 编辑 */

.edit{

position: relative;

width: 100%;

height: 80rpx;

line-height: 80rpx;

background-color: #f6f6f6;

}

/* 删除 */

.dele_edit{

position: absolute;

width: 40rpx;

height: 40rpx;

right: 30rpx;

bottom: 25rpx;

}

/* 编辑标题 */

.edit_btn{

position: absolute;

font-size: 26rpx;

color: #888;

right: 30rpx;

}

/* 单选状态 */

.radio_chek{

position: absolute;

left: 30rpx;

top: 70rpx;

width: 40rpx;

height: 40rpx;

}

/* 列表商品图片 */

.list_img{

position: absolute;

top: 20rpx;

left: 100rpx;

width: 144rpx;

height: 144rpx;

}

/* 列表规格 */

.cart_g_name{

position: absolute;

left: 280rpx;

font-size: 26rpx;

color: #aaa;

top: 75rpx;

}

/* 收藏 */

.collert{

position: absolute;

font-size: 28rpx;

right: 40rpx;

top: 30rpx;

}

/* 收藏图标 */

.collert_img{

position: relative;

top: 2rpx;

width: 28rpx;

height: 28rpx;

}

/* 列表商品名称 */

.list_name{

position: absolute;

left: 280rpx;

top: 30rpx;

width: 300rpx;

/* background-color: red; */

font-size: 30rpx;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}

/* 列表商品价格 */

.list_price{

position: absolute;

font-size: 32rpx;

color: #D66058;

left: 280rpx;

bottom: 20rpx;

}

/* 列表商品删除 */

.list_del{

position: absolute;

right: 220rpx;

bottom: 20rpx;

width: 40rpx;

height: 40rpx;

line-height: 40rpx;

text-align: center;

font-size: 44rpx;

}

/* 固定底部 */

.cont_bot{

position: fixed;

bottom: 0;

width: 100%;

height: 104rpx;

line-height:104rpx;

background: #fff;

border-top: 2rpx solid #ebebeb;

}

/* 全选ICON */

.total-select{

position: absolute;

left: 30rpx;

top: 34rpx;

width: 40rpx;

height: 40rpx;

}

/* 全选标题 */

.sel_count_name{

position: absolute;

left: 90rpx;

top: 6rpx;

font-size: 30rpx;

color: #333;

}

/* 合计金额 */

.count_price{

position: absolute;

font-size:28rpx;

left: 200rpx;

color: #aaa;

}

.count_price text{

font-size: 34rpx;

color: #D66058;

}

/* 购物车为空 */

.list_none{

padding:40rpx 0;

color: #999;

text-align: center;

}

/* 提交 */

.submit{

position: absolute;

width: 232rpx;

height: 104rpx;

line-height: 104rpx;

right: 0rpx;

font-size: 30rpx;

text-align: center;

color:#fff;

background-color:#495A8F;

}

.navigator-hover{

background: none;

}

/*数量加减*/

.carts-num{

position: absolute;

right: 30rpx;

bottom: 23rpx;

/* background-color: red; */

display: flex; align-items: center; text-align: center; height: 50rpx;}

.view_text_center{border: 1rpx solid #ebebeb;font-size: 30rpx;

display: inline-block;color: #333;height: 50rpx;line-height: 50rpx; width: 76rpx;}

.carts-num .minus, .carts-num .plus{margin: 10rpx; border: 1rpx solid #ebebeb;color: #000; text-align: center;height: 50rpx; line-height: 50rpx; width: 40rpx;}

.carts-num .minus{font-size: 34rpx;}

/* .carts-num .minus.disabled{color: red;} */

.carts-num .plus{font-size: 34rpx;}

// page/component/new-pages/cart/cart.js

// 默认请求第一页

var numbers = 1;

var bool=true;

Page({

data: {

show_edit: "block",

edit_name:"编辑",

edit_show: "none",

// list: [], // 购物车列表

// hasList: false, // 列表是否有数据

// 默认展示数据

hasList: true,

// 商品列表数据

list: [{

id: 1,

title: '园艺大师抗皱精华露',

image: '../../image/shop_car/list_img.png',

pro_name: "30ml",

num: 1,

price: 180,

selected: true

},

{

id: 2,

title: '伊芙琳玫瑰护手霜',

image: '../../image/shop_car/list_tab1.png',

pro_name: "25g",

num: 1,

price: 62,

selected: true

},

{

id: 2,

title: '燕麦山羊乳舒缓护手霜',

image: '../../image/shop_car/list_tab2.png',

pro_name: "75ml",

num: 1,

price: 175,

selected: true

}

],

// 金额

totalPrice: 0, // 总价，初始为0

// 全选状态

selectAllStatus: true, // 全选状态，默认全选

},

onShow() {

wx.showToast({

title: '加载中',

icon: "loading",

duration: 1000

})

// 价格方法

this.count_price();

},

/**

* 当前商品选中事件

*/

selectList(e) {

var that=this;

// 获取选中的radio索引

var index = e.currentTarget.dataset.index;

// 获取到商品列表数据

var list = that.data.list;

// 默认全选

that.data.selectAllStatus = true;

// 循环数组数据，判断----选中/未选中[selected]

list[index].selected = !list[index].selected;

// 如果数组数据全部为selected[true],全选

for (var i = list.length - 1; i >= 0; i--) {

if (!list[i].selected) {

that.data.selectAllStatus =false;

break;

}

}

// 重新渲染数据

that.setData({

list: list,

selectAllStatus: that.data.selectAllStatus

})

// 调用计算金额方法

that.count_price();

},

// 编辑

btn_edit: function () {

var that = this;

if(bool){

that.setData({

edit_show: "block",

edit_name: "取消",

show_edit:"none"

})

bool=false;

}else{

that.setData({

edit_show: "none",

edit_name: "编辑",

show_edit: "block"

})

bool = true;

}

},

// 删除

deletes:function(e){

var that=this;

// 获取索引

const index = e.currentTarget.dataset.index;

// 获取商品列表数据

let list = this.data.list;

wx.showModal({

title: '提示',

content: '确认删除吗',

success: function (res) {

if (res.confirm) {

// 删除索引从1

list.splice(index, 1);

// 页面渲染数据

that.setData({

list: list

});

// 如果数据为空

if (!list.length) {

that.setData({

hasList: false

});

} else {

// 调用金额渲染数据

that.count_price();

}

} else {

console.log(res);

}

},

fail: function (res) {

console.log(res);

}

})

},

/**

* 购物车全选事件

*/

selectAll(e) {

// 全选ICON默认选中

let selectAllStatus = this.data.selectAllStatus;

// true ----- false

selectAllStatus = !selectAllStatus;

// 获取商品数据

let list = this.data.list;

// 循环遍历判断列表中的数据是否选中

for (let i = 0; i < list.length; i++) {

list[i].selected = selectAllStatus;

}

// 页面重新渲染

this.setData({

selectAllStatus: selectAllStatus,

list: list

});

// 计算金额方法

this.count_price();

},

/**

* 绑定加数量事件

*/

btn_add(e) {

// 获取点击的索引

const index = e.currentTarget.dataset.index;

// 获取商品数据

let list = this.data.list;

// 获取商品数量

let num = list[index].num;

// 点击递增

num = num + 1;

list[index].num = num;

// 重新渲染 ---显示新的数量

this.setData({

list: list

});

// 计算金额方法

this.count_price();

},

canvas: function (object) {

let _this = this;

let realWidth, realHeight;

//创建节点选择器

var query = wx.createSelectorQuery();

//选择id

query.select('#mycanvas').boundingClientRect()

query.exec(function (res) {

//res就是 该元素的信息 数组

realWidth = res[0].width;

realHeight = res[0].height;

console.log('realHeight', realHeight);

console.log('realWidth', realWidth);

const ctx = wx.createCanvasContext('mycanvas');

ctx.drawImage("../../images/ctx-bg.jpg", 0, 0, realWidth, realHeight);

ctx.drawImage(_this.data.canvasUserPic, (realWidth * 0.099), (realHeight * 0.052), (realWidth * 0.091), (realWidth * 0.091));

ctx.setFontSize(12);

ctx.setFillStyle("#a38874");

ctx.fillText(object.date, (realWidth * 0.201), (realHeight * 0.076));

ctx.setFontSize(14);

ctx.setFillStyle("#a38874");

ctx.fillText("农历" + object.lunar, (realWidth * 0.201), (realHeight * 0.099));

ctx.drawImage("../../images/swiper-bg.png", (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.60));

ctx.drawImage(_this.data.canvasShowImg, (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.30));

ctx.drawImage("../../images/swiper-detail.png", (realWidth * 0.099), (realHeight * 0.395), (realWidth * 0.8), (realHeight * 0.03));

ctx.setFontSize(16);

ctx.setFillStyle("#8d7665");

ctx.setTextAlign('center')

ctx.fillText(object.title1, realWidth / 2, _this.calculateWH(2, 620, realWidth, realHeight));

ctx.fillText(object.title2, realWidth / 2, _this.calculateWH(2, 666, realWidth, realHeight));

ctx.drawImage("../../images/swiper-line.png", (realWidth - realWidth * 0.71) / 2, (realHeight * 0.528), (realWidth * 0.71), (realHeight * 0.0195));

ctx.drawImage("../../images/luckpic.png", _this.calculateWH(1, 267, realWidth, realHeight), _this.calculateWH(2, 763, realWidth, realHeight), _this.calculateWH(1, 204, realWidth, realHeight), _this.calculateWH(2, 60, realWidth, realHeight));

ctx.setFontSize(12);

ctx.fillText(object.luck_title, realWidth / 2, _this.calculateWH(2, 880, realWidth, realHeight));

ctx.drawImage("../../images/code.jpg", _this.calculateWH(1, 229, realWidth, realHeight), _this.calculateWH(2, 989, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight))

ctx.draw();

setTimeout(function () {

wx.canvasToTempFilePath({

canvasId: 'mycanvas',

success: function (res) {

var tempFilePath = res.tempFilePath;

_this.setData({

canvasUrl: tempFilePath

})

if (tempFilePath !== '') {

_this.setData({

isShowCav: false

});

wx.hideLoading();

wx.previewImage({

current: _this.data.canvasUrl, // 当前显示图片的http链接

urls: [_this.data.canvasUrl], // 需要预览的图片http链接列表

})

}

},

fail: function (res) {

console.log(res);

}

});

}, 500);

})

},//下载图片

onShow1: function (object) {

let _this = this;

_this.setData({

isShowCav: true

})

wx.downloadFile({

url: object.avatarurl,

success: function (sres) {

_this.setData({

canvasUserPic: sres.tempFilePath

});

wx.downloadFile({

url: object.show_img,

success: function (sres1) {

_this.setData({

canvasShowImg: sres1.tempFilePath

});

_this.canvas(object);

}

})

}

})

},

/**

* 绑定减数量事件

*/

btn_minus(e) {

// // 获取点击的索引

const index = e.currentTarget.dataset.index;

// const obj = e.currentTarget.dataset.obj;

// console.log(obj);

// 获取商品数据

let list = this.data.list;

// 获取商品数量

let num = list[index].num;

// 判断num小于等于1 return; 点击无效

if (num <= 1) {

return false;

}

// else num大于1 点击减按钮 数量--

num = num - 1;

list[index].num = num;

// 渲染页面

this.setData({

list: list

});

// 调用计算金额方法

this.count_price();

},

// 提交订单

btn_submit_order: function () {

var that = this;

console.log(that.data.totalPrice);

// 调起支付

// wx.requestPayment(

// {

// 'timeStamp': '',

// 'nonceStr': '',

// 'package': '',

// 'signType': 'MD5',

// 'paySign': '',

// 'success': function (res) { },

// 'fail': function (res) { },

// 'complete': function (res) { }

// })

wx.showModal({

title: '提示',

content: '合计金额-' + that.data.totalPrice + "暂未开发",

})

},

// 收藏

btn_collert: function () {

wx.showToast({

title: '收藏暂未开发',

duration: 2000

})

},

/**

* 计算总价

*/

count_price() {

// 获取商品列表数据

let list = this.data.list;

// 声明一个变量接收数组列表price

let total = 0;

// 循环列表得到每个数据

for (let i = 0; i < list.length; i++) {

// 判断选中计算价格

if (list[i].selected) {

// 所有价格加起来 count_money

total += list[i].num * list[i].price;

}

}

// 最后赋值到data中渲染到页面

this.setData({

list: list,

totalPrice: total.toFixed(2)

});

},

// 下拉刷新

// onPullDownRefresh: function () {

// // 显示顶部刷新图标

// wx.showNavigationBarLoading();

// var that = this;

// console.log(that.data.types_id);

// console.log(that.data.sel_name);

// wx.request({

// url: host + '请求后台数据地址',

// method: "post",

// data: {

// // 刷新显示最新数据

// page: 1,

// },

// success: function (res) {

// // console.log(res.data.data.datas);

// that.setData({

// list: res.data.data.datas

// })

// }

// })

// // 隐藏导航栏加载框

// wx.hideNavigationBarLoading();

// // 停止下拉动作

// wx.stopPullDownRefresh();

// },

// 加载更多

// onReachBottom: function () {

// var that = this;

// // 显示加载图标

// wx.showLoading({

// title: '正在加载中...',

// })

// numbers++;

// // 页数+1

// wx.request({

// url: host + '后台数据地址',

// method: "post",

// data: {

// // 分页

// page: numbers,

// },

// // 请求头部

// header: {

// 'content-type': 'application/json'

// },

// success: function (res) {

// // 回调函数

// var num = res.data.data.datas.length;

// // console.log(num);

// // 判断数据长度如果不等于0，前台展示数据，false显示暂无订单提示信息

// if (res.data.data.status == 0) {

// for (var i = 0; i < res.data.data.datas.length; i++) {

// that.data.list.push(res.data.data.datas[i]);

// }

// // 设置数据

// that.setData({

// list: that.data.list

// })

// } else {

// wx.showToast({ title: '没有更多了', icon: 'loading', duration: 2000 })

// }

// // 隐藏加载框

// wx.hideLoading();

// }

// })

// },

})