ykShop
/
cart.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>购物车</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <link rel="apple-touch-icon-precomposed" href="images/screenLogo.png" />
  <link rel="stylesheet" type="text/css" href="css/m2015.css" />
  <script src="js/zepto.min.js" type="text/javascript"></script>
  <script src="js/main.js"></script>
  <script src="js/m_Common.js"></script>
  <script src="js/CartMgr.js"></script>
  <style>
        .cart_other { margin: 0; }
        .cart_other h5 { font-weight: 400; }
        .cart_box .vlist ul ul { padding: 0; }
        .cart_box .vlist ul ul li { padding: 3px 0; margin-top: 0; border: 0; }
        .cart_box .vlist ul ul li em { display: inline; }
        .cart-empty { text-align: center; color: #999; padding: 10px; }
        .cart-empty p i { font-size: 48px; }
        .cart-empty a { display: block; width: 200px; height: 40px; text-align: center; line-height: 40px; background: #f44263; color: #fff; margin: 10px auto; }
        .sj_fuwu li { line-height: 18px; height: auto; }

        .all-checked { background: #f3f3f3; padding: 10px; }
        .all-checked input { margin-right: 5px; }
        .cart_one .check-box { float: left; line-height: 80px; position:relative; }
        .cart_box .vlist ul ul li label { margin-left: 50px; }

        /*重构样式代码*/
        .cart_box .vlist ul { padding: 0; }
        .cart_box .vlist li { border-bottom: 1px solid #f1f1f1; padding: 10px; }
        .vlist li .list_info .tit { word-break: break-all; word-wrap: break-word; }
        .cart_box .vlist li .list_img { margin: 0 5px; }
        .cart_box .vlist li .list_info { margin-left: 115px; }
        .cart_btn { height: 90px; }
        .cart_btn a { margin: 10px 4px; }
        .cart_plus a, .cart_plus input { border: 1px solid #f5f5f5; }
        .cart_num { position:absolute; top:60px; left:125px;}
        .cart_del { right:20px; top:50px;}

        /*新增样式代码*/
        .cart-status { background: #fff; border-top: 1px solid #f1f1f1; position: fixed; bottom: 0; width: 100%; }
        #return { height: 25px; line-height: 25px; text-align: left; float: right; background: none; color: #45A1DE; width: auto; margin: 0; }
        .baozhang { padding-top: 17px; }
        .baozhang span { display: block; padding: 8px; background: #fcfcfc; border: 1px solid #f5f5f5; margin-bottom: 7px; line-height: 18px; }
        .baozhang i { width: 18px; height: 18px; float: left; margin-right: 6px; border-radius: 100%; background-size: 22px; }
        .baozhang .no_sel i { background: url(images/cart/server-icon.png) no-repeat center -2px; background-size: 100%;}
        .baozhang .sel i { background: #9c3 url(images/cart/server-icon.png) no-repeat center -34px; background-size: 100%;}
        .baozhang strong { margin-left: 15px; font-weight: normal; }
        .baozhang em { float: right; color: #f60; }

        .pop_head { line-height: 45px; height: 45px; font-size: 16px; padding: 0 15px; background: #f5f5f5; border-bottom: 1px solid #f1f1f1; }
        .pop_head em { float: right; line-height: 43px; }
        .pop_head em span { font-size: 22px; color: #f33; }

        .view { padding:10px 15px 15px 15px; line-height: 28px; overflow-x: hidden; overflow-y: auto; }
        .view dl { float:left; text-align:center;}
        .view dl img { width:60%;}
        .view li { font-size: 14px; }
        .view h2 { font-weight: normal; font-size: 15px; color: #45a1de;}

        .color_pj { position: fixed; background: #fff; max-width: 640px; height: 100%; top: 0; left: 0; display: none; }
        .color_bd h3 { line-height: 45px; height: 45px; font-size: 16px; padding: 0 15px; border-bottom: 1px solid #f1f1f1; font-weight: normal; background: #f5f5f5; overflow: hidden; text-align: left; }
        .color_bd h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; width: 70%; }
        .color_bd h3 em { float: right; color: #f60; }
        .color_bd li { text-align: center; }
        .color_bd li img { width: 70%; margin: 20px 0; }
        .color_hd { height: 110px; padding-left: 10px; font-size: 0; overflow-y: hidden; overflow-x: auto; }
        .color_hd li { width: 65px; height: 65px; border: 1px solid #f1f1f1; display: inline-block; margin-right: 10px; float:left; }
        .color_hd li p { height:22px; line-height:22px;}
        .color_hd li img { width: 100%; height: 100%; }
        .color_active { border: 1px solid #f60 !important; }

        .pop_foot { position: fixed; width: 100%; bottom: 0; height: 90px; border-top: 1px solid #f1f1f1; background: #fff; }
        .pop_foot a { width: 50%; text-align: center; line-height: 50px; font-size: 14px; float: right; }
        .pop_foot .ido { padding: 9px 0; text-align: center; display: block; }

        .tuijian { border-top: 10px solid #eff2f5; }
        .tuijian li { line-height: 50px; padding: 0 50px 0 15px; display: block; position: relative; border-bottom: 1px solid #f1f1f1; overflow: hidden; }
        .tuijian li label { display: block; border-right: 1px solid #f1f1f1; }
        .tuijian li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; width: 50%; }
        .tuijian li i { font-family: "宋体"; position: absolute; right: 0; font-size: 14px; width: 50px; text-align: center; }
        .tuijian li em { float: right; color: #f60; margin-right: 15px; }
        .color_sel i { color: #45A1DE; }
        .color_default i { color: #e1e1e1; }
    </style>
	</head>
	<body style="padding-bottom: 90px;">
		<header id="header" style="">
			<div class="topbar">
			    <a href="javascript:history.back();" class="back_btn"><i class="iconfont">ş</i></a>
			    <a href="javascript:;" class="top_home"><i class="iconfont">ƙ</i></a>
    			<h1 class="page_title">购物车</h1>
   			</div>

		   	<div class="home_menu" id="hMenu">
			    <a href="index.html"><i class="go_index"></i><span>首页</span></a>
			    <a href="goods_cat.html"><i class="go_fenlei"></i><span>商品分类</span></a>
			    <a href="cart.html"><i class="go_cart"></i><span>购物车</span></a>
			    <a href="member_index.html"><i class="go_me"></i><span>会员中心</span></a>
		   	</div>
		</header>

	<script>
	    //title右上角隐藏菜单
		$(".top_home").click(function(){
			var target = $(".home_menu");
			if(target.slideToggle){
				target.slideToggle()
			}else{
				target.toggle()
			}
		});
	</script>

  <div class="wrapper cart_box" style="padding-bottom: 1px;">
   <div class="vlist" style="padding: 0;">
    <div class="all-checked">
     <label> <input type="checkbox" checked="" />全选</label>
     <a href="javascript:clearCart();" class="right"><i class="iconfont">Ť</i> 清空购物车</a>
    </div>
    <ul>
    	<li class="cart_one">
    		<div class="check-box">
   				<input type="checkbox" name="basketid" value="3263300" id="basket_3263300" checked="" />
    		</div>
    		<label for="basket_3263300">
    			<img class="list_img" src="images/cart/biao.jpg" />
       			<div class="list_info">
	        		<div class="tit c666">瑞士浪琴名匠系列38.5mm 盘机械手表 326</div>
			        <div class="price red2" style="padding-bottom: 35px;">
			        	￥ <span>10488.00</span>
			        	<input type="hidden" value="10488.00" name="price" />
			        </div>
	        		<input type="hidden" value="3263300" name="basket_id" />
			        <div class="clear"></div>
		       	</div>
    		</label>
    		<p class="qingdan_shul cart_num">数量：<span>1</span></p><span class="cart_del"><i class="iconfont">Ť</i></span>
	    	<div class="baozhang">
		    	<span class="no_sel sel3263300" serviceid="20603" price="49" onclick="server(0,this,3263300,20603);" id="server0"><i></i>延长保修<strong>49元/年</strong><em>购买服务</em></span>
		       	<span class="no_sel sel3263300" serviceid="20599" price="99" onclick="server(1,this,3263300,20599);" id="server1"><i></i>意外保服务<strong>99元/年</strong><em>购买服务</em></span>
		    </div>
    	</li>

     	<li class="cart_one">
    		<div class="check-box">
   				<input type="checkbox" name="basketid" value="3263300" id="basket_3263300" checked="" />
    		</div>
    		<label for="basket_3263300">
    			<img class="list_img" src="images/cart/qkl.jpg" />
       			<div class="list_info">
	        		<div class="tit c666">比利时进口德菲丝松露巧克力黑传统 1kg </div>
			        <div class="price red2" style="padding-bottom: 35px;">
			        	￥ <span>75.90</span>
			        	<input type="hidden" value="75.90" name="price" />
			        </div>
	        		<input type="hidden" value="3263300" name="basket_id" />
			        <div class="clear"></div>
		       	</div>
    		</label>
    		<p class="qingdan_shul cart_num">数量：<span>1</span></p><span class="cart_del"><i class="iconfont">Ť</i></span>
	    	<div class="baozhang">
		    	<span class="no_sel sel3263300" serviceid="20603" price="3" onclick="server(0,this,3263300,20603);" id="server0"><i></i>活动<strong>加三元换购德菲丝松露小袋巧克力</strong><em>参加活动</em></span>
		    </div>
    	</li>
    </ul>
   </div>

   <!--选购商品-->
  <!--<div class="tuijian">
    <ul>
     <li> <label class="color_sel" onclick="selcolor(this,14835, 22886);"> <input type="checkbox" style="margin-right: 10px;" value="22886" /><span>羽博 YOOBAO S3 移动电源 充电宝 6000毫安 2A输出</span><em>59元</em><i>选色</i></label></li>
     <li> <label class="color_default" onclick="selcolor(this,10187, 14901);"> <input type="checkbox" style="margin-right: 10px;" value="14901" /><span>Plantronics 缤特力 Marque 2 M165 音乐蓝牙耳机</span><em>240元</em><i>选色</i></label></li>
     <li> <label class="color_default" onclick="selcolor(this,21313, 36479);"> <input type="checkbox" style="margin-right: 10px;" value="36479" /><span>飞尚 Freeson 红米note3 创意支架透明软胶壳</span><em>50元</em><i>选色</i></label></li>
     <li> <label class="color_default" onclick="selcolor(this,21314, 36480);"> <input type="checkbox" style="margin-right: 10px;" value="36480" /><span>摩可 Mocoll 红米note3 钢化玻璃膜</span><em>60元</em><i>选色</i></label></li>
    </ul>
   </div>-->

   <div id="lhCartTip" class="lh_jy_tip" style="display: block;">
     交易提醒：由于手机号码的特殊性，请您手机号码保持畅通并且不要轻易透漏您的验证码等个人信息，以防个人财产损失。
   </div>
   <div class="cart-status">
    <script type="text/html" id="cartTotalTmpl">
                {{if cartCount!=0}}
            <div class="cart_btn">
                <p style="margin-top: 10px;">您选择了<span>{{checkedCount}}</span>件商品，总计：<b class="red1">￥{{cartPrice}}</b></p>
                <a href="index.html" class="btn1" style="background: #45A1DE;">继续购物</a>
                <a href="javascript:;" onclick="buy()" class="btn1">去结算</a>
            </div>
                {{/if}}
            {{if cartCount==0}}
            <div class="cart-empty">
                <p><i class="iconfont">&#365;</i></p>
                <p>购物车里什么都没有，快去买点什么吧~</p>
                <a href="index.html">去逛逛</a>
            </div>
                {{/if}}
            </script>
   </div>
  </div>
  <script type="text/javascript">
        $(function () {
            $(".cart_one").each(function (index, item) {
                var product = $(item);
                BindEvent(product);
            });
            $(".cart_box .lh").each(function () {
                if ($.trim($(this).text()).length > 0) { $("#lhCartTip").show(); return false; }
            });

        });
        $(".all-checked input").change(function () {
            if ($(this).prop("checked") == true) {
                $(".vlist ul li input[type='checkbox'],.all-checked input").prop("checked", true);
            } else {
                $(".vlist ul li input[type='checkbox'],.all-checked input").prop("checked", false);
            }
            CalcAmount();
        });
        $("input[name='basketid']").change(function () {
            if ($(this).prop("checked") == false) {
                $(".all-checked input").prop("checked", false);
            }
            CalcAmount();
        });
        function buy() {
            var basketids = [];
            $("input[name='basketid']").each(function () {
                if ($(this).prop("checked") == true) {
                    basketids.push($(this).val())
                }
            });
            if (basketids.length ==0) {
                layer.open({ content: "请至少勾选一个商品购买！", shadeClose: false, btn: ['好的'] });
                return;
            }
            layer.open({ type: 2, content: "加载中", shadeClose: false });
            $.ajax({
				type:"post",
            	url:"https://segmentfault.com/a/1190000003982302",
            	dataType:"jsonp",
            	data:{
        			date:$(".month").val(),
        			flag:3,
        		},
            	success: function(data){
            		layer.closeAll();
            		location.href = "cart_check.html"
            	},
            	error:function(data2){
            		layer.closeAll();
            		location.href = "cart_check.html"
            	}
            })
        }
    </script>

  <!--新增js-->
  <script>
        /*弹出服务*/
        var the;
        var BuyService=null;
        function server(type, self, basketid, serviceid) {
            BuyService = { baskid: basketid, servicesid: serviceid };
            the = self;
            var serviceprice=$(the).attr('price');
            if ($(self).hasClass("no_sel")) {
                switch (type) {
                    case 0:
                        var html = '<div class="yanchang">\
                                        <div class="pop_head"><span style="margin-right: 10px;">瑞士浪琴机械手表</span>延保服务<em><span>'+serviceprice+'</span> 元/年</em></div>\
                                        <div class="view">\
                                            <div class="clear"></div>\
                                            <h2>为保障您的权益，购买前请仔细阅读：</h2>\
                                            <ul style="margin:5px auto">\
                                                <li><i></i>1.本延保服务对象为无磕、摔、碰等主观人为损坏的情况下，出现国家三包所列性能故障，商家会对用户提供免费维修服务。</li>\
                                                <li><i></i>2.本保障服务自您收到货品起生效，有效期为一年，若您在收到货品7日内需要取消保障服务，请前往易凯商城App售后服务中心或联系工作人员进行处理。</li>\
                                                <li><i></i>3.非本公司授权的App或商城购买的商品、私自换商品及未根据生产商的使用说明进行使用和操作等不在延保服务保障范围内（具体已商家要求规范条款为准）。</li>\
                                            </ul>\
                                            <a href="javascript:;" style="color: #f60; font-size: 14px;">了解《易凯商城延保服务》详细条款></a>\
                                        </div>\
                                        <div class="pop_foot">\
                                            <label class="ido"><input id="check1" type="checkbox" checked style="margin-right: 8px; vertical-align: middle;" />我已阅读并同意《易凯商城延保服务条款》</label>\
                                            <p><a href="javascript:ido(0);" class="buy_server" style="background:#f60; color:#fff;">确认并购买服务</a><a href="javascript:over()" class="over" style="background:#f1f1f1;">返回购物车</a></p>\
                                        </div>\
                                    </div>';
                        break;
                    case 1:
                        var html = '<div class="yiwai">\
                                        <div class="pop_head"><span style="margin-right: 10px;">瑞士浪琴机械手表</span>意外保服务<em><span>'+serviceprice+'</span> 元/年</em></div>\
                                        <div class="view">\
                                            <div class="clear"></div>\
                                            <h2>为保障您的权益，购买前请仔细阅读：</h2>\
                                            <ul style="margin:5px auto">\
                                                <li><i></i>1.购买意外保后，投保产品符合意外保使用规则并第一次使用时，我们将承担维修费用的90%，您只需支付维修费用的10% 。</li>\
                                                <li><i></i>2.本意外保服务对象为在易凯商城购买的并且用于家庭或个人使用的产品。</li>\
                                                <li><i></i>3.本保障服务自您收到货品起生效，有效期为一年，若您在收到货品7日内需要取消保障服务，请前往易凯商城App售后服务中心或联系工作人员进行处理。</li>\
                                            </ul>\
                                            <a href="javascript:;"  style="color: #f60; font-size: 14px;">了解《易凯商城意外保服务》详细条款></a>\
                                        </div>\
                                        <div class="pop_foot">\
                                            <label class="ido"><input id="check2" type="checkbox" checked style="margin-right: 8px; vertical-align: middle;" />我已阅读并同意《易凯商城意外保服务条款》</label>\
                                            <p><a href="javascript:ido(1);" class="buy_server" style="background:#f60; color:#fff;">确认并购买服务</a><a href="javascript:over()" class="over" style="background:#f1f1f1;">返回购物车</a></p>\
                                        </div>\
                                    </div>';
                        break;
                }
                layer.open({
                    type: 1,
                    content: html,
                    style: 'height:100%; width:100%; border:none;',
                    success: function () {
                        var height = $(window).height() - 170;
                        $(".view").css("height", height);
                    }
                });
            } else {
                switch (type) {
                    case 0:
                        var test = '易凯商城延保服务可为该商品提供延长一年的保修服务， ',
                            test1 = '延保';
                        break;
                    case 1:
                        var test = '易凯商城意外保服务可为该商品延长一年的意外保障',
                            test1 = '意外保障';
                        break;
                }
                layer.open({
                    content: test + '您确定放弃此次' + test1 + '机会么？',
                    btn: ['确认', '取消'],
                    shadeClose: false,
                    yes: function ()
                    {
                        chooseServicesid(0,function () {
                            $(self).removeClass("sel").addClass("no_sel");
                            layer.open({ content: '已为您取消该服务', time: 1 });
                            $(self).find("em").text("购买服务");
                        }, function () {
                            layer.open({ content: '取消该服务失败', time: 2 });
                        });

                    }, no: function () {
                        layer.close();
                    }
                });
            }
        };

        function chooseServicesid(actid,okcall, errcall){
            var ppids = '';  $('.sel' + BuyService.baskid).each(function(i,el){
                if ($(el).hasClass('sel')) ppids += $(el).attr('serviceid') + ',';
            });
            if (actid == 1)
                ppids += BuyService.servicesid + ',';
            else
                ppids = ppids.replace(BuyService.servicesid + ',', '');

            var data = { baskid: BuyService.baskid, servicesid: ppids };
            $.post('cartStep.aspx?act=chooseServicesid', data, function (res) {
                layer.closeAll();
                if (res == 1) {
                    if(okcall) okcall();
                    window.location.reload();
                } else {
                    if(errcall) okcall();
                    layer.open({ content: '服务购买失败', time: 2 });
                }
            }, 'text');
        }

        function ido(btn) {
            var check1 = $("#check1").is(":checked");
            var check2 = $("#check2").is(":checked");
            if (check1 || check2){
                chooseServicesid(1,function(){
                    var len = $(the).parent().siblings("label").find(".cart_num").children("span").text();
                    $(the).removeClass("no_sel").addClass("sel");
                    $(the).find("em").text("x" + len);
                }, function () {
                    layer.open({ content: '服务购买失败', time: 2 });
                });
            } else {
                layer.open({ content: '必须接受服务条款才可以购买', time: 2 });
            }
        }

        /*关闭弹出层*/
        function over() {
            BuyService = null;
            layer.closeAll();
        }


        function removeProduct(basketID, callback) {
            if (!confirm("确定要移除此商品吗？")) return;
            layer.open({ type: 2, shadeClose: false });
            sendPostRequest("/ajax/cartHandler.aspx?act=delCar", { id: basketID }, function () {
                layer.closeAll();
                window.location.reload();
                $(".cart_one").has("input[value='" + basketID + "']").remove();
                CalcAmount();
            }, $.noop);
        }

        function CalcAmount() {
            var totalAmount = 0;
            var productCount = 0;
            var hasCount = 0;
            $(".cart_one").each(function (index, item) {
                hasCount++;
                var curProBox = $(this);
                if (curProBox.find("input[name = 'basketid']").prop("checked") == true) {
                    var curProPrice = curProBox.find("input[type='hidden'][name='price']");

                    var inputer = curProBox.find(".cart_plus input");
                    var unitPrice = parseFloat(curProPrice.val());

                    if (inputer.size() > 0) {
                        var productPrice = unitPrice * parseInt(inputer.val());
                        productCount += parseInt(inputer.val());
                        totalAmount += productPrice;
                        curProBox.find(".price span").text(productPrice.toFixed(2));
                    } else {
                        totalAmount += unitPrice;
                        productCount++;
                    }
                    $(".cart_other input[name='price']", item).each(function () {
                        totalAmount += parseInt($(this).val());
                    });
                }
            });
            var data = { cartCount: hasCount, checkedCount: productCount, cartPrice: totalAmount.toFixed(2) };
            $('.baozhang .sel').each(function(i,el){
                data.cartPrice= parseFloat(data.cartPrice) + parseFloat($(el).attr('price'));
            });
            $(".cart-status").html(template("cartTotalTmpl",data));
        }

    </script>
 </body>
</html>