index.html 5.7 KB
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>2-7购物车</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common/buy_car.css">
    <script src="__TMPL__/public/assets/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__TMPL__/public/assets/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__TMPL__/public/assets/js/base.js" type="text/javascript" charset="utf-8"></script>
    <style>

    </style>
</head>

<body>
    <header class="mui_bar">
        <div class="delete_box">
            <img class="del_img" src="__TMPL__/public/assets/images/sdfadgas@2x.png" alt="">
            <p class="del_p">删除</p>
        </div>
        <h1 class="mui_title">购物车</h1>
    </header>
    <div class="container">
        <div class="con_warp">
            <ul class="con_list_ul first_ul">
                <volist name="cart" id="cart">
                <li class="con_list_li">
                    <div class="check_radio">
                        <!-- <input type="radio"> -->
                        <img class="sel_img" style="display: none;" src="__TMPL__/public/assets/images/sure.png" alt="">
                    </div>
                    <img class="con_list_img" src="__TMPL__/public/assets/images/5653ceba1a219@2x.png" alt="">
                    <div class="goods_box">
                        <p class="goods_title">HO56C手动轮椅车</p>
                        <span class="goods_content">体积更小轻松放入汽车后备箱</span>
                        <p class="goods_money">¥2000.00</p>
                        <div class="join">
                            <img class="subtract_img" src="__TMPL__/public/assets/images/item_reduce.png  " alt="">
                            <p>1 </p>
                            <img class="add_img" src="__TMPL__/public/assets/images/item_add.png" alt="">
                        </div>
                    </div>
                </li>
                </volist>
            </ul>
        </div>
    </div>
    <div class="zhifu">
        <div class="radio_box">
            <div class="all_ckeck ">
                <!-- <input type="radio"> -->
                <img style="display: none;" src="__TMPL__/public/assets/images/sure.png" alt="">
            </div>
            <p>全选</p>
        </div>
        <div class="pay">
            <p class="to_pay">前往支付</p>
            <p class="all_price"> 合计:<span>¥4000.00</span></p>
        </div>
    </div>
    <footer class="footer">
        <ul class="bottom_list">
            <li id="index_bar" class="mainpage_botlist index_bar"><img src="__TMPL__/public/assets/images/index.png" alt=""><span>首页</span></li>
            <li id="buy_car" class="mainpage_botlist buy_car"><img src="__TMPL__/public/assets/images/cdvcd@1x_checked.png" alt=""><span>购物车</span></li>
            <li id="personal_center" class="mainpage_botlist personal_center"><img src="__TMPL__/public/assets/images/personal.png" alt=""><span>我的</span></li>
        </ul>
    </footer>
    </div>
    <script src="__TMPL__/public/assets/js/common.js"></script>
    <script>
    $(document).ready(function() {
        get_main_content();

        var $menu_box = $('.content_body .con_title>li');
        $menu_box.click(function() {
            $(this).addClass('con_curr').siblings().removeClass('con_curr');
            var index = $menu_box.index(this);
            $('.con_all .con_warp').eq(index).show().siblings().hide();
        });
    })

    function get_main_content() {

    }
    //删除
    $('.delete_box').on('click', function() {
        if ($('.con_list_li .sel_img').is(':hidden')) {

        } else {
            $('.con_list_li').hide();
            $('.all_ckeck img').hide();
        }

    });
    //勾选
    $('.check_radio').on('click', function() {

        if ($('.check_radio img').is(':hidden')) { //如果当前隐藏
            $('.check_radio img').show(); //那么就显示div
            $('.check_radio').css('border', '0.01rem solid #FFF');

        } else { //否则
            $('.check_radio img').hide(); //就隐藏div
            $('.check_radio').css('border', '0.01rem solid rgba(0,0,0,0.4)');
        }
        if ($('.con_list_li').length == 1 && $('.check_radio img').is(':hidden') == false) {
            $('.all_ckeck img').show();
            $('.all_ckeck').css('border', '0.01rem solid #FFF');
        } else {
            $('.all_ckeck img').hide();
            $('.all_ckeck').css('border', '0.01rem solid rgba(0,0,0,0.4)');

        }
    })
    //全部勾选
    $('.all_ckeck').on('click', function() {
        if ($('.all_ckeck img').is(':hidden')) { //如果当前隐藏
            $('.all_ckeck img').show(); //那么就显示tupain 
            $('.all_ckeck').css('border', '0.01rem solid #FFF');
            $('.check_radio img').show(); //那么就显示div
            $('.check_radio').css('border', '0.01rem solid #FFF');
        } else {
            $('.check_radio img').hide();
            $('.check_radio').css('border', 'none')
            $('.check_radio').css('border', '0.01em solid rgba(0,0,0,0.4)');
            $('.all_ckeck img').hide(); //那么就显示div
            $('.all_ckeck ').css('border', '0.01rem solid rgba(0,0,0,0.4)');

        }

    })
    //导航栏跳转 
    $('#index_bar').on('click', function() { window.location.href = '../index.html' });
    $('#personal_center').on('click', function() { window.location.href = '../user/personal_center.html' })
    </script>
</body>

</html>