jh-admin/addon/saas/shop/view/group/add.html

402 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style type="text/css">
.tree-line{padding:10px 0;background:#ededed;margin-bottom:2px;line-height: 1.8;}
.tree-line .layui-form{padding-left: 10px !important;}
.tree-line .layui-form-checkbox{margin:0 10px !important;vertical-align:middle;}
.form {margin-top: 0;}
.item-block-hover-a {cursor: pointer;}
.input-box {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
.item-content-desc{display:inline-block;white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}
.item-block-parent .item-con {
flex: 1;
overflow: hidden;
height: 55px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
</style>
{/block}
{block name="main"}
<div class="layui-form form">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>套餐名称:</label>
<div class="layui-input-block">
<input type="text" name="group_name" lay-verify="required" autocomplete="off" class="layui-input len-long">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label img-upload-lable">封面:</label>
<div class="layui-input-block img-upload">
<div class="upload-img-block icon">
<div class="upload-img-box">
<div class="upload-default" id="group_image">
<div class="upload">
<img src="__STATIC__/img/upload_img.png" />
<p>点击上传</p>
</div>
</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">点击替换</div>
</div>
<input type="hidden" name="group_image"/>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>门店数量:</label>
<div class="layui-input-block">
<input type="text" name="store_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
</div>
<div class="word-aux">
<p>限制门店数量,0代表无限制</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>商品数量:</label>
<div class="layui-input-block">
<input type="text" name="goods_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
</div>
<div class="word-aux">
<p>限制商品数量,0代表无限制</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>团长数量:</label>
<div class="layui-input-block">
<input type="text" name="leader_number" lay-verify="required" autocomplete="off" value="0" class="layui-input len-long">
</div>
<div class="word-aux">
<p>限制社区团购团长数量,0无限制</p>
</div>
</div>
<div class="layui-form-item distribution-index fee" >
<label class="layui-form-label"><span class="required">*</span>设置价格:</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input type="number" name="fee" class="layui-input" value="" required lay-verify="price"/>
</div>
<div class="layui-form-mid layui-word-aux">元/</div>
<div class="layui-input-inline">
<select name="unit" lay-filter="unit">
<option value="year"></option>
<option value="month"></option>
<option value="week"></option>
<option value="day"></option>
{if $agent_type!='Sitefee'}
<option value="permanent">永久</option>
{/if}
</select>
</div>
</div>
</div>
<div class="layui-form-item fee_commission">
<label class="layui-form-label"><span class="required">*</span>分佣比例:</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input type="text" name="fee_commission" lay-verify="required" value="0" autocomplete="off" class="layui-input len-short">
</div>%
</div>
<div class="word-aux">
<p>订单成交额进行分佣比例,按照百分百 如百分之一 填写1 可保留两位小数</p>
</div>
</div>
<div class="layui-form-item distribution-index">
<label class="layui-form-label">是否上架:</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input type="radio" name="status" value="1" lay-filter="level" title="上架"/>
<input type="radio" name="status" value="0" lay-filter="level" title="下架" checked/>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述:</label>
<div class="layui-input-block">
<textarea name="desc" class="layui-textarea len-long"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text" id="promotion_list">
<div id="promotion">
<span class="layui-form-label">店铺营销:</span>
<div class="layui-input-block">
<div class="site_list item-block-parent item-five">
{foreach $promotions as $promotion}
{if condition="$promotion['show_type'] eq 'shop'"}
<a class="item-block item-block-hover-a">
<div class="item-block-wrap">
<div class="item-pic">
<img src="{:img($promotion['icon'])}" />
</div>
<div class="item-con">
<div class="item-content-title">{$promotion['title']}</div>
<p class="item-content-desc">{$promotion['description']}</p>
</div>
</div>
<div class="input-box">
<input type="checkbox" value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
</div>
</a>
{/if}
{/foreach}
</div>
</div>
</div>
<div id="member">
<span class="layui-form-label">会员互动:</span>
<div class="layui-input-block">
<div class="site_list item-block-parent item-five" >
{foreach $promotions as $promotion}
{if condition="$promotion['show_type'] eq 'member'"}
<a class="item-block item-block-hover-a">
<div class="item-block-wrap">
<div class="item-pic">
<img src="{:img($promotion['icon'])}" />
</div>
<div class="item-con">
<div class="item-content-title">{$promotion['title']}</div>
<p class="item-content-desc">{$promotion['description']}</p>
</div>
</div>
<div class="input-box">
<input type="checkbox" value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
</div>
</a>
{/if}
{/foreach}
</div>
</div>
</div>
<div id="tool">
<span class="layui-form-label">应用模块:</span>
<div class="layui-input-block">
<div class="site_list item-block-parent item-five" >
{foreach $promotions as $promotion}
{if condition="$promotion['show_type'] eq 'tool'"}
<a class="item-block item-block-hover-a">
<div class="item-block-wrap">
<div class="item-pic">
<img src="{:img($promotion['icon'])}" />
</div>
<div class="item-con">
<div class="item-content-title">{$promotion['title']}</div>
<p class="item-content-desc">{$promotion['description']}</p>
</div>
</div>
<div class="input-box">
<input type="checkbox" value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
</div>
</a>
{/if}
{/foreach}
</div>
</div>
</div>
</div>
<div class="form-row">
<button class="layui-btn bg-color " lay-submit lay-filter="save">保存</button>
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
</div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="storeImageTpl">
{{# if(d.list.length){ }}
{{# for(var i=0;i<d.list.length;i++){ }}
<div class="item upload_img_square_item" data-index="{{i}}">
<div class="img-wrap">
<img src="{{ns.img(d.list[i],'small')}}" layer-src>
</div>
<div class="operation">
<i title="图片预览" class="iconfont iconreview js-preview"></i>
<i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
<div class="replace_img" data-index="{{i}}">点击替换</div>
</div>
</div>
{{# } }}
{{# if(d.list.length < d.max){ }}
<div class="item js-add-image upload_img_square">+</div>
{{# } }}
{{# }else{ }}
<div class="item js-add-image upload_img_square">+</div>
{{# } }}
</script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script>
var storeImage = [];
const STORE_IMAGE_MAX = 1;
// var promotion_items = $("#promotion a").length,
// extend_items = $("#admin a").length,
// interaction_items = $("#member a").length,
// tool_item = $("#tool").length;
// if (promotion_items == 0) {
// $("#promotion").hide();
// }
// if (extend_items == 0) {
// $("#admin").hide();
// }
// if (interaction_items == 0) {
// $("#member").hide();
// }
// if (tool_item == 0) {
// $("#tool").hide();
// }
var upload = new Upload({
elem: '#group_image',
post:"shop"
});
layui.use(['form','laytpl'], function() {
var form = layui.form,
laytpl = layui.laytpl,
total_price=0,
repeat_flag = false; //防重复
form.render();
// $(".item-block").each(function() {
// var checkCon = $(this).find(".input-checkbox");
// $(this).click(function() {
// if ($(checkCon).is(':checked')) {
// $(this).find(".layui-form-checkbox").removeClass("layui-form-checked");
// $(checkCon).prop("checked", false);
// total_price -=parseFloat($(checkCon).attr('data-price'),2)
// $("#yprice").html(total_price)
// } else {
// $(this).find(".layui-form-checkbox").addClass("layui-form-checked");
// $(checkCon).prop("checked", true);
// total_price +=parseFloat($(checkCon).attr('data-price'),2)
// $("#yprice").html(total_price)
// }
// })
// })
form.on("checkbox(is_checked)", function(data) {
// if(data.elem.checked){
// total_price +=parseFloat(data.elem.getAttribute('data-price'),2)
// }else {
// total_price -=parseFloat(data.elem.getAttribute('data-price'),2)
// }
// $("#yprice").html(total_price)
$(data.elem).parents(".item-block").click();
})
form.on('radio(fee_type)', function (data) {
var elem = data.elem; // 获得 radio 原始 DOM 对象
var value = elem.value; // 获得 radio 值
if(value=='fixed_fee'){
$(".fee_commission").hide()
$(".fee").show()
}else {
$(".fee_commission").show()
$(".fee").hide()
}
});
// 添加门店图片
$("body").on("click", ".js-add-image", function () {
openAlbum(function (data) {
for (var i = 0; i < data.length; i++) {
if (storeImage.length < STORE_IMAGE_MAX) storeImage.push(data[i].pic_path);
}
refreshStoreImage();
}, 5, 1);
});
//渲染门店图片
function refreshStoreImage() {
var store_image_template = $("#storeImageTpl").html();
var data = {
list: storeImage,
max: STORE_IMAGE_MAX
};
laytpl(store_image_template).render(data, function (html) {
$(".js-store-image").html(html);
//加载图片放大
loadImgMagnify();
if (storeImage.length) {
//预览
$(".js-store-image .js-preview").click(function () {
$(this).parent().prev().find("img").click();
});
//图片删除
$(".js-store-image .js-delete").click(function () {
var index = $(this).attr("data-index");
storeImage.splice(index, 1);
refreshStoreImage();
});
// 拖拽
$('.js-store-image .upload_img_square_item').arrangeable({
//拖拽结束后执行回调
callback: function (e) {
var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
var indexAfter = $(e).index();//拖拽后的位置
var temp = storeImage[indexBefore];
storeImage[indexBefore] = storeImage[indexAfter];
storeImage[indexAfter] = temp;
refreshStoreImage();
}
});
}
//最多传十张图
if (storeImage.length < STORE_IMAGE_MAX) {
$(".js-add-image").show();
} else {
$(".js-add-image").hide();
}
});
}
refreshStoreImage();
form.on('submit(save)', function(data) {
var obj = $("#promotion_list input:checked");
var addon_array = [];
for (var i = 0; i < obj.length; i++) {
addon_array.push(obj.eq(i).val());
}
data.field.addon_array = addon_array.toString();
data.field.ad_image = storeImage.toString();
if(repeat_flag) return;
repeat_flag = true;
$.ajax({
url: ns.url("saas://shop/group/addgroup"),
data:data.field,
dataType: 'JSON',
type: 'POST',
success: function(res) {
repeat_flag = false;
if (res.code == 0) {
layer.confirm('添加成功', {
title:'操作提示',
btn: ['返回列表', '继续添加'],
yes: function(){
location.href = ns.url("saas://shop/group/lists")
},
btn2: function() {
location.href = ns.url("saas://shop/group/addgroup")
}
});
}else{
layer.msg(res.message);
}
}
});
});
});
//跳转到店铺列表
function back() {
location.href = ns.url("saas://shop/group/lists")
}
</script>
{/block}