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

407 lines
18 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 name="group_name" type="text" lay-verify="required" class="layui-input len-long" value="{$group_info.group_name}" autocomplete="off">
</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 {if !empty($info.image)}hover{/if}">
<div class="upload-default" id="group_image">
{if empty($group_info.image)}
<div class="upload">
<img src="__STATIC__/img/upload_img.png" />
<p>点击上传</p>
</div>
{else/}
<div id="preview_group_image" class="preview_img">
<img layer-src src="{:img($group_info.image)}" class="img_prev"/>
</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">点击替换</div>
</div>
<input type="hidden" name="group_image" value="{$group_info.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="{$group_info.store_number}" 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="{$group_info.leader_number}" 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="{$group_info.fee}" 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="week" {if $group_info.unit == 'day'} selected {/if}></option>
<option value="week" {if $group_info.unit == 'week'} selected {/if}></option>
<option value="month" {if $group_info.unit == 'month'} selected {/if}></option>
<option value="year" {if $group_info.unit == 'year'} selected {/if}></option>
{if $agent_type!='Sitefee'}
<option value="permanent" {if $group_info.unit == 'permanent'} selected {/if}>永久</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" value="{$group_info.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="上架" {if $group_info.status == 1} checked {/if} />
<input type="radio" name="status" value="0" lay-filter="level" title="下架" {if $group_info.status == 0} checked {/if}/>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">云市场关联ID</label>
<div class="layui-input-block">
<textarea name="cloud_ids" class="layui-textarea len-long">{$group_info.cloud_ids}</textarea>
</div>
<div class="word-aux">
<p>填写云市场关联产品ID,多个产品使用英文半角','分割开</p>
</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">{$group_info.desc}</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">广告图片:</label>
<div class="layui-input-block">
<div class="js-store-image"></div>
</div>
</div>
<div class="word-aux">
<p>小程序开屏广告,商家启动小程序开屏广告</p>
</div>
<div class="layui-form-item layui-form-text" id="promotion_list">
<div id="promotion">
<label class="layui-form-label">店铺营销:</label>
<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" {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
</div>
</a>
{/if}
{/foreach}
</div>
</div>
</div>
<div id="member">
<label class="layui-form-label">会员互动:</label>
<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" {if condition="$promotion['is_checked']"} checked {/if} value="{$promotion['name']}" class="input-checkbox" lay-filter="is_checked" lay-skin="primary">
</div>
</a>
{/if}
{/foreach}
</div>
</div>
</div>
<div id="tool">
<label class="layui-form-label">应用工具:</label>
<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" {if condition="$promotion['is_checked']"} checked {/if} 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>
<input name="group_id" type="text" class="layui-input layui-hide" value="{$group_info.group_id}">
</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 = '{$group_info.ad_image}'.split(',');
const STORE_IMAGE_MAX = 1;
layui.use(['form','laytpl'], function() {
var form = layui.form,
laytpl = layui.laytpl,
repeat_flag = false;//防重复标识
form.render();
// $(".item-block").each(function() {
// var checkCon = $(this).find(".input-checkbox");
// if($(checkCon).is(':checked')){
// total_price +=parseFloat($(checkCon).attr('data-price'),2)
// }
// $(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('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()
}
});
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();
})
// 添加门店图片
$("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) {
if (repeat_flag) return;
repeat_flag = true;
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();
$.ajax({
url: ns.url("saas://shop/group/editgroup"),
data: data.field,
type: "POST",
dataType: "JSON",
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.reload();
}
})
}else{
layer.msg(res.message);
}
}
});
});
});
//跳转到店铺列表
function back() {
location.href = ns.url("saas://shop/group/lists")
}
</script>
{/block}