contact改QQ上传二维码图片

app/Http/Admin/Views/setting/contact.volt

@@ -19,7 +19,16 @@
                 <input class="layui-input" type="text" name="wechat" placeholder="请确保存储已正确配置" value="{{ contact.wechat }}">
             </div>
             <div class="layui-inline">
-                <button class="layui-btn" type="button" id="upload-wechat">上传文件</button>
+                <button class="layui-btn" type="button" id="upload-wechat">上传</button>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">QQ二维码</label>
+            <div class="layui-inline" style="width:40%;">
+                <input class="layui-input" type="text" name="qq" placeholder="请确保存储已正确配置" value="{{ contact.qq }}">
+            </div>
+            <div class="layui-inline">
+                <button class="layui-btn" type="button" id="upload-qq">上传</button>
             </div>
         </div>
         <div class="layui-form-item">
@@ -28,13 +37,7 @@
                 <input class="layui-input" type="text" name="toutiao" placeholder="请确保存储已正确配置" value="{{ contact.toutiao }}">
             </div>
             <div class="layui-inline">
-                <button class="layui-btn" type="button" id="upload-toutiao">上传文件</button>
+                <button class="layui-btn" type="button" id="upload-toutiao">上传</button>
-            </div>
-        </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label">客服QQ</label>
-            <div class="layui-input-block">
-                <input class="layui-input" type="text" name="qq" value="{{ contact.qq }}" placeholder="请前往 https://shang.qq.com/v3/widget.html 开通服务">
             </div>
         </div>
         <div class="layui-form-item">
@@ -103,6 +106,22 @@
                 }
             });
 
+            upload.render({
+                elem: '#upload-qq',
+                url: '/admin/upload/icon/img',
+                exts: 'gif|jpg|png',
+                before: function () {
+                    layer.load();
+                },
+                done: function (res, index, upload) {
+                    $('input[name=qq]').val(res.data.url);
+                    layer.closeAll('loading');
+                },
+                error: function (index, upload) {
+                    layer.msg('上传文件失败', {icon: 2});
+                }
+            });
+
             upload.render({
                 elem: '#upload-toutiao',
                 url: '/admin/upload/icon/img',

app/Http/Home/Views/partials/footer.volt

@@ -24,13 +24,12 @@
     </div>
     {% if contact_info.enabled == 1 %}
         <div class="row contact">
-            {% if contact_info.qq %}
-                {% set link_url = 'https://wpa.qq.com/msgrd?v=3&uin=%s&site=qq&menu=yes'|format(contact_info.qq) %}
-                <a class="qq" href="{{ link_url }}" title="客服QQ：{{ contact_info.qq }}"><span class="iconfont icon-qq"></span></a>
-            {% endif %}
             {% if contact_info.wechat %}
                 <a class="wechat" href="javascript:" title="微信"><span class="iconfont icon-wechat"></span></a>
             {% endif %}
+            {% if contact_info.qq %}
+                <a class="qq" href="javascript:" title="QQ"><span class="iconfont icon-qq"></span></a>
+            {% endif %}
             {% if contact_info.toutiao %}
                 <a class="toutiao" href="javascript:" title="头条号"><span class="iconfont icon-toutiao"></span></a>
             {% endif %}

public/static/home/js/fixbar.js

@@ -3,10 +3,6 @@ layui.use(['jquery', 'helper', 'util'], function () {
     var $ = layui.jquery;
     var util = layui.util;
 
-    var showQQDialog = function () {
-        window.open('https://wpa.qq.com/msgrd?v=3&uin=' + window.contact.qq + '&site=qq&menu=yes');
-    }
-
     var showWechatCode = function () {
         var content = '<div class="qrcode"><img src="' + window.contact.wechat + '" alt="扫码关注"></div>';
         layer.open({
@@ -18,6 +14,17 @@ layui.use(['jquery', 'helper', 'util'], function () {
         });
     }
 
+    var showQQCode = function () {
+        var content = '<div class="qrcode"><img src="' + window.contact.qq + '" alt="扫码关注"></div>';
+        layer.open({
+            type: 1,
+            title: false,
+            closeBtn: 0,
+            shadeClose: true,
+            content: content,
+        });
+    }
+
     var showTouTiaoCode = function () {
         var content = '<div class="qrcode"><img src="' + window.contact.toutiao + '" alt="扫码关注"></div>';
         layer.open({
@@ -31,13 +38,6 @@ layui.use(['jquery', 'helper', 'util'], function () {
 
     var bars = [];
 
-    if (window.contact.qq) {
-        bars.push({
-            type: 'qq',
-            icon: 'layui-icon-login-qq',
-        });
-    }
-
     if (window.contact.wechat) {
         bars.push({
             type: 'wechat',
@@ -45,13 +45,20 @@ layui.use(['jquery', 'helper', 'util'], function () {
         });
     }
 
+    if (window.contact.qq) {
+        bars.push({
+            type: 'qq',
+            icon: 'layui-icon-login-qq',
+        });
+    }
+
     util.fixbar({
         bars: bars,
         click: function (type) {
-            if (type === 'qq') {
+            if (type === 'wechat') {
-                showQQDialog();
-            } else if (type === 'wechat') {
                 showWechatCode();
+            } else if (type === 'qq') {
+                showQQCode();
             }
         }
     });
@@ -60,6 +67,10 @@ layui.use(['jquery', 'helper', 'util'], function () {
         showWechatCode();
     });
 
+    $('.icon-qq').on('click', function () {
+        showQQCode();
+    });
+
     $('.icon-toutiao').on('click', function () {
         showTouTiaoCode();
     });