基于ecshop商城开发优惠券（红包）叠加使用功能

一般商城的优惠券（红包）都是只能使用一张的，但想要叠加使用的话，首先要新增字段来区别设置可不可叠加类型

input type=”hidden” name=”bonus” id=”bonus_id_{$k}” value=”0”

设置input隐藏域，id跟数组键值关联，选中的话value为红包的id，默认为0。
再把选中的红包ID都以字符串形式存到name为bonus1的input隐藏域value中，如：12,13,15… 用逗号隔开。

    <!--优惠券-->
<div class="bonus_part">
<p><span>优惠券</span>
</p>
<ul class="bonus_list_business">
<!-- 这个id 和name值千万不要动,要传给后台,不然没法使用红包!!! -->
<!--收集多个红包的id-->
<input type="hidden" name="bonus1" id="bonus_id" value="">

<!-- {foreach from=$bonus_list item=bonus key=k} -->
<input type="hidden" name="bonus" id="bonus_id_{$k}" value="0">
<input type="hidden" name="bonus_overlap" id="overlap_{$k}" {if $bonus.overlap eq 1 } value="1" {else} value="0" {/if}>
<li {if $order.bonus_id eq $bonus.bonus_id} {/if} onclick="selectBonus2(this, {$bonus.bonus_id},{$k})"> <!--selectBonus()方法已转移到shopping_flow.js文件中 ^-^ -->
<div class="bonus_info_business">
<span><em>￥{$bonus.bonus_money_formated}</em><strong>满{$bonus.min_goods_amount}可用</strong></span>
<p><b>{$bonus.type_name}</b><label>(优惠券) ({if $bonus.overlap eq 1 } 可叠加 {else} 不可叠加 {/if})</label></p>
</div>
<div class="bonus_date_business">
<p>截止{$bonus.use_end_date}</p>
</div>

<u></u><font></font>
</li>
<!-- {/foreach} -->
</ul>
<b id="no_overlap" style="color: red;margin-left: 35%;display: none;">你选择的优惠券不可叠加，不能再选择其他优惠券！</b>
</div>


<!-- #BeginLibraryItem "/Library/order_total.lbi" --><!-- #EndLibraryItem -->
<div style="text-align: center;margin:8px auto;">
<input style="margin-top:25px;" type="image" src="images/bnt_subOrder.png" />
<input type="hidden" name="step" value="done" />
</div>

我的思路是这样的：

      当选择的优惠券不可叠加时，value等于对应的红包id，其他优惠券设置为不可点击事件，并把其他优惠券的value都变为0（防止之前点击了可叠加的券后再点击不可叠加券）；
取消选中时则恢复点击事件，其value等于0。

      当选择的优惠券可叠加时，value等于对应的红包id， 取消选中时其value等于0。

/
**
 * 可判断红包是否可叠加，并可同时选中/取消多个叠加红包
 * @param obj   选中的li
 * @param value   红包的id
 * @param k   选中红包对应的键值
 */
function selectBonus2(obj,value,k) {

    $(obj).toggleClass('checkbox_frame');

var is_overlap = document.getElementById("overlap_" + k).value;
var num = document.getElementsByName("bonus");

//判断红包为不可叠加时
if (is_overlap == 0)
    {
//选中不可叠加的红包
if ($(obj).hasClass("checkbox_frame"))
        {

            $(obj).css('border', '1px solid red');
            $(obj).siblings().removeClass("checkbox_frame");
            $(obj).siblings().css('border', '1px solid #ddd');
            $(obj).siblings().css('pointer-events', 'none');  //禁止其他点击事件

            document.getElementById("no_overlap").style.display = "block";

//选择不可叠加红包时其他ID赋值为0
for (var i = 0; i < num.length; i++) {
if (k == i) {
                document.getElementById("bonus_id_" + k).value = value;
              } else {
                document.getElementById("bonus_id_" + i).value = 0;
              }
            }
        } else {
          $(obj).css('border', '1px solid #ddd');
          $(obj).siblings().removeClass("checkbox_frame");
          $(obj).siblings().css('border', '1px solid #ddd');
          $(obj).siblings().css('pointer-events', 'auto');    //恢复点击事件
          document.getElementById("bonus_id_" + k).value = 0;
          document.getElementById("no_overlap").style.display = "none";

        }
    }

//判断红包为可叠加时
if (is_overlap != 0) {
if ($(obj).hasClass("checkbox_frame")) {
          $(obj).css('border', '1px solid red');
          document.getElementById("bonus_id_" + k).value = value;
      } else {
          $(obj).css('border', '1px solid #ddd');
          document.getElementById("bonus_id_" + k).value = 0;
      }
    }

//收集红包ID
var bonus_ids = "";
for (var j = 0; j < num.length; j++) {
if (document.getElementById("bonus_id_" + j).value != 0) {
        bonus_ids += document.getElementById("bonus_id_" + j).value + ",";
      }
    }
if(bonus_ids.length>0) {
      bonus_ids = bonus_ids.substr(0, bonus_ids.length - 1);
      document.getElementById("bonus_id").value = bonus_ids;
    } else {
      document.getElementById("bonus_id").value = 0;
    }
      Ajax.call('flow.php?step=change_bonus', 'bonus=' + bonus_ids, changeBonusResponse, 'GET', 'JSON');

}

最后将优惠券的ID数组传过去后，计算优惠后的费用，设置优惠券状态（已使用）即可。