小程序实现购物车完整版
程序员文章站
2022-07-02 11:47:57
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额],供大家参考,具体内容如下一、wxml页面代码模块二、样式代码三、js代码模块以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家...
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额],供大家参考,具体内容如下
一、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) }); }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 中国建设银行如何设置安全锁?
下一篇: JavaScript之事件循环案例讲解