小程序实现购物车功能前后端代码(小程序实现购物车完整版)
类别:编程学习 浏览量:797
时间:2021-09-29 03:13:42 小程序实现购物车功能前后端代码
小程序实现购物车完整版小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额],供大家参考,具体内容如下
一、wxml页面代码模块
<view wx:if="{{hasList}}"> <view class="order_list"> <view class="order" wx:for="{{list}}" wx:key="{{index}}"> <view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}"> <image src="/images/serch/xuanze.png" /> </view> <view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else> <image src="/images/serch/gouxuan.png" /> </view> <!--列表商品图片--> <view class="order_img"> <image src="{{item.image}}" /> </view> <view class="order_text"> <view class="text_top"> <!--列表标题--> <view class="title">{{item.title}}</view> <view class="detel" catchtap="deletes" data-index="{{index}}"> <image src="/images/serch/detel.png" /> </view> </view> <!--规格--> <view class="size">规格:{{item.pro_name}}</view> <view class="text_bottom"> <!--价格--> <view class="money">¥{{item.price}}</view> <!--商品数量加减--> <view class="number"> <!--减按钮--> <view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}"> <!--按钮图片--> <image src="/images/serch/jian-1.png" /> </view> <!--数量--> <view class="numb">{{item.num}}</view> <!--加按钮--> <view class="add" catchtap="btn_add" data-index="{{index}}"> <!--按钮图片--> <image src="/images/serch/add-1.png" /> </view> </view> </view> </view> </view> </view> <!--固定底部--> <view class="buy"> <view class="buy_top"> <view class="top_left"> <view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}"> <image src="/images/serch/gouxuan.png" /> </view> <view class="left_img" catchtap="selectAll" wx:else> <image src="/images/serch/gouxuan.png" /> </view> <view class="left_name">全选</view> </view> <view class="top_left"> <view class="left_img"> <image src="/images/serch/fenxiang.png" /> </view> <view class="left_name">分享</view> </view> </view> <view class="buy_bottom"> <view class="buy_left"> <view class="heji">合计:¥{{totalPrice}}</view> </view> <view class="buy_right"> <!--提交订单--> <view class="liji " catchtap="btn_submit_order">立即购买</view> <view class="liji two active">预约试衣</view> </view> </view> </view> </view> <!--购物车没订单--> <view wx:else> <view class="list_none">购物车是空的哦~</view> </view>
二、样式代码
page { background-color: rgba(238, 238, 238, 0.5); } .order { height: 238rpx; background-color: #fefeff; margin: 27rpx; border-radius: 4rpx; display: flex; align-items: center; } .xuanze { width: 40rpx; height: 40rpx; /* background-color: darkgoldenrod; */ border-radius: 50%; margin: 0 11rpx; } .xuanze image { width: 100%; height: 100%; display: block; border-radius: 50%; } .order_img { width: 180rpx; height: 180rpx; } .order_img image { width: 100%; height: 100%; display: block; } .order_text { margin-left: 20rpx; width: 58%; height: 180rpx; } .text_top { display: flex; justify-content: space-between; align-items: center; } .title { width: 70%; font-size: 28rpx; color: #4b5248; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .detel { width: 30rpx; height: 30rpx; } .detel image { width: 100%; height: 100%; display: block; } .size { font-size: 24rpx; color: #a8ada6; } .text_bottom { display: flex; margin-top: 50rpx; align-items: center; justify-content: space-between; } .money { font-size: 30rpx; color: #a5937f; } .number { display: flex; justify-content: space-around; align-items: center; width: 170rpx; } .reduce { width: 46rpx; height: 46rpx; } .reduce image { width: 100%; height: 100%; display: block; } .numb { font-size: 30rpx; color: #a5937f; } .add { width: 46rpx; height: 46rpx; } .add image { width: 100%; height: 100%; display: block; } /*购买按钮*/ .buy { height: 180rpx; width: 696rpx; position: fixed; left: 27rpx; bottom: 41rpx; background-color: #555555f3; border-radius: 4rpx; } .buy_top { border-bottom: 1px solid rgb(98, 98, 99); height: 75rpx; display: flex; align-items: center; justify-content: space-between; } .top_left { display: flex; align-items: center; } .left_img { width: 37rpx; height: 37rpx; margin: 11rpx; } .left_img image { width: 100%; height: 100%; display: block; } .left_name { font-size: 24rpx; color: #fefeff; margin-right: 29rpx; } .buy_bottom { display: flex; height: 104rpx; justify-content: space-between; align-items: center; padding: 0rpx 30rpx 0rpx 12rpx; } .buy_left { font-size: 26rpx; color: #fff; } .buy_right { display: flex; align-items: center; } .liji { width: 180rpx; height: 70rpx; border: 2rpx solid rgba(248, 248, 248, 1); box-sizing: border-box; border-radius: 4rpx; line-height: 70rpx; text-align: center; font-size: 26rpx; color: #FEFEFF; } .two{ margin-left: 12rpx; } .active{ background-color: #A5937F; border: none; }
三、js代码模块
Page({ /** * 页面的初始数据 */ data: { hasList: true, //默认展示列表数据 //商品列表数据 list: [{ id: 1, title: '园艺大师抗皱精华露', image: '/images/serch/2.png', pro_name: "30ml", num: 1, price: 180, selected: true }, { id: 2, title: '伊芙琳玫瑰护手霜', image: '/images/serch/1.png', pro_name: "25g", num: 1, price: 62, selected: true }, { id: 2, title: '燕麦山羊乳舒缓护手霜', image: '/images/serch/2.png', pro_name: "75ml", num: 1, price: 175, selected: true } ], //金额 totalPrice: 0, //总价,初始为0 //全选状态 selectAllStatus: true, // 全选状态,默认全选 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { 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(); }, // 删除 deletes(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(); }, /** * 绑定减数量事件 */ 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() { 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 + "暂未开发", }) }, /** * 计算总价 */ 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) }); }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 用python制作一个简单的小程序(一个可以套路别人的python小程序实例代码)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- python编写的小程序(几个适合python初学者的简单小程序,看完受益匪浅!推荐)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 小程序开发计算方法(小程序实现简单的计算器)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
热门推荐
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- nginx查看请求协议(Nginx之Http模块系列之autoindex模块的具体使用)
- dedecms全局标签(dedecms教程之单表模型动态浏览设置方法分享)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- centos6tomcat安装(Tomcat CentOS安装实现过程图解)
- nginx反向代理怎样实现(Nginx反向代理配置的全过程记录)
- js数组去重的十种方法(JavaScript常用数组去重实战源码)
- linux内核打印pc的值(linux内核copy_{to, from}_user的思考)
- 个人能备案云服务器吗(租用云服务器后的备案问题你真的了解吗?)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)