提交部分代码

package-lock.json

@@ -1217,8 +1217,7 @@
     "@types/node": {
       "version": "14.0.27",
       "resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-14.0.27.tgz?cache=0&sync_timestamp=1595997320788&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.0.27.tgz",
-      "integrity": "sha1-oVGHOvWl6FG1GzsGXJ5jOQqeDrE=",
-      "dev": true
+      "integrity": "sha1-oVGHOvWl6FG1GzsGXJ5jOQqeDrE="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -1232,6 +1231,14 @@
       "integrity": "sha1-FZJUFOCtLNdlv+9YhC9+JqesyyQ=",
       "dev": true
     },
+    "@types/qrcode": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.3.5.tgz",
+      "integrity": "sha512-92QMnMb9m0ErBU20za5Eqtf4lzUcSkk5w/Cz30q5qod0lWHm2loztmFs2EnCY06yT51GY1+m/oFq2D8qVK2Bjg==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/webpack-env": {
       "version": "1.15.2",
       "resolved": "https://registry.npm.taobao.org/@types/webpack-env/download/@types/webpack-env-1.15.2.tgz",
@@ -1953,14 +1960,12 @@
     "ansi-regex": {
       "version": "4.1.0",
       "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz",
-      "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc=",
-      "dev": true
+      "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
     },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz?cache=0&sync_timestamp=1589682811931&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-3.2.1.tgz",
       "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2394,8 +2399,7 @@
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.1.tgz",
-      "integrity": "sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE=",
-      "dev": true
+      "integrity": "sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE="
     },
     "batch": {
       "version": "0.6.1",
@@ -2695,11 +2699,29 @@
         "isarray": "^1.0.0"
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz",
-      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8=",
-      "dev": true
+      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8="
     },
     "buffer-indexof": {
       "version": "1.1.1",
@@ -2905,8 +2927,7 @@
     "camelcase": {
       "version": "5.3.1",
       "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1589682790492&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz",
-      "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
-      "dev": true
+      "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
     },
     "caniuse-api": {
       "version": "3.0.0",
@@ -3257,7 +3278,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3265,8 +3285,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -3951,8 +3970,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -4256,6 +4274,11 @@
         }
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npm.taobao.org/dir-glob/download/dir-glob-2.2.2.tgz",
@@ -5049,7 +5072,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
       "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
-      "dev": true,
       "requires": {
         "locate-path": "^3.0.0"
       }
@@ -5199,8 +5221,7 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz",
-      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=",
-      "dev": true
+      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
     },
     "get-stream": {
       "version": "4.1.0",
@@ -5721,8 +5742,7 @@
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npm.taobao.org/ieee754/download/ieee754-1.1.13.tgz",
-      "integrity": "sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q=",
-      "dev": true
+      "integrity": "sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q="
     },
     "iferr": {
       "version": "0.1.5",
@@ -6023,8 +6043,7 @@
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
     "is-glob": {
       "version": "4.0.1",
@@ -6469,7 +6488,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz",
       "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
-      "dev": true,
       "requires": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -7347,7 +7365,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz?cache=0&sync_timestamp=1594559734248&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-2.3.0.tgz",
       "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
-      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -7356,7 +7373,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz",
       "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
-      "dev": true,
       "requires": {
         "p-limit": "^2.0.0"
       }
@@ -7382,8 +7398,7 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
-      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
-      "dev": true
+      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
     },
     "pako": {
       "version": "1.0.11",
@@ -7479,8 +7494,7 @@
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
     },
     "path-is-absolute": {
       "version": "1.0.1",
@@ -7584,6 +7598,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz?cache=0&sync_timestamp=1589684269502&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpnp-webpack-plugin%2Fdownload%2Fpnp-webpack-plugin-1.6.4.tgz",
@@ -8341,6 +8360,105 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
+      "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
+          "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4"
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
@@ -8648,14 +8766,12 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
     "require-main-filename": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/require-main-filename/download/require-main-filename-2.0.0.tgz",
-      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs=",
-      "dev": true
+      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs="
     },
     "requires-port": {
       "version": "1.0.0",
@@ -8951,8 +9067,7 @@
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "set-value": {
       "version": "2.0.1",
@@ -11074,8 +11189,7 @@
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "worker-farm": {
       "version": "1.7.0",
@@ -11174,8 +11288,7 @@
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-4.0.0.tgz",
-      "integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms=",
-      "dev": true
+      "integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms="
     },
     "yallist": {
       "version": "3.1.1",

package.json

@@ -7,11 +7,13 @@
   },
   "dependencies": {
     "@types/js-md5": "^0.4.2",
+    "@types/qrcode": "^1.3.5",
     "axios": "^0.18.0",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.13.2",
     "js-md5": "^0.7.3",
+    "qrcode": "^1.4.4",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.2",

src/components/CommonDialog.vue

+<template>
+  <div class="common_dialog" :class="{'t_mask': showMask,'t_mask2':showMask2}" @click="ClickingBackground">
+    <div class="dialog_content">
+      <i class="iconfont iconjiufuqianbaoicon08" v-if="!close" @click.stop="closePopup"></i>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component
+export default class CommonDialog extends Vue {
+  @Prop({ type: Boolean, default: false }) showMask!: boolean;
+  @Prop({ type: Boolean, default: false }) showMask2!: boolean;
+  @Prop({ type: Boolean, default: false }) close!: boolean;
+  /**
+   * name
+   */
+  public ClickingBackground() {
+    // console.log("关闭当前弹窗");
+    this.$emit("ClickingBackground");
+  }
+  public closePopup() {
+    // console.log("关闭当前弹窗");
+    this.$emit("closePopup");
+  }
+}
+</script>
+<style scoped lang="less">
+.common_dialog {
+  z-index: 99; /* 最高 */
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+.t_mask {
+  background: rgba(0, 0, 0, 0.1);
+}
+.t_mask2{
+background-color: rgba(55, 55, 55, 0.6);
+}
+.dialog_content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  text-align: left;
+  background: #fff;
+  box-shadow: 0 0 20px 0 rgba(61, 118, 249, 0.18);
+  max-height: 80vh;
+  .iconjiufuqianbaoicon08 {
+    position: absolute;
+    top: -30px;
+    font-size: 28px;
+    cursor: pointer;
+    right: -30px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
+</style>

src/components/DialogInput.vue

+<template>
+  <div class="dialog_input">
+    <input
+      :value="value"
+      type="text"
+      class="input"
+      :class="{'js-input_error':errorShowing&&value.length===0}"
+      @input="handleInput"
+      v-bind="$attrs"
+      maxlength="10"
+    />
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+@Component
+export default class DialogInput extends Vue {
+  @Prop({ type: String, required: true }) value!: string;
+  @Prop({ type: Boolean, default: false }) errorShowing!: boolean; // 当前显示错误 todo 改为sync
+  public handleInput(e: any) {
+    const val = e.target.value;
+    this.$emit("input", val);
+  }
+}
+</script>
+<style scoped>
+.dialog_input {
+  display: inline-block;
+}
+.input {
+  box-sizing: border-box;
+  padding: 0 26px;
+  width: 500px;
+  height: 44px;
+  border: 1px solid #e2e2e2;
+  outline: none;
+  font-size: 18px;
+  color: #797d84;
+}
+.js-input_error {
+  border: 1px solid rgba(208, 2, 27, 0.5);
+}
+.input::placeholder {
+  color: #c0c6d2;
+}
+</style>

src/components/Pagination.vue

+<template>
+  <div class="pagination">
+    <div class="btn_nav" :class="{'js-btn_nav_disable':value===1}" @click="navLeft">
+      <i class="iconfont iconyidong btn_nav-icon btn_nav-icon_right"></i>
+    </div>
+    <span class="item_box" :class="{'js-item_box_active':value===1}" @click="changePage(1)">1</span>
+    <span v-if="mid[0]&&mid[0]>2" class="item_box">...</span>
+    <span v-for="item in mid"
+          class="item_box"
+          :class="{'js-item_box_active':value===item}"
+          :key="item"
+          @click="changePage(item)">{{item}}</span>
+    <span v-if="mid.length>4&&mid[mid.length-1]<pageCount-1" class="item_box">...</span>
+    <span class="item_box" v-if="pageCount>1" :class="{'js-item_box_active':value===pageCount}"
+          @click="changePage(pageCount)">{{pageCount}}</span>
+    <div class="btn_nav btn_nav_right" :class="{'js-btn_nav_disable':value===pageCount}" @click="navRight">
+      <i class="iconfont iconyidong btn_nav-icon"></i>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue} from 'vue-property-decorator';
+
+  /**
+   * 分页组件
+   * @author yuanzeyu
+   * @date 2019-05-30
+   * @desc @change
+   */
+  @Component
+  export default class Pagination extends Vue {
+    @Prop({type: Number, required: true}) value!: number; // 从1开始
+    @Prop({type: Number, required: true}) total!: number;
+    @Prop({type: Number, default: 10}) size!: number;
+
+    public get pageCount() {
+      return Math.ceil(this.total / this.size);
+    }
+
+
+    public get mid() {
+      const arr = Array.from({length: this.pageCount}, (value, key) => key + 1);
+      if (this.pageCount < 7) {
+        return arr.slice(1, this.pageCount - 1);
+      }
+      if (this.value < 4) {
+        return arr.splice(1, 5);
+      }
+      if (this.value > this.pageCount - 3) {
+        return arr.splice(-6, 5);
+      }
+      return arr.splice(this.value - 3, 5);
+    }
+
+    public navLeft() {
+      if (this.value !== 1) {
+        this.changePage(this.value - 1)
+      }
+    }
+
+    public navRight() {
+      if (this.value !== this.pageCount) {
+        this.changePage(this.value + 1)
+      }
+    }
+
+
+    public changePage(val: number) {
+      if (this.value === val) {
+        return;
+      }
+      this.$emit('input', val);
+      this.$emit('change', val);
+    }
+  }
+</script>
+
+<style scoped>
+  .pagination {
+    line-height: 20px;
+    height: 20px;
+    font-size: 0;
+  }
+
+  .item_box {
+    vertical-align: top;
+    display: inline-block;
+    min-width: 20px;
+    color: #BABABA;
+    font-size: 15px;
+    margin: 0 2px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .js-item_box_active {
+    color: #000;
+  }
+
+  .btn_nav {
+    display: inline-block;
+    margin: 0 8px 0 0; /* 15 - (20 - 9)/2 - 2*/
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    line-height: 20px;
+    text-align: center;
+    color: #7A7A7A;
+    background: #F1F1F1;
+    cursor: pointer;
+  }
+
+  .js-btn_nav_disable {
+    cursor: not-allowed;
+  }
+
+  .btn_nav-icon {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 500;
+    transform: scale(.5);
+  }
+
+  .btn_nav_right {
+    margin: 0 0 0 8px;
+  }
+
+  .btn_nav-icon_right {
+    transform: scale(.5) rotate(180deg);
+  }
+</style>

src/components/bootPage.vue

+<template>
+  <div class="bootPage">
+    <div class="view-windows">
+      <div class="view-window" :style="Style">
+        <div class="imgbox url1"></div>
+        <div class="imgbox url2"></div>
+        <div class="imgbox url3"></div>
+      </div>
+    </div>
+    <!-- url3 -->
+    <ul class="list">
+      <li :class="{'check':index===1}"></li>
+      <li :class="{'check':index===2}"></li>
+      <li :class="{'check':index===3}"></li>
+    </ul>
+    <div class="content" v-if="index===1">
+      <h1>存证溯源</h1>
+      <p>把信息储存到区块链浏览器里，追溯根源安全可靠。</p>
+    </div>
+    <div class="content" v-if="index===2">
+      <h1>增量更新</h1>
+      <p>多环节操作上链，多次上链，上传便捷。</p>
+    </div>
+    <div class="content" v-if="index===3">
+      <h1>更多功能即将上线</h1>
+      <p>存证交接成员管理即将上线，敬请期待~</p>
+    </div>
+    <div class="btnbox" v-if="index===3">
+      <div class="btn" @click="determine">确定</div>
+    </div>
+    <div class="btnbox" v-else>
+      <div class="btn" @click="next">下一步</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      index: 1,
+      containerWidth: 0,
+      reference: 420
+    };
+  },
+  computed: {
+    // 图片的左右移动
+    Style() {
+      const style = {
+        transform: "translateX(" + -1 * this.containerWidth + "px)"
+      };
+      return style;
+    }
+  },
+  methods: {
+    determine() {
+      localStorage.setItem("bootPage", "show2");
+      this.$emit("close");
+    },
+    next() {
+      let t = setInterval(() => {
+        this.containerWidth += 10;
+        if (this.containerWidth == this.reference) {
+          this.reference = this.reference + 420;
+          this.index++;
+          clearInterval(t);
+        }
+      }, 1);
+    }
+  }
+};
+</script>
+<style lang="less">
+* {
+  margin: 0;
+  padding: 0;
+}
+.bootPage {
+  width: 422px;
+  height: 490px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  padding: 26px;
+  .view-windows {
+    width: 420px;
+    overflow: hidden;
+    height: 195px;
+  }
+  .view-window {
+    width: 1000%;
+    height: 195px;
+  }
+  .imgbox {
+    width: 420px;
+    float: left;
+    height: 195px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  .url1 {
+    background-image: url("../../entry/main/images/9@2x.png");
+  }
+  .url2 {
+    background-image: url("../../entry/main/images/13@2x.png");
+  }
+  .url3 {
+    background-image: url("../../entry/main/images/1@2x.png");
+  }
+  .list {
+    list-style: none;
+    margin: 22px;
+    overflow: hidden;
+    margin-left: 194px;
+    li {
+      border-radius: 6px;
+      width: 6px;
+      cursor: pointer;
+      background: #b2bcc6;
+      height: 6px;
+      float: left;
+      &:nth-child(2) {
+        margin-right: 8px;
+        margin-left: 8px;
+      }
+    }
+    .check {
+      background: #353535 !important;
+    }
+  }
+  .content {
+    h1 {
+      font-size: 22px;
+      text-align: center;
+      font-weight: 400;
+      color: rgba(53, 53, 53, 1);
+      line-height: 1;
+    }
+    p {
+      text-align: center;
+      font-size: 16px;
+      line-height: 1;
+      font-weight: 400;
+      padding-top: 20px;
+      color: rgba(53, 53, 53, 1);
+    }
+  }
+  .btnbox {
+    margin-top: 126px;
+    .btn {
+      margin: 0 auto;
+      width: 120px;
+      height: 40px;
+      cursor: pointer;
+      text-align: center;
+      line-height: 40px;
+      color: white;
+      background: rgba(63, 121, 254, 1);
+      border-radius: 4px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/entry/refactoring/router.ts

@@ -18,6 +18,17 @@ let router = new Router({ // todo 移除旧页面
       name: 'signIn',
       component: () => import('./views/SignIn.vue'),
     },
+    {
+      path: '/main',
+      component: () => import(/* webpackChunkName: "main" */ './views/Main.vue'),
+      children: [
+        {
+          path: '/categoryManage',
+          name: 'categoryManage',
+          component: () => import(/* webpackChunkName: "categoryManage" */ './views/category/Index.vue'),
+        },
+      ]
+    }
     // {
     //   path: '/main',
     //   component: () => import(/* webpackChunkName: "main" */ './views/Main.vue'),

src/entry/refactoring/views/Main.vue

+<template>
+  <div class="main">
+    <!-- 左侧导航 -->
+    <main-menu class="col_left" />
+    <div class="col_right">
+      <main-header />
+      <div class="main_wrapper" v-if="freshFlag">
+        <router-view />
+      </div>
+    </div>
+    <!-- <first-add v-if="showFirstAdd" @finish="handleFinishAdd"/> -->
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+// 本地组件
+import MainHeader from "./MainHeader.vue";
+import MainMenu from "./MainMenu.vue";
+// import FirstAdd from "@/views/FirstAdd.vue";
+@Component({
+  components: {
+    MainMenu,
+    MainHeader,
+    // FirstAdd,
+  },
+})
+export default class Main extends Vue {
+  public uid: string = "";
+  // public showFirstAdd: boolean = true;
+  public freshFlag: boolean = true;
+
+  public created() {
+    // this.getUid();
+  }
+
+  // public exit() {
+  //   this.$router.push("/");
+  // }
+
+  /**
+   * 获取登录管理员的uid
+   */
+  // public getUid() {
+  //   this.uid = "10086";
+  // }
+
+  // public handleFinishAdd(isEdit: boolean) {
+  //   this.showFirstAdd = false;
+  //   if (isEdit) {
+  //     this.freshMain();
+  //   }
+  // }
+
+  // private freshMain() {
+  //   this.freshFlag = false;
+  //   this.$nextTick(() => {
+  //     this.freshFlag = true;
+  //   });
+  // }
+}
+</script>
+
+<style scoped>
+.main {
+  display: flex;
+  height: 100%;
+}
+
+.col_left {
+  flex-shrink: 0;
+}
+
+.col_right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.main_wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow-y: scroll;
+  background: white;
+  height: 100%;
+}
+</style>

src/entry/refactoring/views/MainHeader.vue

+<template>
+  <header class="main_header">
+    <img class="icon_logo" src="../images/logo.png" alt="logo" />
+    <div class="user_wrapper">
+      <i class="iconfont iconShapecopy1"></i>
+      <span class="user-text">UID:{{getid||"10086"}}</span>
+      <ul class="menu_box">
+        <li @click="go('quit')">退出</li>
+      </ul>
+      <i class="iconxiangyousanjiao iconfont"></i>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import * as storage from "@/entry/refactoring/plugins/storage";
+// import { getUserInfo } from "../../../views/userCenter/Api.service";
+@Component
+export default class MainHeader extends Vue {
+  get getid() {
+    return JSON.parse(String(sessionStorage.getItem('user'))).id
+  }
+  public go(target: string) {
+    // if (target === "user") this.$router.push("/userCenter");
+    // else {
+    // this.$store.commit("clearUserInfos");
+    // storage.cleanLogin();
+    sessionStorage.removeItem("user");
+    this.$router.push("/");
+    // }
+  }
+  // 获取用户基本信息
+  // async getUserInfos() {
+  //   // const res = await getUserInfo();
+  //   // if (res && res.code === 200200) {
+  //   //   this.$store.commit("updateUserInfo", res.data);
+  //   // }
+  // }
+  // public mounted() {
+  //   // this.getUserInfos();
+  // }
+}
+</script>
+
+<style scoped lang='less'>
+// 大盒子
+.main_header {
+  z-index: 1; /* shadow覆盖底部 */
+  position: relative;
+  height: 50px;
+  padding-right: 35px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 2px 40px 0px rgba(65, 70, 76, 0.07);
+}
+// logo
+.icon_logo {
+  margin-left: 27px;
+  margin-top: 12px;
+  height: 23px;
+}
+
+.user_wrapper {
+  margin-top: 12px;
+  float: right;
+  height: 100%;
+  color: #353535;
+  cursor: pointer;
+  .iconShapecopy1 {
+    vertical-align: middle;
+    margin-right: 6px;
+    font-size: 20px;
+    color: #d6d8e1;
+  }
+  .iconxiangyousanjiao {
+    color: #b4b4b4;
+    transform: rotate(90deg);
+    display: inline-block;
+    font-size: 12px;
+    margin-left: 14px;
+  }
+}
+.user_wrapper .menu_box {
+  display: none;
+}
+.user_wrapper:hover .menu_box {
+  display: block;
+}
+
+.user-icon {
+  /* todo ui切块错误 */
+  margin-right: 6px;
+  vertical-align: middle;
+  height: 20px;
+}
+
+.user-text {
+  vertical-align: middle;
+  color: #b4b4b4;
+}
+
+.menu_box {
+  position: absolute;
+  top: 100%;
+  right: 35px;
+  margin: 0;
+  padding: 0;
+  line-height: 41px; /* 非精确ui */
+  width: 107px; /* 109 - border */
+  list-style: none;
+  border: 1px solid #e7e7e7;
+  text-align: center;
+  color: #797d84;
+  background: #fff;
+}
+.menu_box li {
+  transition: 0.5s;
+  cursor: pointer;
+  background: white;
+}
+.menu_box li:hover {
+  background: #f5f5f5;
+}
+</style>

src/entry/refactoring/views/MainMenu.vue

+<template>
+  <!-- 左侧导航栏 -->
+  <nav class="main_menu">
+    <div
+      class="menu-item menu-item_first"
+      :class="{'js-menu-item_active':currentRoute===RoutePages.CategoryManage}"
+      @click="selectPage(RoutePages.CategoryManage)"
+    >
+      <div class="menu-item_subject-icon">
+        <i class="iconfont">&#xe62b;</i>
+      </div>
+      <div class="menu-item-label">存证</div>
+      <div class="menu-item-active_border"></div>
+    </div>
+    <div
+      class="menu-item menu-item_product"
+      :class="{'js-menu-item_active':currentRoute===RoutePages.ProductManage}"
+      @click="goworldtradebase"
+    >
+      <div class="menu-item_product-icon">
+        <i class="iconfont">&#xe629;</i>
+      </div>
+      <div class="menu-item-label">溯源</div>
+      <div class="menu-item-active_border"></div>
+    </div>
+    <div class="menu-item menu-item_template" @click="newPage()">
+      <div class="menu-item_template-icon">
+        <i class="iconfont">&#xe62a;</i>
+      </div>
+      <div class="menu-item-label">管理</div>
+      <div class="menu-item-active_border"></div>
+    </div>
+  </nav>
+</template>
+
+<script>
+let UrlPrefixObj = require("@/config/UrlPrefix");
+export default {
+  data() {},
+  methods: {},
+};
+// import { Component, Prop, Vue } from "vue-property-decorator";
+// import { RoutePages } from "@/types/common";
+
+// @Component
+// export default class MainMenu extends Vue {
+// public RoutePages = RoutePages;
+// 选中效果
+// data(){
+//   return{
+
+//   }
+// },
+
+//  currentRoute() {
+//     return this.$route.matched[1].name;
+//   }
+// 打开区块链浏览器
+// goworldtradebase() {
+//   window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
+// }
+// 跳转页面
+// selectPage(page) {
+//   // this.$router.push(page);
+// }
+// newPage() {
+//   this.$router.push("/userCenter");
+// }
+// }
+</script>
+<style scoped lang="less">
+.main_menu {
+  width: 62px;
+  height: 100%;
+  background: #27272a;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+  font-size: 12px;
+}
+
+.menu-item {
+  height: 60px;
+  position: relative;
+}
+
+.menu-item_first {
+  margin-top: 79px;
+}
+
+.menu-item_product {
+  margin-top: 21px; /* 30 - 9 */
+}
+
+.menu-item_template {
+  margin-top: 26px; /* 36 - 10 */
+}
+
+.js-menu-item_active {
+  background: #39393e;
+  cursor: pointer;
+  & > .menu-item-active_border {
+    display: initial;
+  }
+}
+
+.menu-item-active_border {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: #3f79fe;
+}
+
+.menu-item_subject-icon {
+  padding: 14px 0 5px 0;
+  & > i {
+    font-size: 14px;
+  }
+}
+
+.menu-item_product-icon {
+  padding: 12px 0 6px 0;
+  cursor: pointer;
+  & > i {
+    font-size: 15px;
+  }
+}
+
+.menu-item_template-icon {
+  padding: 9px 0 8px 0;
+  cursor: pointer;
+  & > i {
+    font-size: 16px;
+  }
+}
+
+.menu-item-label {
+  line-height: 17px;
+}
+</style>

src/shims-tsx.d.ts

@@ -11,3 +11,9 @@ declare global {
     }
   }
 }
+declare global {
+  interface Window {
+    callback_sendcode(res: any): void
+    callback_sendcode2(res: any): void
+  }
+}
\ No newline at end of file

src/utils/app/common.ts

+import QRCode from 'qrcode';
+import { Notification } from 'element-ui';
+import { CHAIN_BROWSER_URL } from "@/config/URLS";
+
+function getChainBrowserUrl(hash: string): string {
+  return `${CHAIN_BROWSER_URL}${hash}`;
+}
+
+/**
+ * 打开区块链浏览器查询商品
+ * @param hash
+ */
+export function openChainBrowser(hash: string) {
+  window.open(getChainBrowserUrl(hash));
+}
+// 返回支付二维码
+export async function payQR(pay_url: string) {
+  const res = await QRCode.toDataURL(pay_url)
+  if (res) {
+    return res
+  }
+}
+// 返回二维码
+export async function getQR(hash: string) {
+  const res = await QRCode.toDataURL(getChainBrowserUrl(hash))
+  if (res) {
+    return res
+  }
+}
+// 下载二维码
+export async function downloadQrCode(hash: string) {
+  QRCode.toDataURL(getChainBrowserUrl(hash))
+    .then(url => {
+      const a = document.createElement('a');
+      a.download = `二维码${Date.now()}`;
+      a.href = url;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    })
+    .catch(() => {
+      Notification.error('生成二维码失败');
+    });
+}

src/utils/tool/filter.ts

+import _Vue from 'vue'
+/**
+ * 全局filter
+ */
+
+/**
+ * 手机号掩码处理
+ * @param str
+ */
+export let filterPhone = (str: string) => String(str).substr(0, 3) + '****' + String(str).substr(-4);
+
+/**
+ * 时间戳转换
+ * @param timestamp 时间戳
+ * @param 转换格式 默认yy-mm-dd hh:mm:ss
+ */
+export let formatTime = (timestamp: any, format: string = 'Y-M-D h:m:s') => {
+  if (timestamp == null || timestamp == undefined || timestamp == 0) {
+    return ''
+  }
+  let date = new Date(parseInt(timestamp, 10) * 1000)
+  let fmtList = [{ k: 'Y', v: "date.getFullYear()" },
+  { k: 'M', v: "date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1" },
+  { k: 'D', v: "date.getDate() < 10 ? '0' + date.getDate() : date.getDate()" },
+  { k: 'h', v: "date.getHours() < 10 ? '0' + date.getHours() : date.getHours()" },
+  { k: 'm', v: "date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()" },
+  { k: 's', v: "date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()" },
+  ]
+  for (let i = 0; i < fmtList.length; i++) {
+    let fmt = fmtList[i];
+    let k = fmt.k;
+    if (format.indexOf(k) != -1) {
+      format = format.replace(k, eval(fmt.v));
+    }
+  }
+  return format;
+}
+
+const globalFilters = (Vue: typeof _Vue) => {
+  Vue.filter('filterPhone', filterPhone)
+  Vue.filter('formatTime', formatTime)
+}
+
+export default globalFilters
\ No newline at end of file

src/utils/tool/index.ts

+/**
+ * 工具
+ */
+
+/**
+ * 将图片文件转为DataUrl展示
+ * @param file
+ */
+export function file2DataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = (e: any) => {
+      resolve(e.target.result);
+    };
+    reader.onerror = () => {
+      reject('err');
+    };
+  });
+}
+
+export function fmtTimeStamp(format: string, timestamp: number) {//时间戳转化
+  if (timestamp == null || timestamp == undefined || timestamp == 0) {
+    return ''
+  }
+  var date = null;
+  if(String(timestamp).length > 10){
+    date = new Date(timestamp);
+  }
+  else{
+    date = new Date(timestamp * 1000);
+  }
+  var fmtList = [{ k: 'Y', v: "date.getFullYear()" },
+  { k: 'M', v: "date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1" },
+  { k: 'D', v: "date.getDate() < 10 ? '0' + date.getDate() : date.getDate()" },
+  { k: 'h', v: "date.getHours() < 10 ? '0' + date.getHours() : date.getHours()" },
+  { k: 'm', v: "date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()" },
+  { k: 's', v: "date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()" },
+  ]
+  for (var i = 0; i < fmtList.length; i++) {
+    let fmt = fmtList[i];
+    let k = fmt.k;
+    if (format.indexOf(k) != -1) {
+      format = format.replace(k, eval(fmt.v));
+    }
+  }
+  return format;
+}
+
+/**
+ * 获取一个本地用的随机id
+ */
+export function getUuid() {
+  return `${Date.now()}${Math.random()}`;
+}

src/vue.d.ts

+import Vue from 'vue';
+// import {GetParam, PostParam} from "@/plugins/axios-plugin";
+export interface ResBase {
+  code: number;
+  data: any;
+  message: string;
+}
+// import {ResBase} from "@/types/api";
+declare module 'vue/types/vue' {
+
+
+  interface Vue {
+    $ajax: (param: any) => Promise<ResBase | null>
+  }
+}