890 lines
34 KiB
HTML
890 lines
34 KiB
HTML
{extend name="app/shop/view/base.html"/}
|
||
{block name="resources"}
|
||
<style>
|
||
|
||
#form-content{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
#form-content .left-content{
|
||
max-width: 800px;
|
||
}
|
||
#form-content .left-content .hide{
|
||
display: none;
|
||
}
|
||
#form-content .left-content .layui-input-block .layui-btn:not(:last-child){
|
||
margin-left: 0!important;
|
||
margin-right: 10px!important;
|
||
}
|
||
/*选择内容公共样式*/
|
||
#form-content .change-selected-status {
|
||
padding: 0 20px;
|
||
position: relative;
|
||
}
|
||
#form-content .change-selected-status i {
|
||
position: absolute;
|
||
bottom: -10px;
|
||
right: -1px;
|
||
display: none;
|
||
}
|
||
#form-content .change-selected-status.change-selected-active{
|
||
border-color: #1E9FFF;
|
||
color: #1E9FFF;
|
||
}
|
||
#form-content #type .change-selected-status.change-selected-active{
|
||
border-color: #105CFB !important;
|
||
color: #105CFB !important;
|
||
}
|
||
#form-content #app_type .change-selected-status.change-selected-active{
|
||
border-color: #5FB878 !important;
|
||
color: #5FB878 !important;
|
||
}
|
||
#form-content #channel .change-selected-status.change-selected-active{
|
||
border-color: #ff8143 !important;
|
||
color: #ff8143 !important;
|
||
}
|
||
#form-content #validity_type .change-selected-status.change-selected-active{
|
||
border-color: #FF5722 !important;
|
||
color: #FF5722 !important;
|
||
}
|
||
#form-content .change-selected-status.change-selected-active i {
|
||
display: block;
|
||
}
|
||
/*图片*/
|
||
.image-content:hover .operation{
|
||
display: block!important;
|
||
}
|
||
/*右边手机内容*/
|
||
.custom-right {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 900px;
|
||
padding: 20px 0;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
height: 670px;
|
||
width: 600px;
|
||
}
|
||
.custom-right .phone {
|
||
min-width: 280px;
|
||
height: 650px;
|
||
background: url(__STATIC__/img/quan.png) no-repeat center;
|
||
background-size: contain;
|
||
position: relative;
|
||
overflow: auto;
|
||
padding-top: 30px;
|
||
box-sizing: border-box;
|
||
}
|
||
.custom-right .phone h2 {
|
||
position: absolute;
|
||
left: 250px;
|
||
top: 80px;
|
||
}
|
||
.custom-right .phone .item {
|
||
position: absolute;
|
||
top: 100px;
|
||
left: 165px;
|
||
width: 274px;
|
||
height: 100px;
|
||
display: flex;
|
||
background: url(__STATIC__/img/quan_bj.png) no-repeat center;
|
||
border-radius: 10px;
|
||
align-items: stretch;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
}
|
||
.custom-right .phone .item-base {
|
||
position: relative;
|
||
width: 65px;
|
||
min-width: 65px;
|
||
text-align: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 10px 10px 0 10px;
|
||
}
|
||
.custom-right .phone .item-base p {
|
||
display: inline-block;
|
||
}
|
||
.custom-right .phone .item .item-base .aaa {
|
||
height: auto;
|
||
position: relative;
|
||
top: 50%;
|
||
right: 5px;
|
||
transform: translate(0, -50%);
|
||
}
|
||
.custom-right .phone .item-info {
|
||
margin:0 20px 0 0;
|
||
width: 100px;
|
||
}
|
||
.custom-right .phone .use_price {
|
||
line-height: 1;
|
||
color: #fff;
|
||
}
|
||
.custom-right .phone .use_condition {
|
||
color: #fff;
|
||
margin-top: 15px;
|
||
font-size: 12px;
|
||
}
|
||
.custom-right .phone .use_title {
|
||
margin-top: 10px !important;
|
||
}
|
||
.custom-right .phone .item-btn {
|
||
width: 50px;
|
||
min-width: 50px;
|
||
align-self: center;
|
||
position: relative;
|
||
}
|
||
.custom-right .phone .item-btn .btn {
|
||
font-size: 12px;
|
||
width: 40px;
|
||
height: 24px;
|
||
border-radius: 20px;
|
||
line-height: 24px;
|
||
margin-left: 20px;
|
||
text-align: center;
|
||
background-image: linear-gradient(to right, #fc6831, #ff4544);
|
||
color: #fff;
|
||
}
|
||
.custom-right .phone .max_price {
|
||
margin: 5px 0;
|
||
padding-bottom: 5px;
|
||
border-bottom: 1px dashed #d7d2d1;
|
||
font-size: 12px;
|
||
}
|
||
.custom-right .phone .use_time span {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
.custom-right .phone .priceaaaa {
|
||
font-size: 16px;
|
||
}
|
||
.custom-right .phone .thistitle {
|
||
font-size: 14px;
|
||
}
|
||
.custom-right .phone .goods_num {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
</style>
|
||
{/block}
|
||
{block name="main"}
|
||
<!--表单内容-->
|
||
<div class="layui-form form-wrap">
|
||
<div id="form-content">
|
||
<!--左边表单内容-->
|
||
<div class="left-content">
|
||
<div class="layui-form-item" id="app_type">
|
||
<label class="layui-form-label">投放平台：</label>
|
||
<div class="layui-input-block">
|
||
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="platform">
|
||
平台<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="weapp" {if !$isWeCard} disabled {/if}>
|
||
微信卡包<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="aliapp" {if !$isAliCard} disabled {/if}>
|
||
支付宝卡包<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="douyin" disabled>
|
||
抖音券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="app_type" value="{$info['app_type'] ?? ''}">
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>选择归属平台后，当前优惠券会和对应平台进行关联</p>
|
||
<p>微信卡包 需要设置V3密钥,并且在微信支付商户号开通'免充值立减与折扣'能力 </p>
|
||
<p>支付宝卡包 需要在支付宝b.alipay.com申请开通商家权,支付券能力</p>
|
||
</div>
|
||
</div>
|
||
<!--每个平台单独的设置-->
|
||
<block>
|
||
<!--支付宝小程序-->
|
||
<div class="layui-form-item config-channel" id="channel">
|
||
<label class="layui-form-label">优惠券渠道：</label>
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="alicard">
|
||
支付宝卡券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="alistore">
|
||
支付宝商家券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="alipaydiscount" disabled>
|
||
支付宝支付券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="channel" value="{$info['channel'] ?? 'alicard'}">
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>支付宝卡券仅支持企业公司用户</p>
|
||
</div>
|
||
</div>
|
||
<!--微信小程序-->
|
||
<div class="layui-form-item weapp_channel" id="weapp_channel">
|
||
<label class="layui-form-label">优惠券渠道：</label>
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="store">
|
||
微信商家券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="voucher">
|
||
微信代金券<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="weapp_channel" value="{$info['weapp_channel'] ?? 'store'}">
|
||
</div>
|
||
</div>
|
||
</block>
|
||
<!--公共设置-->
|
||
<block>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>优惠券名称：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="coupon_name" value="{$info['coupon_name'] ?? ''}" autocomplete="off" class="layui-input len-long coupon-name-length" maxlength="9">
|
||
</div>
|
||
<div class="word-aux">优惠券名称只能在9个字符以内</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-form-item" id="type">
|
||
<label class="layui-form-label">优惠券类型：</label>
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="reward">
|
||
满减<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="discount">
|
||
折扣<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="type" value="{$info['type'] ?? 'reward'}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item config-money">
|
||
<label class="layui-form-label"><span class="required">*</span>优惠券面额：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="money" value="{$info['money'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">元</span>
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>价格不能小于0，可保留两位小数</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item config-discount">
|
||
<label class="layui-form-label"><span class="required">*</span>优惠券折扣：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="discount" value="{$info['discount'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">折</span>
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>优惠券折扣不能小于1折，且不可大于9.9折，可保留两位小数</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item discount-limit">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">最多优惠：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="discount_limit" value="{$info['discount_limit'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">元</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item at-least">
|
||
<label class="layui-form-label"><span class="required">*</span>满多少元可以使用：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="at_least" value="{$info['at_least'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">元</span>
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>价格不能小于0，无门槛请设为0</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否允许直接领取：</label>
|
||
<div class="layui-input-block">
|
||
<input type="checkbox" name="is_show" lay-filter="is_show" value="{$info['is_show'] ?? 1}" lay-skin="switch" checked/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item config-count">
|
||
<label class="layui-form-label"><span class="required">*</span>发放数量：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="count" value="{$info['count'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">张</span>
|
||
</div>
|
||
<div class="word-aux">优惠券发放数量必须在0~1千万之间，微信代金券发放数量必须在5~1千万之间</div>
|
||
</div>
|
||
<div class="layui-form-item max-fetch">
|
||
<label class="layui-form-label"><span class="required">*</span>最大领取数量：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="max_fetch" value="{$info['max_fetch'] ?? ''}" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">张</span>
|
||
</div>
|
||
<div class="word-aux">最大领取数量必须大于0；微信代金券领取数量必须在1~100之间</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">优惠券图片：</label>
|
||
<div class="layui-input-block img-upload">
|
||
<div class="upload-img-block {if ($info['image'] ?? '')} image-content {/if}">
|
||
<div class="upload-img-box">
|
||
<div class="upload-default uploadCouponImg" id="couponImg">
|
||
{if ($coupon_type_id ?? 0) > 0 && ($info['image'] ?? '')}
|
||
<div id="preview_couponImg" class="preview_img">
|
||
<img layer-src src="{$info['image']}" class="img_prev" />
|
||
</div>
|
||
{else}
|
||
<div class="upload">
|
||
<i class="iconfont iconshangchuan"></i>
|
||
<p>点击上传</p>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
<div class="operation">
|
||
<div>
|
||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||
</div>
|
||
<div class="replace_img js-replace uploadCouponImg">点击替换</div>
|
||
</div>
|
||
<input type="hidden" name="image" value="{$info['image'] ?? ''}"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="word-aux">
|
||
优惠券图片大小需为1:1的正方形（归属平台为微信小程序则大小必须为：120*120）、支持JPG/JPEG/PNG格式，且图片大小小于1M
|
||
<!--<p>建议尺寸：325*95像素，图片上传默认不限制大小</p>-->
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" id="validity_type">
|
||
<label class="layui-form-label">有效期类型：</label>
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="0">
|
||
固定时间<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status validity-type-1" data-value="1">
|
||
领取之日起<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status validity-type-2" data-value="2">
|
||
长期有效<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="validity_type" value="{$info['validity_type'] ?? 0}">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item config-end-time">
|
||
<label class="layui-form-label">优惠券过期时间：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="end_time" id="end_time" class="layui-input len-mid" autocomplete="off" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item config-fixed-term">
|
||
<label class="layui-form-label">领取之日起：</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" min="1" max="365" value="10" name="fixed_term" autocomplete="off" class="layui-input len-short">
|
||
</div>
|
||
<span class="layui-form-mid">天有效</span>
|
||
</div>
|
||
<div class="word-aux">
|
||
<p>不能小于0，且必须为整数</p>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" id="goods_type">
|
||
<label class="layui-form-label">活动商品</label>
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-primary change-selected-status change-selected-active" data-value="1">
|
||
全部商品参与<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary change-selected-status" data-value="2">
|
||
指定商品参与<i class="iconfont iconxuanzhong change-selected-active"></i>
|
||
</button>
|
||
<input type="hidden" class="change-selected-value" name="goods_type" value="1">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item goods-list-content">
|
||
<label class="layui-form-label"></label>
|
||
<div class="layui-input-block">
|
||
<table id="selected_goods_list"></table>
|
||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||
<span class="goods_num">已选商品（<span id="goods_num" class="text-color">0</span>）</span>
|
||
<input type="hidden" name="goods_ids">
|
||
</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>
|
||
<a id="imageId"></a>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
<!--右边的手机预览内容 暂时隐藏-->
|
||
<div class="custom-right" style="display: none;">
|
||
<div class="phone">
|
||
<div class="item">
|
||
<div class="item-base">
|
||
<div class="aaa">
|
||
<div class="use_price">
|
||
<span class="priceaaaa">￥__</span>
|
||
</div>
|
||
<div class="use_condition font-size-tag">满<span class="use_price2">__</span>元可用</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="use_title">
|
||
<div class="thistitle">满减折扣券</div>
|
||
<div class="max_price">全场商品</div>
|
||
</div>
|
||
<div class="use_time">
|
||
<span class="time-aaa validity-type validity-type-0">有效期：</span>
|
||
<span style="display: none;" class="time-bbb validity-type validity-type-1">有效期：领取之日起10天内有效</span>
|
||
<span style="display: none;" class="validity-type validity-type-2">有效期：长期有效</span>
|
||
</div>
|
||
</div>
|
||
<div class="item-btn">
|
||
<div class="btn">领取</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 商品列表操作 -->
|
||
<script type="text/html" id="operation">
|
||
<div class="table-btn">
|
||
<a class="layui-btn" onclick="delGoods({{d.goods_id}})">删除</a>
|
||
</div>
|
||
</script>
|
||
{/block}
|
||
{block name="script"}
|
||
<script>
|
||
// 【显示隐藏 && 字段输入条件】配置信息；class_name = 值
|
||
let currentConfig = {
|
||
'config-channel': false,// 优惠券渠道 是否显示
|
||
'weapp_channel': false,// 微信小程序优惠券渠道 是否显示
|
||
'config-money': true,// 优惠券面额是否显示
|
||
'config-discount': false,// 优惠券折扣 是否显示
|
||
'discount-limit': false,// 最多优惠 是否显示
|
||
'at-least': true,// 满多少元可以使用 是否显示
|
||
'config-count': true,// 发放数量 是否显示
|
||
'max-fetch': true,// 最大领取数量 是否显示
|
||
'validity-type-2': true,// 有效期类型-长期有效 是否显示
|
||
'config-end-time': true,// 优惠券过期时间 是否显示
|
||
'config-fixed-term': false,// 领取之日起 是否显示
|
||
'goods-list-content': false,// 商品选择列表是 是否显示
|
||
};
|
||
let selectedGoodsList = [];// 已选中的商品列表
|
||
let selectedGoodsId = [];// 已选中的商品的id列表
|
||
let layuiForm,uploadImg;
|
||
let coupon_type_id = parseInt("{$coupon_type_id ?? 0}");
|
||
let currentDate = new Date("{:date('Y/m/d H:i:s',($info['end_time'] ?? strtotime('+30 day')))}");
|
||
|
||
$(function () {
|
||
// layui 表单相关信息处理
|
||
layui.use(['form', 'laydate'], function() {
|
||
layuiForm = layui.form, laydate = layui.laydate;
|
||
// 表单初始化
|
||
layuiForm.render();
|
||
renderTable(selectedGoodsList); // 初始化表格
|
||
showOrHide();
|
||
// 时间模块初始化
|
||
currentDate.setDate(currentDate.getDate()); //10天后的日期
|
||
laydate.render({
|
||
elem: '#end_time', //指定元素
|
||
type: 'datetime',
|
||
value: currentDate,
|
||
done: function(value, date, endDate){
|
||
console.log('有效期：' + value);
|
||
}
|
||
});
|
||
// 监听：自定义单选框改变 【归属平台、优惠券渠道、优惠券类型、有效期类型、活动商品】
|
||
$("#form-content").on("click",'.change-selected-status',function(){
|
||
let _this = $(this);
|
||
let name = _this.nextAll(".change-selected-value").attr("name");// 当前操作内容名称
|
||
let value = _this.data("value");
|
||
// 判断：根据操作内容 进行对应的操作
|
||
switch (name) {
|
||
// 归属平台
|
||
case 'app_type':
|
||
currentConfig['validity-type-2'] = false;// 有效期类型-长期有效
|
||
// 根据归属平台类型 判断并且进行对应的操作
|
||
if(value === 'weapp'){
|
||
currentConfig['weapp_channel'] = true;// 显示微信渠道
|
||
currentConfig['config-channel'] = false;// 关闭支付宝渠道
|
||
}else{
|
||
currentConfig['weapp_channel'] = false;// 关闭微信渠道
|
||
currentConfig['config-channel'] = true;// 显示支付宝渠道
|
||
currentConfig['validity-type-1'] = true;// 有效期类型-领取之日起
|
||
}
|
||
|
||
// 判断：当前已经选中 再次点击-取消选中
|
||
if(_this.hasClass('change-selected-active')){
|
||
_this.parent('.layui-input-block').contents(".change-selected-status").removeClass('change-selected-active')
|
||
_this.nextAll(".change-selected-value").attr("value",'')
|
||
currentConfig['weapp_channel'] = false;// 隐藏渠道
|
||
currentConfig['config-channel'] = false;// 隐藏渠道
|
||
currentConfig['validity-type-2'] = true;// 有效期类型-长期有效
|
||
currentConfig['validity-type-1'] = true;// 有效期类型-领取之日起
|
||
showOrHide();
|
||
return false;
|
||
}
|
||
// 判断：选中当前【归属平台】时 判断【有效期类型】是否为永久 是则修改为固定时间
|
||
let validityType = $("#validity_type").find('.change-selected-status.change-selected-active').data("value");
|
||
if(parseInt(validityType) === 2) $("#validity_type").find(".change-selected-status:eq(0)").click();
|
||
|
||
break;
|
||
// 优惠券类型
|
||
case 'type':
|
||
if(value === 'reward'){
|
||
// 满减
|
||
currentConfig['config-money'] = true;// 优惠券面额
|
||
currentConfig['config-discount'] = false;// 优惠券折扣
|
||
currentConfig['discount-limit'] = false;// 最多优惠
|
||
currentConfig['at-least'] = true;// 满多少元可以使用
|
||
}else if(value === 'discount'){
|
||
// 折扣
|
||
currentConfig['config-money'] = false;// 优惠券面额
|
||
currentConfig['config-discount'] = true;// 优惠券折扣
|
||
currentConfig['discount-limit'] = true;// 最多优惠
|
||
currentConfig['at-least'] = true;// 满多少元可以使用
|
||
}
|
||
break;
|
||
// 优惠券渠道 - 支付宝渠道
|
||
case 'channel':
|
||
break;
|
||
// 优惠券渠道 - 微信渠道
|
||
case 'weapp_channel':
|
||
// 微信【代金券】渠道 不显示【有效期类型-领取之日起】
|
||
if (value === 'voucher') {
|
||
currentConfig['validity-type-1'] = false;// 有效期类型-领取之日起
|
||
$("#validity_type").find(".change-selected-status:eq(0)").click();
|
||
}else{
|
||
currentConfig['validity-type-1'] = true;// 有效期类型-领取之日起
|
||
}
|
||
break;
|
||
// 有效期类型
|
||
case 'validity_type':
|
||
switch (parseInt(value)) {
|
||
case 0:
|
||
currentConfig['config-end-time'] = true;// 优惠券过期时间
|
||
currentConfig['config-fixed-term'] = false;// 领取之日起
|
||
break;
|
||
case 1:
|
||
currentConfig['config-end-time'] = false;// 优惠券过期时间
|
||
currentConfig['config-fixed-term'] = true;// 领取之日起
|
||
break;
|
||
case 2:
|
||
currentConfig['config-end-time'] = false;// 优惠券过期时间
|
||
currentConfig['config-fixed-term'] = false;// 领取之日起
|
||
break;
|
||
}
|
||
break;
|
||
case 'goods_type':
|
||
currentConfig['goods-list-content'] = parseInt(value) !== 1;
|
||
break;
|
||
}
|
||
// 选中操作
|
||
_this.parent('.layui-input-block').contents(".change-selected-status").removeClass('change-selected-active')
|
||
_this.addClass('change-selected-active');
|
||
_this.nextAll(".change-selected-value").attr("value",value)// 改变值
|
||
// 再次执行显示隐藏判断
|
||
showOrHide();
|
||
});
|
||
// 监听：【是否允许直接领取】状态改变
|
||
layuiForm.on('switch(is_show)', function (data) {
|
||
if ($(data.elem).is(':checked')) {
|
||
currentConfig['config-count'] = true;// 发放数量
|
||
currentConfig['max-fetch'] = true;// 最大领取数量
|
||
} else {
|
||
currentConfig['config-count'] = false;// 发放数量
|
||
currentConfig['max-fetch'] = false;// 最大领取数量
|
||
}
|
||
showOrHide();
|
||
});
|
||
// 优惠券图片处理 - 图片上传
|
||
$(".uploadCouponImg").on('click',function () {
|
||
openAlbum(function (data) {
|
||
let imgInfo = data[0] || {};
|
||
let imgLink = ns.img(imgInfo['pic_path']);// 图片完整路径
|
||
|
||
let html = `<div id="preview_couponImg" class="preview_img">
|
||
<img layer-src src="${imgLink}" class="img_prev" />
|
||
</div>`;
|
||
$("input[name='image']").val(imgInfo['pic_path']);
|
||
$("#couponImg").html(html);
|
||
$("#couponImg").parents('.upload-img-block').addClass('image-content');
|
||
}, 1);
|
||
});
|
||
// 优惠券图片处理 - 图片预览
|
||
$(".upload-img-block .js-preview").click(function () {
|
||
let img = $(this).parents('.upload-img-box').find("img").attr("src");
|
||
bigImgPreview([ //相册包含的图片，数组格式
|
||
{
|
||
"alt": "",
|
||
"pid": 0, //图片id
|
||
"src": img, //原图地址
|
||
"thumb": img //缩略图地址
|
||
}
|
||
]);
|
||
});
|
||
// 优惠券图片处理 - 图片删除
|
||
$(".upload-img-block .js-delete").click(function () {
|
||
let html = `<div class="upload">
|
||
<i class="iconfont iconshangchuan"></i>
|
||
<p>点击上传</p>
|
||
</div>`;
|
||
$("input[name='image']").val('');
|
||
$("#couponImg").html(html);
|
||
$("#couponImg").parents('.upload-img-block').removeClass('image-content');
|
||
});
|
||
// 提交表单
|
||
layuiForm.on('submit(save)', function(data) {
|
||
// 加载动画
|
||
let loading = layer.load(2)
|
||
let _this = $(this);
|
||
// 开始表单验证
|
||
let field = data.field || {};
|
||
let verifyResult = verify(field);
|
||
if(verifyResult.length > 0 && verifyResult !== true){
|
||
layer.close(loading);
|
||
layer.alert(verifyResult,{icon: 5});
|
||
return false;
|
||
}
|
||
// 提交内容
|
||
$.ajax({
|
||
url: ns.url("coupon://shop/coupon/addOrEdit"),
|
||
data: {
|
||
info: field,
|
||
id: coupon_type_id
|
||
},
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res) {
|
||
// 根据操作结果处理数据
|
||
if(parseInt(res.code) === 0) operationSuccessful(field,res.data);
|
||
else layer.msg(res.message);
|
||
// 清除加载动画
|
||
layer.close(loading);
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
// 编辑初始化
|
||
if(coupon_type_id > 0) editInit();
|
||
});
|
||
|
||
|
||
|
||
});
|
||
// 内容显示隐藏 统一管理
|
||
function showOrHide(){
|
||
for(let className in currentConfig){
|
||
if(currentConfig[className]){
|
||
$("."+className).show();
|
||
}else{
|
||
$("."+className).hide();
|
||
}
|
||
}
|
||
}
|
||
// 指定商品可用 - 选择添加商品
|
||
function addGoods() {
|
||
goodsSelect(function(res) {
|
||
if(res.length){
|
||
selectedGoodsList = [];
|
||
selectedGoodsId = [];
|
||
for (let i = 0; i < res.length; i++) {
|
||
selectedGoodsId.push(res[i].goods_id);
|
||
selectedGoodsList.push(res[i]);
|
||
}
|
||
|
||
renderTable(selectedGoodsList);
|
||
$("input[name='goods_ids']").val(selectedGoodsId.toString());
|
||
$("#goods_num").html(selectedGoodsList.length)
|
||
}
|
||
}, selectedGoodsId, {mode: "spu", is_weigh: 1});
|
||
}
|
||
// 指定商品可用 - 渲染已经选择的商品
|
||
function renderTable(goods_list) {
|
||
//展示已知数据
|
||
let table = new Table({
|
||
elem: '#selected_goods_list',
|
||
cols: [
|
||
[{
|
||
field: 'goods_name',
|
||
title: '商品名称',
|
||
unresize: 'false',
|
||
width: '50%'
|
||
}, {
|
||
field: 'price',
|
||
title: '商品价格(元)',
|
||
unresize: 'false',
|
||
align: 'right',
|
||
width: '20%',
|
||
templet: function (data) {
|
||
return '￥' + data.price;
|
||
}
|
||
}, {
|
||
field: 'goods_stock',
|
||
title: '库存',
|
||
unresize: 'false',
|
||
align: 'center',
|
||
width: '20%'
|
||
}, {
|
||
title: '操作',
|
||
toolbar: '#operation',
|
||
unresize: 'false',
|
||
align: 'right'
|
||
}],
|
||
],
|
||
data: goods_list,
|
||
});
|
||
}
|
||
// 指定商品可用 - 删除选中商品
|
||
function delGoods(id) {
|
||
var i, j;
|
||
$.each(selectedGoodsList, function(index, item) {
|
||
var goods_id = item.goods_id;
|
||
if (id == goods_id) {
|
||
i = index;
|
||
}
|
||
});
|
||
selectedGoodsList.splice(i, 1);
|
||
renderTable(selectedGoodsList);
|
||
$.each(selectedGoodsId, function(index, item) {
|
||
if (id == item) {
|
||
j = index;
|
||
}
|
||
});
|
||
selectedGoodsId.splice(j, 1);
|
||
$("#goods_num").html(selectedGoodsId.length);
|
||
$("input[name='goods_ids']").val(selectedGoodsId.toString());
|
||
}
|
||
// 返回
|
||
function back() {
|
||
location.href = ns.url("coupon://shop/coupon/lists");
|
||
}
|
||
// 表单验证 并且返回验证结果
|
||
function verify(field){
|
||
// 内容校验列表
|
||
let defaultRule = [
|
||
{name: 'coupon_name', checkType: 'required', errorMsg: '请输入优惠券名称'},
|
||
{name: 'at_least', checkType: 'required', errorMsg: '请输入满多少元可以使用'},
|
||
];
|
||
// type：reward=满减；discount=折扣
|
||
if(field.type === 'reward'){
|
||
defaultRule.push({name: 'money', checkType: 'required', errorMsg: '请输入优惠券面额'});
|
||
defaultRule.push({name: 'money', checkType: 'between', errorMsg: '优惠券面额应该在1元~1千万元之间！',checkRule:'1,10000000'});
|
||
defaultRule.push({name: 'money', checkType: 'digit', errorMsg: '请输入正确的优惠券面额'});
|
||
defaultRule.push({name: 'at_least', checkType: 'min', errorMsg: '满多少元可以使用的金额必须大于优惠券面额',checkRule: field.money});
|
||
} else{
|
||
defaultRule.push({name: 'discount', checkType: 'required', errorMsg: '请输入优惠券折扣'});
|
||
defaultRule.push({name: 'discount', checkType: 'between', errorMsg: '优惠券折扣应该在1~9.9之间！',checkRule:'1,9.9'});
|
||
defaultRule.push({name: 'discount', checkType: 'digit', errorMsg: '请输入正确的优惠券折扣'});
|
||
}
|
||
// is_show：1=可以直接领取，0=不能直接领取
|
||
if(parseInt(field.is_show) === 1){
|
||
defaultRule.push({name: 'count', checkType: 'required', errorMsg: '请输入发放数量！'});
|
||
defaultRule.push({name: 'count', checkType: 'int', errorMsg: '请输入正确的发放数量',checkRule:'0,7'});
|
||
defaultRule.push({name: 'max_fetch', checkType: 'required', errorMsg: '请输入最大领取数量'});
|
||
defaultRule.push({name: 'max_fetch', checkType: 'int', errorMsg: '请输入正确的最大领取数量',checkRule:'0,3'});
|
||
defaultRule.push({name: 'max_fetch', checkType: 'between', errorMsg: '最大领取数量应该在1~100之间！',checkRule:'1,100'});
|
||
}
|
||
// validity_type：0=固定时间；1=领取之日起；2=长期有效
|
||
if(parseInt(field.validity_type) === 0) defaultRule.push({name: 'end_time', checkType: 'required', errorMsg: '请选择优惠券过期时间'});
|
||
if(parseInt(field.validity_type) === 1) defaultRule.push({name: 'fixed_term', checkType: 'required', errorMsg: '请输入领取后有效时间'});
|
||
// goods_type：1=全部商品参与；2=指定商品参与
|
||
if(parseInt(field.goods_type) === 2) defaultRule.push({name: 'goods_ids', checkType: 'required', errorMsg: '请至少选择一个商品！'});
|
||
|
||
|
||
return ns.validate(field,defaultRule);
|
||
}
|
||
// 添加|编辑 操作成功的处理
|
||
async function operationSuccessful(field,coupon_id){
|
||
// 完成之前的操作 —— 归属平台：微信小程序、优惠券渠道：微信代金券 需要进行激活操作
|
||
if(field.app_type === 'weapp' && field.weapp_channel === 'voucher'){
|
||
$.ajax({
|
||
url: ns.url("coupon://shop/coupon/voucherActivation"),
|
||
data: {
|
||
coupon_type_id: coupon_id,
|
||
is_delayed: 1,// 添加后立即激活 必须使用延时操作
|
||
},
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
async: false,
|
||
success: function(res) {
|
||
console.log("微信小程序代金券激活结果",res);
|
||
}
|
||
});
|
||
}
|
||
// 提示信息
|
||
let title = coupon_type_id > 0 ? '编辑成功' : '添加成功';
|
||
let btnName = coupon_type_id > 0 ? '继续操作' : '继续添加';
|
||
layer.confirm(title, {
|
||
title: '操作提示',
|
||
btn: ['返回列表', btnName],
|
||
yes: function() {
|
||
location.href = ns.url("coupon://shop/coupon/lists")
|
||
},
|
||
btn2: function() {
|
||
location.reload();
|
||
}
|
||
});
|
||
}
|
||
// 编辑初始化
|
||
function editInit(){
|
||
// 初始化 - 归属平台&优惠券渠道 不可修改
|
||
let appType = $("input[name='app_type']").val();
|
||
$("#app_type").find(".change-selected-status").hide();
|
||
if(appType.length > 0) {
|
||
$("#app_type").find("[data-value='"+appType+"']").click().show().attr("disabled",'disabled');
|
||
// 初始化 - 优惠券渠道 不可修改
|
||
$("#channel").find(".change-selected-status").hide();
|
||
$("#weapp_channel").find(".change-selected-status").hide();
|
||
if(appType === 'weapp'){
|
||
// 微信
|
||
let weappChannel = $("input[name='weapp_channel']").val();
|
||
$("#weapp_channel").find("[data-value='"+weappChannel+"']").click().show().attr("disabled",'disabled');
|
||
}
|
||
else if(appType === 'aliapp'){
|
||
// 支付宝
|
||
let channel = $("input[name='channel']").val();
|
||
$("#channel").find("[data-value='"+channel+"']").click().show().attr("disabled",'disabled');
|
||
}
|
||
// 初始化 - 优惠券类型 不可修改
|
||
$("#type").find(".change-selected-status").hide();
|
||
let type = $("input[name='type']").val();
|
||
$("#type").find("[data-value='"+type+"']").click().show().attr("disabled",'disabled');
|
||
// 初始化 - 活动商品 不可修改
|
||
$("#goods_type").find(".change-selected-status").hide();
|
||
let goods_type = $("input[name='goods_type']").val();
|
||
$("#goods_type").find("[data-value='"+goods_type+"']").click().show().attr("disabled",'disabled');
|
||
// 初始化 - 优惠券图片不可修改
|
||
$("#form-content").contents(".left-content").find(".image-content").removeClass('image-content');
|
||
// 初始化 - 存在归属平台 则除【优惠券名称、最大领取数量、过期时间、发放数量】外都不可修改
|
||
$("#form-content").contents(".left-content").find("input").attr("disabled",'disabled');
|
||
$("#form-content").contents(".left-content").find("input[name='coupon_name']").removeAttr("disabled");
|
||
$("#form-content").contents(".left-content").find("input[name='max_fetch']").removeAttr("disabled");
|
||
$("#form-content").contents(".left-content").find("input[name='end_time']").removeAttr("disabled");
|
||
$("#form-content").contents(".left-content").find("input[name='count']").removeAttr("disabled");
|
||
|
||
} else {
|
||
$("#app_type").find("[data-value='']").addClass('change-selected-active').attr("disabled",'disabled').show();
|
||
}
|
||
}
|
||
</script>
|
||
{/block} |