448 lines
16 KiB
HTML
448 lines
16 KiB
HTML
{include file="Public/header3" /}
|
|
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" />
|
|
<style>
|
|
#editor—wrapper {
|
|
border: 1px solid #ccc;
|
|
z-index: 100;
|
|
}
|
|
|
|
#toolbar-container {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
#editor-container {
|
|
height: 500px;
|
|
}
|
|
|
|
.category-checkbox {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.category-label {
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
border: 1px solid #e6e6e6;
|
|
background-color: #f2f2f2;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
margin-bottom: 5px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.category-label:hover {
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
.category-label.checked {
|
|
background-color: #009688;
|
|
color: #fff;
|
|
border-color: #009688;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="layui-form" style="width: 90%; margin: 0 auto; padding-top: 20px;">
|
|
<input type="hidden" name="id" value="{$info.id}">
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">商品名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="product_name" id="product_name" autocomplete="off" placeholder="请输入商品名称"
|
|
class="layui-input" lay-verify="required" value="{$info.product_name}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">所属分类</label>
|
|
<div class="layui-input-block" id="categoriesContainer">
|
|
{foreach $categories as $category}
|
|
<label class="category-label {if in_array($category.category_name, $selectedCategories)}checked{/if}">
|
|
<input type="checkbox" lay-ignore class="custom-checkbox" name="categories[]" value="{$category.category_name}" style="display:none;" {if in_array($category.category_name, $selectedCategories)}checked{/if}>
|
|
{$category.category_name}
|
|
</label>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">商品价格</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="price" id="price" autocomplete="off" placeholder="请输入价格" class="layui-input"
|
|
lay-verify="required|number" value="{$info.price}">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">商品库存</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="stock" id="stock" autocomplete="off" placeholder="请输入库存" class="layui-input"
|
|
lay-verify="required|number" value="{$info.stock}">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">剩余库存</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" name="sales" id="sales" autocomplete="off" placeholder="请输入销量" class="layui-input"
|
|
value="{$info.sales}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">封面图</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="uploadCover">上传封面图</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="coverPreview" style="max-width: 200px; max-height: 150px;"
|
|
src="{$info.cover_image}">
|
|
</div>
|
|
<input type="hidden" name="cover_image" id="cover_image" value="{$info.cover_image}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">详情图片1</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="uploadDetail1">上传详情图1</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="detail1Preview" style="max-width: 200px; max-height: 150px;"
|
|
src="{$info.detail_image1}">
|
|
</div>
|
|
<input type="hidden" name="detail_image1" id="detail_image1" value="{$info.detail_image1}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">详情图片2</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="uploadDetail2">上传详情图2</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="detail2Preview" style="max-width: 200px; max-height: 150px;"
|
|
src="{$info.detail_image2}">
|
|
</div>
|
|
<input type="hidden" name="detail_image2" id="detail_image2" value="{$info.detail_image2}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">详情图片3</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="uploadDetail3">上传详情图3</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="detail3Preview" style="max-width: 200px; max-height: 150px;"
|
|
src="{$info.detail_image3}">
|
|
</div>
|
|
<input type="hidden" name="detail_image3" id="detail_image3" value="{$info.detail_image3}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">详情图片4</label>
|
|
<div class="layui-input-block">
|
|
<button type="button" class="layui-btn" id="uploadDetail4">上传详情图4</button>
|
|
<div class="layui-upload-list">
|
|
<img class="layui-upload-img" id="detail4Preview" style="max-width: 200px; max-height: 150px;"
|
|
src="{$info.detail_image4}">
|
|
</div>
|
|
<input type="hidden" name="detail_image4" id="detail_image4" value="{$info.detail_image4}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">商品描述</label>
|
|
<div class="layui-input-block">
|
|
<textarea name="product_desc" id="product_desc" placeholder="请输入商品描述"
|
|
class="layui-textarea">{$info.product_desc}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">详情内容</label>
|
|
<div class="layui-input-block">
|
|
<div id="editor—wrapper">
|
|
<div id="toolbar-container"><!-- 工具栏 --></div>
|
|
<div id="editor-container"><!-- 编辑器 --></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">商品状态</label>
|
|
<div class="layui-input-inline">
|
|
<input type="radio" name="status" value="0" title="下架" {if $info.status eq 0}checked{/if}>
|
|
<input type="radio" name="status" value="1" title="上架" {if $info.status eq 1}checked{/if}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">热销商品</label>
|
|
<div class="layui-input-inline">
|
|
<input type="radio" name="is_hot" value="0" title="否" {if $info.is_hot eq 0}checked{/if}>
|
|
<input type="radio" name="is_hot" value="1" title="是" {if $info.is_hot eq 1}checked{/if}>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">新品</label>
|
|
<div class="layui-input-inline">
|
|
<input type="radio" name="is_new" value="0" title="否" {if $info.is_new eq 0}checked{/if}>
|
|
<input type="radio" name="is_new" value="1" title="是" {if $info.is_new eq 1}checked{/if}>
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<label class="layui-form-label">推荐</label>
|
|
<div class="layui-input-inline">
|
|
<input type="radio" name="is_recommend" value="0" title="否" {if $info.is_recommend eq 0}checked{/if}>
|
|
<input type="radio" name="is_recommend" value="1" title="是" {if $info.is_recommend eq 1}checked{/if}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
{include file="Public/footer" /}
|
|
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
|
|
<script>
|
|
const { createEditor, createToolbar } = window.wangEditor
|
|
|
|
const editorConfig = {
|
|
placeholder: 'Type here...',
|
|
onChange(editor) {
|
|
const html = editor.getHtml()
|
|
console.log('editor content', html)
|
|
},
|
|
MENU_CONF: {}
|
|
}
|
|
editorConfig.MENU_CONF['uploadImage'] = {
|
|
customUpload: async (file, insertFn) => {
|
|
console.log(file);
|
|
|
|
// 上传图片
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const res = await fetch('/admin/picture?dir=products', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
console.log("res", res);
|
|
|
|
const result = await res.json();
|
|
|
|
// 成功后插入图片
|
|
insertFn(result.data.imgurl, '图片描述', result.data.imgurl);
|
|
}
|
|
}
|
|
|
|
|
|
const editor = createEditor({
|
|
selector: '#editor-container',
|
|
html: '{$info.detail_html|raw}',
|
|
config: editorConfig,
|
|
mode: 'default',
|
|
})
|
|
|
|
const toolbarConfig = {}
|
|
|
|
const toolbar = createToolbar({
|
|
editor,
|
|
selector: '#toolbar-container',
|
|
config: toolbarConfig,
|
|
mode: 'default',
|
|
})
|
|
|
|
layui.use(['form', 'upload', 'layer', 'laydate'], function () {
|
|
var form = layui.form,
|
|
layer = layui.layer,
|
|
upload = layui.upload,
|
|
$ = layui.jquery;
|
|
|
|
// 自定义复选框的点击事件
|
|
$('.category-label').click(function() {
|
|
// 获取隐藏的checkbox
|
|
var checkbox = $(this).find('.custom-checkbox');
|
|
|
|
// 切换选中状态
|
|
if(checkbox.prop('checked')) {
|
|
checkbox.prop('checked', false);
|
|
$(this).removeClass('checked');
|
|
} else {
|
|
checkbox.prop('checked', true);
|
|
$(this).addClass('checked');
|
|
}
|
|
});
|
|
|
|
// 封面图上传
|
|
upload.render({
|
|
elem: '#uploadCover',
|
|
url: '/admin/picture',
|
|
accept: "file",
|
|
data: {
|
|
dir: 'products'
|
|
},
|
|
done: function (res) {
|
|
if (res.status == 1) {
|
|
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
|
$("#coverPreview").attr("src", res.data.path);
|
|
$("#cover_image").val(res.data.imgurl);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
});
|
|
|
|
// 详情图1上传
|
|
upload.render({
|
|
elem: '#uploadDetail1',
|
|
url: '/admin/picture',
|
|
accept: "file",
|
|
data: {
|
|
dir: 'products'
|
|
},
|
|
done: function (res) {
|
|
if (res.status == 1) {
|
|
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
|
$("#detail1Preview").attr("src", res.data.path);
|
|
$("#detail_image1").val(res.data.imgurl);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
});
|
|
|
|
// 详情图2上传
|
|
upload.render({
|
|
elem: '#uploadDetail2',
|
|
url: '/admin/picture',
|
|
accept: "file",
|
|
data: {
|
|
dir: 'products'
|
|
},
|
|
done: function (res) {
|
|
if (res.status == 1) {
|
|
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
|
$("#detail2Preview").attr("src", res.data.path);
|
|
$("#detail_image2").val(res.data.imgurl);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
});
|
|
|
|
// 详情图3上传
|
|
upload.render({
|
|
elem: '#uploadDetail3',
|
|
url: '/admin/picture',
|
|
accept: "file",
|
|
data: {
|
|
dir: 'products'
|
|
},
|
|
done: function (res) {
|
|
if (res.status == 1) {
|
|
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
|
$("#detail3Preview").attr("src", res.data.path);
|
|
$("#detail_image3").val(res.data.imgurl);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
});
|
|
|
|
// 详情图4上传
|
|
upload.render({
|
|
elem: '#uploadDetail4',
|
|
url: '/admin/picture',
|
|
accept: "file",
|
|
data: {
|
|
dir: 'products'
|
|
},
|
|
done: function (res) {
|
|
if (res.status == 1) {
|
|
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
|
$("#detail4Preview").attr("src", res.data.path);
|
|
$("#detail_image4").val(res.data.imgurl);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
|
}
|
|
});
|
|
|
|
// 表单提交
|
|
form.on('submit(saveBtn)', function (data) {
|
|
// 获取富文本编辑器内容
|
|
data.field.detail_html = editor.getHtml();
|
|
|
|
if (!data.field.product_name) {
|
|
layer.msg('商品名称不能为空', { icon: 2 });
|
|
return false;
|
|
}
|
|
|
|
if (!data.field.price) {
|
|
layer.msg('商品价格不能为空', { icon: 2 });
|
|
return false;
|
|
}
|
|
|
|
// 检查是否选择了分类
|
|
var selectedCategories = [];
|
|
$('.custom-checkbox:checked').each(function() {
|
|
selectedCategories.push($(this).val());
|
|
});
|
|
|
|
if (selectedCategories.length === 0) {
|
|
layer.msg('请至少选择一个分类', { icon: 2 });
|
|
return false;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '{:url("/admin/ff_products_edit")}',
|
|
type: 'POST',
|
|
data: data.field,
|
|
success: function (res) {
|
|
if (res.status) {
|
|
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
|
|
parent.layui.table.reload('tableList');
|
|
var iframeIndex = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(iframeIndex);
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2 });
|
|
}
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
});
|
|
</script> |