jh-admin/addon/topic/shop/view/topic/add.html

598 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>
.form-wrap {margin-top: 0;}
.layui-form-item .layui-input-inline.end-time{float: none;}
.goods-title{display: flex;align-items: center;}
.goods-title .goods-img{display: flex;align-items: center;justify-content: center;width: 55px;height: 55px;margin-right: 5px;}
.goods-title .goods-img img{max-height: 100%;max-width: 100%;}
.goods-title .goods-name{flex: 1;line-height: 1.6;}
.goods_num {padding-left: 20px;}
</style>
{/block}
{block name="main"}
<div class="layui-form form-wrap">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>活动标题:</label>
<div class="layui-input-block">
<input type="text" name="topic_name" 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-inline">
<div class="layui-input-inline">
<input type="text" id="start_time" name="start_time" lay-verify="required" class="layui-input len-mid" autocomplete="off">
<i class=" iconrili iconfont calendar"></i>
</div>
<span class="layui-form-mid">-</span>
<div class="layui-input-inline end-time">
<input type="text" id="end_time" name="end_time" lay-verify="required|time" class="layui-input len-mid" autocomplete="off">
<i class=" iconrili iconfont calendar"></i>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">横幅图片:</label>
<div class="layui-input-inline img-upload">
<div class="upload-img-block icon">
<div class="upload-img-box">
<div class="upload-default" id="webLogoUpload">
<div class="upload">
<i class="iconfont iconshangchuan"></i>
<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="topic_adv" />
</div>
</div>
</div>
</div>
<div class="layui-card card-common card-brief">
<div class="layui-form-item">
<label class="layui-form-label">背景音乐:</label>
<div class="layui-input-block">
<input type="text" name="music_url" value="" autocomplete="off" class="layui-input len-long">
<button class="layui-btn layui-btn-primary" id="uploadFile">上传文件</button>
</div>
</div>
<div class="word-aux">
<p>仅支持MP3格式<p/>
<p>文件请不要超过2M<p/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动内容:</label>
<div class="layui-input-block">
<textarea class="layui-textarea len-long" name="remark" maxlength="300"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分享海报:</label>
<div class="layui-input-block len-mid">
<select name="template_id" lay-search lay-verify="">
<option value="0">请选择活动分享海报</option>
{foreach name="$poster_list" item="vo"}
<option value="{$vo['template_id']}">{$vo['poster_name']}</option>
{/foreach}
</select>
</div>
<div class="word-aux">宣传海报用于分享到朋友圈,<a href="{:addon_url('postertemplate://shop/postertemplate/lists')}" _target="_blank" class="text-color">去添加海报</a></div>
</div>
{if $form_is_exit}
<div class="layui-form-item">
<label class="layui-form-label">活动表单:</label>
<div class="layui-input-block len-mid">
<select name="form_id">
<option value="0">请选择活动表单</option>
{foreach name="$form_list" item="vo"}
<option value="{$vo.id}">{$vo.form_name}</option>
{/foreach}
</select>
</div>
</div>
{/if}
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">独立收款:</label>-->
<!-- <div class="layui-input-block">-->
<!-- <div class="layui-input-inline">-->
<!-- <input type="checkbox" name="is_activity_pay" value="1" lay-filter="third_party" lay-skin="switch">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="word-aux">开启活动收款功能,可单独设置活动收款账号,不设置则使用店铺默认收款账号。</div>-->
<!-- </div>-->
<div class="layui-form-item">
<label class="layui-form-label">独立收款:</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input type="checkbox" name="is_activity_pay" value="1" lay-filter="third_party" lay-skin="switch">
</div>
</div>
</div>
{include file="addon/topic/shop/view/topic/selectSite.html" /}
<div class="word-aux">开启独立收款功能,需要关联收款店铺,不设置则使用店铺默认收款账号。</div>
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">收款方名称</label>-->
<!-- <div class="layui-input-block">-->
<!-- <input type="text" name="payee_name" 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="payee_account" autocomplete="off" class="layui-input len-long">-->
<!-- </div>-->
<!-- <div class="word-aux">独立收款,目前仅支持畅捷支付收款</div>-->
<!-- </div>-->
{if $divide_money_is_exit}
<div class="layui-form-item">
<label class="layui-form-label">收益分账:</label>
<div class="layui-input-block">
<div class="divide-item account">
<div class="discount-cont">
<div><a href="javascript:;" class="text-color select-divide">选择账号</a></div>
<div>
<table class="layui-table" lay-skin="nob">
<colgroup>
<col width="5%">
<col width="30%">
<col width="30%">
<col width="20%">
</colgroup>
<thead>
<tr>
<th>账号ID</th>
<th>企业名称</th>
<th>账号</th>
<th style="text-align:center;">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{/if}
<div class="layui-form-item">
<label class="layui-form-label">是否参与循环消费:</label>
<div class="layui-input-block">
<input type="radio" name="is_recycle_integral" value="1" title="是" >
<input type="radio" name="is_recycle_integral" value="0" title="否" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>商品:</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="15%">
<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> <span class="goods_num">已选商品(<span id="goods_num" class="text-color">0</span></span>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动详情:</label>
<div class="layui-input-block special-length">
<script id="container" name="content" type="text/plain" style="width:100%;height:500px;"></script>
</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="webLogoUploadImage"></a>
</div>
<!-- <div class="custom-right">
<div class="phone">
<h2>专题活动列表</h2>
<img class="img" src="" >
<div class="all-goods">
</div>
</div>
</div> -->
</div>
{/block}
{block name="script"}
<script type="text/html" id="accountList">
<div class="gift-box">
<div class="single-filter-box">
<div class="layui-form">
<div class="layui-input-inline">
<input type="text" name="account_name" placeholder="请输入账号" class="layui-input len-mid">
<button type="button" class="layui-btn layui-btn-primary" lay-filter="account-search" lay-submit>
<i class="layui-icon">&#xe615;</i>
</button>
</div>
</div>
</div>
<table id="account_list" lay-filter="account_list"></table>
</div>
</script>
<script type="text/html" id="accountOperation">
{{# var select_account_list = ','+account_list+','}}
{{# if(select_account_list.indexOf(','+d.id+',') != -1){ }}
<p title="该账号已参加">已添加</p>
{{# }else{ }}
<a class="layui-btn" lay-event="add">添加</a>
{{# } }}
</script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
var selectGoodsSkuId = [];
var saveData = null;
var totalUploadNum = 0;
var completeUploadNum = 0;
var upload;
var accountTable;
var account_list='';
// var laytpl;
var ue = UE.getEditor('container');
layui.use(['form','laydate','colorpicker','laytpl'], function() {
var form = layui.form,
laydate = layui.laydate,
colorpicker = layui.colorpicker,
currentDate = new Date(),
minDate = "",
laytpl = layui.laytpl,
repeat_flag = false;//防重复标识
currentDate.setDate(currentDate.getDate() + 30);
form.render();
upload = new Upload({
elem: '#webLogoUpload',
auto:false,
bindAction:'#webLogoUploadImage',
callback: function(res) {
uploadComplete('topic_adv', res.data.pic_path);
}
});
function uploadComplete(field, pic_path) {
saveData.field[field] = pic_path;
completeUploadNum += 1;
if(completeUploadNum == totalUploadNum){
saveFunc();
}
}
function saveFunc(){
if(repeat_flag) return;
repeat_flag = true;
var data = saveData;
$.ajax({
url: ns.url("topic://shop/topic/add"),
dataType: 'JSON',
type: 'POST',
data: data.field,
success: function(res){
repeat_flag = false;
if(res.code == 0){
layer.confirm('添加成功',{
title: '操作提示',
btn: ['返回列表', '继续添加'],
closeBtn: 0,
yes: function() {
location.href = ns.url("topic://shop/topic/lists");
},btn2: function() {
location.reload();
}
})
}else{
layer.msg(res.message);
}
}
})
}
/**
* 颜色
*/
colorpicker.render({
elem: '#colorpicker', //绑定元素
color: "#FFFFFF",
done: function(color) {
$("#bg_color").val(color);
}
});
//开始时间
laydate.render({
elem: '#start_time', //指定元素
type: 'datetime',
value: new Date(),
done: function(value) {
minDate = value;
reRender();
}
});
//结束时间
laydate.render({
elem: '#end_time', //指定元素
type: 'datetime',
value: new Date(currentDate)
});
/**
* 重新渲染结束时间
* */
function reRender() {
$("#end_time").remove();
$(".end-time").html('<input type="text" id="end_time" name="end_time" placeholder="请输入结束时间" lay-verify="required|time" class = "layui-input len-mid" > ');
laydate.render({
elem: '#end_time',
type: 'datetime',
min: minDate
});
}
form.verify({
topic_price: function(value, item) {
var price = $(item).parents("tr").find(".goods-price").text();
// console.log(parseFloat(value))
if (value.trim() == "") {
return '活动价格不能为空';
}
if (parseFloat(value) <= 0) {
return '活动价格必须大于0';
}
if (parseFloat(value) > parseFloat(price)) {
return '活动价格不能大于商品价格';
}
var pattern = /^[0-9]+(\.[0-9]{2})?$/;
if(!pattern.test(value)){
return '请输入正确格式';
}
var arrMen = value.split(".");
var val = 0;
if (arrMen.length == 2) {
val = arrMen[1];
}
if (val.length > 2) {
return '活动价格最多保留两位小数';
}
},
time: function(value) {
var now_time = (new Date()).getTime();
var start_time = (new Date($("#start_time").val())).getTime();
var end_time = (new Date(value)).getTime();
if (now_time > end_time) {
return '结束时间不能小于当前时间!'
}
if (start_time > end_time) {
return '结束时间不能小于开始时间!';
}
},
});
form.on("submit(save)",function(data){
data.field.start_time = ns.date_to_time(data.field.start_time);
data.field.end_time = ns.date_to_time(data.field.end_time);
// 删除图片
if(!data.field.topic_adv) upload.delete();
if ($('#goods tbody tr[data-sku-id]').length == 0) {
layer.msg('请选择商品', {icon: 5});
return;
}
var goods = {};
$('#goods tbody tr[data-sku-id]').each(function(){
var item = {
goods_id : $(this).attr('data-goods-id'),
sku_id : $(this).attr('data-sku-id'),
topic_price : $(this).find('.topic-price').val()
};
if (!goods['goods_' + item.goods_id]) goods['goods_' + item.goods_id] = [];
goods['goods_' + item.goods_id].push(item);
});
if(data.field.is_activity_pay==1&&$("input[name='site_id']").val()==''){
layer.msg('请关联收款店铺', {icon: 5});
return;
}
ue.ready(function() { //对编辑器的操作最好在编辑器ready之后再做
html = ue.getContent(); //获取html内容返回: <p>hello</p>
});
data.field.content = html;
data.field.goods = JSON.stringify(goods);
var divide_money_ids = account_list.split(',');
data.field.divide_money_ids = divide_money_ids;
saveData = data;
var obj = $("img.img_prev[data-prev='1']");
totalUploadNum = obj.length;
if(totalUploadNum > 0){
obj.each(function(){
var actionId = $(this).attr('data-action-id');
$(actionId).click();
})
}else{
saveFunc();
}
})
$('body').on('click', '.divide-item .select-divide', function(e){
var event = this;
layer.open({
type: 1,
area: ["1200px","600px"],
title: '账号列表',
skin: 'select-account-layer',
content: $("#accountList").html()
});
accountTable = new Table({
elem: "#account_list",
url: ns.url("dividemoney://shop/account/list"),
where: {'status': 1},
cols: [
[{
title: '企业名称',
unresize: 'false',
width: '30%',
field: 'realname',
}, {
title: '账号',
unresize: 'false',
width: '30%',
field: 'account',
},{
field: 'divide_rate',
title: '分佣比例(%)',
unresize: 'false',
width: '20%',
templet: function(data){
return data.divide_rate + '%';
}
}, {
title: '操作',
toolbar: '#accountOperation',
unresize: 'false',
align:'right'
}]
]
});
accountTable.tool(function(obj) {
var data = obj.data;
switch (obj.event) {
case "add":
addaccount(data);
break;
}
});
function addaccount(data){
var template = `<tr data-account="{{ d.id }}">
<td>{{ d.id }}</td>
<td>{{ d.realname }}</td>
<td>{{ d.account }}</td>
<td style="text-align:center;"><a href="javascript:;" onclick="deleteaccount(this)" class="text-color">删除</a></td>
</tr>`;
laytpl(template).render(data, function(string){
$(event).parents('.discount-cont').find('.layui-table tbody').append(string);
layer.closeAll();
});
getaccount();
}
})
});
// 删除优惠券
function deleteaccount(e){
$(e).parents('tr').remove();
getaccount();
}
function getaccount() {
var account = [];
$('.account').find('tr[data-account]').each(function (i, e) {
account.push($(e).attr('data-account'));
})
account_list = account.toString();
}
/**
* 添加商品
*/
function addGoods() {
goodsSelect(function (res) {
if (!res.length) return false;
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 + " data-goods-id="+ item.goods_id +">";
html += '<td><div class="goods-title"><div class="goods-img"><img layer-src="" src="'+ ns.img(item.sku_image) +'" alt=""></div><p class="multi-line-hiding goods-name">'+ item.sku_name +'</p></td>';
html += "<td>" + item.stock + "</td>";
html += "<td class='goods-price'>" + item.price + "</td>";
html += '<td><input type="text" class="layui-input topic_pic len-input topic-price" lay-verify="topic_price" min="0.00" value="'+ item.price + '"/></td>';
html += "<td class='operation'> <div class='table-btn '><a href='javascript:;' class='layui-btn' onclick='deleteGoods(this)'>删除商品</a></div></td>";
html += "</tr>";
selectGoodsSkuId.push(item.sku_id);
}
}
$("#goods tbody").html(html);
var html2 ='';
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];
html2 += '<div class="goods-list">';
html2 += '<img src="'+ ns.img(item.sku_image) +'">';
html2 += '<p class="goods-name">'+ item.sku_name +'</p>';
html2 += '</div>'
}
}
$(".custom-right .phone .all-goods").html(html2);
$("#goods_num").html(selectGoodsSkuId.length)
}, 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);
}
}
$("#goods_num").html(selectGoodsSkuId.length)
}
var file_upload = new Upload({
elem: '#uploadFile',
url: ns.url("topic://shop/topic/video"),
accept: 'file',
acceptMime: 'text/plain',
callback: function(res) {
console.log(res)
$("input[name='music_url']").val(res.data.path ||'')
}
});
function back(){
location.href = ns.url("topic://shop/topic/lists");
}
</script>
{/block}