增加wx 组件

package-lock.json

@@ -13182,6 +13182,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "weixin-js-sdk": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npm.taobao.org/weixin-js-sdk/download/weixin-js-sdk-1.6.0.tgz",
+      "integrity": "sha1-/1BITYEYzhII8RJIz0ocCDFXdRQ="
+    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",

package.json

@@ -20,7 +20,8 @@
     "vant": "^2.12.8",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "weixin-js-sdk": "^1.6.0"
   },
   "devDependencies": {
     "amfe-flexible": "^2.2.1",

src/App.vue

@@ -1,15 +1,22 @@
 <template>
   <div id="app">
     <div
-      class="nsgk-global-main"
-      v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
+      :class="{
+        'nsgk-global-main':
+          !$route.meta.hidden || $route.meta.hidden == undefined,
+      }"
     >
-      <router-view />
-      <navFooter></navFooter>
-    </div>
-    <div class="nsgk-noNav-main" v-else>
-      <router-view />
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <router-view
+        v-if="!$route.meta.keepAlive || $route.meta.keepAlive == undefined"
+      />
+      <navFooter
+        v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
+      ></navFooter>
     </div>
+
     <!-- <div
       class="nsgk-global-main"
       v-if="!$route.meta.hidden || $route.meta.hidden == undefined"
@@ -46,7 +53,7 @@ export default {
   components: { navFooter },
   data: () => {
     return {
-      direction: "",
+      // direction: "",
     };
   },
   watch: {

src/assets/images/icon/compriseWx.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>企业微信</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="其他登录hover/点击" transform="translate(-1718.000000, -768.000000)">
+            <g id="编组" transform="translate(1512.000000, 732.000000)">
+                <g id="编组-8复制-2" transform="translate(99.000000, 37.000000)">
+                    <g id="企业微信" transform="translate(108.000000, 0.000000)">
+                        <circle id="Oval-Copy-3备份-2" stroke="#B6C1D8" stroke-width="0.9" cx="14.5" cy="14.5" r="14.5"></circle>
+                        <g id="企业微信-(1)" transform="translate(5.000000, 6.000000)" fill="#B6C1D8" fill-rule="nonzero">
+                            <path d="M10.9293676,13.9529926 C10.2234853,14.1647574 9.49407353,14.2941691 8.75289706,14.3176985 C7.79995588,14.3647574 6.87054412,14.2706397 5.94113235,14.0471103 C5.79995588,14.0235809 5.62348529,14.0471103 5.48230882,14.0941691 C4.77642647,14.4353456 4.05877941,14.8000515 3.35289706,15.1412279 C3.08230882,15.2824044 2.83525,15.3059338 2.59995588,15.1176985 C2.37642647,14.9529926 2.35289706,14.7059338 2.37642647,14.4118162 C2.47054412,13.8235809 2.54113235,13.2353456 2.59995588,12.6471103 C2.59995588,12.5294632 2.52936765,12.3529926 2.43525,12.258875 C1.50583824,11.3294632 0.705838235,10.3059338 0.305838235,9.01181618 C-0.447102941,6.44711029 0.23525,4.24711029 2.09407353,2.41181618 C5.49407353,-0.917595588 11.43525,-0.764654412 14.6823088,2.68240441 C15.83525,3.90593382 16.4705441,5.35299265 16.4940735,7.03534559 C16.2117206,6.90593382 15.8940735,6.83534559 15.5646618,6.83534559 L15.5176029,6.83534559 C14.4117206,6.88240441 13.5176029,7.71769853 13.3881912,8.81181618 C13.3646618,9.01181618 13.3646618,9.21181618 13.3881912,9.40005147 C12.9764265,9.81181618 12.4705441,10.0706397 11.8470147,10.1765221 L11.83525,10.1765221 C10.8470147,10.3765221 10.1293676,11.2706397 10.1293676,12.2706397 C10.1293676,12.9412279 10.43525,13.5529926 10.9293676,13.9529926 Z" id="路径"></path>
+                            <path d="M15.5646618,7.89416912 C16.0823088,7.89416912 16.5646618,8.23534559 16.6705441,8.77652206 C16.8117206,9.58828676 17.1646618,10.2941691 17.7411324,10.8824044 C17.8117206,10.9529926 17.7646618,11.1529926 17.7881912,11.2706397 C17.6470147,11.2706397 17.4705441,11.3176985 17.3999559,11.2471103 C16.8117206,10.6353456 16.0823088,10.3176985 15.2705441,10.1412279 C14.7293676,10.0235809 14.3646618,9.48240441 14.43525,8.94122794 C14.5176029,8.35299265 14.9764265,7.91769853 15.5646618,7.89416912 L15.5646618,7.89416912 Z M19.9411324,12.2941691 C19.9411324,12.858875 19.5999559,13.3176985 19.03525,13.4235809 C18.2587794,13.5647574 17.5646618,13.9176985 17.0117206,14.4706397 C16.8940735,14.5882868 16.7176029,14.6941691 16.5999559,14.5176985 C16.5528971,14.4235809 16.5764265,14.2000515 16.6470147,14.1294632 C17.2117206,13.5412279 17.5528971,12.8824044 17.6940735,12.0706397 C17.8117206,11.4824044 18.3528971,11.0941691 18.9176029,11.1647574 C19.5058382,11.2353456 19.9411324,11.7059338 19.9411324,12.2941691 L19.9411324,12.2941691 Z M16.6940735,15.5412279 C16.6940735,16.1059338 16.2823088,16.5882868 15.7176029,16.6706397 C15.1764265,16.7412279 14.6117206,16.4000515 14.4940735,15.858875 C14.3293676,15.0235809 13.9764265,14.2941691 13.3646618,13.6824044 C13.2940735,13.6118162 13.3411324,13.458875 13.3176029,13.3412279 C13.43525,13.3412279 13.63525,13.2941691 13.6823088,13.3412279 C14.2940735,13.9529926 15.0470147,14.2941691 15.8823088,14.4941691 C16.3999559,14.5882868 16.6705441,15.058875 16.6940735,15.5412279 L16.6940735,15.5412279 Z M11.1881912,12.2706397 C11.1881912,11.7765221 11.5528971,11.3176985 12.0470147,11.2235809 C12.8587794,11.0824044 13.5646618,10.7294632 14.1528971,10.1529926 C14.2234853,10.0824044 14.3999559,10.1059338 14.5176029,10.1059338 C14.4940735,10.2235809 14.5411324,10.4000515 14.4705441,10.4706397 C13.8823088,11.058875 13.5646618,11.7647574 13.3999559,12.5765221 C13.2823088,13.1647574 12.7411324,13.5059338 12.1764265,13.4118162 C11.6117206,13.3176985 11.1881912,12.8235809 11.1881912,12.2706397 L11.1881912,12.2706397 Z" id="形状"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icon/qq.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>qq</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="其他登录hover/点击" transform="translate(-1610.000000, -768.000000)">
+            <g id="编组" transform="translate(1512.000000, 732.000000)">
+                <g id="编组-8复制-2" transform="translate(99.000000, 37.000000)">
+                    <g id="qq">
+                        <path d="M14.4,9.05941988e-14 C6.44684796,9.05941988e-14 -3.48165941e-13,6.44725001 -3.48165941e-13,14.4 C-3.48165941e-13,22.35275 6.44688104,28.8 14.4,28.8 C22.353119,28.8 28.8,22.35275 28.8,14.4 C28.8,6.44725001 22.3531521,9.05941988e-14 14.4,9.05941988e-14 Z" id="Path-Copy-3" stroke="#B6C1D8" stroke-width="0.9"></path>
+                        <path d="M22.0591135,19.187179 C21.4889537,19.6760278 20.7484897,17.5776468 20.6421033,17.9003707 C20.3827135,18.6855465 20.2610851,19.2103185 19.4971435,20.0651279 C19.4563344,20.1107924 20.3804394,20.4447018 20.6421033,21.1574783 C20.8926122,21.8404778 21.3803241,22.9225952 18.1892853,23.2621589 C16.3167988,23.4613184 14.9637679,22.2643947 14.828895,22.2760412 C14.5790314,22.2980745 14.6902731,22.2760412 14.4216643,22.2760412 C14.2019159,22.2760412 14.18735,22.2920822 13.9805695,22.2760412 C13.9235658,22.2718313 13.3012884,23.2621589 10.5181564,23.2621589 C8.36086644,23.2621589 7.80253762,21.9042727 8.23619584,21.1574783 C8.67031502,20.4108376 9.39409282,20.1933939 9.29194712,20.0750229 C8.78963861,19.4929092 8.44294558,18.8702938 8.23619584,18.3077857 C8.18500007,18.1677195 8.14210134,18.0313716 8.1082679,17.9003707 C8.02987633,17.5999874 7.42914042,19.6640432 6.7843688,19.187179 C6.13959718,18.7104683 6.19709255,17.4971656 6.61452547,16.3358576 C7.03570742,15.1651463 8.09646768,14.0380098 8.10829861,13.7891296 C8.15070567,12.8632422 8.01693906,12.7094091 8.10829861,12.4662139 C8.31179102,11.9214983 8.55953425,12.1303684 8.55953428,11.8476547 C8.55953428,8.28678345 11.2058575,5.4 14.4700637,5.4 C17.7341163,5.4 20.3804702,8.28678345 20.3804702,11.8476547 C20.3804702,11.9843406 20.7350915,11.8476547 20.9049348,12.4662139 C20.9399053,12.5939574 20.9640281,13.0870163 20.9225737,13.7891296 C20.9028145,14.1264193 21.8216033,14.5368766 22.2965008,16.3358576 C22.7720744,18.1349923 22.2965008,18.9834714 22.0591135,19.187179 L22.0591135,19.187179 Z" id="QQ" fill="#B6C1D8" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icon/wx.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="31px" height="31px" viewBox="0 0 31 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>微信</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="手机号码登录-国家号-搜索" transform="translate(-1664.000000, -768.000000)">
+            <g id="编组" transform="translate(1512.000000, 732.000000)">
+                <g id="编组-8复制-2" transform="translate(99.000000, 37.000000)">
+                    <g id="微信" transform="translate(54.000000, 0.000000)">
+                        <path d="M14.4,9.05941988e-14 C6.44684796,9.05941988e-14 -3.48165941e-13,6.44725001 -3.48165941e-13,14.4 C-3.48165941e-13,22.35275 6.44688104,28.8 14.4,28.8 C22.353119,28.8 28.8,22.35275 28.8,14.4 C28.8,6.44725001 22.3531521,9.05941988e-14 14.4,9.05941988e-14 Z" id="Path-Copy-2" stroke="#B6C1D8" stroke-width="0.9"></path>
+                        <path d="M17.58375,11.601098 C17.79075,11.601098 17.9943749,11.6167245 18.199125,11.6390481 C17.647875,9.09192516 14.904,7.2 11.770875,7.2 C8.26875,7.2 5.4,9.5674179 5.4,12.5755232 C5.4,14.3111832 6.354,15.7365451 7.94925,16.8437957 L7.3125,18.7446504 L9.54,17.6373998 C10.3365,17.7925488 10.9755,17.9532788 11.770875,17.9532788 C11.971125,17.9532788 12.169125,17.9443493 12.364875,17.9298389 C12.241125,17.5068067 12.168,17.0647994 12.168,16.603817 C12.169125,13.8423876 14.558625,11.601098 17.58375,11.601098 L17.58375,11.601098 Z M14.15925,9.88776159 C14.64075,9.88776159 14.956875,10.2014082 14.956875,10.6769009 C14.956875,11.1501613 14.64075,11.4671564 14.15925,11.4671564 C13.683375,11.4671564 13.204125,11.1501613 13.204125,10.6769009 C13.204125,10.200292 13.68225,9.88776159 14.15925,9.88776159 L14.15925,9.88776159 Z M9.70087498,11.4671564 C9.22274997,11.4671564 8.74125,11.1501613 8.74125,10.6769009 C8.74125,10.2014082 9.22274997,9.88776159 9.70087498,9.88776159 C10.179,9.88776159 10.49625,10.200292 10.49625,10.6769009 C10.49625,11.1501613 10.179,11.4671564 9.70087498,11.4671564 L9.70087498,11.4671564 Z M23.4,16.5279168 C23.4,14.0008851 20.85075,11.9415329 17.987625,11.9415329 C14.95575,11.9415329 12.569625,14.0020013 12.569625,16.5279168 C12.569625,19.0616455 14.956875,21.1143007 17.987625,21.1143007 C18.622125,21.1143007 19.26225,20.9569193 19.899,20.7984217 L21.646125,21.7494071 L21.166875,20.1688961 C22.446,19.2156783 23.4,17.9532788 23.4,16.5279168 L23.4,16.5279168 Z M16.230375,15.7365451 C15.91425,15.7365451 15.593625,15.4240147 15.593625,15.1047872 C15.593625,14.7900244 15.91425,14.4730293 16.230375,14.4730293 C16.714125,14.4730293 17.028,14.7900244 17.028,15.1047872 C17.028,15.4240147 16.714125,15.7365451 16.230375,15.7365451 L16.230375,15.7365451 Z M19.73475,15.7365451 C19.420875,15.7365451 19.101375,15.4240147 19.101375,15.1047872 C19.101375,14.7900244 19.41975,14.4730293 19.73475,14.4730293 C20.214,14.4730293 20.532375,14.7900244 20.532375,15.1047872 C20.532375,15.4240147 20.214,15.7365451 19.73475,15.7365451 L19.73475,15.7365451 Z" fill="#B6C1D8" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/router/index.js

@@ -3,7 +3,16 @@ import Router from 'vue-router'
 
 
 Vue.use(Router)
-
+/**
+ * Note: 路由配置项
+ * name:'router-name'             // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * meta : {
+    keepAlive: true              // 如果设置为true，则会被 <keep-alive> 缓存 (默认 false)
+    title: 'title'               // 设置该路由在页面顶部的Title
+    index: '1'                   // 设置该路由页面切换是否左右滑动及权重，如不设页面不滑动  PS：功能暂时未启用
+    hidden: true                 // 如果设置为true，显示底部菜单，如不设或者false，不显示
+  }
+ */
 export const constantRoutes = [
   {
     path: '/',
@@ -14,7 +23,8 @@ export const constantRoutes = [
     name: 'index',
     meta: {
       title: '主页',
-      index: 1
+      index: 1,
+      keepAlive: true
     },
     component: (resolve) => require(['@/views/index'], resolve)
   },

src/views/login.vue

@@ -80,12 +80,28 @@
         </div>
       </van-form>
     </div>
+
+    <div class="reveal-modal-con">
+      <div class="dd_txt">
+        <router-link to="/">忘记密码</router-link>
+      </div>
+      <div class="other-login">
+        <p class="desc">—— 更多登录方式 ——</p>
+        <p class="icon-other-logins">
+          <router-link class="qq" to="/"></router-link>
+          <router-link class="wx" to="/"></router-link>
+          <router-link class="qywx" to="/"></router-link>
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { getCodeImg, getSmsCode, smsLogin } from "@/api/login";
 import Cookies from "js-cookie";
+//引用wx sdk
+import wx from "weixin-js-sdk";
 export default {
   name: "login",
   data() {
@@ -106,6 +122,17 @@ export default {
   },
   created() {
     this.getCode();
+    //调用微信公众号方法
+    // wx.config({
+    //     debug: true, // 开启调试模式,
+    //     appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
+    //     timestamp: res.timestamp, // 必填，生成签名的时间戳
+    //     nonceStr: res.nonceStr, // 必填，生成签名的随机串
+    //     signature: res.signature,// 必填，签名，见附录1
+    //     jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+    //   });
+
+    //分享要用encodeURIComponent()方法
   },
   methods: {
     getCode() {
@@ -203,16 +230,19 @@ export default {
       line-height: 90px;
       text-align: center;
       font-size: 30px;
-      background: #fff;
-      border-bottom: 2px solid #fff;
+
+      border-bottom: 2px solid #ddd;
       &.active {
-        background: #f5f5f5;
-        border-bottom: 2px solid #2386ee;
+        background: #fff;
+        border-bottom: 2px solid #fff;
         color: #2386ee;
       }
+      &:last-child {
+        border-left: 2px solid #ddd;
+      }
     }
-    border-bottom: 1px solid #b3bbd1;
-    border-top: 1px solid #eee;
+    background: #f5f5f5;
+    border-top: 1px solid #ddd;
   }
   .form_main {
     .form-submit {
@@ -222,5 +252,52 @@ export default {
       width: 220px;
     }
   }
+  .reveal-modal-con {
+    margin: 30px 40px 0;
+    .dd_txt {
+      text-align: center;
+      font-size: 28px;
+      a {
+        color: #666;
+      }
+    }
+    .other-login {
+      text-align: center;
+      .desc {
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #666;
+        letter-spacing: 0;
+        line-height: 30px;
+        height: 30px;
+        margin-top: 40px;
+        opacity: 0.7;
+      }
+      .icon-other-logins {
+        margin-top: 26px;
+        a {
+          &.qq {
+            background-image: url("~@/assets/images/icon/qq.svg");
+          }
+          &.wx {
+            background-image: url("~@/assets/images/icon/wx.svg");
+          }
+          &.qywx {
+            background-image: url("~@/assets/images/icon/compriseWx.svg");
+          }
+          position: relative;
+          display: inline-block;
+          margin: 0 12px;
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          text-indent: -9999px;
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          background-position: left top;
+        }
+      }
+    }
+  }
 }
 </style>