返回小米购物车总结...登陆

小米购物车总结

肖凌2019-06-07 16:46:41145

QQ截图20190607164151.png

//cart.js

$(function(){

$('.allsele').click(function(){

//判断全选样式

if($(this).children().hasClass('noselec')){

$(this).children().removeClass('noselec');

$(this).children().css('color','#ff6100');

//给子项加样式

$('.seleitem').children().removeClass('cartitemselec')

$('.seleitem').children().css('color','#ff6100');

//调用 selec函数,实现计算金额

var len=$('.seleitem').length;

selec(1,'.seleitem',len);

}else{

$(this).children().addClass('noselec');

$(this).children().css('color','');

$('.seleitem').children().addClass('cartitemselec')

$('.seleitem').children().css('color','');

var len=$('.seleitem').length;

selec(0,'.seleitem',len);

}


})

$('.seleitem').click(function(){

if($(this).children().hasClass('cartitemselec')){

$(this).children().removeClass('cartitemselec');

$(this).children().css('color','#ff6100');

selec(1,this);//调用 selec函数,实现seleitem计算金额

//seleitem子项判断是否全选

var elem=$(this).parents('.cartitem').siblings('.cartitem')

var len=elem.length;

var has=[];

for(var i=0;i<len;i++){

has[i]=elem.eq(i).find('.fa-check').hasClass('cartitemselec');

}

//inArray函数判断fa-check是否全有cartitemselec属性,全有代表全选,否则不能自动全选

if($.inArray(true,has)<0){

$(this).parents('.carshop').find('.allsele').children().removeClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','#ff6100');

}


}else{

$(this).children().addClass('cartitemselec');

$(this).children().css('color','');

$(this).parents('.carshop').find('.allsele').children().addClass('noselec');

$(this).parents('.carshop').find('.allsele').children().css('color','');

selec(0,this);

}


})

//点选增加数量

$('.add').click(function(){

var num=parseInt($(this).siblings('input').val());

num+=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=3199+parseFloat($('.totleNum').html());

$('.totleNum').html(totle);

}

})

//点选减少数量

$('.reduce').click(function(){

var num=parseInt($(this).siblings('input').val());

if(num>1){

num-=1;

$(this).siblings('input').val(num);

subtotle(num,this);

if(!$(this).parents('.cartitem').find('.fa-check').hasClass('cartitemselec')){

console.log(999);

totle=parseFloat($('.totleNum').html())-3199;

$('.totleNum').html(totle);

}

}

})

//获取每项金额加入到总金额

function subtotle(a,tag){

// console.log(a);

var totle=a*3199;

$(tag).parents('.cartitem').find('.amounts').html(totle+'元');

return totle;

}

//获取总金额

function selec(a,tag,len=0){

var sprice=0;

var snum=0;

if(len>0){

$('.subamount').html(2);

for(var i=0;i<len;i++){

sprice+=parseFloat($(tag).eq(i).parents('.cartitem').find('.amounts').html());

}

}

if(len==0){

sprice=parseFloat($(tag).parents('.cartitem').find('.amounts').html());

}

var subamount=parseFloat($('.subamount').html());

var stotle=parseFloat($('.totleNum').html());

if(a==1){

subamount+=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle+sprice+'');

}

if(a==0){

subamount-=1;

$('.subamount').html(subamount+'');

$('.totleNum').html(stotle-sprice);

}

}

})

//cart.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小米商城</title>

<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">

<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="static/css/style.css">

<link rel="stylesheet" type="text/css" href="static/css/cart.css">

<script type="text/javascript" src="static/js/jq_3.3.1_mi.js"></script>

<script type="text/javascript" src="static/js/cart.js"></script>

</head>

<body>

<!-- 头部 -->

<div class="cartheader">

<div class="cartnav">

<h2 class="fl">我的购物车</h2>

<span class="fl">温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</span>

<div class="usernav fr">

<div class="fl">我是某某某&nbsp&nbsp&nbsp<i class="fa fa-angle-down fa-1x"></i></div>

<div class="fl" style="margin-left:20px">我的订单</div>

</div>

<div class="clear"></div>

</div>


</div>

<div class="outContent" style="padding-top:40px;">

<div class="carshop">

<div class="carshoptitle">

<span class="allsele"><i class="fa fa-check noselec"></i>&nbsp&nbsp&nbsp&nbsp全选</span>

<span class="waresname">商品名称</span>

<span class="waresprice">单价</span>

<span class="waresnum">数量</span>

<span class="amount">小计</span>

<span class="operate">操作</span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>

<div class="cartitem">

<span class="seleitem"><i class="fa fa-check cartitemselec"></i></span>

<img src="static/img/phone/phone1.png">

<span class="waresname">小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64G...</span>

<span style="margin-left:80px">3199元</span>

<span class='number'>

<button class="reduce">-</button>

<input type="text" value="1">

<button class="add">+</button>


</span>

<span class="amounts">3199元</span>

<span><i class="fa fa-times operate"></i></span>

</div>


</div>

<div class="carPrice">

<div class="contcar fl">

继续购物 <span style="margin:0px 20px;color:#ccc">|</span>共 <span>3</span> 件商品,已选择 <span class="subamount">0</span> 件

</div>

<div class="overprice fr">

<span class="fl" style="color:#ff6100">合计<span class="totleNum" style="font-size:22px;margin:0 10px;">0</span>元</span>

<div class="goPrice fl">去结算</div>

</div>

</div>

<div class="content">

<div class="contitle">

<span class="conline" >

<span>买购物车中商品的人还买了</span>

</span>

</div>

<div class="contentPhone">

<div class="contentPhone-1 fl"></div>

<div class="contentPhone-2 fl">

<div class="conItem" style="margin-right:12.7px;">

<img src="static/img/buy/手机1.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div  class="conItem" style="margin-right:12.7px;">

<span class="conFlag">享八折</span>

<img src="static/img/buy/手机2.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;">

<img src="static/img/buy/手机3.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem">

<img src="static/img/buy/手机4.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手机5.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手机6.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-right:12.7px;margin-top:12.7px;">

<img src="static/img/buy/手机7.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>

<div class="conItem" style="margin-top:12.7px;">

<img src="static/img/buy/手机8.jpg">

<h3>小米5X 4G 64GB</h3>

<p>光学变焦双摄,拍人更美</p>

<p style="color:#ff6700">1499元</p>

</div>


</div>

</div>

<div class="clear"></div>

</div>

</div>

<!-- 底部 -->

<div class="footer">

<div class="foot">

<div class="foot-top">

<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>

<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>

<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>

<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>

<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<span class="separate"></span>

<!-- <div class="separate"></div> -->

<div class="foot-middle">

<dl>

<dt>帮助中心</dt>

<dd><a href="#">账户管理</a></dd>

<dd><a href="#">购物指南</a></dd>

<dd><a href="#">订单操作</a></dd>

</dl>

<dl>

<dt>服务支持</dt>

<dd><a href="#">售后服务</a></dd>

<dd><a href="#">自助服务</a></dd>

<dd><a href="#">相关下载</a></dd>

</dl>

<dl>

<dt>线下门店</dt>

<dd><a href="#">小米之家</a></dd>

<dd><a href="#">服务网点</a></dd>

<dd><a href="#">授权体验店</a></dd>

</dl>

<dl>

<dt>关于小米</dt>

<dd><a href="#">了解小米</a></dd>

<dd><a href="#">加入小米</a></dd>

<dd><a href="#">投资者关系</a></dd>

</dl>

<dl>

<dt>关注我们</dt>

<dd><a href="#">新浪微博</a></dd>

<dd><a href="#">官网微博</a></dd>

<dd><a href="#">联系我们</a></dd>

</dl>

<dl>

<dt>特色服务</dt>

<dd><a href="#">F码通道</a></dd>

<dd><a href="#">礼物码</a></dd>

<dd><a href="#">防伪查询</a></dd>

</dl>

<div class="connect">

<p class="tele">Feir-520-1314</p>

<p class="timer">周一至周日 8:00-18:00<br>仅收市话费</p>

<button><i class="fa fa-commenting"></i><span>联系客服</span></button>


</div>

</div>

<div class="clear"></div>

<div class="foot-bottom">

<div class="foot-bottom-left fl">

<img src="static/img/footlogo.png">

</div>

<div class="foot-bottom-middle fl" style="margin:0 8px;">

<div class="foot-bottom-middle-a">

<ul>

<li>小米商城<span></span></li>

<li>MIUI<span></span></li>

<li>米家<span></span></li>

<li>米聊<span></span></li>

<li>多看<span></span></li>

<li>游戏<span></span></li>

<li>路由器<span></span></li>

<li>米粉卡<span></span></li>

<li>政企服务<span></span></li>

<li>小米天猫店<span></span></li>

<li>隐私政策<span></span></li>

<li>问题反馈<span></span></li>

<li>Select Region</li>

</ul>

</div>

<div class="foot-bottom-middle-b">

©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试


</div>

</div>

<div class="foot-bottom-right fr">

<img src="static/img/footericon1.png">

<img src="static/img/footericon2.png">

<img src="static/img/footericon3.png">

<img src="static/img/footericon4.png">

<img src="static/img/footericon5.png">

</div>

<div class="clear"></div>

<div class="" style="line-height:15px;text-align:center;">

探索黑科技,小米为发烧而生!

</div>

</div>

</div>

</div>


</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网