<body>
<div class="cart-warp">
<div class="integral-tit">
<label for="">向阳红便利店</label>
<span>我的积分：<em>9869</em></span>
</div>
<div class="cart-list">
<ul>
<li>
<div class="goods-Info">
<img src="images/pic1.jpg" alt="" />
<dl>
<dt class="text-hide-2">很香的山东葱油大饼</dt>
<dd>
￥<span class="money-Num">10</span>+<span class="integral-Num">80</span>积分
</dd>
</dl>
</div>
<div class="goods-Num">
<a class="Num-btn Num-reduce" href="javascript:;">-</a>
<input type="number" name="" id="" value="3" disabled="disabled"/>
<a class="Num-btn Num-add" href="javascript:;">+</a>
</div>
</li>
<li>
<div class="goods-Info">
<img src="images/pic2.jpg" alt="" />
<dl>
<dt class="text-hide-2">有机大米</dt>
<dd>
￥<span class="money-Num">20</span>+<span class="integral-Num">50</span>积分
</dd>
</dl>
</div>
<div class="goods-Num">
<a class="Num-btn Num-reduce" href="javascript:;">-</a>
<input type="number" name="" id="" value="2" disabled="disabled" />
<a class="Num-btn Num-add" href="javascript:;">+</a>
</div>
</li>
<li>
<div class="goods-Info">
<img src="images/pic3.jpg" alt="" />
<dl>
<dt class="text-hide-2">山西省阳泉市郊区市某陌暮图书馆,这是增位元素</dt>
<dd>
￥<span class="money-Num">30</span>+<span class="integral-Num">20</span>积分
</dd>
</dl>
</div>
<div class="goods-Num">
<a class="Num-btn Num-reduce" href="javascript:;">-</a>
<input type="number" name="" id="" value="4" disabled="disabled" />
<a class="Num-btn Num-add" href="javascript:;">+</a>
</div>
</li>
<li>
<div class="goods-Info">
<img src="images/pic2.jpg" alt="" />
<dl>
<dt class="text-hide-2">旬邑苹果</dt>
<dd>
￥<span class="money-Num">50</span>+<span class="integral-Num">80</span>积分
</dd>
</dl>
</div>
<div class="goods-Num">
<a class="Num-btn Num-reduce" href="javascript:;">-</a>
<input type="number" name="" id="" value="1" disabled="disabled" />
<a class="Num-btn Num-add" href="javascript:;">+</a>
</div>
</li>
</ul>
</div>
</div>
<!--合计-S-->
<div class="pf total-Num">
<div class="total-money_integral">
合计：￥<em class="all-money">0</em>+<em class="all-integral">0</em>积分
</div>
<a class="go-Pay" href="javascript:;">结算(<i>0</i>)</a>
</div>
<!--合计-E-->
<!--购买弹窗-S-->
<div class="Pay-pop pf">
<div class="Pay-con pa">
<div class="goods-list">
<ul></ul>
</div>
<div class="Pay-confirm">是否确认兑换</div>
<div class="confirm-btn">
<a href="javascript:;" class="confirm-yes">确认</a>
<a href="javascript:;" class="confirm-cancel">再想想</a>
</div>
<img class="cancel_Pay_btn pa" src="images/cancel_Pay_btn.png" alt="关闭弹窗" />
</div>
</div>
<!--购买弹窗-E-->
</body>
<script type="text/javascript">
$(function(){
//var money_num = 0;//先定义一个价格用来做首次进来的单个商品的价格计算
var allMoney=0;//定义总的价格，用来做最终的计算
var allIntegral = 0;//页面的总积分
var number_num = 0;//结算的数量
var money_arr=[];//用来将所有的数量循环后存放的数组，最后做相加操作
var integral_arr=[];//用来将所有的积分循环后存放的数组，最后做相加操作
var goodsList=[];//商品最终提交的数组
$('.cart-list li').each(function(e,i){//页面刚进来循环所有的价格以及积分
var money = $(this).find('.money-Num').text();//每个商品的价格
var integral = $(this).find('.integral-Num').text();//每个商品的积分
var this_num = $(this).find('.goods-Num input').val();//每个商品的数量
var total_money = (money * this_num);//每个商品的总价（单价 * 数量）
var total_integral = (integral * this_num)//每个商品的积分
money_arr.push(total_money)//将每个商品总价合成一个数组
integral_arr.push(total_integral)//将每个商品积分合成一个数组
});
// console.log(integral_arr)//每个商品的总积分数组
// console.log(money_arr)//每个商品的总价数组
money_arr.forEach(function(val){//遍历每个商品总价格的数组，进行相加
allMoney+=val;
});
integral_arr.forEach(function(val){//遍历每个商品总积分的数组，进行相加
allIntegral+=val
})
$('.all-money').text(allMoney);//默认进入页面的总价
$('.all-integral').text(allIntegral);//默认进入页面的总积分
$('.cart-list li').each(function(){//将所有的li遍历
number_num = number_num + parseInt($(this).find('input').val());//计算其内部的input值并赋值给定义的对象
});
$('.total-Num i').text(number_num)
var pay_h = $('.total-Num').height();
$('.cart-warp').css('padding-bottom',(pay_h+20))
$('.Num-reduce').click(function(){//减号
var Unm_data = $(this).parent('.goods-Num').find('input').val();//
//所选择商品价格
var goodsItemMoney = parseInt($(this).parent('.goods-Num').prev('.goods-Info').find('.money-Num').text());
//所选择商品积分
var goodsItemIntegral = parseInt($(this).parent('.goods-Num').prev('.goods-Info').find('.integral-Num').text());
Unm_data--;
if(Unm_data<1){
var r=confirm("您确定要删除？");
if (r==true){
console.log('点击了确定')
number_num--;//总数相减
$(this).parent('.goods-Num').find('input').val(Unm_data)
$('.total-Num i').text(number_num)//最终的所有商品数量
$('.all-money').text(allMoney-=goodsItemMoney)//最终的就价格
$('.all-integral').text(allIntegral -= goodsItemIntegral)//最终的积分
$(this).parent().parent('li').remove();
}
else{
console.log('点击了取消')
}
return;
}else{
number_num--;//总数相减
$(this).parent('.goods-Num').find('input').val(Unm_data)
$('.total-Num i').text(number_num)//最终的所有商品数量
$('.all-money').text(allMoney-=goodsItemMoney)//最终的就价格
$('.all-integral').text(allIntegral -= goodsItemIntegral)//最终的积分
}
});
$('.Num-add').click(function(){//加号
var Unm_data = $(this).parent('.goods-Num').find('input').val();//当前点击的商品数量
Unm_data++;//当前点击的商品数量加1
$(this).parent('.goods-Num').find('input').val(Unm_data);//给当前点击商品赋值数量
number_num++;//结算的数量加1
//所选择商品价格
var goodsItemMoney = parseInt($(this).parent('.goods-Num').prev('.goods-Info').find('.money-Num').text());
//所选择商品积分
var goodsItemIntegral = parseInt($(this).parent('.goods-Num').prev('.goods-Info').find('.integral-Num').text());
$('.total-Num i').text(number_num)//最终的数量
$('.all-money').text(allMoney+=goodsItemMoney)//最终的就价格
$('.all-integral').text(allIntegral += goodsItemIntegral)//最终的积分
});
// 结算弹框-S
$('.total-Num a.go-Pay').click(function(){//点击提交按钮
var submit_list_html =''
$('.Pay-pop').fadeIn();//调出弹框
goodsList=[];//在合成前，先将数组清空，避免数据重复
$('.cart-list li').each(function(e,i){//将所有商品遍历
var submint_name = $(this).find('dt').html();//提交的商品名称
var submint_num = $(this).find('input').val();//提交商品的数量
var obj = {"names":submint_name,"nums":submint_num}//将商品的名称，数量合成一个对象
//console.log(obj)
goodsList.push(obj)//将所有对象合并成一个数组
});
//console.log(goodsList)
for(var i=0;i<goodsList.length;i++){
submit_list_html+='<li>'+
'<span class="text-hide-1">'+goodsList[i].names+'</span>'+
'<em>X'+goodsList[i].nums+'</em>'+
'</li>'
}
$('.Pay-con .goods-list ul').append(submit_list_html)
});
$('.confirm-cancel').click(function(){
$('.Pay-pop').fadeOut();
$('.Pay-con .goods-list ul').html('')
});
$('.cancel_Pay_btn').click(function(){
$('.Pay-pop').fadeOut();
$('.Pay-con .goods-list ul').html('')
});
$('.Pay-pop').click(function(){
$(this).fadeOut()
$('.Pay-con .goods-list ul').html('')
});
$('.Pay-pop .Pay-con').click(function(e){
e.stopPropagation()
});
// 结算弹框-E
});
</script>
扫一扫
211
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
