引入自动上传组件

public/static/css/common.css

@@ -80,6 +80,12 @@
 }
 
 
+.upload-img{
+  max-width: 200px;
+  max-height: 200px;
+}
+
+
 @media screen and (max-width: 768px){
   .layui-body{
       left: 0;

public/static/js/common.js

@@ -0,0 +1,112 @@
+function randomString(len) {
+  len = len || 32;
+  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+  var maxPos = $chars.length;
+  var pwd = '';
+  for (i = 0; i < len; i++) {
+    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+}
+
+function renderUpload(target, params) {
+
+  if (typeof params == "undefined") {
+    params = {}
+  }
+  if (typeof params.upload == "undefined") {
+    var upload = layui.upload
+  } else {
+    var upload = params.upload
+  }
+
+  if (typeof params.type == 'undefined') {
+    var type = target
+  } else {
+    var type = params.type
+  }
+
+  if(typeof window.uploadAddressPrefix == 'undefined'){
+    window.uploadAddressPrefix = '/api/'
+  }
+
+  if (typeof params.url == 'undefined') {
+    var url = window.uploadAddressPrefix + 'File/save'
+  } else {
+    var url = params.url
+  }
+  if (typeof params.accept == 'undefined') {
+    var accept = 'images'
+  } else {
+    var accept = params.accept
+  }
+  if (typeof params.acceptMime == 'undefined') {
+    var acceptMime = 'image/png,image/jpeg,image/gif'
+  } else {
+    var acceptMime = params.acceptMime
+  }
+  if (typeof params.isRenderInputAndShow == 'undefined') {
+    var isRenderInputAndShow = true
+  } else {
+    var isRenderInputAndShow = params.isRenderInputAndShow
+  }
+  if (typeof params.done == 'undefined') {
+    var done = function (result) {
+      layer.close(window.uploading)
+      if (result.code == 0) {
+        layer.msg('上传成功');
+        if (isRenderInputAndShow) {
+          $('.cancle-' + target).show()
+          $('.input-' + target).val(result.data.save_name);
+          $('.preview-' + target).attr('src', result.data.src).show();
+        }
+      } else {
+        layer.msg(result.msg)
+      }
+    }
+  } else {
+    var done = params.done
+  }
+
+  if (typeof params.exts == 'undefined') {
+    var exts = ''
+  } else {
+    var exts = params.exts
+  }
+
+  if (accept == 'video') {
+    if (exts.length == 0) {
+      exts = 'mp4'
+    }
+  }
+
+  if (isRenderInputAndShow) {
+    if ($('.input-' + target).val().length == '') {
+      $('.cancle-' + target).hide()
+    } else {
+      $('.cancle-' + target).show()
+    }
+    $('.cancle-' + target).click(function () {
+      $('.input-' + target).val('');
+      $('.preview-' + target).hide();
+      $(this).hide()
+    })
+  }
+
+  return upload.render({
+    elem: '.upload-' + target,
+    url: url,
+    data: {
+      type: type,
+    },
+    accept: accept,
+    acceptMime: acceptMime,
+    before: function () {
+      window.uploading = layer.load()
+    },
+    done: done,
+    error: function () {
+      layer.close(window.uploading)
+    }
+  })
+}

view/admin/common/_require.html

@@ -10,111 +10,111 @@
 <script src="/static/js/common.js"></script>
 
 <script>
+  window.uploadAddressPrefix = '/admin/'
+  //JavaScript代码区域
+  layui.use(['element', 'layer', 'util'], function () {
+    var element = layui.element;
+    var util = layui.util;
+    var defaultCookieSetting = {
+      path: '/',
+      expires: 7,
+    }
+    //执行
+    util.fixbar({
+      bar1: '&#xe656;'
+      , click: function (type) {
+        console.log(type);
+        if (type === 'bar1') {
+          var skinName = $.cookie('skin_name')
+          $('body').removeClass()
+          if (skinName == 'skin-1') {
+            $.cookie('skin_name', 'skin-0', defaultCookieSetting)
+            $('body').addClass('skin-0')
+          } else {
+            $.cookie('skin_name', 'skin-1', defaultCookieSetting)
+            $('body').addClass('skin-1')
 
-    //JavaScript代码区域
+          }
-    layui.use(['element', 'layer', 'util'], function () {
+
-        var element = layui.element;
+          location.reload()
-        var util = layui.util;
-        var defaultCookieSetting = {
-            path: '/',
-            expires: 7,
         }
-        //执行
+      }
-        util.fixbar({
-            bar1: '&#xe656;'
-            , click: function (type) {
-                console.log(type);
-                if (type === 'bar1') {
-                    var skinName = $.cookie('skin_name')
-                    $('body').removeClass()
-                    if (skinName == 'skin-1') {
-                        $.cookie('skin_name', 'skin-0', defaultCookieSetting)
-                        $('body').addClass('skin-0')
-                    } else {
-                        $.cookie('skin_name', 'skin-1', defaultCookieSetting)
-                        $('body').addClass('skin-1')
-
-                    }
-
-                    location.reload()
-                }
-            }
-        });
-        $('.layui-side').addClass('layui-hide-xs')
-
     });
+    $('.layui-side').addClass('layui-hide-xs')
 
-    $(function () {
+  });
-        var skinName = $.cookie('skin-name')
 
-        $('body').addClass(skinName)
+  $(function () {
-        setTimeout(() => {
+    var skinName = $.cookie('skin-name')
-            if (typeof currentHeaderNavItem != "undefined") {
+
-                $('.header-nav-item').each(function (i, e) {
+    $('body').addClass(skinName)
-                    if ($(e).data('name') == currentHeaderNavItem) {
+    setTimeout(() => {
-                        $(e).addClass('layui-this')
+      if (typeof currentHeaderNavItem != "undefined") {
-                    }
+        $('.header-nav-item').each(function (i, e) {
-                })
+          if ($(e).data('name') == currentHeaderNavItem) {
-            }
+            $(e).addClass('layui-this')
-            if (typeof currentLeftNavItem != "undefined") {
+          }
-                $('.left-nav-item').each(function (i, e) {
+        })
-                    if ($(e).data('name') == currentLeftNavItem) {
+      }
-                        $(e).addClass('layui-this')
+      if (typeof currentLeftNavItem != "undefined") {
-                    }
+        $('.left-nav-item').each(function (i, e) {
-                })
+          if ($(e).data('name') == currentLeftNavItem) {
-            }
+            $(e).addClass('layui-this')
+          }
+        })
+      }
 
 
-            // 表格转卡片
+      // 表格转卡片
 
 
 
-            var tableContainer = $('.layui-table').parent()
+      var tableContainer = $('.layui-table').parent()
 
-            $('.layui-table').addClass('layui-hide-xs')
+      $('.layui-table').addClass('layui-hide-xs')
 
-            var cardList = $('<div class="table-card layui-show-xs-block layui-hide-md"></div>').prependTo(tableContainer)
+      var cardList = $('<div class="table-card layui-show-xs-block layui-hide-md"></div>').prependTo(tableContainer)
 
-            $('.layui-table tbody tr').each(function () {
+      $('.layui-table tbody tr').each(function () {
-                var trItem = this;
+        var trItem = this;
 
-                var boxItem = $('.tpl .table-card-box').clone()
+        var boxItem = $('.tpl .table-card-box').clone()
 
-                $.each($(trItem).data(),function(index,value){
+        $.each($(trItem).data(), function (index, value) {
-                    
-                    $(boxItem).data(index,value)
-                })
 
-                $(trItem).find('td').each(function (index, ele) {
+          $(boxItem).data(index, value)
-                    var itemItem = $('.tpl .table-card-item').clone()
+        })
-                    $(itemItem).find('.item-title').text($('.layui-table thead th').eq(index).text())
 
-                    if($(ele).children().length == 0){
+        $(trItem).find('td').each(function (index, ele) {
-                        $(itemItem).find('.item-value').html($(ele).html())
+          var itemItem = $('.tpl .table-card-item').clone()
-                    }else{
+          $(itemItem).find('.item-title').text($('.layui-table thead th').eq(index).text())
 
-                        $(ele).children().clone().appendTo($(itemItem).find('.item-value'))
+          if ($(ele).children().length == 0) {
-                    }
+            $(itemItem).find('.item-value').html($(ele).html())
+          } else {
 
-                    $(itemItem).appendTo(boxItem)
+            $(ele).children().clone().appendTo($(itemItem).find('.item-value'))
-                })
+          }
 
-                $(boxItem).appendTo(cardList)
+          $(itemItem).appendTo(boxItem)
-            })
+        })
 
-        }, 1);
+        $(boxItem).appendTo(cardList)
+      })
+
+    }, 1);
 
 
-    })
+  })
 </script>
 {:get_system_config('site_tongji')}
 
 <div class="tpl" style="display: none;">
-    <div class="table-card-box item">
+  <div class="table-card-box item">
 
-    </div>
+  </div>
-    <div class="table-card-item">
+  <div class="table-card-item">
-        <div class="item-title"></div>
+    <div class="item-title"></div>
-        <div class="item-value"></div>
+    <div class="item-value"></div>
-    </div>
+  </div>
 </div>

view/admin/system/index.html

@@ -48,18 +48,17 @@
                       <input type="text" name="site_desc" value="{:get_system_config('site_desc')}" class="layui-input">
                     </div>
                   </div>
+
                   <div class="layui-form-item">
-                    <div class="layui-form-label">网站logo</div>
+                    <label class="layui-form-label">网站LOGO</label>
                     <div class="layui-input-block">
-                      <div>
+                      <div class="layui-btn upload-site-logo">
-                        <div class="layui-btn upload-site-logo">上传logo</div>
+                        上传
                       </div>
+                      <input type="hidden" name="site_logo" value="{:get_system_config('site_logo')}" class="input-site-logo">
                       <div>
-                        <img class="site-logo" style="max-width: 200px;"
+                        <img src="{:get_source_link(get_system_config('site_logo'))}" class="upload-img preview-site-logo" alt="">
-                          src="{:get_source_link(get_system_config('site_logo'))}" alt="">
                       </div>
-                      <input type="hidden" name="site_logo" value="{:get_system_config('site_logo')}"
-                        class="layui-input">
                     </div>
                   </div>
                   <div class="layui-form-item">
@@ -112,19 +111,18 @@
                     </div>
                   </div>
                   <div class="layui-form-item">
-                    <div class="layui-form-label">二维码</div>
+                    <label class="layui-form-label">二维码</label>
                     <div class="layui-input-block">
-                      <div>
+                      <div class="layui-btn upload-site-qrcode">
-                        <div class="layui-btn upload-site-qrcode">上传二维码</div>
+                        上传
                       </div>
+                      <input type="hidden" name="site_qrcode" value="{:get_system_config('site_qrcode')}" class="input-site-qrcode">
                       <div>
-                        <img class="site-qrcode" style="max-width: 200px;"
+                        <img src="{:get_source_link(get_system_config('site_qrcode'))}" class="upload-img preview-site-qrcode" alt="">
-                          src="{:get_source_link(get_system_config('site_qrcode'))}" alt="">
                       </div>
-                      <input type="hidden" name="site_qrcode" value="{:get_system_config('site_qrcode')}"
-                        class="layui-input">
                     </div>
                   </div>
+                  
                   <div class="layui-form-item">
                     <div class="layui-form-label">站点fovicon</div>
                     <div class="layui-input-block">
@@ -179,42 +177,9 @@
         var upload = layui.upload;
 
 
-        var uploadSiteLogo = upload.render({
+
-          elem: '.upload-site-logo',
+        renderUpload('site-logo')
-          url: '{:url("File/save")}',
+        renderUpload('site-qrcode')
-          data: {
-            type: 1,
-            dir: 'site_logo'
-          },
-          accept: 'images',
-          done: function (result) {
-            if (result.code == 0) {
-              layer.msg('上传成功');
-              $('input[name="site_logo"]').val(result.data.save_name);
-              $('.site-logo').attr('src', result.data.src);
-            } else {
-              layer.msg(result.msg)
-            }
-          }
-        })
-        var uploadSiteLogo = upload.render({
-          elem: '.upload-site-qrcode',
-          url: '{:url("File/save")}',
-          data: {
-            type: 1,
-            dir: 'site_logo'
-          },
-          accept: 'images',
-          done: function (result) {
-            if (result.code == 0) {
-              layer.msg('上传成功');
-              $('input[name="site_qrcode"]').val(result.data.save_name);
-              $('.site-qrcode').attr('src', result.data.src);
-            } else {
-              layer.msg(result.msg)
-            }
-          }
-        })
         var uploadSiteLogo = upload.render({
           elem: '.upload-site-fovicon',
           url: '{:url("File/save")}',