高仿魅族购物车代码效果-html代码-BFW代码库

代码语言：html

所属分类：电商

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            var $cartContainer = $('<div class="mzContainer">\
                            <div class= "check-container" >\
                                <div class="shop-cart-nav">\
                                    <table>\
                                        <tr>\
                                            <td class="check-area">\
                                                <a href="javascript:;" class="check-label check-all">\
                                                    <i class="checkbox">\
                                                        <span class="check-mark"></span>\
                                                    </i>\
                                                    <em class="check-name">全选</em>\
                                                </a>\
                                            </td>\
                                            <td class="singal-price">\
                                                单价(元)\
                                            </td>\
                                            <td class="volumes">\
                                                数量\
                                            </td>\
                                            <td class="small-total">\
                                                小计(元)\
                                            </td>\
                                            <td class="edit-area">\
                                                <span class="edit">编辑</span>\
                                            </td>\
                                        </tr>\
                                    </table>\
                                </div>\
                                <ul class="goods-ul">\
                                </ul>\
                            </div >\
                            <div class="shop-cart-footer">\
                                <div class="cart-foot clearfix">\
                                    <div class="cart-foot-left">\
                                        <a href="javascript:;" class="check-label check-all">\
                                            <i class="checkbox">\
                                                <span class="check-mark"></span>\
                                            </i>\
                                            <em class="check-name">全选</em>\
                                        </a>\
                                        <em class="goods-delete">删除选中的商品</em>\
                                        <em class="goods-num">\
                                            共<span class="sum"></span>件商品，\
                                            已选择&nbsp;<span class="sum-selected"></span>&nbsp;件\
                                        </em>\
                                    </div>\
                                    <div class="cart-foot-right">\
                                        <em class="total-bill">\
                                            合计(不含运费)：\
                                        <span class="bill-price"></span>\
                                        </em>\
                                        <a href="javascript:;" class="order-btn ban-order">去结算</a>\
                                    </div>\
                                </div>\
                            </div>\
                        </div >');

            $(".header").after($cartContainer);

            var datas = {

                '声学': [{
                    'name': 'MEIZU UR 高端定制耳机',
                    "img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
                    // "img": 'https://openfile.meizu.com/group1/M00/07/4D/Cgbj0F1l7zeAFyLsAAZJk_cF8Tk126.png@120x120.png',
                    'goodTip': '预约 十单元 8699起',
                    'singalPrice': '￥200.00'
                }],

                '手机': [{
                    'name': '魅族 16Xs',
                    "img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
                    // "img": 'https://openfile.meizu.com/group1/M00/07/2C/Cgbj0FzvRI6AWu1jAAxIbnS8M5Q295.png@120x120.png',
                    'goodTip': '全网通公开版 珊瑚橙 6+64GB',
                    'singalPrice': '￥1499.00'
                },
                    {
                        'name': '魅族 16s',
                        "img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
                        // "img": 'https://openfile.meizu.com/group1/M00/07/23/Cgbj0FzaXQqAH-L3AAeSSra0qAg862.png@120x120.png',
                        'goodTip': '全网通公开版 凝光白 6+128GB',
                        'singalPrice': '￥2699.00'
                    },
                    {
                        'name': '魅族 16s Pro',
                        "img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
                        // "img": 'https://openfile.meizu.com/group1/M00/07/5F/Cgbj0V1jhtuAa71pAAd3EPLUA9Q862.png@120x120.png',
                        'goodTip': '全网通公开版 黑之秘境 8+128GB',
                        'singalPrice': '￥2999.00'
                    },
                    {
                        'name': '魅族 16T',
                        "img": 'http://repo.bfw.wiki/bfwrepo/image/5e0e95ca07b8a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_128,h_128,/quality,q_90',
                        // "img": 'https://openfile.meizu.com/group1/M00/07/62/Cgbj0F2upwyAKqQSAAlGpvLiEdc809.png@120x120.png',
                        'goodTip': '全网通公开版 湖光绿 8+256GB',
                        'singalPrice': '￥2499.00'
                    }]

            };
            $.each(datas, function (i, e) {
                var newTr = '';
                var $newLi = $('<li class="goods-list">\
                        <table class= "goods-header" >\
                            <tr>\
                                <td colspan="5">\
            .........完整代码请登录后点击上方下载按钮下载查看