master

分支 (1)

管理

管理

master

pocket
/
my_shopcar.html

<!DOCTYPE html>
<html>
    <head>
        <title>Pocket</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/common.css" rel="stylesheet" type="text/css"/>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery.min.js" type="text/javascript"></script>

    </head>
    <body class="bg-dye">
        <div class="top">
            <a href="" class="pull-left"><i class="fa fa-angle-left"></i></a>
            <div class="item-title">我的購物車</div>
        </div>

            <ul class="shiyong-my mb-8 mt-6">
                <li class="line-b">
                    <div class="block-table line-b p-1">
                        <div class="col-xs-1 p-0">
                            <input type="checkbox" class="mt-4">
                        </div>
                        <div class=" col-xs-4 p-0 item-img"><img src="images/shiyong-img.jpg" alt=""/></div>
                        <div class="col-xs-7 p-0 pl-1">
                            <h4 class="m-0">產品名XXXXXXXXXX</h4>
                            <p>
                                產品介紹XXXXXXXXXXXXXXXX
                            </p>
                            <div class="mt-1">
                                <div class="col-xs-4 text-red text-md p-0 ">￥ <font class="price" data-price="153">153</font></div>
                                <div class="col-xs-6 p-0">
                                    <div class="input-group num-con">
                                        <span class="input-group-btn">
                                            <button class="btn btn-minus" type="button">-</button>
                                        </span>
                                        <input type="text" class="form-control" value="1" disabled>
                                        <span class="input-group-btn">
                                            <button class="btn btn-plus" type="button">+</button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xs-2 p-0 text-right"><a href="" class="trash"><i class="fa fa-trash-o text-md"></i></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <span>運費</span>
                        <span class="pull-right">免運費</span>
                    </div>
                </li>
                <li class="line-b ">
                    <div class="block-table line-b p-1">
                        <div class="col-xs-1 p-0">
                            <input type="checkbox" class="mt-4">
                        </div>
                        <div class=" col-xs-4 p-0 item-img"><img src="images/shiyong-img.jpg" alt=""/></div>
                        <div class="col-xs-7 p-0 pl-1">
                            <h4 class="m-0">產品名XXXXXXXXXX</h4>
                            <p>
                                產品介紹XXXXXXXXXXXXXXXX
                            </p>
                            <div class="mt-1">
                                <div class="col-xs-4 text-red text-md p-0 ">￥ <font class="price" data-price="153">153</font></div>
                                <div class="col-xs-6 p-0">
                                    <div class="input-group num-con">
                                        <span class="input-group-btn">
                                            <button class="btn btn-minus" type="button">-</button>
                                        </span>
                                        <input type="text" class="form-control" value="1" disabled>
                                        <span class="input-group-btn">
                                            <button class="btn btn-plus" type="button">+</button>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xs-2 p-0 text-right"><a href="" class="trash"><i class="fa fa-trash-o text-md"></i></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="item-bottom">
                        <span>運費</span>
                        <span class="pull-right">免運費</span>
                    </div>
                </li>

        </ul>
        <div class="shop-bottom">

                總計：<span class="text-red priceall">￥<font>0</font></span>
                <a href="" class="btn pull-right">結算</a>

        </div>


        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
        <script type="text/javascript">
             //通用數值加減
     $(".num-con").find(".btn-plus").click(function(){
         var num = $(this).parents(".num-con").find(".form-control").val();

            num++;
         var price = $(this).parents(".mt-1").find(".price").attr("data-price");

         $(this).parents(".mt-1").find(".price").text(price*num);

         $(this).parents(".num-con").find(".form-control").val(num);
         priceall();
    });

        $(".num-con").find('.btn-minus').click(function(){
              var num = $(this).parents(".num-con").find(".form-control").val();
              num--;

            if(num>0)
           {
      var price = $(this).parents(".mt-1").find(".price").attr("data-price");
         $(this).parents(".mt-1").find(".price").text(price*num);
              $(this).parents(".num-con").find(".form-control").val(num);
           }
           priceall();

});
            $(".shiyong-my").find("input:checkbox").click(function(){
            priceall();

            });

            function priceall(){
                var p = 0;

                $(".shiyong-my").find("input:checkbox:checked").each(function(){

                        p += parseInt($(this).parents("li").find(".price").text());

                });
                $(".priceall").find("font").text(p);
            }
            $(".trash").click(function(){
               $(this).parents("li").remove();
               return false;
            });
        </script>
    </body>
</html>