Files
duolamaojiazhen/application/admin/view/points/edit.html
2025-12-22 13:59:40 +08:00

630 lines
27 KiB
HTML

{layout name="layout2" /}
<link rel="stylesheet" href="/static/admin/css/goods.css" media="all">
<div class="">
<div class="layui-tab-content layui-form">
<div class="layui-tab-item goods-content layui-show">
<div class="layui-card-body" pad15>
<div lay-filter="">
<div class="layui-form-item">
<label class="layui-form-label"><span class="form-label-asterisk">*</span>商品名称:</label>
<input name="id" type="hidden">
<div class="layui-input-block">
<input type="text" name="name" lay-verify="custom_required" lay-verType="tips"
autocomplete="off"
switch-tab="0" verify-msg="请输入材料的名称" placeholder="请输入材料名称"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">隶属类别:</label>
<div class="layui-input-block">
<select name="brand_id" lay-verType="tips" placeholder="请选择原料分类" switch-tab="0" verify-msg="请选择原料分类">
<option value="">请选择原料分类</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兑换积分:</label>
<div class="layui-input-block">
<input type="text" name="price" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品单位:</label>
<div class="layui-input-block">
<input type="text" maxlength="32" name="unit" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 0px">
<label class="layui-form-label"><span class="form-label-asterisk">*</span>商品图片:</label>
<div style="height:80px;line-height:80px">
<div class="master-image" ></div>
<div class="goods-img-add goods-image" lay-verify="image" lay-verType="tips" switch-tab="0" verify-msg="选择图片"></div>
</div>
<br>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品库存:</label>
<div class="layui-input-block">
<input type="text" name="inventory" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">库存警告:</label>
<div class="layui-input-block">
<input type="text" name="warn" value="10" lay-verType="tips" autocomplete="off" switch-tab="0" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">商品详情:</label>
<div class="layui-input-block">
<textarea id="content" name="content" placeholder="请输入内容不超100个字符" class="layui-textarea"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="edit-submit" id="edit-submit" value="确认">
</div>
</div>
</div>
<!---------------------------------html模板---------------------------------->
<script type="text/html" id="template-goods-image">
<li class="goods-li">
<input name="goods_image[]" type="hidden" value="{image-src}">
<img class="goods-img goods_image" src="{image-src}">
<a class="goods-img-del-x" style="display: none;">x</a></li>
</script>
<script type="text/javascript">
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
var dragstart = 0;
var swop_element_ed = -1;
var create_table_by_spec = null;
var spec_table_data = [];
var spec_value_temp_id_number = 0;
var likeedit = null
layui.config({
version:"{$front_version}",
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'element', 'jquery', 'like', 'likeedit'], function () {
var $ = layui.$;
var like = layui.like;
var form = layui.form;
likeedit = layui.likeedit;
$('.first_ratio').bind('input propertychange', function() {
var that = $(this);
var value = that.val();
format(that,value)
});
$('.second_ratio').bind('input propertychange', function() {
var that = $(this);
var value = that.val();
format(that,value)
});
$('.three_ratio').bind('input propertychange', function() {
var that = $(this);
var value = that.val();
format(that,value)
});
//------------------------基本信息----------------------------------
//商品主图事件
$(document).on('mouseenter', '.goods-li', function () {
$(this).children().last().show();
});
$(document).on('mouseleave', '.goods-li', function () {
$(this).children().last().hide();
});
$(document).on('click', '.goods-li', function () {
var src = $(this).children('img').attr('src');
like.showImg(src,600);
});
//主图显示删除按钮
$(document).on('mouseenter','.master-image',function () {
$(this).children('.goods-image-del').show();
})
$(document).on('mouseleave', '.master-image', function () {
$(this).children('.goods-image-del').hide();
});
$(document).on('click', '.master-image', function () {
var src = $(this).children('img').attr('src');
like.showImg(src,600);
});
//分享海报删除按钮
$(document).on('mouseenter','.poster-image',function () {
$(this).children('.goods-image-del').show();
})
$(document).on('mouseleave', '.poster-image', function () {
$(this).children('.goods-image-del').hide();
});
$(document).on('click', '.poster-image', function () {
var src = $(this).children('img').attr('src');
like.showImg(src,600);
});
$(document).on('click', '.goods-img-del-x', function () {
if($(this).hasClass('goods-image-del')){
$(this).parent().next().show();
$(this).parent().children().remove();
}
$(this).parent().remove();
return false;
});
like.imageUpload('.goods-img-add', function (uris, element) {
if(element.hasClass('goods-image')){
if(uris.length>1){
layer.msg('最多最能选中1张图片');
return;
}
var html = '' +
'<input name="image" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '">' +
' <img class="goods-img" src="' + uris[0] + '">\n' +
'<a class="goods-img-del-x goods-image-del">x</a>';
element.prev().append(html);
element.css('display','none');;
return 0;
}
if(element.hasClass('poster-upload')){
if(uris.length>1){
layer.msg('最多最能选中1张图片');
return;
}
var html = '' +
'<input name="poster" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '">' +
' <img class="goods-img" src="' + uris[0] + '">\n' +
'<a class="goods-img-del-x goods-image-del">x</a>';
element.prev().append(html);
element.css('display','none');;
return 0;
}
var count = element.prev().children().length;
count = !count ? 0:count;
if (count+uris.length > 8) {
layer.msg('最多最能选中8张图片');
return;
}
uris = uris.reverse();
for(var i in uris){
var uri = uris[i];
var template_goods_image = $('#template-goods-image').html();
element.prev().append(template_goods_image.replace('{image-src}', like.getUrlFileName(uri, '{$storageUrl}')).replace('{image-src}', uri));
}
}, true);
//图片拉拽
$(document).on('dragstart', '.goods-li', function (e) {
dragstart = e.offsetX;
});
$(document).on('dragend', '.goods-li', function (e) {
swop_element_ed = -1;
});
$(document).on('mousedown', '.goods-li', function (e) {
swop_element_ed = -1;
});
$(document).on('dragover', '.goods-li', function (e) {
e.preventDefault();
swop_element = parseInt((e.clientX - dragstart) / 100) - 1;
swop_element = swop_element <= 0 ? 0 : swop_element;
my_element = $(this).prevAll().length;
if (swop_element == my_element) {
return;
}
if (swop_element == swop_element_ed) {
return;
}
swop_element_ed = swop_element;
swop($(this), $(this).parent().children().eq(swop_element));
});
//渲染品牌
var brands = {$brand_lists | raw};
setBrand();
function setBrand(default_id) {
var brand_select_html = '<option value="">请选择员工分组</option>';
for (var i in brands) {
brand_select_html += '<option value="' + brands[i]['id'] + '">' + brands[i]['name'] + '</option>';
}
$('select[name="brand_id"]').html(brand_select_html);
$('select[name="brand_id"]').val(default_id);
form.render('select');
}
//添加规格项目
function addSpec(value){
value = value===undefined?'':value;
var element_spec = $('#goods-spec-project');
var count = $('.goods-spec').size();
if (count > 2) {
layer.msg('最多添加3个规格项目');
return;
}
var template_spec = $('#template-spec').html();
element_spec.append(template_spec.replace('{value}',value));
$('#goods-spec-project').parent().show();
form.render('checkbox');
}
$('#add-spec').click(function () {
addSpec();
});
//显示或隐藏规格项目删除按钮绑定
$(document).on('mouseenter', '.goods-spec', function () {
$(this).find('.goods-spec-del-x').show();
});
$(document).on('mouseleave', '.goods-spec', function () {
$(this).find('.goods-spec-del-x').hide();
});
//删除规格项目绑定
$(document).on('click', '.goods-spec-del-x', function () {
$(this).parent().remove();
var goods_spec_project = $('#goods-spec-project');
if (goods_spec_project.children().length == 0) {
goods_spec_project.parent().hide();
}
});
//添加或删除规格项目后续操作
function specValueLater(){
$('.add-spec-value').each(function(){
add_spec_value = $(this);
var spec_values = '';
add_spec_value.parent().parent().find('.goods-spec-value-input').each(function () {
spec_values += $(this).val() + ',';
});
add_spec_value.parent().find('.spec_values').val(spec_values.substring(0, spec_values.lastIndexOf(',')));
var spec_value_ids = '';
add_spec_value.parent().parent().find('.goods-sepc-value-id-input').each(function () {
spec_value_ids += $(this).val() + ',';
});
add_spec_value.parent().find('.spec_value_ids').val(spec_value_ids.substring(0, spec_value_ids.lastIndexOf(',')));
triggerCreateTableBySepc();
});
}
//添加规格项
function addSpecvalue(add_spec_value,spec,spec_id){
var template_spec_value = $('#template-spec-value').html();
var template_spec_value_html = template_spec_value.replace('{spec_value_temp_id}', spec_value_temp_id_number--);
template_spec_value_html = template_spec_value_html.replace('{spec_value_id}',spec_id);
template_spec_value_html = template_spec_value_html.replace('{spec_value}', spec)
add_spec_value.parent().before(template_spec_value_html);
var div = add_spec_value.parent().parent().parent().parent();
var status = div.find('.batch-spec-image-switch').first().is(':checked');
if(status){
div.find('.batch-spec-image').show();
}else{
div.find('.batch-spec-image').hide();
}
}
form.on('switch(batch-spec-image-switch)', function(data){
var status = data.elem.checked;
$('.batch-spec-image-switch').prop("checked",false);
if(status) {
$('.batch-spec-image').hide();
$(this).parent().parent().parent().parent().find('.batch-spec-image').show();
$(this).prop("checked",true);
}else{
$(this).parent().parent().parent().parent().find('.batch-spec-image').hide();
}
form.render('checkbox');
});
//批量添加规格项绑定
$(document).on('click', '.add-spec-value', function () {
var add_spec_value = $(this);
layer.prompt({title: '输入规格值,多个请换行', formType: 2}, function (text, index) {
layer.close(index);
var specs = text.split('\n');
for (var i in specs) {
specs[i] = specs[i].trim();
}
specs = unique(specs);
var added_specs = [];
add_spec_value.parent().parent().find('.goods-spec-value-input').each(function () {
added_specs.push($(this).val().trim());
});
for (var i in specs) {
var spec = specs[i].trim();
if (spec == '' || in_array(spec, added_specs)) {
//已存或为空的不添加
continue;
}
addSpecvalue(add_spec_value,spec,0);
}
specValueLater();
});
});
//批量填充
$('.batch-spec-content').click(function(){
var title = $(this).text();
var input_name = $(this).attr('input-name');
layer.prompt({
formType: 3
,title: '批量填写'+title
},function(value, index, elem){
$('input[name="'+input_name+'[]"]').val(value);
//保存值到本地
$('#more-spec-lists-table input').each(function(){
var key = $(this).attr('name') + $(this).parent().parent().attr('spec-value-temp-ids');
spec_table_data[key] = $(this).val();
});
layer.close(index);
});
});
//显示或隐藏规格项删除按钮
$(document).on('mouseenter', '.goods-spec-value', function () {
$(this).find('.goods-spec-value-del-x').show();
});
$(document).on('mouseleave', '.goods-spec-value', function () {
$(this).find('.goods-spec-value-del-x').hide();
});
// 单规格图片
like.imageUpload('.goods-one-spec-img-add', function (uris, element) {
if(uris.length>1){
layer.msg('最多最能选中1张图片');
return;
}
element.hide();
var key = element.parent().parent().parent().attr('spec-value-temp-ids');
spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
$(element).parent().html('<input name="one_spec_image" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-one-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
});
$(document).on('mouseenter', '.goods-spec-img-div', function () {
$(this).find('.goods-one-spec-img-del-x').show();
});
$(document).on('mouseleave', '.goods-spec-img-div', function () {
$(this).find('.goods-one-spec-img-del-x').hide();
});
$(document).on('click', '.goods-one-spec-img-del-x', function () {
$(this).parent().html('<input type="hidden" name="one_spec_image"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-one-spec-img-add">');
});
//多规格图片
like.imageUpload('.goods-spec-img-add', function (uris, element) {
if(uris.length>1){
layer.msg('最多最能选中1张图片');
return;
}
element.hide();
var key = element.parent().parent().parent().attr('spec-value-temp-ids');
spec_table_data["spec_image[]"+key] = uris[0];//保存图片地址
$(element).parent().html('<input name="spec_image[]" type="hidden" value="' + like.getUrlFileName(uris[0], '{$storageUrl}') + '"><a class="goods-spec-img-del-x">x</a><img class="goods-spec-img" src="' + uris[0] + '">');
});
$(document).on('mouseenter', '.goods-spec-img-div', function () {
$(this).find('.goods-spec-img-del-x').show();
});
$(document).on('mouseleave', '.goods-spec-img-div', function () {
$(this).find('.goods-spec-img-del-x').hide();
});
$(document).on('click', '.goods-spec-img-del-x', function () {
var key = 'spec_image[]' + $(this).parent().parent().parent().attr('spec-value-temp-ids');
$(this).parent().html('<input type="hidden" name="spec_image[]"><img src="/static/common/image/plug/goods-lists-add-image.png" class="goods-spec-img-add">');
spec_table_data[key] = '';
});
$(document).on('click', '.goods-spec-img', function () {
like.showImg($(this).attr('src'),600);
});
//规格生成表格
createTableBySepc = function () {
if ($('.goods-spec').size() <= 0) {
$('#more-spec-lists').hide();
return;
}
$('#more-spec-lists').show();
var table_title = [];
var table_data = [];
var spec_value_temp_arr = [];
var i = 0;
var th_html = $('#template-spec-table-th').html();
var tr_html = $('#template-spec-table-tr').html();
//遍历规格项目
$('.goods-spec').each(function () {
var spec_name = $(this).find('.spec_name').first().val();
if (isEmptyString(spec_name)) {
return true;
}
table_title[i] = spec_name;
table_data[i] = [];
spec_value_temp_arr[i] = [];
var j = 0;
$(this).find('.goods-spec-value .goods-spec-value-input').each(function () {
var spec_value = $(this).val();
var spec_value_temp_id = $(this).attr('spec-value-temp-id');
if (isEmptyString(spec_value)) {
return true;
}
table_data[i][j] = spec_value;
spec_value_temp_arr[i][j] = spec_value_temp_id;
j++;
});
i++;
});
table_html = '';
//表格头部组装
spec_th_html = '';
for (var i in table_title) {
spec_th_html += '<th>' + table_title[i] + '</th>';
}
table_html = th_html.replace('{spec_th}', spec_th_html);
spec_value_temp_arr = cartesianProduct(spec_value_temp_arr);
table_data = cartesianProduct(table_data);
for (var i in table_data) {
var spec_tr_html = '';
var tr_name_arr = [];
var specs = '';
if (Array.isArray(table_data[i])) {
//根据规格创建tr的id
var spec_value_temp_ids = '';
for(var j in spec_value_temp_arr[i]){
spec_value_temp_ids += spec_value_temp_arr[i][j]+',';
}
spec_value_temp_ids = spec_value_temp_ids.substring(0, spec_value_temp_ids.lastIndexOf(','));
spec_tr_html += '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
for (var j in table_data[i]) {
spec_tr_html += '<td>' + table_data[i][j] + '</td>';
tr_name_arr[j] = table_data[i][j];
specs += table_data[i][j].replace(',', '') + ',';
}
} else {
var spec_value_temp_ids = spec_value_temp_arr[i];
spec_tr_html = '<tr spec-value-temp-ids="'+spec_value_temp_ids+'">';
spec_tr_html += '<td>' + table_data[i] + '</td>';
specs += table_data[i].replace(',', '') + ',';
}
specs = specs.substring(0, specs.lastIndexOf(','));
spec_table_data["spec_value_str[]"+spec_value_temp_ids] = specs;
spec_tr_html += '<td style="display: none"><input type="hidden" name="spec_value_str[]" value="' + specs + '"><input type="hidden" name="item_id[]" value=""></td>';
table_html += tr_html.replace('{spec_td}', spec_tr_html);
}
$('#more-spec-lists-table').html(table_html);
setTableValue();
}
//触发规格生成表格
function triggerCreateTableBySepc() {
clearTimeout(create_table_by_spec);
create_table_by_spec = setTimeout(createTableBySepc, 1000);
}
//各种触发生成规格事件
triggerCreateTableBySepc();
$('#add-spec').click(function () {
triggerCreateTableBySepc();
});
$(document).on('click', '.goods-spec-del-x', function () {
triggerCreateTableBySepc();
});
$(document).on('click', '.add-spec-value', function () {
triggerCreateTableBySepc();
});
$(document).on('click', '.goods-spec-value-del-x', function () {
triggerCreateTableBySepc();
});
$(document).on('input', '.goods-spec input', function () {
triggerCreateTableBySepc();
specValueLater();
});
//规格数据本地保存
$(document).on('input', '#more-spec-lists-table input', function () {
var key = $(this).attr('name') + $(this).parent().parent().attr('spec-value-temp-ids');
spec_table_data[key] = $(this).val();
});
//动态渲染已保存的值
function setTableValue() {
$('#more-spec-lists-table').find('input').each(function () {
var key = $(this).attr('name') + $(this).parent().parent().attr('spec-value-temp-ids');
if(spec_table_data[key]!== undefined){
$(this).val(spec_table_data[key]);
}
});
$('.goods-spec-img-div').each(function(){
var key = $(this).parent().parent().attr('spec-value-temp-ids');
if(spec_table_data["spec_image[]"+key]){
$(this).html('<input name="spec_image[]" type="hidden" value="' + spec_table_data["spec_image[]"+key] + '"><a class="goods-spec-img-del-x">x</a><img class="goods-spec-img" src="' + spec_table_data["spec_image[]"+key] + '">');
}
});
}
likeedit.set({
uploadImage: {
url: "{:url('file/image')}",
type: 'post'
}
});
var likeedit_index = likeedit.build('content'); //建立编辑器
form.verify({
content: function () {
likeedit.sync(likeedit_index)
}
});
//------------------------编辑页面----------------------------------
{notempty name='info'}
var goods_info= {$info|raw|default=''};
// console.log(goods_info);
$('input[name="id"]').val(goods_info['id']);
$('input[name="name"]').val(goods_info['name']);
setBrand(goods_info['brand_id']); //渲染分类
$('input[name="price"]').val(goods_info['price']);
$('input[name="unit"]').val(goods_info['unit']);
$('input[name="inventory"]').val(goods_info['inventory']);
$('input[name="warn"]').val(goods_info['warn']);
likeedit.setContent(likeedit_index,goods_info['content']);
var image_html = '';
for(var i in goods_info['goods_image']) {
var template_goods_image = $('#template-goods-image').html();
image_html+= template_goods_image.replace('{image-src}', goods_info['base']['goods_image'][i]['uri']).replace('{image-src}', goods_info['base']['goods_image'][i]['abs_image']);
}
if(image_html) {
$('.goods-img-add').parent().find('ul').append(image_html);
}
//渲染商品主图
if(goods_info['images']){
var html = '' +
'<input name="image" type="hidden" value="' + goods_info['images'] + '">' +
' <img class="goods-img" src="' + goods_info['images'] + '">\n' +
'<a class="goods-img-del-x goods-image-del">x</a>'
$('.master-image').html(html);
$('.goods-image').hide();
}
form.render();
{/notempty}
//------------------------编辑页面----------------------------------
});
</script>