mkm/nk-lihaink-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品多图上传

Browse Source
This commit is contained in:
彭桃 2023-02-22 11:51:55 +08:00
parent b4a2dd1446
commit a631133b4c
3 changed files with 93 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/admin/controller/StoreProduct.php
View File

@ -53,7 +53,6 @@ class StoreProduct extends BaseController
{ {
if (request()->isAjax()) { if (request()->isAjax()) {
$param = get_params(); $param = get_params();
// 检验完整性 // 检验完整性
try { try {
validate(StoreProductValidate::class)->check($param); validate(StoreProductValidate::class)->check($param);
@ -95,6 +94,8 @@ class StoreProduct extends BaseController
$detail = $this->model->getStoreProductById($product_id); $detail = $this->model->getStoreProductById($product_id);
if (!empty($detail)) { if (!empty($detail)) {
$detail['content'] = Db::table('cms_store_product_content')->where('product_id',$detail['product_id'])->value('content'); $detail['content'] = Db::table('cms_store_product_content')->where('product_id',$detail['product_id'])->value('content');
$detail['slider_image_arr'] = explode(',',$detail['slider_image']);
// halt($detail['slider_image_arr']);
View::assign('detail', $detail); View::assign('detail', $detail);
$store_brand= Db::connect('shop')->table('eb_store_brand')->where(['is_show' => 1]) $store_brand= Db::connect('shop')->table('eb_store_brand')->where(['is_show' => 1])
->select(); ->select();

57
app/admin/view/store_product/add.html
View File

@ -86,13 +86,11 @@
<td> <td>
<div class="layui-upload"> <div class="layui-upload">
<button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb2"> <button type="button" class="layui-btn layui-btn-sm" id="upload_btn_thumb2">
上传缩略图(尺寸:428x270) 上传商品轮播图
</button> </button>
<div class="layui-upload-list" id="upload_box_thumb2" <div class="layui-upload-list" id="upload_box_thumb2"
style="width: 428px; height:270px; overflow: hidden;"> style="width: 428px; height:270px; 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="slider_image" value=""> <input type="hidden" name="slider_image" value="">
</div> </div>
</div> </div>
@ -112,23 +110,23 @@
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">售价<font>*</font></td> <td class="layui-td-gray">售价<font>*</font></td>
<td colspan="7"><input type="text" name="price" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="price" lay-verify="required|number" lay-reqText="请输入售价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td> autocomplete="off" placeholder="请输入售价" class="layui-input"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">成本价<font>*</font></td> <td class="layui-td-gray">成本价<font>*</font></td>
<td colspan="7"><input type="text" name="cost" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="cost" lay-verify="required|number" lay-reqText="请输入成本价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td> autocomplete="off" placeholder="请输入成本价" class="layui-input"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">市场价<font>*</font></td> <td class="layui-td-gray">市场价<font>*</font></td>
<td colspan="7"><input type="text" name="ot_price" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="ot_price" lay-verify="required|number" lay-reqText="请输入市场价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td> autocomplete="off" placeholder="请输入市场价" class="layui-input"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">库存<font>*</font></td> <td class="layui-td-gray">库存<font>*</font></td>
<td colspan="7"><input type="text" name="stock" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="stock" lay-verify="required|number" lay-reqText="请输入库存"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input"></td> autocomplete="off" placeholder="请输入库存" class="layui-input"></td>
</tr> </tr>
<tr> <tr>
@ -160,6 +158,23 @@
<script> <script>
var moduleInit = ['tool', 'tagpicker', 'tinymce']; var moduleInit = ['tool', 'tagpicker', 'tinymce'];
var group_access = "{:session('gougu_admin')['group_access']}" 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() { function gouguInit() {
var form = layui.form, tool = layui.tool, tagspicker = layui.tagpicker; var form = layui.form, tool = layui.tool, tagspicker = layui.tagpicker;
@ -177,19 +192,31 @@
$('#upload_box_thumb img').attr('src', res.data.filepath); $('#upload_box_thumb img').attr('src', res.data.filepath);
} }
}); });
//上传商品轮播图 //上传商品轮播图
var upload_thumb = layui.upload.render({ var upload_thumb = layui.upload.render({
elem: '#upload_btn_thumb2', elem: '#upload_btn_thumb2',
url: '/admin/api/upload', 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) { done: function (res) {
//如果上传失败 //如果上传失败
if (res.code == 1) { if (res.code == 1) {
return layer.msg('上传失败'); return layer.msg('上传失败');
} }
//上传成功 //上传成功
$('#upload_box_thumb2 input').attr('value', res.data.filepath); //追加图片成功追加文件名至图片容器
$('#upload_box_thumb2 img').attr('src', res.data.filepath); multiple_images.push(res.data.filepath);
$('#upload_box_thumb2 input').attr('value', multiple_images);
// $('#upload_box_thumb2 img').attr('src', res.data.filepath);
} }
}); });

62
app/admin/view/store_product/edit.html
View File

@ -89,9 +89,13 @@
</button> </button>
<div class="layui-upload-list" id="upload_box_thumb2" <div class="layui-upload-list" id="upload_box_thumb2"
style="width: 428px; height:270px; overflow: hidden;"> style="width: 428px; height:270px; overflow: hidden;">
<img src="{$detail.slider_image}" {volist name='detail.slider_image_arr' id='vo'}
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;" {if $vo}
width="100" style="max-width: 100%; height:66px;"/> <img src="{$vo}"
onerror="javascript:this.src='{__GOUGU__}/gougu/images/nonepic600x360.jpg';this.onerror=null;"
width="100" style="max-width: 100%; height:66px;" onclick="delMultipleImgs(this)"/>
{/if}
{/volist}
<input type="hidden" name="slider_image" value="{$detail.slider_image}"> <input type="hidden" name="slider_image" value="{$detail.slider_image}">
</div> </div>
</div> </div>
@ -111,23 +115,23 @@
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">售价<font>*</font></td> <td class="layui-td-gray">售价<font>*</font></td>
<td colspan="7"><input type="text" name="price" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="price" lay-verify="required|number" lay-reqText="请输入售价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input" value="{$detail.price}"></td> autocomplete="off" placeholder="请输入售价" class="layui-input" value="{$detail.price}"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">成本价<font>*</font></td> <td class="layui-td-gray">成本价<font>*</font></td>
<td colspan="7"><input type="text" name="cost" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="cost" lay-verify="required|number" lay-reqText="请输入成本价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input" value="{$detail.cost}"></td> autocomplete="off" placeholder="请输入成本价" class="layui-input" value="{$detail.cost}"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">市场价<font>*</font></td> <td class="layui-td-gray">市场价<font>*</font></td>
<td colspan="7"><input type="text" name="ot_price" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="ot_price" lay-verify="required|number" lay-reqText="请输入市场价"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input" value="{$detail.ot_price}"></td> autocomplete="off" placeholder="请输入市场价" class="layui-input" value="{$detail.ot_price}"></td>
</tr> </tr>
<tr> <tr>
<td class="layui-td-gray">库存<font>*</font></td> <td class="layui-td-gray">库存<font>*</font></td>
<td colspan="7"><input type="text" name="stock" lay-verify="required" lay-reqText="请输入商品关键字" <td colspan="7"><input type="text" name="stock" lay-verify="required|number" lay-reqText="请输入库存"
autocomplete="off" placeholder="请输入商品关键字" class="layui-input" value="{$detail.stock}"></td> autocomplete="off" placeholder="请输入库存" class="layui-input" value="{$detail.stock}"></td>
</tr> </tr>
<tr> <tr>
@ -159,11 +163,24 @@
<script src="/static/assets/js/xm-select.js"></script> <script src="/static/assets/js/xm-select.js"></script>
<script> <script>
var moduleInit = ['tool', 'tagpicker', 'tinymce']; var moduleInit = ['tool', 'tagpicker', 'tinymce'];
var group_access = "{:session('gougu_admin')['group_access']}" var group_access = "{:session('gougu_admin')['group_access']}";
var multiple_images = "{$detail['slider_image']}".split(',');
//单击图片删除图片 【注册全局函数】
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() { function gouguInit() {
var form = layui.form, tool = layui.tool, tagpicker = layui.tagpicker; var form = layui.form, tool = layui.tool, tagpicker = layui.tagpicker;
//上传缩略图 //上传缩略图
var upload_thumb = layui.upload.render({ var upload_thumb = layui.upload.render({
elem: '#upload_btn_thumb', elem: '#upload_btn_thumb',
@ -183,14 +200,27 @@
var upload_thumb = layui.upload.render({ var upload_thumb = layui.upload.render({
elem: '#upload_btn_thumb2', elem: '#upload_btn_thumb2',
url: '/admin/api/upload', 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) { done: function (res) {
//如果上传失败 //如果上传失败
if (res.code == 1) { if (res.code == 1) {
return layer.msg('上传失败'); return layer.msg('上传失败');
} }
//上传成功 //上传成功
$('#upload_box_thumb2 input').attr('value', res.data.filepath); //追加图片成功追加文件名至图片容器
$('#upload_box_thumb2 img').attr('src', res.data.filepath); multiple_images.push(res.data.filepath);
$('#upload_box_thumb2 input').attr('value', multiple_images);
// $('#upload_box_thumb2 img').attr('src', res.data.filepath);
} }
}); });