<!DOCTYPE HTML> 
 | 
<html xmlns:th="http://www.thymeleaf.org"> 
 | 
<head> 
 | 
    <meta charset="utf-8"> 
 | 
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
 | 
    <meta name="renderer" content="webkit|ie-comp|ie-stand"> 
 | 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 | 
    <meta name="viewport" 
 | 
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
 | 
    <meta http-equiv="Cache-Control" content="no-siteapp"/> 
 | 
    <!-- 本框架基本脚本和样式 --> 
 | 
    <script type="text/javascript" 
 | 
            th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> 
 | 
    <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> 
 | 
    <!-- 富文本编辑器 --> 
 | 
    <script type="text/javascript" charset="utf-8" 
 | 
            th:src="@{/plugin/beditor/ueditor.config.js}"></script> 
 | 
    <script type="text/javascript" charset="utf-8" 
 | 
            th:src="@{/plugin/beditor/ueditor.all.js}"> 
 | 
    </script> 
 | 
    <script type="text/javascript" charset="utf-8" 
 | 
            th:src="@{/plugin/beditor/lang/zh-cn/zh-cn.js}"></script> 
 | 
    <style type="text/css"> 
 | 
        #projBox { 
 | 
            max-height: 400px; 
 | 
            overflow: scroll; 
 | 
            overflow-x: hidden; 
 | 
        } 
 | 
  
 | 
    </style> 
 | 
</head> 
 | 
<body> 
 | 
<div class="ibox-content"> 
 | 
    <form class="form-horizontal" id="dataform" 
 | 
          onsubmit="javascripr:return false;"> 
 | 
  
 | 
        <input    type="hidden" name="id" id="objId" th:value="${obj?.id}"> 
 | 
        <input    type="hidden" name="salePlatform" value="线下"> <input 
 | 
            type="hidden" name="goodType" value="充值卡"> <input 
 | 
            type="hidden" id="cates" name="cates" th:value="${cates}"> <input 
 | 
            type="hidden" id="goodsIds" name="goodsIds" th:value="${goodsIds }"> 
 | 
        <div class="form-group"> 
 | 
         <span class="alert-warning btn-sm"> 
 | 
                <b>提示:</b> 会籍卡最大使用次数为0,代表无限制,发卡数量数量为0代表无限制! 
 | 
        </span> 
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">充值卡名称<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    th:value="${obj?.name}" class="form-control" name="name" 
 | 
                       dataType="*1-200" nullmsg="充值卡名称不能为空" errormsg="不能超过200"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
            <label class="col-sm-2 control-label">状态<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <select class="form-control selectFlag " name="staus" id="staus" 
 | 
                        nullmsg="状态不能为空" dataType="*" data-filed="name" data-value="name" 
 | 
                        th:data-def="${obj?.staus}" 
 | 
                        th:data-url="@{/admin/dataDictionary/showDataDictionary}" 
 | 
                        data-param="{type:'产品状态'}"> 
 | 
                    <option value=''>--请选择产品状态--</option> 
 | 
                </select> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
  
 | 
        </div> 
 | 
  
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">本金<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    th:value="${obj?.sealPice}" class="form-control" name="sealPice" 
 | 
                       onchange="calculateTotalPrice()" id="sealPice" 
 | 
                       data-toggle="tooltip" title="本金为客户在购买充值卡时需要支付的现金" dataType="price" 
 | 
                       nullmsg="请填写本金" errormsg="本金可为两位小数的正数"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
  
 | 
            <label class="col-sm-2 control-label">赠送金额</label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    th:value="${obj?.referencePice==null?0:obj.referencePice}" class="form-control" 
 | 
                       ignore="ignore" onchange="calculateTotalPrice()" 
 | 
                       name="referencePice" id="referencePice" data-toggle="tooltip" 
 | 
                       title="赠送金额 + 本金 = 充值卡可以消费的总金额" dataType="price" nullmsg="请填写赠送金额" 
 | 
                       errormsg="赠送金额可为两位小数的正数"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">可消费金额</label> 
 | 
  
 | 
            <div class="col-sm-3" th:if="${obj ne null}"> 
 | 
                <input    type="text" class="form-control" 
 | 
                       th:value="${obj?.referencePice+obj.sealPice}" id="totalMoney" 
 | 
                       readonly="readonly"> 
 | 
            </div> 
 | 
            <div class="col-sm-3" th:if="${obj eq null}"> 
 | 
                <input    type="text" class="form-control" id="totalMoney" 
 | 
                       readonly="readonly"> 
 | 
            </div> 
 | 
  
 | 
            <label class="col-sm-2 control-label">有效期(单位月)<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3 "> 
 | 
                <input    type="text" class="form-control" name="validity" dataType="*" 
 | 
                       nullmsg="有效期为必填" id="validity" th:value="${obj?.validity}"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
  
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">销量</label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    name="realSealCount" type="text" class="form-control" 
 | 
                       th:value="${obj?.realSealCount}" 
 | 
                       dataType="n" ignore="ignore" nullmsg="请填写销量" errormsg="请填写数字"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
  
 | 
  
 | 
            <label class="col-sm-2 control-label">是否单会员只买一次<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <select class="form-control" name="isOnce" id="isOnce" 
 | 
                        nullmsg="不能为空,请选择" dataType="*"> 
 | 
                    <option value=''>--请选择--</option> 
 | 
                    <option value='是' th:selected="${obj?.isOnce == '是'}">是</option> 
 | 
                    <option value='否' th:selected="${obj?.isOnce == '否'}">否</option> 
 | 
                </select> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
        </div> 
 | 
  
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">介绍</label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    type="text" class="form-control" name="introduction" 
 | 
                       dataType="*1-200" ignore="ignore" errormsg="介绍不能超过200" 
 | 
                       th:value="${obj?.introduction}"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
            <label class="col-sm-2 control-label">自动下架时间</label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    type="text" class="form-control datetimepicker" 
 | 
                       name="saleOffTime" readonly="readonly" 
 | 
                       th:value="${#dates.format(obj?.saleOffTime, 'yyyy-MM-dd')}" 
 | 
                > 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">是否赠送<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <select class="form-control" name="isPresent" id="isPresent" 
 | 
                        nullmsg="不能为空,请选择" dataType="*"> 
 | 
                    <option value=''>--请选择--</option> 
 | 
                    <option value='是' th:selected="${obj?.isPresent == '是'}">是</option> 
 | 
                    <option value='否' th:selected="${obj?.isPresent == '否'}">否</option> 
 | 
                </select> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
            <label class="col-sm-2 control-label">商品编码</label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input     type="text" class="form-control" name="code" maxlength="50" 
 | 
                           dataType="*1-50" errormsg="介绍不能超过50字符" 
 | 
                           th:value="${obj?.code}"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
  
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">最大发卡数量<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    th:value="${obj?.carMaxSaleCount}" class="form-control" id="carMaxSaleCount" 
 | 
                       name="carMaxSaleCount" data-toggle="tooltip" 
 | 
                       title="发卡数量为充值卡可销售的最大次数,发卡数量为0则为无限制" dataType="n" nullmsg="请填写发卡数量" 
 | 
                       errormsg="发卡数量为数字"> 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
            <label class="col-sm-2 control-label">最大使用次数<span class="text-danger">*</span></label> 
 | 
            <div class="col-sm-3"> 
 | 
                <input    th:value="${obj?.carUseCount}" class="form-control" id="carUseCount" 
 | 
                       name="carUseCount" data-toggle="tooltip" 
 | 
                       title="最大使用次数为充值卡可使用的最大次数超过次数后会员卡自动失效,最大使用次数为0则为无限制" dataType="n" 
 | 
                       nullmsg="请填写最大使用次数" errormsg="最大使用次数为数字" 
 | 
                       th:disabled="${obj?.isVipCar == '是'}" 
 | 
                > 
 | 
                <div class="Validform_checktip"></div> 
 | 
            </div> 
 | 
        </div> 
 | 
  
 | 
  
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label" 
 | 
                   data-toggle="tooltip" title="会员在购买会籍卡后会自动改变会员等级,每个会员只能有一张会籍卡,会籍卡为一卡通同时可以充值">是否设置为会籍卡</label> 
 | 
            <div class="col-sm-3 "> 
 | 
  
 | 
                <div th:if="${obj ne null }"> 
 | 
                    <div class="radio radio-success radio-inline"> 
 | 
                        <!-- 由于变为disabled后单选按钮的值无法传递到后台因此,添加一个隐藏表单域 --> 
 | 
                        <input    type="hidden" name="isVipCar" th:value="${obj?.isVipCar}"> 
 | 
                        <input    id="checkbox3" type="radio" value="否" disabled="disabled" 
 | 
                               th:checked="${obj?.isVipCar eq '否'}" 
 | 
                               onchange="setVipCar(this)"> 
 | 
                        <label for="checkbox3"> 否 </label> 
 | 
                    </div> 
 | 
                    <div class="radio radio-success radio-inline"> 
 | 
                        <input    id="checkbox4" type="radio" value="是" disabled="disabled" 
 | 
                               th:checked="${obj?.isVipCar eq '是'}" 
 | 
                               onchange="setVipCar(this)"> <label for="checkbox4"> 
 | 
                        是 </label> 
 | 
                    </div> 
 | 
                </div> 
 | 
  
 | 
  
 | 
                <div th:if="${obj eq null }"> 
 | 
                    <div class="radio radio-success radio-inline"> 
 | 
                        <input    id="checkbox3" type="radio" value="否" name="isVipCar" 
 | 
                               onchange="setVipCar(this)" checked="checked"> 
 | 
                        <label for="checkbox3"> 否 </label> 
 | 
                    </div> 
 | 
                    <div class="radio radio-success radio-inline"> 
 | 
                        <input    id="checkbox4" type="radio" value="是" name="isVipCar" 
 | 
                               onchange="setVipCar(this)"> <label for="checkbox4"> 
 | 
                        是 </label> 
 | 
                    </div> 
 | 
                </div> 
 | 
  
 | 
                </div:if> 
 | 
            </div> 
 | 
  
 | 
            <label class="col-sm-2 control-label">设置会籍卡对应的会籍</label> 
 | 
            <div class="col-sm-3 "> 
 | 
                <select class="form-control autoFull" id="vipGrad" disabled="disabled" 
 | 
                        th:data-url="@{/admin/cardLevel/all}" data-value="id" 
 | 
                        data-filed="levelName" th:data-def="${obj?.vipGradId }" name=vipGradId> 
 | 
                    <option value="">--请选择会员等级--</option> 
 | 
                </select> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label" 
 | 
                   data-toggle="tooltip" title="一卡通充值卡可以购买所有的产品,其他卡只能购买绑定的产品" 
 | 
            >是否设置为一卡通</label> 
 | 
            <div class="col-sm-3 " th:if="${obj ne null }"> 
 | 
  
 | 
  
 | 
                <input    th:if="${obj.isVipCar eq '是'}" type="hidden" th:value="${obj?.carIsAll}" name="carIsAll"> 
 | 
                <div class="radio radio-success radio-inline"> 
 | 
                    <input    id="checkbox2" type="radio" value="否" name="carIsAll" 
 | 
                           onchange="selectedAll(this)" 
 | 
                           th:checked="${obj?.carIsAll eq '否' and obj?.isVipCar eq '否'}" 
 | 
                           th:disabled="${obj?.isVipCar eq '是'}"> 
 | 
                    <label for="checkbox2"> 否 </label> 
 | 
                </div> 
 | 
  
 | 
                <div class="radio radio-success radio-inline"> 
 | 
                    <input    id="checkbox1" type="radio" value="是" name="carIsAll" 
 | 
                           th:checked="${obj?.carIsAll eq '是' or obj?.isVipCar eq '是'}" 
 | 
                           th:disabled="${obj?.isVipCar eq '是'}" 
 | 
                           onchange="selectedAll(this)"> <label for="checkbox1"> 
 | 
                    是 </label> 
 | 
                </div> 
 | 
            </div> 
 | 
  
 | 
  
 | 
            <div class="col-sm-3 " th:if="${obj eq null }"> 
 | 
                <div class="radio radio-success radio-inline"> 
 | 
                    <input    id="checkbox2" type="radio" value="否" name="carIsAll" 
 | 
                           onchange="selectedAll(this)" checked="checked"> 
 | 
                    <label for="checkbox2"> 否 </label> 
 | 
                </div> 
 | 
                <div class="radio radio-success radio-inline"> 
 | 
                    <input    id="checkbox1" type="radio" value="是" name="carIsAll" 
 | 
                           onchange="selectedAll(this)"> <label for="checkbox1"> 
 | 
                    是 </label> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">绑定充值卡可消费的商品</label> 
 | 
            <div class="col-sm-3 "> 
 | 
                <button class="btn btn-success radius" onclick="openPruductList()" 
 | 
                        id="bangdingGoodsBtn" type="button">开始绑定 
 | 
                </button> 
 | 
            </div> 
 | 
        </div> 
 | 
        <!-- =====绑定商品和项目end===== --> 
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">上传图片</label> 
 | 
            <div class="col-sm-4"> 
 | 
                <input    th:value="${obj?.img}" name="img" id="img" 
 | 
                       class="form-control  upload-input" type="text"/> <a 
 | 
                    class="btn btn-primary radius upload-a">选择图片 
 | 
            </a> 
 | 
            </div> 
 | 
        </div> 
 | 
  
 | 
        <div class="form-group"> 
 | 
            <label class="col-sm-2 control-label">详细描述</label> 
 | 
            <div class="col-sm-8"> 
 | 
                <script style="width: 100%; height: 500px" id="mobileDetails" 
 | 
                        name="artcontent" type="text/plain">[[${obj?.description}]] 
 | 
                </script> 
 | 
            </div> 
 | 
        </div> 
 | 
  
 | 
  
 | 
<div class="form-group "> 
 | 
    <div class="col-sm-12 text-center"> 
 | 
        <button onclick="myForm.submit()" class="btn btn-success radius">保存</button>     
 | 
        <a href="javascript:;" onclick="MTools.closeForm()" class="btn btn-danger radius">取消</a> 
 | 
    </div> 
 | 
</div> 
 | 
  
 | 
</form> 
 | 
</div> 
 | 
  
 | 
  
 | 
</div> 
 | 
  
 | 
  
 | 
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script> 
 | 
<script th:inline="javascript"> 
 | 
    var mobileEditor = UE.getEditor('mobileDetails'); 
 | 
  
 | 
    var obj =/*[[${obj}]]*/ 
 | 
  
 | 
        $(".select2").select2({'width': '100%'}); 
 | 
    //表单js对象 
 | 
    var myForm = null; 
 | 
  
 | 
    $(function () { 
 | 
  
 | 
        $("[data-toggle='tooltip']").tooltip(); 
 | 
  
 | 
        //改变标题 
 | 
        parent.layer.title("新增充值卡", parent.layer.getFrameIndex(window.name)); 
 | 
        //初始化时间格式 
 | 
        var initParam = { 
 | 
            format: "yyyy-mm-dd", //默认显示年与日,如果想显示十分秒:"yyyy-mm-dd hh:ii:ss" 
 | 
            minView: "2", //"month",只显示年月日的选择,不会再跳转去选择时分秒;如果想要选择时分秒的:"hour" 
 | 
        }; 
 | 
        MTools.ininDatetimepicker(initParam); 
 | 
        //初始化select 
 | 
        MTools.autoFullSelect(); 
 | 
        MTools.autoFullSelect({ 
 | 
            selecteder: ".selectFlag" 
 | 
        }); 
 | 
  
 | 
        myForm = MForm.initForm({ 
 | 
            beforeSubmit: function () { 
 | 
                if ($("input[name='isVipCar']:checked").val() == '是' && $("#vipGrad").val() == "") { 
 | 
                    layer.msg("请设置会籍卡对应的等级", { 
 | 
                        icon: 2 
 | 
                    }); 
 | 
                    return false; 
 | 
                } 
 | 
                //如果不是一卡通判断是否绑定明细 
 | 
                console.log($('input[name="carIsAll"]:checked').val()); 
 | 
                if ($('input[name="carIsAll"]:checked').val() == '否') { 
 | 
                    if ($("#cates").val().length == 0 
 | 
                        && $("#goodsIds").val().length == 0) { 
 | 
                        layer.msg("请添加绑定的商品", { 
 | 
                            icon: 2 
 | 
                        }); 
 | 
                        return false; 
 | 
                    } 
 | 
                } 
 | 
  
 | 
            }, 
 | 
            invokeUrl: basePath + "/admin/shoppinggoods/addOrModify", 
 | 
            afterSubmit: function () { 
 | 
                parent.myGrid.serchData(); 
 | 
            }, 
 | 
        }); 
 | 
  
 | 
  
 | 
  
 | 
        //初始化商城产品类型列表 
 | 
        initFunctionList(); 
 | 
  
 | 
        initBading(); 
 | 
    }); 
 | 
  
 | 
    //自动计算总价 
 | 
    function calculateTotalPrice() { 
 | 
        var sealPice = $("#sealPice").val() == '' ? 0 : $("#sealPice").val(); 
 | 
        var referencePice = $("#referencePice").val() == '' ? 0 : $( 
 | 
            "#referencePice").val(); 
 | 
        totalMoney = parseFloat(sealPice) + parseFloat(referencePice); 
 | 
        $("#totalMoney").val(totalMoney); 
 | 
    } 
 | 
  
 | 
    /** 
 | 
     * 初始化商城产品类型:category列表 
 | 
     */ 
 | 
    function initFunctionList() { 
 | 
        $.AjaxProxy({ 
 | 
            a: false, 
 | 
            c: false, 
 | 
            p: { 
 | 
                salePlatform: '线下' 
 | 
            } 
 | 
        }).invoke(basePath + "/admin/shoppinggoodscategory/all", function (loj) { 
 | 
            $("#parentId").createSelectTree(loj.attr("result").rows, { 
 | 
                append: true, 
 | 
                value: "name", 
 | 
                defaultValue: obj ? obj.cateId : '' 
 | 
            }); 
 | 
        }); 
 | 
  
 | 
    } 
 | 
  
 | 
    //打开绑定产品页面 
 | 
    function openPruductList() { 
 | 
        var url = basePath + "/admin/shoppinggoods/moneyCardBangding"; 
 | 
        if ($("#objId").val().length > 0) { 
 | 
            url = url + '?id=' + $("#objId").val(); 
 | 
        } 
 | 
        layer.full(layer.open({ 
 | 
            type: 2, 
 | 
            title: "绑定产品", 
 | 
            area: [MUI.SIZE_L, '400px'], 
 | 
            content: [url] 
 | 
        })); 
 | 
    } 
 | 
  
 | 
    //绑定产品回调函数 
 | 
    function callback(_goodsIds, _cates) { 
 | 
        $("#goodsIds").val(_goodsIds); 
 | 
        $("#cates").val(_cates); 
 | 
    } 
 | 
  
 | 
    //设置为一卡通 
 | 
    function selectedAll(node) { 
 | 
        if ($(node).val() == '是') { 
 | 
            $("#bangdingGoodsBtn").attr("disabled", "disabled"); 
 | 
        } else { 
 | 
            $("#vipGrad").attr("disabled", "disabled"); 
 | 
            $("#bangdingGoodsBtn").removeAttr("disabled"); 
 | 
            $('input[name="isVipCar"]').eq(0)[0].checked = true; 
 | 
            $('input[name="isVipCar"]').eq(1)[0].checked = false; 
 | 
        } 
 | 
    } 
 | 
  
 | 
    //设置位会籍卡,会籍卡为一卡通 
 | 
    function setVipCar(node) { 
 | 
        if ($(node).val() == '否') { 
 | 
            $("#vipGrad").attr("disabled", "disabled"); 
 | 
            $("#vipGrad").val(""); 
 | 
            $("#carMaxSaleCount").removeAttr("disabled"); 
 | 
            $("#carUseCount").removeAttr("disabled"); 
 | 
        } else { 
 | 
            $("#carMaxSaleCount").attr("disabled", "disabled"); 
 | 
            $("#carMaxSaleCount").val("0"); 
 | 
            $("#carUseCount").attr("disabled", "disabled"); 
 | 
            $("#carUseCount").val("0"); 
 | 
  
 | 
            $("#vipGrad").removeAttr("disabled"); 
 | 
            $('input[name="carIsAll"]').eq(0)[0].checked = false; 
 | 
            $('input[name="carIsAll"]').eq(1)[0].checked = true; 
 | 
            $("#bangdingGoodsBtn").attr("disabled", "disabled"); 
 | 
        } 
 | 
  
 | 
  
 | 
    } 
 | 
  
 | 
    //绑定按钮的初始化状态,会籍卡不限制使用次数,因此不显示次数 
 | 
    function initBading() { 
 | 
        var carIsAll = obj.carIsAll; 
 | 
        var isVipCar = obj.isVipCar; 
 | 
  
 | 
  
 | 
        if (carIsAll == '是') { 
 | 
            $("#bangdingGoodsBtn").attr("disabled", "disabled"); 
 | 
        } 
 | 
  
 | 
        if (isVipCar == '是') { 
 | 
            $("#carMaxSaleCount").val(0); 
 | 
            $("#carUseCount").val(0); 
 | 
            $("#carMaxSaleCount").attr("disabled", "disabled"); 
 | 
            $("#carUseCount").attr("disabled", "disabled"); 
 | 
        } 
 | 
  
 | 
    } 
 | 
</script> 
 | 
</body> 
 | 
</html> 
 |