更新

public/home.html

@@ -13,6 +13,14 @@
     .canvas-stats {
       display: none;
     }
+    .erweima{
+      position: fixed;
+      top: 50px;
+      width: 100px;
+      height: 100px;
+      border: 1px solid red;
+      display: none;
+    }
   </style>
 </head>
 
@@ -23,6 +31,10 @@
     </a>
     <img class='image' src="static/images/logo.png" alt="">
     <p class='title'>中科在线（长春）技术交易平台</p>
+    <p style="color:#fff;display: none;" onclick="guanzhu()">关注公众号</p>
+  </div>
+  <div class='erweima' id="idma">
+ 二维码
   </div>
   <img class="sci-wheel" src="static/home/images/sci.gif" alt="">
   <div class="center">
@@ -404,6 +416,15 @@
     }
 
     ThreeJSCanvas(1);
+    function guanzhu() {
+    var idma = document.getElementById('idma');
+    if (idma.style.display == 'block') { // == 判断div.display是否为显示
+        idma.style.display = 'none'; //= 赋值也可了解成改变
+      }
+      else {
+        idma.style.display = 'block';
+      }
+    }
   </script>
 </body>
 <!-- layui -->

src/layout/live/head.vue

@@ -9,6 +9,7 @@
           <p>
             欢迎来到中科在线（长春）技术交易平台
           </p>
+          <p @click="guanzhu()" class="btnER">关注公众号</p>
           <p class="username">
             <span v-if="user.uid">
               {{ user.name || user.adminuser }}
@@ -67,6 +68,9 @@
           </div>
         </div>
       </div>
+      <div v-if="view" class="erweima">
+        <img :src="qc" />
+      </div>
     </div>
   </div>
 </template>
@@ -75,6 +79,7 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: login } = createNamespacedHelpers('login');
 const { mapActions: dockLogin } = createNamespacedHelpers('dockLogin');
+import QRCode from 'qrcode';
 export default {
   name: 'heads',
   props: {},
@@ -83,6 +88,8 @@ export default {
     return {
       top_bg: require('@/assets/live/top_bg.png'),
       logo: require('@/assets/live/logo.png'),
+      qc: '',
+      view: false,
     };
   },
   created() {
@@ -134,6 +141,22 @@ export default {
         window.location.reload();
       }
     },
+    // 关注公众号
+    guanzhu() {
+      if (this.view) {
+        this.view = false;
+      } else {
+        this.view = true;
+      }
+    },
+    async creatQrCode() {
+      let url = `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/bind/&type=1&uid=${this.user.uid}`; // 需要转换为二维码的内容
+      let el = document.getElementById('qrCodeUrl');
+      this.qc = await QRCode.toDataURL(url, { height: 200, width: 200 });
+    },
+  },
+  mounted() {
+    this.creatQrCode();
   },
   computed: {
     ...mapState(['user']),
@@ -165,4 +188,21 @@ export default {
   color: #fe950e;
   // border-color: #fe950e;
 }
+.btnER {
+  font-size: 16px;
+  padding: 10px 10px;
+  float: left;
+  font-weight: bold;
+}
+.btnER:hover {
+  color: #0085d2;
+  font-weight: bold;
+  cursor: pointer;
+}
+.erweima {
+  position: fixed;
+  top: 4%;
+  left: 40%;
+  z-index: 999;
+}
 </style>