微信小程序(五)购物车

这篇具有很好参考价值的文章主要介绍了微信小程序(五)购物车。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

shoppingcart.wxml

<!--pages/shoppingcart/shoppingcart.wxml-->
<view class="content">
    <view class="info">
    <view class="line"></view>
    <view class="receive">
    购物
    </view>
    <view class="line"></view>
    <view class="items">
    <checkbox-group bindchange="checkboxChange">
    <block wx:for="{{orders}}">
    <view class="item">
        <view class="icon">
        <label for="{{item.id}}">
        <checkbox id="{{item.id}}" value="{{item.id}}" checked=
        "{{item.selected}}" hidden/>
        <icon type="{{item.selected==true?'success':'circle'}}"
        color="#E4393C" data-value="{{item.id}}" size="20" />
        </label>
        </view>
        <view class="pic">
        <image src="{{item.pic}}" style="width:80px;height:80px;">
        </image>
        </view>
        <view class="order">
        <view class="title">{{item.name}}</view>
        <view class="desc">
        <view>数量: {{item.quantity}}</view>
        </view>
        <view class="priceInfo">
        <view class="price">¥{{item.nowPrice}}</view>
        <view class="minus" id="{{item.id}}" bindtap="minusOrders">-</view>
        <view class="count">{{item.quantity}}</view>
        <view class="add" id="{{item.id}}" bindtap="addOrders">+
        </view>
        </view>
        </view>
        </view>
        <view class="line"></view>
        </block>
        </checkbox-group>
        <checkbox-group bindchange="checkAll">
        <view class="totalInfo">
        <view class="all">
        <view>
        <label for="boxAll">
        <checkbox checked="{{selectedAll}}" id="boxAll" hidden/>
        <icon type="{{selectedAll==true?'success':'circle'}}"
        color="#E4393C" data-value="{{item.id}}" size="20" />
        </label>
    </view>
    <view>
    全选
    </view>
    </view>
    <view class="amount">
    <view class="total">
    总计:¥{{totalPrice}}元
    </view>
    <view>
    不含运费,已优惠¥0.00
    </view>
    </view>
    <view class="opr">去结算</view>
    </view>
    </checkbox-group>
    </view>
    </view>
    </view>
    

shoppingcart.js

// pages/shoppingcart/shoppingcart.js
Page({
    data:{
        orders: [], //加人到购物车里的商品集合
        selectedAll:false, //全选按钮标志位,true 代表全选选中,false代表全选未选中
        totalPrice:0 //总金额
        
    },
    onLoad:function (options) {
        this.loadOrders();
        wx.setNavigationBarTitle({ //动态修改页面标题文字
            title: '购物车'
        })
        wx.setNavigationBarColor({
            frontColor: '#000000', //导航文字颜色
            backgroundColor: '#ffffff', //导航背景色
            animation: { //动画效果
                duration: 400,
                timingFunc: 'easeIn'
            }
        })
    },
    loadOrders:function () { //加载购物车里的商品
        var orders = wx.getStorageSync('orders'); //从本地级存数据orders里获取数据
        var newOrders = [];
        var totalPrice = 0;
        var selectedAll = true;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.selected) { //购物车里的每件商品都有一个selected属性,selected等于true时代表这件商品被选中,要计算金额
                totalPrice += order.nowPrice * order.quantity; //计算选中商品的金额
            } else {
                selectedAll = false; //购物车里的商品,如果有一一件是未选中的,selectedAll全选标志位就等于false
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders); //重新加入缓存
        this.setData({totalPrice:totalPrice,orders:newOrders,selectedAll: selectedAll});//数据绑定到页面里
    },
    checkboxChange: function (e) { //每件商品前的复选框操作函数
        var ids = e.detail.value; //会把选中的复选框的id值,以数组集合的形式传递过来
        var orders = wx.getStorageSync('orders');
        var totalPrice = 0;
        var newOrders = [];
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            var flag = true;
            for (var j = 0; j < ids.length; j++) {
                if (order.id == ids[j]) { //传递过来的ids数组集合值,都是选中的 商品,需要计算总的金额
                    totalPrice += order.nowPrice * order.quantity;
                    order.selected = true; //代表该商 品是选中状态
                    flag = false; //代表该商品是选中状态
                }
            }
            if (flag) { //代表该商品是未选中状态

                order.selected = false;
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders); //重新加人缓存数据
        this.loadOrders();//重新加载页面
    }, 
    checkAll: function (e) { //全选复选框操作函数
        var orders = wx.getStorageSync("orders");
        console.log(e);
        var newOrders = [];
        var selectedAll = this.data.selectedAll;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (selectedAll) { //如果当前状态值是全选中, 那么再单击的时候,全选复选框应该为未选中状态
                order.selected = false;
            } else {
                order.selected = true;
            }
            newOrders.push(order);
        }
        wx.setStorageSync("orders", newOrders) //重新加入缓存数据
        this.loadOrders(); //重新加载页面
    },
    addOrders: function (e) { //添加商品数量 函数
        var id = e.currentTarget.id;
        var orders = wx.getStorageSync('orders');
        var addOrders = new Array();
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.id == id) {
                var quantity = order.quantity;
                order.quantity = quantity + 1; //将该件商品数量加1
            }
            addOrders[i] = order;
        }
        wx.setStorageSync('orders', addOrders); //重新加人缓存数据
        this.loadOrders(); //重新加载页面
    },

    minusOrders: function (e) { //减少商品数量函数
        console.log(e);
        var id = e.currentTarget.id;
        var orders = wx.getStorageSync('orders');
        var addOrders = new Array();
        var add = true;
        for (var i = 0; i < orders.length; i++) {
            var order = orders[i];
            if (order.id == id) {
                var count = order.quantity;
                if (count >= 2) {
                    order.quantity = count - 1; //将该件商 品数量减1
                }
            }
            addOrders[i] = order;
        }
        wx.setStorageSync('orders', addOrders); //重新加人缓存数据
        this.loadOrders(); //重新加载页面
    }
    

})

shoppingcart.wxss

/* pages/shoppingcart/shoppingcart.wxss */
.content {
    font-family: "Microsoft YaHei";
    height: 600px;
    background-color: #F9F9F8;
}

.info {
    background-color: #ffffff;
}

.line {
    border: 1px solid #CCCCCC;
    opacity: 0.2;
}

.receive {
    display: flex;
    flex-direction: row;
    padding: 10px;
}

.item {
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;
}

.order {
    width: 100%;
    height: 87px;
}

.title {
    font-size: 15px;
}

.desc {
    display: flex;
    flex-direction: row;
    font-size: 13px;
    color: #cccccc;
}

.desc view {
    margin-right: 10px;
}

.priceInfo {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.price {
    width: 65%;
    font-size: 15px;
    color: #ff0000;
    text-align: left;
}

.minus,
.add {
    border: 1px solid #cccccC;
    width: 25px;
    text-align: center;
}

.count {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cCCCCC;
    width: 40px;
    text-align: center;
}

.totalInfo {
    display: flex;
    flex-direction: row;
    height: 60px;
}

.all {
    align-items: center;
    Padding-left: 10px;
    width: 20%;
    font-size: 12px;
    margin-top: 10px;
}

.amount {
    width: 50%;
    font-size: 13px;
    text-align: right;
}

.total {
    font-size: 16px;
    color: #ff0000;
    font-weight: bold;
    margin-bottom: 10px;
}

.opr {
    position: absolute;
    right: 0px;
    width: 92px;
    font-size: 15px;
    font-weight: bold;
    background-color: #E4393C;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #ffffff;
}

.icon {
    margin-right: 10px;
}

效果图

微信小程序loadorder:function(orderid)什么意思,微信小程序,微信小程序,前端

 文章来源地址https://www.toymoban.com/news/detail-604676.html

到了这里,关于微信小程序(五)购物车的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现商品加入购物车案例

    思考: 购物车中的数据保存在哪里?用哪种数据结构进行保存? 小程序中可能有多个页面需要对购物车中的数据进行操作,因此我们想到把数据存到全局中。可以使用 wx.setStorageSync() 储存,用 wx.getStorageSync() 进行获取,以数组格式方便对数据进行操作。 一、商品加入购物车

    2024年02月10日
    浏览(51)
  • 微信小程序商城开发-商品详情页跳转购物车

    微信小程序商城开发中商品详情页中购物车页面的跳转(仅限于tabbar页面的跳转)   点击商品详情页中的购物车图标跳转不到tabbar及导航栏中的购物车页面,总是报错 微信小程序开发需要跳转tabbar页面的话,有固定的跳转方式,不是开发中所有的跳转方式都适用于tabbar跳转

    2024年02月17日
    浏览(59)
  • 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月18日
    浏览(77)
  • 微信电商小程序购买/加入购物车组件设计

    作为一名常常摆烂,一蹶不振的大学生,最近接到了开发电商小程序的小任务,既然是电商,总得有购买加车功能吧?经过n个坤年的拜读微信小程序开发者文档还有别的大佬的指点,奉上我自己的理解,欢迎各位大佬指点改正,学习交流,共同进步。该文章适合微信小程序初

    2024年02月09日
    浏览(45)
  • 购物车程序实现教程

    在本教程中,我们将实现一个购物车程序,实现在界面中以列表的形式显示购物车的商品信息。商品信息包含商品名称,价格和数量,并能实现对应的增删改查操作。我们将使用 Android Studio 和 SQLite 数据库来完成这个任务。 我们的购物车程序由以下四个主要类组成: MainAct

    2024年02月04日
    浏览(45)
  • 商城小程序(7.加入购物车)

    新建store目录,并创建store.js文件用于管理vuex相关内容 在store.js中 初始化store的实例对象 在main.js 中导入store实例对象并挂载到vue的实例上 同样目录下创建cart.js模块 在cart.js中,初始化如下的vuex模块 在store/store.js 模块中,导入并挂载购物车中的vue模块 商品详情页面测试,是

    2024年02月02日
    浏览(43)
  • 商城小程序(8.购物车页面)

    本章主要完成pages下的cart购物页面编写 定义如下UI结构 美化样式 通过 mapState 辅助函数,将Store中的cart数组映射到当前页面中使用: 在UI结构中,通过v-for渲染自定义组件my-goods 打开my-goods.vue组件,为商品左侧图片区域添加radio足迹 并美化UI ,使radio组件和image组件左右布局

    2024年01月23日
    浏览(61)
  • 模拟瑞幸小程序购物车

    是根据渡一袁老师的大师课写的,如有什么地方存在问题,还请大家指出来哟ど⁰̷̴͈꒨⁰̷̴͈う♡~

    2024年01月16日
    浏览(41)
  • flask 与小程序 购物车删除和编辑库存功能

    编辑  :   数量加减   价格汇总  数据清空 知识点1: view class=\\\"jian-btn\\\" catchtap=\\\"jianBtnTap\\\" data-index=\\\"{{index}}\\\" 是一个微信小程序中的一个视图组件,具有以下特点: class=\\\"jian-btn\\\" :该组件的样式类名为 jian-btn ,可以通过CSS样式表对其进行样式设置。 catchtap=\\\"jianBtnTap\\\" :该组件绑

    2024年01月22日
    浏览(44)
  • uniapp小程序购物车多商家单选全选功能

    效果图如下: 说明:点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品 以下是代码: 其中,slideLeft 组件是删除的效果 代码如下:

    2024年02月12日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包