466 lines
21 KiB
HTML
466 lines
21 KiB
HTML
{extend name="common/base"/}
|
||
{block name="style"}
|
||
<style type="text/css">
|
||
.editormd-code-toolbar select {
|
||
display: inline-block
|
||
}
|
||
|
||
.editormd li {
|
||
list-style: inherit;
|
||
}
|
||
</style>
|
||
{/block}
|
||
<!-- 主体 -->
|
||
{block name="body"}
|
||
<form class="layui-form p-4">
|
||
<div class="layui-tab layui-tab-brief">
|
||
|
||
<ul class="layui-tab-title">
|
||
<li class="layui-this">商品信息</li>
|
||
<li>规格设置</li>
|
||
<li>商品详情</li>
|
||
<li>营销设置</li>
|
||
<li>其他设置</li>
|
||
</ul>
|
||
|
||
<div class="layui-tab-content">
|
||
<div class="layui-tab-item layui-show">
|
||
<table class="layui-table layui-table-form">
|
||
|
||
<tr>
|
||
<td class="layui-td-gray">商品名称<font>*</font>
|
||
</td>
|
||
<td colspan="7"><input type="text" name="store_name" lay-verify="required" lay-reqText="请输入商品名称"
|
||
autocomplete="off" placeholder="请输入商品名称" class="layui-input"></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray">平台商品分类<font>*</font>
|
||
</td>
|
||
<td>
|
||
<div id="cate_id"></div>
|
||
</td>
|
||
<td class="layui-td-gray">品牌选择<font>*</font>
|
||
</td>
|
||
<td colspan="6">
|
||
<select name="brand_id" lay-verify="required" lay-search="">
|
||
<option value="">请选择</option>
|
||
{volist name='store_brand' id='vo'}
|
||
<option value="{$vo.brand_id}">{$vo.brand_name}</option>
|
||
{/volist}
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray">商户分类<font>*</font>
|
||
</td>
|
||
<td colspan="3">
|
||
<div id="mer_cate_id"></div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="layui-td-gray" style="vertical-align:top;">商品封面图</td>
|
||
<td colspan="12">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb">
|
||
上传缩略图(尺寸:750x750)
|
||
</button>
|
||
<div class="layui-upload-list" id="upload_box_thumb" style=" overflow: hidden;">
|
||
<img src=""
|
||
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
|
||
width="100" style="max-width: 100%; height:66px;" />
|
||
<input type="hidden" name="image" value="">
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="layui-td-gray" style="vertical-align:top;">商品轮播图</td>
|
||
<td colspan="12">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb2">
|
||
上传商品轮播图
|
||
</button>
|
||
|
||
<div class="layui-upload-list" id="upload_box_thumb2" style="overflow: hidden;">
|
||
<input type="hidden" name="slider_image" value="">
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td class="layui-td-gray">主图视频：<font>*</font>
|
||
</td>
|
||
<td colspan="7">video_link</td>
|
||
</tr> -->
|
||
<tr>
|
||
<td class="layui-td-gray">单位<font>*</font>
|
||
</td>
|
||
<td colspan="7"><input type="text" name="unit_name" lay-verify="required" lay-reqText="请输入单位"
|
||
autocomplete="off" placeholder="请输入单位" class="layui-input"></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="layui-td-gray">商品关键字<font>*</font>
|
||
</td>
|
||
<td colspan="7"><input type="text" name="keyword" lay-verify="required" lay-reqText="请输入商品关键字"
|
||
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">商品简介</td>
|
||
<td colspan="6">
|
||
<textarea class="layui-textarea" name="store_info"></textarea>
|
||
</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td class="layui-td-gray">优惠券：<font>*</font>
|
||
</td>
|
||
<td colspan="7">couponData</td>
|
||
</tr> -->
|
||
|
||
|
||
</table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table class="layui-table layui-table-form">
|
||
|
||
<!-- <tr>
|
||
<td class="layui-td-gray" style="background-color: #fff;width: 92px;">佣金设置</td>
|
||
<td colspan="6">
|
||
<input type="radio" name="status" value="1" title="单独设置">
|
||
<input type="radio" name="status" value="0" title="默认设置" checked>
|
||
</td>
|
||
</tr> -->
|
||
<!-- <tr>
|
||
<td class="layui-td-gray" style="text-align:left">付费会员价设置</td>
|
||
<td colspan="6">
|
||
</td>
|
||
</tr> -->
|
||
<tr>
|
||
<td colspan="6">
|
||
<!-- 规格类型 -->
|
||
<div id="fairy-is-attribute"></div>
|
||
<!--商品规格表-->
|
||
<div id="fairy-spec-table"></div>
|
||
<div id="fairy-sku-table"></div>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table class="layui-table layui-table-form">
|
||
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">商品详情</td>
|
||
<td colspan="6">
|
||
<textarea class="layui-textarea" id="container_content"></textarea>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table class="layui-table layui-table-form">
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">商品推荐</td>
|
||
<td colspan="6">
|
||
<input type="checkbox" name="is_good" title="店铺推荐">
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="layui-tab-item">
|
||
<table class="layui-table layui-table-form">
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">送货方式</td>
|
||
<td colspan="6">
|
||
<input type="checkbox" name="ziti" title="到店自提">
|
||
<input type="checkbox" name="kuaidi" title="快递配送">
|
||
</td>
|
||
<td class="layui-td-gray" style="text-align:left">是否包邮</td>
|
||
<td colspan="6">
|
||
<input type="radio" name="delivery_free" value="1" title="是"checked>
|
||
<input type="radio" name="delivery_free" value="0" title="否" >
|
||
</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td class="layui-td-gray" style="text-align:left">运费模板</td>
|
||
<td colspan="6">
|
||
</td>
|
||
</tr> -->
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">最少购买件数</td>
|
||
<td colspan="6">
|
||
<input type="text" name="once_min_count" lay-verify="required" lay-reqText="默认为0，则不限制购买件数"
|
||
autocomplete="off" placeholder="默认为0，则不限制购买件数" class="layui-input" value="0">
|
||
</td>
|
||
<td class="layui-td-gray" style="text-align:left">排序</td>
|
||
<td colspan="6">
|
||
<input type="text" name="sort" lay-verify="required" lay-reqText="默认为0，则不限制购买件数"
|
||
autocomplete="off" placeholder="默认为0，则不限制购买件数" class="layui-input" value="0">
|
||
</td>
|
||
</tr>
|
||
<!-- <tr>
|
||
<td class="layui-td-gray" style="text-align:left">限购类型</td>
|
||
<td colspan="6">
|
||
<input type="radio" name="pay_limit" value="0" title="不限购"checked>
|
||
<input type="radio" name="pay_limit" value="1" title="单次限购" >
|
||
<input type="radio" name="pay_limit" value="2" title="长期限购" >
|
||
</td>
|
||
</tr> -->
|
||
<!-- <tr>
|
||
<td class="layui-td-gray" style="text-align:left">平台保障服务</td>
|
||
<td colspan="6">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="layui-td-gray" style="text-align:left">商品参数</td>
|
||
<td colspan="6">
|
||
</td>
|
||
</tr> -->
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pt-3">
|
||
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
|
||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||
</div>
|
||
</form>
|
||
{/block}
|
||
<!-- /主体 -->
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script src="/static/assets/js/xm-select.js"></script>
|
||
<script>
|
||
var moduleInit = ['tool', 'tagpicker', 'tinymce','skuTable'];
|
||
var group_access = "{:session('gougu_admin')['group_access']}"
|
||
var multiple_images = [];
|
||
|
||
//单击图片删除图片 【注册全局函数】
|
||
function delMultipleImgs (this_img) {
|
||
//获取下标
|
||
var subscript = $("#upload_box_thumb2 img").index(this_img);
|
||
//删除图片
|
||
this_img.remove();
|
||
//删除数组
|
||
multiple_images.splice(subscript, 1);
|
||
//重新排序
|
||
multiple_images.sort();
|
||
$('#upload_box_thumb2 input').attr('value', multiple_images);
|
||
//返回
|
||
return;
|
||
}
|
||
function gouguInit () {
|
||
var form = layui.form, tool = layui.tool, tagspicker = layui.tagpicker, element = layui.element,skuTable = layui.skuTable;
|
||
|
||
function demo1 (id) {
|
||
var demo1 = xmSelect.render({
|
||
name: 'street_id',
|
||
el: '#demo1',
|
||
initValue: [street_id],
|
||
prop: {
|
||
name: 'name',
|
||
value: 'code',
|
||
},
|
||
data: [],
|
||
radio: true,
|
||
disabled: group_access == 2 || group_access == 4 ? true : false,
|
||
on: function (data) {
|
||
var arr = data.arr;
|
||
village(arr[0]['code'])
|
||
},
|
||
})
|
||
$.get('/api/geo/street?pcode=' + id, function (result) {
|
||
demo1.update({
|
||
data: result.data
|
||
})
|
||
});
|
||
}
|
||
function demo_cate_id () {
|
||
var demo_cate = xmSelect.render({
|
||
name: 'cate_id',
|
||
el: '#cate_id',
|
||
autoRow: true,
|
||
cascader: {
|
||
show: true,
|
||
indent: 200,
|
||
},
|
||
prop: {
|
||
name: 'name',
|
||
value: 'id',
|
||
},
|
||
data: [],
|
||
radio: true,
|
||
})
|
||
$.get('/admin/store_product/category_arr', function (result) {
|
||
demo_cate.update({
|
||
data: result.data
|
||
})
|
||
});
|
||
}
|
||
demo_cate_id()
|
||
function demo_mer_cate_id () {
|
||
var demo_cate = xmSelect.render({
|
||
name: 'mer_cate_id',
|
||
el: '#mer_cate_id',
|
||
autoRow: true,
|
||
cascader: {
|
||
show: true,
|
||
indent: 200,
|
||
},
|
||
prop: {
|
||
name: 'name',
|
||
value: 'id',
|
||
},
|
||
data: [],
|
||
radio: true,
|
||
})
|
||
$.get('/admin/store_product/category_arr?id=4', function (result) {
|
||
demo_cate.update({
|
||
data: result.data
|
||
})
|
||
});
|
||
}
|
||
demo_mer_cate_id()
|
||
var obj = skuTable.render({
|
||
//规格类型 0统一规格 1多规格
|
||
isAttributeValue: 0,
|
||
//规格类型容器id
|
||
isAttributeElemId: 'fairy-is-attribute',
|
||
//规格表容器id
|
||
specTableElemId: 'fairy-spec-table',
|
||
//sku表容器id
|
||
skuTableElemId: 'fairy-sku-table',
|
||
//规格拖拽排序
|
||
sortable: true,
|
||
//sku表相同属性值是否合并行
|
||
rowspan: true,
|
||
//请求成功返回状态码值
|
||
requestSuccessCode: 200,
|
||
//上传接口地址
|
||
//接口要求返回格式为 {"code": 200, "data": {"url": "xxx"}, "msg": ""}
|
||
uploadUrl: './json/upload.json',
|
||
//统一规格配置项
|
||
singleSkuTableConfig: {
|
||
thead: [
|
||
{title: '销售价(元)', icon: 'layui-icon-cols'},
|
||
{title: '市场价(元)', icon: 'layui-icon-cols'},
|
||
{title: '成本价(元)', icon: 'layui-icon-cols'},
|
||
{title: '库存', icon: 'layui-icon-cols'},
|
||
{title: '商品编号', icon: 'layui-icon-cols'},
|
||
{title: '重量', icon: 'layui-icon-cols'},
|
||
{title: '体积', icon: 'layui-icon-cols'},
|
||
// {title: '状态', icon: ''},extension_one extension_two svip_price
|
||
],
|
||
tbody: [
|
||
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
|
||
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
|
||
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
|
||
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
|
||
{type: 'input', field: 'bar_code', value: '', },
|
||
{type: 'input', field: 'weight', value: '0', verify: 'required|number', reqtext: '重量不能为空'},
|
||
{type: 'input', field: 'volume', value: '0', verify: 'required|number', reqtext: '体积不能为空'},
|
||
// {type: 'select', field: 'status', option: [{key: '启用', value: '1'}, {key: '禁用', value: '0'}], verify: 'required', reqtext: '状态不能为空'},
|
||
]
|
||
},
|
||
//多规格配置项
|
||
multipleSkuTableConfig: {
|
||
thead: [
|
||
{title: '图片', icon: ''},
|
||
{title: '销售价(元)', icon: 'layui-icon-cols'},
|
||
{title: '市场价(元)', icon: 'layui-icon-cols'},
|
||
{title: '成本价(元)', icon: 'layui-icon-cols'},
|
||
{title: '库存', icon: 'layui-icon-cols'},
|
||
{title: '商品编号', icon: 'layui-icon-cols'},
|
||
{title: '重量', icon: 'layui-icon-cols'},
|
||
{title: '体积', icon: 'layui-icon-cols'},
|
||
],
|
||
tbody: [
|
||
{type: 'image', field: 'image', value: '', verify: '', reqtext: ''},
|
||
{type: 'input', field: 'price', value: '', verify: 'required|number', reqtext: '销售价不能为空'},
|
||
{type: 'input', field: 'market_price', value: '0', verify: 'required|number', reqtext: '市场价不能为空'},
|
||
{type: 'input', field: 'cost_price', value: '0', verify: 'required|number', reqtext: '成本价不能为空'},
|
||
{type: 'input', field: 'stock', value: '0', verify: 'required|number', reqtext: '库存不能为空'},
|
||
{type: 'input', field: 'bar_code', value: '', },
|
||
{type: 'input', field: 'weight', value: '0', verify: 'required|number', reqtext: '重量不能为空'},
|
||
{type: 'input', field: 'volume', value: '0', verify: 'required|number', reqtext: '体积不能为空'},
|
||
]
|
||
},
|
||
//商品id 配合specDataUrl和skuDataUrl使用
|
||
productId: '',
|
||
//规格数据, 一般从后台获取
|
||
specData: [],
|
||
});
|
||
|
||
//上传缩略图
|
||
var upload_thumb = layui.upload.render({
|
||
elem: '#upload_btn_thumb',
|
||
url: '/admin/api/upload',
|
||
done: function (res) {
|
||
//如果上传失败
|
||
if (res.code == 1) {
|
||
return layer.msg('上传失败');
|
||
}
|
||
//上传成功
|
||
$('#upload_box_thumb input').attr('value', res.data.filepath);
|
||
$('#upload_box_thumb img').attr('src', res.data.filepath);
|
||
}
|
||
});
|
||
//上传商品轮播图
|
||
var upload_thumb = layui.upload.render({
|
||
elem: '#upload_btn_thumb2',
|
||
url: '/admin/api/upload',
|
||
multiple: true,
|
||
before: function (obj) {
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function (index, file, result) {
|
||
$('#upload_box_thumb2').append(`
|
||
<img src="${result}"
|
||
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
|
||
width="100" style="max-width: 100%; height:66px;" alt="${file.name}" onclick="delMultipleImgs(this)" title="点击删除"/>
|
||
`)
|
||
});
|
||
},
|
||
done: function (res) {
|
||
//如果上传失败
|
||
if (res.code == 1) {
|
||
return layer.msg('上传失败');
|
||
}
|
||
//上传成功
|
||
//追加图片成功追加文件名至图片容器
|
||
multiple_images.push(res.data.filepath);
|
||
$('#upload_box_thumb2 input').attr('value', multiple_images);
|
||
// $('#upload_box_thumb2 img').attr('src', res.data.filepath);
|
||
}
|
||
});
|
||
|
||
var editor = layui.tinymce;
|
||
var edit = editor.render({
|
||
selector: "#container_content",
|
||
height: 500
|
||
});
|
||
//监听提交
|
||
form.on('submit(webform)', function (data) {
|
||
data.field.content = tinyMCE.editors['container_content'].getContent();
|
||
if (data.field.content == '') {
|
||
layer.msg('请先完善商品详情');
|
||
return false;
|
||
}
|
||
let callback = function (e) {
|
||
layer.msg(e.msg);
|
||
if (e.code == 0) {
|
||
tool.tabRefresh(71);
|
||
tool.sideClose(1000);
|
||
}
|
||
}
|
||
tool.post('/admin/store_product/add', data.field, callback);
|
||
return false;
|
||
});
|
||
|
||
}
|
||
</script>
|
||
{/block}
|
||
<!-- /脚本 --> |