版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/81130933
代码注释很容易理解
<!-- 最外层视图pages -->
<view class="pages">
<view wx:if="{{hasList}}">
<!-- 编辑 -->
<view class='edit'>
<label class='edit_btn' bindtap='btn_edit'>{{edit_name}}</label>
</view>
<!-- 列表 -->
<view class="list" wx:for="{{list}}" wx:key="{{index}}">
<!-- radio选择IOCN -->
<!-- <icon wx:if="{{item.selected}}" type="success" color="#405A8F;" data-index="{{index}}" class="radio_chek" bindtap="selectList" /> -->
<image class='dele_edit' bindtap='deletes' data-index='{{index}}' style='display:{{edit_show}}' src='../../image/dele.png'></image>
<image wx:if="{{item.selected}}" data-index="{{index}}" class="radio_chek" bindtap="selectList" src='../../image/radio_show.png'></image>
<!-- <icon wx:else type="circle" class="radio_chek" data-index="{{index}}" bindtap="selectList" /> -->
<!-- else -->
<image wx:else src='../../image/radio_none.png' class="radio_chek" data-index="{{index}}" bindtap="selectList"></image>
<!-- 列表标题 -->
<text class="list_name">{{item.title}}</text>
<!-- 列表商品图片 -->
<image class="list_img" src="{{item.image}}"></image>
<!-- 规格 -->
<text class="cart_g_name">规格 : {{item.pro_name}}</text>
<!-- 收藏 -->
<label class='collert' bindtap='btn_collert'>
<image class='collert_img'src='../../image/shop_car/collert.png'></image> 收藏</label>
<!-- 价格 -->
<text class="list_price">￥{{item.price}}</text>
<!-- 商品数量加减 style='display:{{show_edit}}'-->
<view style='display:{{show_edit}}'>
<view class="carts-num">
<!--减按钮 -->
<lable class="minus" bindtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">-</lable>
<!-- 文本框值 -->
<!-- <input class="view_text_center" disabled='disabled' value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input> -->
<label class="view_text_center" bindinput='input_num' data-index="{{index}}">{{item.num}}</label>
<!-- <text class="cart-count-num">{{item.num}}</text> -->
<!-- 加按钮-->
<lable class="plus" bindtap="btn_add" data-index="{{index}}">+</lable>
</view></view>
<!-- 删除 -->
<!-- <text class="list_del" bindtap="deleteList" data-index="{{index}}">×</text> -->
</view>
<!-- 固定底部 -->
<view class="cont_bot">
<!-- 全选ICON -->
<image wx:if="{{selectAllStatus}}" class="total-select" bindtap="selectAll" src='../../image/radio_show.png'></image>
<!-- <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#999" class="total-select" bindtap="selectAll" /> -->
<!-- else -->
<image wx:else class="total-select" bindtap="selectAll"src='../../image/radio_none.png'></image>
<!-- <icon wx:else type="circle" color="#999" class="total-select" bindtap="selectAll" /> -->
<!-- 全选标题 -->
<text class='sel_count_name'>全选</text>
<!-- 合计金额 -->
<lable class="count_price">合计：<text>￥{{totalPrice}}</text></lable>
<!-- 提交订单 -->
<label class='submit' bindtap='btn_submit_order'>提交订单</label>
</view>
</view>
<view wx:else>
<view class="list_none">购物车是空的哦~</view>
</view>
</view>
/* 列表 */
.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();
// }
// })
// },
})