购物车-小程序
wxml部分
<!-- 最外层视图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>
wxss部分：
/* 列表 */ .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;}
js部分：
// 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(); // } // }) // }, })
