更新

package.json

@@ -13,10 +13,11 @@
     "element-ui": "^2.13.2",
     "lodash": "^4.17.15",
     "naf-core": "^0.1.2",
-    "vant": "^2.8.2",
+    "qrcode": "^1.4.4",
+    "vant": "^2.8.4",
     "vue": "^2.6.11",
-    "vue-meta": "^2.3.3",
-    "vue-router": "^3.1.6",
+    "vue-meta": "^2.3.4",
+    "vue-router": "^3.3.2",
     "vuex": "^3.1.3",
     "wangeditor": "^3.1.1"
   },
@@ -31,7 +32,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.0.4",
+    "less": "^3.11.2",
     "less-loader": "^5.0.0",
     "prettier": "^1.19.1",
     "vue-template-compiler": "^2.6.11"

src/layout/layout-part/heads.vue

@@ -8,6 +8,7 @@
         <h3 class="headCompany">吉林省计算中心科技服务平台管理后台</h3>
       </div>
       <div class="headBtn">
+        <span class="mr14 bind" @click="bindBtn()">绑定微信</span>
         <span class="mr14">|</span>
         <span class="mr14">
           <span class="el-icon-s-custom info_icon"></span>
@@ -43,6 +44,10 @@ export default {
       //TODO 跳转到登陆
       window.location.href = 'http://free.liaoningdoupo.com/platlogin';
     },
+    // 绑定
+    bindBtn() {
+      this.$emit('bindBtn');
+    },
   },
 };
 </script>
@@ -105,62 +110,13 @@ a {
 .headBtn .el-button:hover {
   background: none;
 }
-.popover-content {
-  margin: 0;
-  padding: 0;
-  .el-col {
-    border-bottom: 1px dashed #cccccc;
-    font-size: 0.8rem;
-    height: 1.25rem;
-  }
+.bind {
+  cursor: pointer;
 }
-/deep/.el-popper {
+.qrcodeInfo {
+  float: left;
+  width: 100px;
   border: 1px solid #ccc;
-  border-radius: 0px;
-  height: 100px;
-  padding: 0;
-}
-/deep/.popoverCon {
-  width: 400px;
-  height: 70px;
-  text-align: center;
-  padding: 0;
-  margin: 0;
-}
-/deep/.popoverCon li {
-  list-style: none;
-}
-/deep/.popoverBtn {
-  position: absolute;
-  bottom: 0;
-  left: 0px;
-  width: 424px;
-  height: 30px;
-  line-height: 30px;
-  text-align: right;
-  color: #333;
-  border-radius: 0 0 4px 4px;
-  background: #f6f6f6;
-  margin: 0;
-  padding: 0;
-}
-/deep/.popoverBtn:hover {
-  text-decoration: underline;
-  color: #409eff;
-}
-/deep/.el-form-item__label {
-  padding: 0px 0px 0 0;
-}
-/deep/.el-dialog__header {
-  background-color: #40a44c;
-}
-/deep/.el-icon-close:before {
-  color: #000;
-}
-/deep/.el-dialog__footer {
-  padding: 0px 20px 10px;
-}
-/deep/.el-dialog__body {
-  padding: 15px 20px;
+  padding: 10px;
 }
 </style>

src/layout/main-layout.vue

@@ -1,18 +1,25 @@
 <template>
   <div id="main-layout">
-    <el-container style="background:#e7e8eb;">
-      <el-header height="4rem" class="head">
-        <heads></heads>
-      </el-header>
-      <el-container class="contain">
-        <el-aside width="13rem" class="side">
-          <newmenu></newmenu>
-        </el-aside>
-        <el-main class="main">
-          <router-view />
-        </el-main>
+    <el-row>
+      <el-container style="background:#e7e8eb;">
+        <el-header height="4rem" class="head">
+          <heads @bindBtn="bindBtn"></heads>
+        </el-header>
+        <el-container class="contain">
+          <el-aside width="13rem" class="side">
+            <newmenu></newmenu>
+          </el-aside>
+          <el-main class="main">
+            <router-view />
+          </el-main>
+        </el-container>
       </el-container>
-    </el-container>
+    </el-row>
+    <el-dialog title="绑定" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+      <div>
+        <img :src="qc" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -20,6 +27,7 @@
 import heads from '@/layout/layout-part/heads.vue';
 import newmenu from '@/layout/layout-part/newmenu.vue';
 import { mapActions, mapState } from 'vuex';
+import QRCode from 'qrcode';
 export default {
   name: 'main-layout',
   props: {},
@@ -27,10 +35,32 @@ export default {
     newmenu,
     heads,
   },
-  data: () => ({}),
+  data: () => ({
+    dialogVisible: false,
+    qc: '',
+  }),
   created() {},
-  computed: {},
-  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    bindBtn() {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.creatQrCode();
+      });
+    },
+    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 });
+    },
+    // 关闭
+    handleClose(done) {
+      done();
+    },
+  },
+  mounted() {},
 };
 </script>
 
@@ -59,4 +89,7 @@ export default {
   padding: 0;
   background: #ffffff;
 }
+/deep/.el-dialog__body {
+  text-align: center;
+}
 </style>

src/views/home/index.vue

@@ -3,15 +3,20 @@
     <p>{{ pageTitle }}</p>
   </div>
 </template>
+
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
   components: {},
-  data: () => ({}),
+  data: function() {
+    return {};
+  },
   created() {},
   methods: {},
   computed: {
+    ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
@@ -21,4 +26,5 @@ export default {
   },
 };
 </script>
+
 <style lang="less" scoped></style>