zhongshen_project/addon/giftcard/shop/view/giftcard/add_entity.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="SHOP_CSS/game.css">
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/searchable_select/searchable_select.css" />
<link rel="stylesheet" type="text/css" href="SHOP_CSS/goods_edit.css" />
<link rel="stylesheet" type="text/css" href="ADDON_VIRTUALCARD_CSS/goods_edit.css" />
<style>
  .len-short {
    width: 180px !important;
  }
</style>
{/block}
{block name="main"}
<div class="layui-form">
  <!-- 礼品卡类型 -->
  <div class="layui-tab layui-tab-brief" lay-filter="goods_tab">
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="layui-card card-common">
          <div class="layui-card-header">
            <span class="card-title">礼品卡类型</span>
          </div>
          <div class="layui-card-body commodity-type-box" >
            <div class="commodity-type-item" onclick="location.href = ns.url('giftcard://shop/giftcard/addelectgiftcard')">
              <span>电子卡</span>
              <span class="text-color-gray">(线上购买)</span>
            </div>
            <div class="commodity-type-item border-color" onclick="location.href = ns.url('giftcard://shop/giftcard/addentitygiftcard')">
              <span class="text-color">实体卡</span>
              <span class="text-color-gray">(线下发放)</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-card card-common">
    <div class="layui-card-header">
      <span class="card-title">基础设置</span>
    </div>
    <div class="layui-card-body">
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>礼品卡名称：</label>
        <div class="layui-input-block">
          <input type="text" name="card_name" value=""  lay-verify="required" autocomplete="off" class="layui-input len-long" maxlength="40">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>礼品卡数量：</label>
        <div class="layui-input-block">
          <input type="number" min="1" name="card_count" lay-verify="required|number" onchange="detectionNumType(this,'integral')" class="layui-input len-short" autocomplete="off" value="10">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-block">
          <input type="number" min="0" name="sort" value="0" lay-verify = 'sort' onchange="detectionNumType(this,'integral')"  autocomplete="off" class="layui-input len-short">
        </div>
      </div>
    </div>
    <div class="layui-card-header">
      <span class="card-title">生成规则</span>
    </div>
    <div class="layui-card-body">
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>兑换码位数：</label>
        <div class="layui-input-block">
          <input type="number" min="4" name="carmichael_length" lay-verify="required" onchange="detectionNumType(this,'integral')" class="layui-input len-short" autocomplete="off" value="6">
        </div>
      </div>
      <div class="layui-form-item participation-condition">
        <label class="layui-form-label"><span class="required">*</span>兑换码内容：</label>
        <div class="layui-input-block">
          <input type="checkbox" name="carmichael_type[]" value="0-9" lay-skin="primary" title="0-9" checked>
          <input type="checkbox" name="carmichael_type[]" value="a-z" lay-skin="primary" title="a-z">
          <input type="checkbox" name="carmichael_type[]" value="A-Z" lay-skin="primary" title="A-Z">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">兑换码前缀：</label>
        <div class="layui-input-block">
          <input type="text" name="carmichael_prefix" value=""  autocomplete="off" class="layui-input len-long">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">兑换码后缀：</label>
        <div class="layui-input-block">
          <input type="text" name="carmichael_suffix" value="" autocomplete="off" class="layui-input len-long">
        </div>
      </div>
    </div>
    <div class="layui-card-header">
      <span class="card-title">礼品卡权益</span>
    </div>
    <div class="layui-card-body">

      <div class="layui-form-item">
          <label class="layui-form-label">商品：</label>
          <div class="layui-input-block">
              <table class="layui-table" id="goods" lay-skin="line" lay-size="lg">
                  <colgroup>
                      <col width="45%">
                      <col width="15%">
                      <col width="15%">
                      <col width="10%">
                      <col width="15%">
                  </colgroup>
                  <thead>
                      <tr>
                          <th>商品名称</th>
                          <th>价格</th>
                          <th>库存</th>
                          <th>数量</th>
                          <th class="operation">操作</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td colspan="5">
                              <div class="goods-empty">未添加商品</div>
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="layui-btn" onclick="addGoods()">添加商品</button>
          </div>
      </div>
      <div class="word-aux">说明：请务必保证库存充足，否则会导致权益赠送失败</div>

      <!--<div class="layui-form-item">-->
          <!--<label class="layui-form-label"><span class="required">*</span>是否开启余额抵扣：</label>-->
          <!--<div class="layui-input-block" >-->
            <!--<input type="checkbox" name="status" lay-skin="switch" checked  value="1"  lay-filter="status" >-->
          <!--</div>-->
      <!--</div>-->

      <label class="layui-form-label">积分：</label>
      <div class="layui-input-block">
        <input type="number" min="0" name="point" onchange="detectionNumType(this,'integral')" class="layui-input len-short integral " autocomplete="off" value="0">
      </div>

      <label class="layui-form-label">余额：</label>
      <div class="layui-input-block">
        <input type="number" min="0" name="balance" onchange="detectionNumType(this,'positiveNumber')" class="layui-input len-short" autocomplete="off" value="0">
      </div>
      
<!--      <label class="layui-form-label"><span class="required">*</span>优惠卷：</label>-->
<!--      <div class="layui-input-inline">-->
<!--        <select name="coupon" lay-search="" lay-verify="coupon" class="layui-input len-short">-->
<!--          <option value="">无优惠卷</option>-->
<!--          {foreach name="$coupon_lists" item="vo"}-->
<!--          <option value="{$vo['coupon_type_id']}">{$vo['coupon_name']}</option>-->
<!--          {/foreach}-->
<!--        </select>-->
<!--      </div>-->
    </div>
    <div class="layui-card-header">
      <span class="card-title">其他设置</span>
    </div>
    <div class="layui-card-body">
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>有效期：</label>
        <div class="layui-input-block">
          <div>
            <input type="radio" name="time_type" value="1" title="永久有效" checked>
          </div>
          <div>
            <input type="radio" name="time_type" value="2" title="有效期至">
            <div class="layui-input-inline" style="float: none">
              <input type="text" class="layui-input" name="youxiao_time" lay-verify="time" placeholder="有效期限" id="start_time" readonly>
              <i class=" iconrili iconfont calendar"></i>
            </div>
          </div>
<!--          <div>-->
<!--            <input type="radio" name="time_type" value="3" title="领取后&emsp;">-->
<!--            <div class="layui-input-inline" style="float: none">-->
<!--              <input type="number" min="0" name="youxiao_day" autocomplete="off" lay-verify="time_day" class="layui-input len-short" value="0">&nbsp天&nbsp&nbsp有效-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <button class="layui-btn" lay-submit lay-filter="save">保存</button>
    <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
  </div>
</div>
{/block}
{block name="script"}
<script>
  var form, laytpl, tableData = [],
          repeat_flag = false,
          awardId = 0,
          selectGoodsSkuId = [],
          num_list = [],
          goods = [],
          is_balance = 1 ,
          currentDate = new Date(),
          minDate = "";

  layui.use(['form', 'laytpl','laydate'], function () {
    var laydate = layui.laydate;
    form = layui.form;
    laytpl = layui.laytpl;

    currentDate.setDate(currentDate.getDate() + 30);
    form.render();
    laydate.render({
      elem: '#start_time'
      ,type: 'datetime'
      ,change: function(value, date, endDate){
        $(".date-picker-btn").removeClass("selected");
      }
    });
    //表单验证
    form.verify({
            number:function(value){
                if( value <= 0 ){
                    return "数量不能小于或等于0"
                }
            },
            sort:function(value){
                if(value < 0 ){
                    return "排序不能小于0"
                }
            },
            nums:function(value){
                if(value < 10){
                    return "请输入大于10的数"
                }
            },
            Conversion:function(value){
                if(value == 0){
                    return "兑换码位数不能为0";
                }
            },
            // gral:function(value){
            //     if(value == 0){
            //         return "积分不能为0"
            //     }
            // },
            // balance:function(value){
            //     if(value == 0){
            //         return "余额不能为0"
            //     }
            // },
            // intergralBalance:function(value){
            //     var intergral_balance = $('.integral').val()
            //     if(intergral_balance == 0 && (value == 0 || value == 0.00) ){
            //         return '积分和余额不能同时为0'
            //     }
            // },
            time:function(value){
                var time_type = $('[name="time_type"]:checked').val();
                if (time_type == 2) {
                    var now_time = (new Date()).getTime();
                    var end_time = (new Date(value)).getTime();
					if(!end_time){
						return '有效期不能为空'
					}
                    if (now_time > end_time) {
                        return '有效期不能小于当前时间!'
                    }
                }
            },
			time_day:function(value){
				var time_type = $('[name="time_type"]:checked').val();
				if(time_type == 3) {
					if(value <= 0) {
						return '有效期天数至少为一天!'
					}
				}
			}
        });

    form.on('switch(status)', function(data){
        if(this.checked){
            is_balance = 1;
        }else{
            is_balance = 0;
        }
    });
    /**
     * 表单提交
     */
    form.on('submit(save)', function (data) {
      if (repeat_flag) return;
      repeat_flag = true;

      $("input[name='goods_num']").each(function(){
          num_list.push($(this).val());
      });

      for(var i = 0 ; i < selectGoodsSkuId.length; i++){
          var obj = {};
          obj.sku_id = selectGoodsSkuId[i];
          obj.num = num_list[i];
          goods.push(obj)
      }

        if(goods.length == 0 && data.field.balance == 0 && data.field.point == 0){
            layer.msg("礼品卡权益最少设置一个");
            return;
        }

      data.field.goods = goods;
      data.field.is_balance = is_balance;

      $.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: ns.url("giftcard://shop/giftcard/addentitygiftcard"),
        data: data.field,
        async: false,
        success: function (res) {
          repeat_flag = false;

          if (res.code == 0) {
            layer.confirm('添加成功', {
              title: '操作提示',
              btn: ['返回列表', '继续添加'],
              closeBtn: 0,
              yes: function () {
                location.href = ns.url("giftcard://shop/giftcard/lists");
              },
              btn2: function () {
                location.href = ns.url("giftcard://shop/giftcard/addentitygiftcard");
              }
            });
          } else {
            layer.msg(res.message);
          }
        }
      })
    });
  });

  //删除奖品
  function delAward(data) {
    for (var i = 0; i < tableData.length; i++) {
      if (tableData[i].ident == data) {
        tableData.splice(i, 1);
        renderTable(tableData);
      }
    }
  }

  function back() {
    location.href = ns.url("giftcard://shop/giftcard/lists");
  }

  //检测数据类型
  function detectionNumType(el, type) {
    var value = $(el).val();
    //大于零 且 不是小数
    if (value < 0 && type == 'integral')
      $(el).val(0);
    else if (type == 'integral')
      $(el).val(Math.round(value));

    //大于1 且 不是小数
    if (value < 1 && type == 'positiveInteger')
      $(el).val(1);
    else if (type == 'positiveInteger')
      $(el).val(Math.round(value));
    //大于零可以是小数
    if (type == 'positiveNumber') {
      value = parseFloat(value).toFixed(2);
      if (value < 0)
        $(el).val(0);
      else
        $(el).val(value);
    }
  }

	/**
	 * 添加商品
	 */
   function addGoods() {
		goodsSelect(function (res) {
			if (!res.length) return false;
			var price = 0.00;
			selectGoodsSkuId = [];
			$("#goods tbody").html("");
			var html = $("#goods tbody .goods-empty").length ? '' : $("#goods tbody").html();
			for (var i = 0; i < res.length; i++) {
				for (var k = 0; k < res[i].selected_sku_list.length; k++) {
					var item = res[i].selected_sku_list[k];
					html += `<tr data-sku_id="${item.sku_id}">`;
					html += `
						<td>
							<div class="goods-title">
								<div class="goods-img">
									<img layer-src src="${item.sku_image ? ns.img(item.sku_image) : ''}" alt="">
								</div>
								<p class="multi-line-hiding goods-name">${item.sku_name}</p>
							</div>
						</td>
					`;
					html += `<td class='price-one'>${item.price }</td>`;
					html += `<td>${item.stock}</td>`;
                    html += `<td><input type="number" name="goods_num" onchange="detectionNumType(this,'integral')" lay-verify="required|number" min="1" class="layui-input" value='1'></td>`;
					html += `<td class='operation'> <div class='table-btn '><a href='javascript:;' class='layui-btn' onclick='deleteGoods(this)'>删除商品</a></div></td>`;
					html += `</tr>`;
					
					price += Number(item.price);
					selectGoodsSkuId.push(item.sku_id);
				}
			}

			$("#goods tbody").html(html);
			
		}, selectGoodsSkuId, {mode: "sku"});
	}

	/**
	 * 删除商品
	 */
	function deleteGoods(data) {
      var obj = $(data).parent().parent().parent();
      $(obj).remove();
      for (var i in selectGoodsSkuId) {
        if (selectGoodsSkuId[i] == Number($(obj).attr("data-sku_id"))) {
          selectGoodsSkuId.splice(i, 1);
          num_list.splice(i, 1);
        }
      }
    }
</script>
{/block}