仿购物车结算页面

最新推荐文章于 2025-04-25 19:16:38 发布

一朵叶子

最新推荐文章于 2025-04-25 19:16:38 发布

阅读量130

点赞数

文章标签： jquery 前端

本文链接：https://blog.youkuaiyun.com/yjy528/article/details/131328073

版权

这段代码展示了如何创建一个购物车页面，包括商品选择、数量加减、小计计算以及满减规则的应用。用户可以选择商品并调整数量，页面会实时更新总价和满减优惠。当满足特定满减条件时，会显示相应的优惠金额。此外，代码还包括了弹窗确认扣除币数的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿购物车页面，加减计算，选中后加入结算，取消选中扣除结算，三个等级的满减计算

html：

    <!-- 购买区域 -->
    <div class="buy_part_div" id="buy_part_div">
        <div class="buy_part_nei">
            <div class="buy_part_list">
                <p class="buy_part_title buy_part_title1"><span></span>A</p>
                <ul id="quanBox1"></ul>
                <p class="buy_subtotal" id="total1">小计：--币</p>
            </div>
            <div class="buy_part_list buy_part_list2">
                <p class="buy_part_title buy_part_title2"><span></span>B</span></p>
                <ul id="quanBox2"></ul>
                <p class="buy_subtotal" id="total2">小计：--币</p>
            </div>
            <div class="buy_part_list" id="footballPart">
                <p class="buy_part_title buy_part_title3"><span></span>C</p>
                <ul id="quanBox3"></ul>
                <p class="buy_subtotal" id="total3">小计：--币</p>
            </div>
            <div class="buy_totle_div">
                <p>合计：<span id="allTotal">--币</span> 满减：<span id="allTotalManJian">--币</span></p>
                <p id="preNext">还差<span>--</span>币减<span>--</span>币</p>
                <div class="buy_totle_btn after" id="buy_totle_btn" onclick="funcShowBuyPop()">结算</div>
            </div>
        </div>
    </div>
    <!-- 弹窗 币扣除确认 -->
    <div class = "popup_con hide" id = "popupCon">
        <div class = "popup_buy_main">
            <p class="popup_cost">
                确认使用<span id="pop_score1">--币</span><br>
                已满减<span id="pop_score2">--币</span>
            </p>
            <p class="popup_count" id="pop_score3">购买A*N，B*N，C*N</p>
            <div class = "popup_buy_btn" onclick = "funcBuy();">确认</div>
        </div>
    </div>

css：

/* 购买部分 */
.buy_part_div{width: 7rem;margin: 0.2rem auto;background: #00F37D;border-radius: 0.1rem;padding: 0.1rem;box-sizing: border-box;}
.buy_part_nei{width: 6.8rem;background: #fff;border-radius: 0.1rem;padding: 0.1rem;box-sizing: border-box;}
.buy_part_list{margin: 0 auto 0.1rem;}
.buy_part_title{position: relative;padding-left:0.82rem;box-sizing: border-box;width: 6.41rem;height: 0.47rem;color: #000000;font-size: 0.28rem;font-weight: bold;line-height: 0.47rem;}
.buy_part_title span{display: inline-block;position: absolute;top: 0;left: 0.22rem;width: 0.48rem;height: 0.49rem;}

   /* 购买 券样式 */
.buy_part_list ul{width: 100%;overflow: hidden;}
.buy_part_list ul li{width: 33.33%;float: left;margin-top: 0.1rem;}
.buy_item{position: relative;width: 1.88rem;height: 1.64rem;margin: 0 auto;background: #ffffff;border: 1px solid #000000;border-radius: 0.2rem;}
.buy_check{position: absolute;left: 0.14rem;top: 0.14rem;display: inline-block;width: 0.29rem;height: 0.29rem;background: #ffffff;border: 1px solid #000000;border-radius: 50%;}
.buy_gift_input {width: 1.76rem;height: 0.49rem;margin:0.08rem auto 0;background:rgb(148, 181, 252);overflow: hidden;border-radius: 0.2rem;}
.buy_gift_input > p {width: 0.38rem;height: 0.38rem;margin: 0.05rem;background:#000000;border-radius: 50%;color: #fff;text-align: center;font-size: 0.38rem;line-height: 0.38rem;}
.buy_gift_input > p.input_jian {float: left;}
.buy_gift_input > p.input_jia {float: right;}
.rank_input {font-size: 0.26rem;color: #000;font-weight: bold;outline: none;float: left;width: 0.8rem;height: 0.49rem;text-align: center;line-height: 0.49rem;border: none;background: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.buy_quan{width: 0.96rem;height: 0.97rem;margin: 0 auto;}
.buy_price{color: #000;font-size: 0.22rem;text-align: center;}
.buy_part_list ul li.active .buy_item{background:rgb(243, 152, 167);}
.buy_part_list ul li.active .buy_check{background:rgb(240, 44, 77);}
.buy_subtotal{color: #666666;font-size: 0.2rem;text-align: center;height: 0.3rem;line-height: 0.3rem;}
.buy_totle_div{position: relative;margin-bottom: 0.3rem;}
.buy_totle_div p{color: #000000;font-size: 0.24rem;}
.buy_totle_div p span{color: #C037DD;font-size: 0.3rem;font-weight: bold;}
.buy_totle_btn{position: absolute;right: 0;bottom: 0; width: 1.92rem;height: 0.63rem;background: #eeeeee;border-radius: 0.3rem;font-size: 0.3rem;text-align: center;line-height: 0.63rem;}
.buy_totle_btnCan{background:#ffff00;}
/* 结算弹窗 */
.popup_buy_main{position: fixed;width: 4.6rem;height: 3rem;background:#FFFFFF;border: 0.08rem solid #D4D4D4;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.popup_cost{padding-top: 0.4rem;text-align: center;color: #000000;font-size: 0.24rem;font-weight: bold;}
.popup_cost span{color: #C037DD;font-size: 0.28rem;font-weight: bold;padding-left: 0.1rem;}
.popup_count{color: #000000;font-size: 0.22rem;text-align: center;padding-top: 0.2rem;}
.popup_buy_btn{position: absolute;left: 50%;transform: translateX(-50%);bottom: 0.25rem;width: 1.76rem;height: 0.52rem;background: #ffff00;border-radius: 0.3rem;text-align: center;font-size: 0.3rem;line-height: 0.52rem;}

js：

var quanObj = {  //购买区域 游戏券内容
    "11":{"count":1,"price":10,"totalPrice":0,"check":false,"type":1,"name":"A"},
    "12":{"count":1,"price":20,"totalPrice":0,"check":false,"type":1,"name":"A"},
    "13":{"count":1,"price":30,"totalPrice":0,"check":false,"type":1,"name":"A"},
    "21":{"count":1,"price":40,"totalPrice":0,"check":false,"type":2,"name":"B"},
    "22":{"count":1,"price":50,"totalPrice":0,"check":false,"type":2,"name":"B"},
    "23":{"count":1,"price":60,"totalPrice":0,"check":false,"type":2,"name":"B"},
    "31":{"count":1,"price":70,"totalPrice":0,"check":false,"type":3,"name":"C"},
    "32":{"count":1,"price":80,"totalPrice":0,"check":false,"type":3,"name":"C"},
    "33":{"count":1,"price":90,"totalPrice":0,"check":false,"type":3,"name":"C"},
    "1":0,
    "2":0,
    "3":0,
    "allTotal":0,
    "allTotalAfter":0,
    "manjianCurrent":0,
}
var ruleArr = [//满减规则数组
    ["500",200],
    ["150",50],
    ["100",25],
];
// 购买部分
var myGrade = 12; //我的等级
var myCoin = 9999;  //我的币
if(myGrade>=12){//足球券满足等级展示
    $("#footballPart").show();
}else{
    $("#footballPart").hide();
}
$(function () {
    funcGetQuanHtml(); 
})
// 渲染 购买部分
var quanOnlyObj = {};
function funcGetQuanHtml(){
    for(var o in quanObj){
        if(typeof(quanObj[o])=="object"){
            quanOnlyObj[o] = quanObj[o]
        }
    }
    var str1 = "",str2 = "",str3 = "";
    for(var item in quanOnlyObj){
        if(quanOnlyObj[item].type == 1){
            str1 += quanHtmlMD.replace(/\{\{key\}\}/g, item).replace(/\{\{type\}\}/g, quanOnlyObj[item].type)
            .replace(/\{\{name\}\}/g, quanOnlyObj[item].name).replace(/\{\{price\}\}/g, quanOnlyObj[item].price)
        }else if(quanOnlyObj[item].type == 2){
            str2 += quanHtmlMD.replace(/\{\{key\}\}/g, item).replace(/\{\{type\}\}/g, quanOnlyObj[item].type)
            .replace(/\{\{name\}\}/g, quanOnlyObj[item].name).replace(/\{\{price\}\}/g, quanOnlyObj[item].price)
        }if(quanOnlyObj[item].type == 3){
            str3 += quanHtmlMD.replace(/\{\{key\}\}/g, item).replace(/\{\{type\}\}/g, quanOnlyObj[item].type)
            .replace(/\{\{name\}\}/g, quanOnlyObj[item].name).replace(/\{\{price\}\}/g, quanOnlyObj[item].price)
        }
    }
    $("#quanBox1").html(str1);
    $("#quanBox2").html(str2);
    $("#quanBox3").html(str3);
}
// 合计 满减计算
function funcCompute(val){
    var a = 0;
    if(val>=ruleArr[0][0]){a=ruleArr[0][1]}
    else if(val>=ruleArr[1][0]){a=ruleArr[1][1]}
    else if(val>=ruleArr[2][0]){a=ruleArr[2][1]}
    return a;
}
// 满减等级 距下一级差额
function funcComputeNext(val){
    var a = "";
    if(val>=ruleArr[0][0]){a=""}
    else if(val>=ruleArr[1][0]){a="还差<span>"+(ruleArr[0][0]-val)+"</span>币减<span>"+ruleArr[0][1]+"</span>币"}
    else if(val>=ruleArr[2][0]){a="还差<span>"+(ruleArr[1][0]-val)+"</span>币减<span>"+ruleArr[1][1]+"</span>币"}
    else{a="还差<span>"+(ruleArr[2][0]-val)+"</span>币减<span>"+ruleArr[2][1]+"</span>币"}
    return a;
}
// 减-加入计算
function funcMinus(key,index){
    var inputValue = $("#rankInput"+key).val();
    if(inputValue == 1){tankuang("最少1个");return;}
    inputValue --;
    $("#rankInput"+key).val(inputValue);
    funcCommonOperate(key,index);
}
// 加-加入计算
function funcPlus(key,index){
    var inputValue = $("#rankInput"+key).val();
    if(inputValue == 9999){tankuang("最多9999个");return;}
    inputValue ++;
    $("#rankInput"+key).val(inputValue);
    funcCommonOperate(key,index);
}
// 是否选中 加入计算
function functChecked(key,obj,index){
    if($(obj).parent("li").hasClass("active")){
        quanObj[key].check = false;
        $(obj).parent("li").removeClass("active");
    }else{
        quanObj[key].check = true;
        $(obj).parent("li").addClass("active");
    }
    funcCommonOperate(key,index);
}
var posterData = {
    "data":{}
}
// 计算
function funcCommonOperate(key,index){
    var itemCount = $("#rankInput"+key).val();
    quanObj[key].count= itemCount;//数量
    if(!quanObj[key].check){
        quanObj[index] = 0;//清空
        quanObj.allTotal = 0;
    }
    quanObj[key].totalPrice= quanObj[key].count * quanObj[key].price;//每个券的总价
    var arr=[];   // 当前游戏类型被选中的
    var arrAll=[];  //所有被选中的
    for(var o in quanObj){
        if(typeof(quanObj[o])=="object"){
            if(quanObj[o].type == index && quanObj[o].check == true){
                arr.push(quanObj[o])
            }
            if(quanObj[o].check == true){
                arrAll.push(quanObj[o])
                posterData.data[o] = JSON.parse(quanObj[o].count);//要传给后台的对象
            }else{
                delete posterData.data[o];//要传给后台的对象
            }
        }
    }
    // console.log(posterData.data)
    var countStr = 0;
    for(var i=0;i<arr.length;i++){
        countStr += arr[i].price*arr[i].count;
    }
    quanObj[index] = countStr; //小计-每种游戏的总价
    var countStrAll = 0;
    for(var i=0;i<arrAll.length;i++){
        countStrAll += arrAll[i].price*arrAll[i].count;
    }  
    quanObj.allTotal = countStrAll; //总计
    quanObj.manjianCurrent = funcCompute(quanObj.allTotal); //当前满减
    quanObj.allTotalAfter = quanObj.allTotal - quanObj.manjianCurrent; //总计,满减后
    
    $("#total"+index).html("小计："+quanObj[index]+"币")   //小计
    $("#allTotal").html(quanObj.allTotalAfter +"币") //总计,满减后的
    $("#allTotalManJian").html(quanObj.manjianCurrent+"币")//满减
    $("#preNext").html(funcComputeNext(quanObj.allTotal))         //满减等级距下一级差额
    if(myCoin >= quanObj.allTotalAfter && arrAll.length > 0){
        $("#buy_totle_btn").attr("class","buy_totle_btn buy_totle_btnCan");
    }else{
        $("#buy_totle_btn").attr("class","buy_totle_btn after");
    }
}
// 购买弹窗展示
function funcShowBuyPop(){
    if(quanObj.allTotalAfter == 0){
        tankuang("请选择要购买的游戏券")
    }else if($("#buy_totle_btn").hasClass("after")){
        tankuang("余额不足，赶快去充值吧");
    }else{
        $("#pop_score1").html(quanObj.allTotalAfter +"币");//满减后总价
        $("#pop_score2").html(quanObj.manjianCurrent + "币");//当前满减
        var str = "";
        for(var cur in posterData.data){
            str += quanObj[cur].name + "*" + posterData.data[cur]+"、";
        }
        $("#pop_score3").html("购买"+str);
        $("#popupCon").show();
    }
}
var quanHtmlMD = '<li>\
    <div class="buy_item" onclick="functChecked({{key}},this,{{type}})">\
        <span class="buy_check"></span>\
        <div class="buy_quan buy_quan{{key}}"></div>\
        <p class="buy_price">{{name}}<br>{{price}}币</p>\
    </div>\
    <div class="buy_gift_input">\
        <p class="input_jian" onclick="funcMinus({{key}},{{type}})">-</p>\
        <input type="number" class="rank_input" value="1" id="rankInput{{key}}" onchange="funcCommonOperate({{key}},{{type}})" oninput = "if(value> 9999)value=9999;if(value<1)value=1;">\
        <p class="input_jia" onclick="funcPlus({{key}},{{type}})">+</p>\
    </div>\
</li>'