修复二维码不显示的问题

package.json

@@ -33,6 +33,7 @@
     "markdown-loader": "4.0.0",
     "monaco-editor": "^0.14.3",
     "monaco-editor-webpack-plugin": "^1.5.2",
+    "qrcode": "^1.4.4",
     "qs": "^6.3.1",
     "title-notify": "^1.0.13",
     "vue": "^2.5.16",

src/pages/dashboard/featured.vue

@@ -23,7 +23,7 @@
               <i class="eqf-QRcode"></i>
             </div>
             <a :title="item.desc" style="display: inline-block; cursor: pointer;" :href="getUrl(item,true)" target="_blank" class="erCode" >
-              <img class="qrcode" :src="getqrUrl(item)" alt="">
+              <img class="qrcode" :src="item.qrUrl" alt="">
             </a>
           </a>
           <p class="editButton" @click="useTemp(item)">立即使用</p>
@@ -257,6 +257,7 @@
 </style>
 
 <script type="text/ecmascript-6">
+  import QRCode from 'qrcode'
   import BasePage from 'src/extend/BasePage'
   import Server from 'src/extend/Server'
   import config from 'src/config/index'
@@ -350,6 +351,7 @@
           }
         }).then((res) => {
           this.productList = res.data.data || []
+          this.setQRUrls(this.productList)
         })
       },
       getUrl: function (item, isClient) {
@@ -362,8 +364,15 @@
           return `${config.EDITOR_PATH}?key=${item.key}`
         }
       },
-      getqrUrl: function (item) {
-        return `https://www.liantu.com/api.php?text=${encodeURIComponent(this.getUrl(item, 1))}`
+      setQRUrls (list) {
+        list.forEach(item => {
+          const url = this.getUrl(item, 1)
+          try {
+            QRCode.toDataURL(url).then(value => { this.$set(item, 'qrUrl', value) })
+          } catch {
+            console.error('生成二维码出错')
+          }
+        })
       },
     }
   }

src/pages/dashboard/featuring.vue

@@ -21,7 +21,7 @@
               <i class="eqf-QRcode"></i>
             </div>
             <a :title="item.desc" style="display: inline-block; cursor: pointer;" :href="getUrl(item,true)" target="_blank" class="erCode" >
-              <img class="qrcode" :src="getqrUrl(item)" alt="">
+              <img class="qrcode" :src="item.qrUrl" alt="">
             </a>
           </a>
           <el-button class="control-item" size="mini" @click="updateItem(item, 1)">设为精选</el-button>
@@ -266,6 +266,7 @@
 </style>
 
 <script type="text/ecmascript-6">
+  import QRCode from 'qrcode'
   import BasePage from 'src/extend/BasePage'
   import Server from 'src/extend/Server'
   import config from 'src/config/index'
@@ -338,6 +339,7 @@
           }
         }).then((res) => {
           this.pages = res.data.data || []
+          this.setQRUrls(this.pages)
         })
       },
       getUrl: function (item, isClient) {
@@ -350,8 +352,15 @@
           return `${config.EDITOR_PATH}?key=${item.key}`
         }
       },
-      getqrUrl: function (item) {
-        return `https://www.liantu.com/api.php?text=${encodeURIComponent(this.getUrl(item, 1))}`
+      setQRUrls (list) {
+        list.forEach(item => {
+          const url = this.getUrl(item, 1)
+          try {
+            QRCode.toDataURL(url).then(value => { this.$set(item, 'qrUrl', value) })
+          } catch {
+            console.error('生成二维码出错')
+          }
+        })
       },
     }
   }

src/pages/dashboard/pages.vue

@@ -44,7 +44,7 @@
                   <img :src="item.image||'https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm1562307855048.png'" alt="">
                 </div>
                 <a :title="item.desc" style="display: inline-block; cursor: pointer;" :href="getUrl(item,true)" target="_blank">
-                  <img class="qrcode" :src="getqrUrl(item)" alt="">
+                  <img class="qrcode" :src="item.qrUrl" alt="">
                 </a>
                 <div class="sourceButton">
                   <a class="editButton" @click='setting(item)'>设置</a>
@@ -227,6 +227,7 @@
 </style>
 
 <script type="text/ecmascript-6">
+  import QRCode from 'qrcode'
   import BasePage from 'src/extend/BasePage'
   import Server from 'src/extend/Server'
   const config = require('../../config/index.js')
@@ -274,9 +275,6 @@
           return `${config.EDITOR_PATH}?key=${item.key}`
         }
       },
-      getqrUrl: function (item) {
-        return `https://www.liantu.com/api.php?text=${encodeURIComponent(this.getUrl(item, 1))}`
-      },
       tabHandleClick (tab) {
         this.activeName = tab.name
         if (tab.name == 'public') {
@@ -294,6 +292,17 @@
           }
         }).then((res) => {
           this.publicPage = res.data.data || []
+          this.setQRUrls(this.publicPage)
+        })
+      },
+      setQRUrls (list) {
+        list.forEach(item => {
+          const url = this.getUrl(item, 1)
+          try {
+            QRCode.toDataURL(url).then(value => { this.$set(item, 'qrUrl', value) })
+          } catch {
+            console.error('生成二维码出错')
+          }
         })
       },
       loadStarProject: function () {

src/pages/projects/CDoc.vue

@@ -36,11 +36,11 @@
               <i class="eqf-QRcode"></i>
             </div>
             <a :title="item.desc" style="display: inline-block; cursor: pointer;" :href="getUrl(item,true)" target="_blank" class="erCode" >
-              <img class="qrcode" :src="getqrUrl(item)" alt="">
+              <img class="qrcode" :src="item.qrUrl" alt="">
             </a>
           </a>
           <div class="sourceButton">
-            
+
             <a class="editButton" :href="getUrl(item)" target="_blank">编辑</a>
             <a class="editButton act_btn" target="_blank">操作
               <div class="actions">
@@ -57,7 +57,7 @@
                 <p class="last"></p>
               </div>
             </a>
-            
+
           </div>
         </div>
       </div>
@@ -263,7 +263,7 @@
       align-items: center;
 
       .editButton {
-        text-decoration:none; 
+        text-decoration:none;
         color:#333;
         margin: 10px 2px;
         padding 6px 10px
@@ -295,12 +295,12 @@
         z-index: 999;
         .action {
           font-family: PingFang-SC-Medium;
-          text-decoration:none; 
+          text-decoration:none;
           color:#333;
           font-size: 13px;
           cursor: pointer;
           transition: background-color 0.4s ease-in-out;
-          margin 0    
+          margin 0
           line-height: 25px;
           padding: 4px 10px;
           &:hover {
@@ -310,7 +310,7 @@
         .last {
           width 100%
           height 10px
-          margin 0  
+          margin 0
           padding 0
           background-color: rgba(220, 196, 196, 0.2);
         }
@@ -323,6 +323,7 @@
 </style>
 
 <script type="text/ecmascript-6">
+  import QRCode from 'qrcode'
   import BasePage from 'src/extend/BasePage'
   import Server from 'src/extend/Server'
   const config = require('src/config')
@@ -393,9 +394,6 @@
           return `${config.EDITOR_PATH}?key=${item.key}`
         }
       },
-      getqrUrl: function (item) {
-        return `https://www.liantu.com/api.php?text=${encodeURIComponent(this.getUrl(item, 1))}`
-      },
       // 1启用、2禁用 0删除
       changeStatus: function (item) {
         var me = this
@@ -462,6 +460,7 @@
           }
         }).then((res) => {
           this.productList = res.data.data || []
+          this.setQRUrls(this.productList)
         })
       },
       // 详情
@@ -510,6 +509,16 @@
             }
           })
         })
+      },
+      setQRUrls (productList) {
+        productList.forEach(item => {
+          const url = this.getUrl(item, 1)
+          try {
+            QRCode.toDataURL(url).then(value => {this.$set(item, 'qrUrl', value)})
+          } catch (e) {
+            console.log(e)
+          }
+        })
       }
     }
   }