From 041f8683651a19ebe041c239a3ca19822c53470c Mon Sep 17 00:00:00 2001
From: xiaoyong931011 <15274802129@163.com>
Date: Tue, 28 Sep 2021 20:39:24 +0800
Subject: [PATCH] 20210928
---
src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html | 277 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 250 insertions(+), 27 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html b/src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html
index 5e66e5b..2227a55 100644
--- a/src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html
+++ b/src/main/resources/templates/febs/views/modules/goods/goodsUpdate.html
@@ -29,13 +29,13 @@
<div class="layui-col-lg6">
<label class="layui-form-label febs-form-item-require">商品名称：</label>
<div class="layui-input-block">
- <input type="text" name="goodsName" class="layui-input" readonly>
+ <input type="text" name="goodsName" class="layui-input" >
</div>
</div>
<div class="layui-col-lg6">
<label class="layui-form-label febs-form-item-require">商品编号：</label>
<div class="layui-input-block">
- <input type="text" name="goodsNo" class="layui-input" readonly>
+ <input type="text" name="goodsNo" class="layui-input" >
</div>
</div>
</div>
@@ -43,7 +43,7 @@
<div class="layui-col-lg6">
<label class="layui-form-label febs-form-item-require">所属分类：</label>
<div class="layui-input-block">
- <select name="parentId" class="categary-goods-update-category" id="categarySelect" readonly>
+ <select name="parentId" class="categary-goods-update-category" id="categarySelect" >
<option value="">请选择</option>
</select>
</div>
@@ -75,24 +75,61 @@
<input type="text" name="goodsIntrodution" autocomplete="off" class="layui-input" >
</div>
</div>
- <!-- <div class="layui-row layui-col-space10 layui-form-item">-->
- <!-- <div class="layui-col-lg6">-->
- <!-- <label class="layui-form-label">规格：</label>-->
- <!-- <div class="layui-input-block">-->
- <!-- <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName">-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <div class="layui-col-lg6">-->
- <!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test3" >添加</button>-->
- <!-- </div>-->
- <!-- </div>-->
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label">规格：</label>
+ <div class="layui-input-block">
+ <input type="text" name="addMallGoodsSkuDtos" autocomplete="off" class="layui-input" id="attrName">
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test3" >添加</button>
+ </div>
+ </div>
<div id="attrWrap"></div>
+
<div class="layui-form-item">
- <label class="layui-form-label">缩略图链接：</label>
+ <label class="layui-form-label febs-form-item-require">缩略图：</label>
<div class="layui-input-block">
- <img alt="缩略图" data-th-src="${mailGoodsUpdate.thumb}" style="width: 100px">
+ <div class="layui-upload">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="test2">上传</button>
+ <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
+ <div class="layui-upload-list" id="demo2"></div>
+ </blockquote>
+ </div>
</div>
</div>
+ <div class="layui-form-item">
+ <label class="layui-form-label">缩略图链接：</label>
+ <div class="layui-input-block">
+ <input type="text" id="thumb" lay-verify="required" name="thumb" autocomplete="off" class="layui-input" readonly>
+ </div>
+ </div>
+
+ <div class="layui-form-item">
+ <label class="layui-form-label febs-form-item-require">轮播图：</label>
+ <div class="layui-input-block">
+ <div class="layui-upload">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" id="thumbsBanner">上传</button>
+ <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
+ <div class="layui-upload-list" id="thumbsBanners"></div>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <label class="layui-form-label">缩略图链接：</label>
+ <div class="layui-input-block">
+ <input type="text" id="thumbs" lay-verify="required" name="thumbs" autocomplete="off" class="layui-input" readonly>
+ </div>
+ </div>
+
+<!-- <div class="layui-form-item">-->
+<!-- <label class="layui-form-label">缩略图链接：</label>-->
+<!-- <div class="layui-input-block">-->
+<!-- <img alt="缩略图" data-th-src="${mailGoodsUpdate.thumb}" style="width: 100px">-->
+<!-- </div>-->
+<!-- </div>-->
<div class="layui-form-item">
<label class="layui-form-label">商品详情：</label>
<div class="layui-input-block">
@@ -108,23 +145,27 @@
</div>
</div>
</div>
+ <div class="layui-form-item febs-hide">
+ <button class="layui-btn" lay-submit="" lay-filter="goods-update-form-submit" id="submit"></button>
+ </div>
</form>
</div>
<script data-th-inline="javascript">
- layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','layedit'], function () {
- var $ = layui.$,
+ layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree','dropdown', 'laydate','layedit','upload'], function () {
+ var $ = layui.jquery,
febs = layui.febs,
layer = layui.layer,
formSelects = layui.formSelects,
treeSelect = layui.treeSelect,
form = layui.form,
+ laydate = layui.laydate,
eleTree = layui.eleTree,
mailGoodsUpdate = [[${mailGoodsUpdate}]],
- $view = $('#goods-update'),
- validate = layui.validate,
+ $view = $('#goods-add'),
layedit = layui.layedit,
- _deptTree;
+ upload = layui.upload,
+ validate = layui.validate;
form.render();
@@ -139,6 +180,50 @@
$("#categarySelect").val(mailGoodsUpdate.categoryId)
form.render();
});
+ });
+
+ //多图片上传
+ upload.render({
+ elem: '#thumbsBanner'
+ ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+ ,multiple: true
+ ,before: function(obj){
+ //预读本地文件示例，不支持ie8
+ obj.preview(function(index, file, result){
+ $('#thumbsBanners').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">')
+ });
+ }
+ ,done: function(res){
+ var thumbs = $("#thumbs").val();
+ if(thumbs == ''){
+ $("#thumbs").val(res.data.src);
+ }else{
+ $("#thumbs").val(thumbs + ',' + res.data.src);
+ }
+ // alert($("#thumb").val());
+ }
+ });
+
+ //图片上传
+ upload.render({
+ elem: '#test2'
+ ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+ ,multiple: true
+ ,before: function(obj){
+ //预读本地文件示例，不支持ie8
+ obj.preview(function(index, file, result){
+ $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 100px">')
+ });
+ }
+ ,done: function(res){
+ // var thumbs = $("#thumb").val();
+ // if(thumbs == ''){
+ $("#thumb").val(res.data.src);
+ // }else{
+ // $("#thumb").val(thumbs + ',' + res.data.src);
+ // }
+ // alert($("#thumb").val());
+ }
});
layedit.set({ //设置图片接口
@@ -175,32 +260,32 @@
<div class="layui-input-block layui-form-item item">
<div style="float:left" >
<div>
- <input type="text" class="layui-input" value="` + attrNameVal + `" readonly >
+ <input type="text" class="layui-input" value="` + attrNameVal + `" >
</div>
</div>
<div style="float:left" >
<div>
- <img class="layui-upload-img" src="` + skuImage + `" style="width: 100px" readonly>
+ <img class="layui-upload-img" src="` + skuImage + `" style="width: 100px" >
</div>
</div>
<div style="float:left" >
<div>
- <input type="text" value="` + stockVal + `" placeholder="库存" autocomplete="off" class="layui-input" readonly>
+ <input type="text" value="` + stockVal + `" placeholder="库存" autocomplete="off" class="layui-input" >
</div>
</div>
<div style="float:left" >
<div>
- <input type="text" value="` + skuVolume + `" placeholder="销售数量" autocomplete="off" class="layui-input" readonly>
+ <input type="text" value="` + skuVolume + `" placeholder="销售数量" autocomplete="off" class="layui-input" >
</div>
</div>
<div style="float:left" >
<div>
- <input type="text" value="` + originalPrice + `" placeholder="原价" autocomplete="off" class="layui-input" readonly>
+ <input type="text" value="` + originalPrice + `" placeholder="原价" autocomplete="off" class="layui-input" >
</div>
</div>
<div style="float:left" >
<div>
- <input type="text" value="` + presentPrice + `" placeholder="现价" autocomplete="off" class="layui-input" readonly>
+ <input type="text" value="` + presentPrice + `" placeholder="现价" autocomplete="off" class="layui-input" >
</div>
</div>
</div>
@@ -214,12 +299,25 @@
for(var skuIndex = 0; skuIndex < skuLength; skuIndex++){
appendSku(mailGoodsUpdate.mailGoodsSkuDetailVo[skuIndex],skuIndex);
}
+ //缩略图图片回显
+ if(mailGoodsUpdate.thumb != null || mailGoodsUpdate.thumb != ''){
+ $('#demo2').append('<img src="'+ mailGoodsUpdate.thumb +'" class="layui-upload-img" style="width: 100px">')
+ $("#thumb").val(mailGoodsUpdate.thumb);
+ }
+ var imagesInitIndex = 0;
+ let imagesInitIndexlength = mailGoodsUpdate.mailGoodsImagesVo.length;
+ for(var imagesInitIndex = 0; imagesInitIndex < imagesInitIndexlength; imagesInitIndex++){
+ console.log(mailGoodsUpdate.mailGoodsImagesVo);
+ $('#thumbsBanners').append('<img src="'+ mailGoodsUpdate.mailGoodsImagesVo[imagesInitIndex] +'" class="layui-upload-img" style="width: 100px">')
+ $("#thumbs").val(mailGoodsUpdate.mailGoodsImagesVo[imagesInitIndex] + ',');
+ }
form.val("goods-update-form", {
"id": mailGoodsUpdate.id,
"goodsNo": mailGoodsUpdate.goodsNo,
"categoryId": mailGoodsUpdate.categoryId,
"mailGoodsSkuDetailVo": mailGoodsUpdate.mailGoodsSkuDetailVo,
+ "mailGoodsImagesVo": mailGoodsUpdate.mailGoodsImagesVo,
"unit": mailGoodsUpdate.unit,
"originalPrice": mailGoodsUpdate.originalPrice,
"presentPrice": mailGoodsUpdate.presentPrice,
@@ -227,8 +325,133 @@
"thumb": mailGoodsUpdate.thumb,
"goodsDetails": mailGoodsUpdate.goodsDetails,
"isHot": mailGoodsUpdate.isHot,
+ "isHot": mailGoodsUpdate.isHot,
"goodsName": mailGoodsUpdate.goodsName
});
}
+
+ $('#test3').on('click', function (){
+ var index = $("#attrWrap").children().length;
+ let attrNameVal = $('#attrName').val();
+ if(attrNameVal==null || attrNameVal==""){
+ febs.alert.warn('样式名称不能为空');
+ return false;
+ }
+ $('#attrWrap').append(`
+ <div class="layui-form-item item">
+ <div style="float:left" >
+ <input type="text" name="styleName` + index + `" value="` + $('#attrName').val() + `" autocomplete="off" class="layui-input" readonly >
+ </div>
+ <div style="float:left" >
+ <div>
+ <input type="text" name="skuName` + index +`" placeholder="规格名称" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div style="float:left" >
+ <label class="layui-form-label">图片：</label>
+ <div class="layui-input-block">
+ <div class="layui-upload">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn-xs sku-img" id="skuImg` + index + `">上传</button>
+ <img class="layui-upload-img" id="imageUrls` + index + `" style="width: 100px" >
+ </div>
+ </div>
+ </div>
+ <div style="float:left" class="febs-hide">
+ <div>
+ <input type="text" id="skuImage` + index +`" name="skuImage` + index + `" autocomplete="off" class="layui-input">
+ </div>
+ </div>
+ <div style="float:left" >
+ <div>
+ <input type="number" name="stock` + index +`" placeholder="库存" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div style="float:left" >
+ <div>
+ <input type="number" name="skuVolume` + index +`" placeholder="销售数量" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div style="float:left" >
+ <div>
+ <input type="number" name="originalPrice` + index +`" placeholder="原价" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div style="float:left" >
+ <div>
+ <input type="number" name="presentPrice` + index + `" placeholder="现价" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div style="float:left" >
+ <button type="button" class="layui-btn del-attr-btn" data-index="` + index +`">删除</button>
+ </div>
+ </div>
+ `)
+ //普通图片上传
+ upload.render({
+ elem: '#skuImg' + index
+ ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+ ,done: function(res){
+ febs.alert.success(res.data.src);
+ $('#imageUrls' + index).attr('src', res.data.src);
+ $('#skuImage'+ index).val(res.data.src);
+ }
+ });
+ });
+ upload.render({
+ elem: '#skuImg'+index
+ ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+ ,done: function(res){
+ febs.alert.success(res.data.src);
+ $('#imageUrls' + index).attr('src', res.data.src);
+ $('#skuImage'+ index).val(res.data.src);
+ }
+ });
+ $("#attrWrap").on("click",".del-attr-btn",function(){
+ var index = $(this).attr('data-index')
+ $($("#attrWrap").find(".item")[index].remove());
+ });
+ form.on('submit(goods-add-form-submit)', function (data) {
+ let skuArrs = [];
+ var skuArr = $("#attrWrap").find(".item");
+ for(var i = 0;i < skuArr.length;i++){
+ skuArrs.push({
+ styleName: $("input[name='styleName" + i + "']").val(),
+ skuName: $("input[name='skuName" + i + "']").val(),
+ skuImage: $("input[name='skuImage" + i + "']").val(),
+ stock: $("input[name='stock" + i + "']").val(),
+ skuVolume: $("input[name='skuVolume" + i + "']").val(),
+ originalPrice:$("input[name='originalPrice" + i + "']").val(),
+ presentPrice: $("input[name='presentPrice" + i + "']").val()
+ })
+ }
+ // if(skuArr.length < 0){
+ // febs.alert.warn("请填写商品规格");
+ // return false;
+ // }
+ // console.log(skuArrs)
+ data.field.addMallGoodsSkuDtos = skuArrs;
+ // console.log(data.field)
+ $.ajax({
+ 'url':ctx + 'admin/goods/addMallGoods',
+ 'type':'post',
+ 'dataType':'json',
+ 'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
+ 'traditional': true,//ajax传递数组必须添加属性
+ 'data':JSON.stringify(data.field),
+ 'success':function (data) {
+ if(data.code==0){
+ febs.alert.success(data.message);
+ var index = parent.layer.getFrameIndex(window.name);
+ parent.layer.close(index);
+ }else{
+ febs.alert.warn(data.message);
+ }
+ },
+ 'error':function () {
+ febs.alert.warn('服务器繁忙');
+ }
+ })
+ return false;
+ });
});
</script>
\ No newline at end of file
--
Gitblit v1.9.1