jquery 模拟购物车订单使用优惠券 jq

最新推荐文章于 2022-11-03 22:43:14 发布

孤单的时候狗作陪

最新推荐文章于 2022-11-03 22:43:14 发布

阅读量417

点赞数

分类专栏： jQuery模拟购物车订单消费使用优惠券文章标签： jquery html 前端

本文链接：https://blog.csdn.net/weixin_58505056/article/details/121130739

版权

jQuery模拟购物车订单消费使用优惠券专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>欢迎来到我的订单</h2>
<table>
    <tr>
        <td>商品名称</td>
        <td>惠灵顿牛排</td>
    </tr>
    <tr>
        <td>商品单价</td>
        <td><div class="price">50</div></td>
    </tr>
    <tr>
        <td>商品数量</td>
        <td><button class="add_btn">+</button>
            <span style="display:inline-block;text-align:center;background-color: #999999; width:40px;">1</span>
            <button class="minus">—</button>
        </td>
    </tr>
    <tr>
        <td>优惠券</td>
        <td><select name="" id="" class="select">
            <option value="0">--请选择--</option>
            {volist name="myCoupons" id="v"}
            <option value="{$v.id}" c_money="{$v.coupon.c_money}"
                    c_satisfy="{$v.coupon.c_satisfy}"
                    c_condition = "{$v.coupon.c_condition}"

            >{$v.coupon.c_name}</option>
            {/volist}
        </select></td>
    </tr>
    <tr>
        <td>总金额</td>
        <td> <font></font></td>
    </tr>
    <tr>
        <td>结算金额</td>
        <td></td>
    </tr>
</table>

</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
     // 商品总价
    var totalPrice;
    var price  = parseInt($('.price').text());//商品单价

    // 页面加载事件
    $(function () {
        var num = parseInt($('span').text());
           // 商品总金额
            $('font').text(num*price);
    })
     // 封装的优惠券方法
     function coupon(){
         // 判断是否使用优惠券
         var select = $('.select option:selected').val();
         // 使用优惠券
         if (select != 0) 
         {
             // 优惠券面值
             var c_money = parseInt($('option:selected').attr('c_money'));
             // 优惠券使用条件  例如：满100减20 此处指100；
             var c_satisfy = parseInt($('option:selected').attr('c_satisfy'));
             // 优惠券种类
             var c_condition = parseInt($('option:selected').attr('c_condition'));
              // 1、无条件使用 ，订单金额不得低于优惠券面值
             if (c_condition == 1)
             {
                 if (totalPrice < c_money)
                 {
                     alert('该优惠卷使用条件金额至少等于优惠券金额');
                     // throw "不往下执行";
                     return;
                 }
             }
             // 2.满减优惠券
             if (c_condition == 2) 
             {
                 // 判断订单金额是否大于满减条件金额
                 if (totalPrice < c_satisfy) 
                 {
                     alert('该优惠券不满足');
                     // 返回商品总金额
                     $('font').text(totalPrice);
                     return false;
                 }
             }
             // 使用优惠券商品总金额
             totalPrice = totalPrice - c_money;
             $('font').text(totalPrice);
         } else {
             // 未使用优惠券商品总金额
             $('font').text(totalPrice);
         }
     }

    // 商品数量增加事件
   $('.add_btn').click(function () {
       // 商品数量
       var shops = parseInt($('span').text());
       shops = shops + 1;
       $('span').text(shops);
       totalPrice = shops * price;
       // 调用封装好的优惠券方法
       coupon();
   })
     
     // 商品数量减少事件
   $('.minus').click(function () {
       // 商品数量
       var shops = parseInt($('span').text());
       if(shops > 1)
       {
           shops = shops-1;
           $('span').text(shops);
           totalPrice = shops * price;
           coupon();
       }
   })

     // 下拉框改变事件
   $('select').change(function () {
        // 商品总金额
        var shops = parseInt($('span').text());
        totalPrice = shops*price;
        // 使用优惠券
        coupon();
   })
</script>