商品绑定可用的优惠券(多对多的绑定且一张优惠券只能使用于一个商品)

最新推荐文章于 2022-04-10 19:16:48 发布
最新推荐文章于 2022-04-10 19:16:48 发布
阅读量2.8k 收藏
点赞数
分类专栏： js html 文章标签： 多数据绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nankec/article/details/81476875
版权
js 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

需求：

1.绑定商品可用的优惠券，按面值大小倒序。

2.当优惠券支持多个商品使用时，勾选了当前优惠券，其它商品下同张优惠券置灰，不可选。

 

#效果图如下：

优惠券选择演示效果

 

 

#完整代码如下： 

<html>
<head>
    <style type="text/css">
        * {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        #product .pli {
            list-style-type: none;
            padding: 5px 0;
            border-bottom: 1px solid #ccc;
        }

        .pli p {
            padding: 5px 0;
            margin: 0;
            font-size: 18px;
        }

        .ticket li {
            line-height: 25px;
            width: 200px;
        }

        .t_li {
            cursor: pointer;
            margin: 2px 0;
            border: 1px solid #fff;
        }

        .t_li:hover {
            background-color: #AFEEEE;
        }

        .ticket .check {
            background-color: #48D1CC;
            border-color: #1c6a9e;
        }

        .ticket .disabled {
            background: #b1b1b1;
        }

        .msg {
            padding: 20px;
            display: none;
            width: 500px;
            height: 300px;
            position: fixed;
            top: 100px;
            left: 300px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 7px 7px 11px 0px #ccc;
            background-color: #fff;
        }
    </style>
    <script type="application/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="application/javascript">
        var ticketList = new Array();

        //获取优惠券
        function getTicket() {
            var t1 = {id: 1, type: 1, amount: 2, name: '卡券a'};
            var t2 = {id: 2, type: 2, amount: 5, name: '卡券b'};
            var t3 = {id: 3, type: 1, amount: 2, name: '卡券c'};
            var t4 = {id: 4, type: 3, amount: 7, name: '卡券d'};
            var t5 = {id: 5, type: 2, amount: 9, name: '卡券e'};
            var t6 = {id: 6, type: 1, amount: 1, name: '卡券f'};
            var t7 = {id: 7, type: 1, amount: 2, name: '卡券g'};
            var t8 = {id: 8, type: 3, amount: 2, name: '卡券h'};
            var t9 = {id: 9, type: 3, amount: 2, name: '卡券i'};
            var t10 = {id: 10, type: 2, amount: 2, name: '卡券j'};
            ticketList.push(t1);
            ticketList.push(t2);
            ticketList.push(t3);
            ticketList.push(t4);
            ticketList.push(t5);
            ticketList.push(t6);
            ticketList.push(t7);
            ticketList.push(t8);
            ticketList.push(t9);
            ticketList.push(t10);

            ticketList.sort(compare("amount"));
            return ticketList;
        }

        function compare(prop) {
            return function (obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                    val1 = Number(val1);
                    val2 = Number(val2);
                }
                if (val1 < val2) {
                    return 1;
                } else if (val1 > val2) {
                    return -1;
                } else {
                    return 0;
                }
            }
        }

        function toMap(ticket) {
            var map = {};
            for (var i = 0; i < ticket.length; i++) {
                var list = new Array();
                var key = ticket[i].type;
                if (map[key] != undefined && map[key].length > 0) {
                    list = map[key];
                }
                list.push(ticket[i]);
                map[key] = list;
            }
            return map;
        }

        //加载优惠券
        function loadTicket() {
            var ticket = getTicket();
            var ticketMap = toMap(ticket);
            $("#product .pli").each(function () {
                var type = $(this).attr("type");
                var html = "";
                var list = new Array();
                if (type != "") {
                    list = ticketMap[type];
                }
                if (type == "") {
                    list = list.concat(ticketMap[2]);
                    list = list.concat(ticketMap[3]);
                    list.sort(compare("amount"));
                }
                if (list == undefined || list.length == 0) {
                    return;
                }
                for (var i = 0; i < list.length; i++) {
                    html += "<li class='t_li t_li_" + list[i].id + "' tid='" + list[i].id + "' name='" + list[i].name + "' amount='" + list[i].amount + "'>卡券:" + list[i].name + "(" + list[i].amount + "元)</li>";
                }
                $(this).find(".ticket").html(html);
            });
        }

        $(document).ready(function () {
            loadTicket();
        });
        //优惠券选择事件
        $(document).on("click", ".t_li", function () {
            if ($(this).hasClass("disabled")) {
                return;
            }
            var className = ".t_li_" + $(this).attr("tid");
            if ($(this).hasClass("check")) {
                $(this).removeClass("check");
                $(className).removeClass("disabled");
            } else {
                $(className).not($(this)).addClass("disabled");
                $(this).addClass("check");
            }
        });
        //按钮点击事件
        $(document).on("click", "#btn", function () {
            var html = "";
            $(".pli").each(function () {
                var that = $(this);
                html += "<p>" + that.find("p").html() + ",";
                var checkTicket = "";
                that.find(".ticket .check").each(function () {
                    checkTicket += $(this).attr("name") + "(" + $(this).attr("amount") + ")元;";
                });
                if (checkTicket != "") {
                    checkTicket = checkTicket.substring(0, checkTicket.length - 1);
                    html += '已选择:' + checkTicket ;
                }
                else {
                    html += "无选择优惠券";
                }
                html += "</p>";
            });
            $(".msg").html(html);
            $(".msg").show();
        });
        $(document).on("click", ".main", function () {
            $(".msg").hide();
        });
    </script>
</head>
<body>
<div class="main">
    <ul id="product">
        <li class="pli" type="1">
            <p>商品1</p>
            <div class="ticket"></div>
        </li>
        <li class="pli" type="2">
            <p>商品2</p>
            <div class="ticket"></div>
        </li>
        <li class="pli" type="3">
            <p>商品3</p>
            <div class="ticket"></div>
        </li>
        <li class="pli" type="">
            <p>商品4</p>
            <div class="ticket"></div>
        </li>
    </ul>
</div>
<button id="btn">确认</button>
<div class="msg"></div>
</body>
</html>

 

nankec
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于订单的多件折扣及优惠券实现设计模式（组合+策略模式）
weixin_44019016的博客
07-12 1万+
首次用的策略+组合模式： 现实中，我们要实现一个M件N折的功能 意思是，满几件，打几折的电商优惠活动。 后面考虑来，优惠券，于是统一使用这个模式去实现该功能： 先上设计图： 其中 order类，与打折类（接口）是组合的关系。 即，优惠券或M件N折，均是Order的一部份。 先说，M件N折： 实现步骤： ...
jquery 模拟购物车订单 使用优惠券 jq
孤单的时候狗作陪！的博客
11-03 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>欢迎来到我的订单</h2> <table> <tr> <td>商品名称</td> .
js 根据支付金额选择最优的优惠券
weixin_48495574的博客
03-27 1292
问题描述：在制作商品支付的时候遇到了需要使用优惠券抵扣的功能，如果用户有多种优惠券需要自动帮用户选择最佳的优惠券，在用户不损失较大金额优惠券前提下选择最接近的金额。 解决方法： //选择最优的优惠券 choiceCoupons(couponsDataList,sessionMoney){ sessionMoney=parseFloat(sessionMoney);//先把传来的金额进行数值转换 let maxMoney = [];//存放大于场地费用最接近的数 let minMoney = [
支持多选，单选，互斥优惠券组件
源码好优多
04-10 852
效果图 效果图链接 https://ext.dcloud.net.cn/plugin?id=7878 前言 最近项目需要一个多选且互斥的优惠券组件，找了好久，发现并没有于是决定自己撸起袖子造一个 （互斥比如说二个优惠券A,B选A,就不能选B,选B就不能选A） 实现思路 1 先写单选优惠券组件 2 单选优惠券添加复选框 3复选框组件是否勾选由数据里面的checked决定 javascript checked: false||true 4 动态改变每个优惠券里面的checked就能实现多选
优惠券卡卷小程序（亲测可用）
11-08
总的来说，"优惠券卡卷小程序（亲测可用）"是一个实用且功能完善的工具，对于商家来说，它提供了一种有效的营销手段；对于开发者，它是一份有价值的开发案例，可以帮助他们快速理解和掌握小程序的开发技巧。
android 优惠券功能动画效果，主流审美
06-22
例如，已过期的优惠券可以使用灰色调，而已使用的优惠券则可以显示一个勾选的标记。 其次，动画效果的实现通常涉及`Animator`类，`ObjectAnimator`，或者`ValueAnimator`。例如，当用户点击优惠券时，可以使用淡入...
乐得同城优惠券系统-PHP
06-20
[增加]联盟优惠券功能，将优惠券开启联盟券（可后台自定义联盟券名称）后，在后台添加多个商家进行核销，可多店铺任选一店核销或多店都可核销一次等，可用于活动券或锦鲤券等操作； [增加]会员提现限制，会员设置中...
优惠券PRD文档
04-24
其中，优惠券模块作为营销系统的一部分，是促进买卖双方活跃度和提高交易额的一个重要工具。 3. 优惠券发放的场景和策略： - 新用户赠券：为了吸引新用户而提供优惠券。 - 个性化发放优惠券：根据用户的购买历史...
2024淘宝客优惠券网站源码PHP程序.zip
最新发布
04-16
温馨提示：如果没有完成第一步和第二步！请不要在网站后台开启子域名绑定！（没绑定子域名会造成不能打开网站后台） （1）解析子域名到服务器IP （2）建站面板绑定子域名，修改“ xxx.com ”为你自己的域名 网 ...
简单的小程序 展示优惠券demo
每天进步一点点
08-20 3799
概要： 后台调用接口 ，返回了不可用的优惠券集合和可用的优惠券集合 根据可用 和 不可用的来展示不同的文字说明，可用的展示有效期，不可用展示不可用原因 截图： 目录 小程序代码：wxml 小程序代码：wxss 小程序代码：js 小程序代码：wxml <wxs src="../../utils/wxs/date.wxs" module="date...
优惠券叠加规则、优惠分摊介绍
AP0906424的博客
11-11 7078
本文主要介绍优惠券的叠加规则，下单结算时的优惠券分摊及优惠券核销细节，同时也会将上面提到的各种优惠券，以某宝下单的例子来讲解内容。 对于优惠券的使用从场景不同可以分为：线上使用和线下使用，其实严格的讲两个方式最终的目的和结果都一样。 (1) 线上使用 当用户在app上看中心仪商品，然后加购下单，在结算页面选择可使用的优惠券，提交订单并付款后优惠券就被使用了。 (2) 线下使用 上面说到线上加购，下单付款，优惠结算，这是大多数平台都是这么玩的，还有一种方式就是线下核销使用，这种券统称线下券。现在
查询指定商品下的可用优惠券
qq_41335316的博客
06-30 565
商品是绑定在二级分类下的。 sql语句 SELECT d.* FROM t_discount d LEFT JOIN t_discount_product p ON d.id = p.discounts_id WHERE d.state = 2//进行中的优惠 AND ( d.type = 1//全部商品 OR ( d.type = 2//分类商品 AND p.type = 2 AND p.obj_id = 分类id ) OR ( d.type = 3//指定商品 AN
优惠券最优使用算法
luyaran的博客
07-11 1万+
先说一下业务背景。公司做的一个投资的APP，投资金额可以用优惠券抵扣。红包面额（100，50，30，10） 优惠券使用规则： 优先使用大面额的红包，即优先使用张数最少的红包组合 优先使用有限制的红包，即优先使用有限制红包张数占比最大的组合 优先使用即将过期的红包，即优先使用平均有效期最短的组合 选择红包面额之和最大的组合（面额总值≤投资额*1%） 算法尝
订单，用户，商品关联分析记录
1943博客
10-31 3783
最近有做采购平台 订单，用户，商品关联分析 的任务 目的在于希望能产出  商品推荐商品或者 商品 推荐给用户  的数据 主要采用python的apriori  进行关联分析 样例代码如下   大概如下： from apyori import apriori import pandas as pd def ResultDFToSave(rules): # 根据Qrange3关联分析生...
Java 优惠券最优使用实现
热门推荐
段子猿
02-01 3万+
业务需求：用户可以用优惠券在支付相关费用时减免优惠券对应的金额，优惠券分为三种类型：现金券，代金券，折扣券，需要根据用户的优惠券列表，找出优惠券金额最多的使用方案。 优惠券使用说明：所有优惠券都是分批次的，根据公司活动，按批次进行发放。同批次现金券可以叠加使用，不同批次不可叠加；代金券，折扣券不可叠加，每次只能使用一张。优惠券抵销金额，可以大于支付金额。 直接上代码： 优惠券实体类：
优惠券详解：优惠券组成、分类、使用及案例
人人都是产品经理
03-09 3万+
———— / BEGIN / ————优惠券是我们运营推广过程中最常用的一种工具，作为一种信息的载体，它不仅仅是一种表现的手段，其背后是运营策略的有效实现。在我们的生活中，大家对优惠券都不陌生，特别是现在的移动互联网时代，我们身边充斥着各种各样的优惠券。确实，优惠券是运营过程中极为有效的一种方法，那么我们应该用什么样的优惠券，在什么时候，去解决什么问题呢？本篇我们将针对以上问题，对优惠券的使用进行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值