二维码

mock/user.js

 
       return {
         code: 1000,
-        data: token,
+        data: token
       }
     }
   },

package.json

     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qrcodejs2": "0.0.2",
     "vue": "2.6.10",
     "vue-axios": "^3.4.0",
     "vue-axios-plugin": "^1.3.0",

src/layout/components/Navbar.vue

     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img src="../../icons/logo.jpg" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              Home
-            </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="logout">
+            <span>安全退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

src/utils/auth.js

   return Cookies.set(TokenKey, token)
 }
 
-
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
 }
 export function getUserId() {
   return Cookies.get(UserIdKey)
-}
+}

src/views/gameManage/index.vue

           }}
         </template>
       </el-table-column>
+      <el-table-column prop="qcode" label="二维码">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.qcode" style="width: 100px; height: 100px" />
+        </template>
+      </el-table-column>
       <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
           <el-link :underline="false" style="margin-right:1em" type="primary">
               :to="{name: 'gameEdit', query: { id: scope.row.gameId }}"
             >编辑</router-link>
           </el-link>
+          <el-button type="text" style="margin-right:1em" @click="downloadQrcode(scope.row)">下载二维码</el-button>
           <el-popconfirm
             icon="el-icon-info"
             icon-color="red"
         </template>
       </el-table-column>
     </el-table>
+    <div v-show="false" id="qrcode" ref="qrcode" />
     <el-pagination
       v-show="gameTotal!==0"
       style="float:right; margin:20px 0"
 </template>
 <script>
 import { getGameList, deleteGame } from '@/api/game'
-
+import QRCode from 'qrcodejs2'
 export default {
   data() {
     return {
       gameTotal: 0 // 条目总数
     }
   },
+  watch: {
+    tableData: {
+      handler(val) {
+        if (val.length > 0 && !val[0].qcode) {
+          var newData = []
+          val.map(item => {
+            newData.push(item)
+          })
+          newData.map(item => {
+            item.qcode = this.setCodeImg(item)
+          })
+          this.tableData = newData
+        }
+      },
+      immediate: true // 页面加载时就启动
+    }
+  },
   mounted() {
     this.onSearch()
   },
     dateChange(val) {
       this.startDate = this.daterange[0]
       this.endDate = this.daterange[1]
+    },
+
+    // 生成二维码
+    qrcode(val) {
+      const qrcode = new QRCode('qrcode', {
+        width: 200,
+        height: 200, // 高度
+        text: 'http://192.168.89.76:8080/?gameId=' + val.gameId
+      })
+    },
+    // 下载二维码
+    downloadQrcode(val) {
+      document.getElementById('qrcode').innerHTML = ''
+      this.qrcode(val) // 下载之前首先要有二维码
+      // 先找到canvas节点下的二维码图片
+      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      const img = document.getElementById('qrcode').getElementsByTagName('img')
+      // 创建一个a节点
+      const a = document.createElement('a')
+      // 设置a的href属性将canvas变成png格式
+      const imgURL = myCanvas[0].toDataURL('image/jpg')
+      const ua = navigator.userAgent
+      if (ua.indexOf('Trident') !== -1 && ua.indexOf('Windows') !== -1) { // IE内核 并且  windows系统 情况下 才执行;
+        var bstr = atob(imgURL.split(',')[1])
+        var n = bstr.length
+        var u8arr = new Uint8Array(n)
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n)
+        }
+        var blob = new Blob([u8arr])
+        window.navigator.msSaveOrOpenBlob(blob, val.title + '.png')
+      } else if (ua.indexOf('Firefox') > -1) { // 火狐兼容下载
+        const blob = this.base64ToBlob(imgURL) // new Blob([content]);
+        const evt = document.createEvent('HTMLEvents')
+        evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
+        a.download = val.title + '.png'// 下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
+        a.href = URL.createObjectURL(blob)
+        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
+      } else { // 谷歌兼容下载
+        img.src = imgURL
+        a.href = img.src
+        // 设置下载文件的名字
+        a.download = val.title + '.png'
+        // 点击
+        a.click()
+      }
+    },
+    // 返回对应二维码图片给表格
+    setCodeImg(val) {
+      document.getElementById('qrcode').innerHTML = ''
+      this.qrcode(val) // 下载之前首先要有二维码
+      // 先找到canvas节点下的二维码图片
+      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
+      // 设置a的href属性将canvas变成png格式
+      const imgURL = myCanvas[myCanvas.length - 1].toDataURL('image/jpg')
+      return imgURL
+    },
+    // base64转blob
+    base64ToBlob(code) {
+      const parts = code.split(';base64,')
+      const contentType = parts[0].split(':')[1]
+      const raw = window.atob(parts[1])
+      const rawLength = raw.length
+      const uInt8Array = new Uint8Array(rawLength)
+      for (let i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i)
+      }
+      return new Blob([uInt8Array], { type: contentType })
     }
   }
 }

yarn.lock

   resolved "https://registry.npmmirror.com/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qrcodejs2@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmmirror.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz#465afe5e39f19facecb932c11f7a186109146ae1"
+  integrity sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA==
+
 qs@6.9.6:
   version "6.9.6"
   resolved "https://registry.npmmirror.com/qs/download/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"