静态页面

package-lock.json

       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
-      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
-      "dev": true
+      "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
     },
     "batch": {
       "version": "0.6.1",
         "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.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
     },
     "buffer-indexof": {
       "version": "1.1.1",
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "0.3.0",
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
         "randombytes": "^2.0.0"
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
     "dir-glob": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
     },
     "emojis-list": {
       "version": "2.1.0",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
     "ieee754": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
-      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
-      "dev": true
+      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
     },
     "iferr": {
       "version": "0.1.5",
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
     "is-generator-fn": {
       "version": "1.0.0",
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
     },
     "path-is-absolute": {
       "version": "1.0.1",
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "portfinder": {
       "version": "1.0.19",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.19.tgz",
       "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": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "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"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "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"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
+        "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.9.4",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.9.4.tgz",
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
     "require-from-string": {
       "version": "2.0.2",
     "set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "set-value": {
       "version": "2.0.0",
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
     "wide-align": {
       "version": "1.1.3",
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-      "dev": true
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
     },
     "yallist": {
       "version": "2.1.2",

package.json

     "exports-loader": "^0.7.0",
     "js-md5": "^0.7.3",
     "md5": "^2.3.0",
+    "qrcode": "^1.4.4",
     "qs": "^6.9.4",
     "script-loader": "^0.7.2",
     "vant": "^2.10.3",

src/pages/WoDe/ZhiFuBaoRenZheng copy/index.vue

+<template>
+  <div class="Page">
+    <MainPageContainer @UserInfoChange="UserInfoChange" :ShowMainHeader="true" :MainHeaderTitle="`支付宝认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`">
+      <div class="Container">
+        <div class="Content" v-if="UserInfo !== null && UserInfo.isValidAli">
+
+          <div>
+            <div class="Line flex-h">
+              <span>支付宝账号</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请输入您的支付宝账号">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>真实姓名</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请输入您的真实姓名">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>联系人电话</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请填写您的手机号码">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>联系人邮箱</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请填写您的邮箱">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>店铺地址</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请填写详细的店铺地址">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>代销证编号</span>
+              <div class="flex-item">
+                <div>
+                  <input type="text" placeholder="请填写编号">
+                </div>
+              </div>
+            </div>
+            <div class="Line flex-h">
+              <span>代销证截止日期</span>
+              <div class="flex-item">
+                <div>
+                  <span>xxxx</span>
+                </div>
+              </div>
+              <i class="iconfont iconjiantouright"></i>
+            </div>
+          </div>
+
+          <div class="PhotoList flex-h">
+            <div class="flex-item">
+              <ul>
+                <li>
+                  <a>
+                    <i class="iconfont iconjia centerLabel"></i>
+                  </a>
+                  <span>上传代销证</span>
+                </li>
+                <li>
+                  <div>
+                    <img src="" class="centerLabel contain" alt="">
+                  </div>
+                  <span>示例</span>
+                </li>
+                <li>
+                  <div>
+                    <img src="" class="centerLabel contain" alt="">
+                  </div>
+                  <span></span>
+                </li>
+              </ul>
+            </div>
+            <div class="flex-item">
+              <ul>
+                <li>
+                  <a>
+                    <i class="iconfont iconjia centerLabel"></i>
+                  </a>
+                  <span>上传门牌头</span>
+                </li>
+                <li>
+                  <div>
+                    <img src="" class="centerLabel contain" alt="">
+                  </div>
+                  <span>示例</span>
+                </li>
+                <li>
+                  <div>
+                    <img src="" class="centerLabel contain" alt="">
+                  </div>
+                  <span></span>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+        </div>
+        <div class="Content" v-if="UserInfo !== null && !UserInfo.isValidAli">
+          <a class="AliShouQuan centerLabel" @click="ShouQuan">支付宝授权</a>
+        </div>
+      </div>
+    </MainPageContainer>
+  </div>
+</template>
+
+<script>
+import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: 'index',
+  data () {
+    return {
+      DataLock: false,
+      Timer: null
+    }
+  },
+  computed: {
+    ...mapUserState({
+      CurrentShopInfo: x => x.CurrentShopInfo,
+      UserInfo: x => x.UserInfo
+    })
+  },
+  components: {
+    MainPageContainer
+  },
+  created () {
+    if (this.UserInfo !== null) {
+      this.UserInfoChange()
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapUserActions([
+      'GetAliAppId'
+    ]),
+    ShouQuan () {
+      this.GetAliAppId().then((res) => {
+        console.log(111)
+        window.ap.getAuthCode({
+          appId: res.data.data,
+          scopes: ['auth_base'],
+          showErrorTip: true
+        }, (subRes) => {
+          console.log(subRes, 222)
+        })
+      })
+    },
+    UserInfoChange () {
+      if (this.UserInfo !== null && !this.UserInfo.isValidAli) {
+
+      }
+    },
+    Refresh (done) { // 页面下拉刷新
+      window.setTimeout(() => {
+        done()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/WoDe/ZhiFuBaoRenZheng copy/page.scss

+.Page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #f2f2f2;
+  .Container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    > .Content {
+      position: relative;
+      overflow: hidden;
+      padding-bottom: 0.2rem;
+      min-height: 100%;
+      > .AliShouQuan {
+        font-size: 0.14rem;
+        line-height: 0.4rem;
+        width: 80%;
+        text-align: center;
+        background: #d91e36;
+        color: #fff;
+        border-radius: 0.06rem;
+      }
+      > div {
+        padding: 0 0.15rem;
+        background: #fff;
+        margin-top: 0.1rem;
+        position: relative;
+        overflow: hidden;
+        &:first-child {
+          margin-top: 0;
+        }
+        > .Line {
+          align-items: center;
+          padding: 0.1rem 0;
+          border-top: 0.01rem solid #f7f7f7;
+          &:first-child {
+            border-top: none;
+          }
+          > em {
+            font-size: 0.12rem;
+            color: #d91e36;
+          }
+          > span {
+            font-size: 0.15rem;
+            line-height: 0.3rem;
+            min-width: 0.9rem;
+          }
+          > div.flex-item {
+            > div {
+              width: 100%;
+              position: relative;
+              overflow: hidden;
+              > input {
+                width: 100%;
+                font-size: 0.12rem;
+                line-height: 0.2rem;
+              }
+              > span {
+                display: block;
+                font-size: 0.12rem;
+                text-align: right;
+              }
+            }
+          }
+          > i {
+            font-size: 0.2rem;
+            color: #999;
+            margin-left: 0.1rem;
+          }
+        }
+        &.PhotoList {
+          padding-top: 0.15rem;
+          padding-bottom: 0.15rem;
+          padding-left: 0;
+          > div {
+            position: relative;
+            border-left: 0.01rem solid #f7f7f7;
+            padding-left: 0.15rem;
+            &:first-child {
+              border-left: none;
+            }
+            > ul {
+              font-size: 0;
+              > li {
+                display: inline-block;
+                vertical-align: middle;
+                position: relative;
+                margin-left: 0.1rem;
+                margin-bottom: 0.1rem;
+                width: 0.7rem;
+                &:nth-child(2n + 1) {
+                  margin-left: 0;
+                }
+                > a {
+                  width: 100%;
+                  display: block;
+                  padding-bottom: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  box-sizing: border-box;
+                  border: 0.01rem dashed #ccc;
+                  > i {
+                    font-size: 0.2rem;
+                    color: #999;
+                  }
+                }
+                > div {
+                  width: 100%;
+                  padding-bottom: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  background: #ccc;
+                }
+                > span {
+                  font-size: 0.12rem;
+                  display: block;
+                  text-align: center;
+                  line-height: 0.2rem;
+                  height: 0.2rem;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/WoDe/ZhiFuBaoRenZheng/index.vue

 <template>
   <div class="Page">
-    <MainPageContainer @UserInfoChange="UserInfoChange" :ShowMainHeader="true" :MainHeaderTitle="`支付宝认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreText="`保存`">
+    <MainPageContainer @ShopInfoChange="ShopInfoChange" :ShowMainHeader="true" :MainHeaderTitle="`店铺认证`" :ShowMainHeaderBack="true" :ShowMainHeaderMore="true" :MainHeaderMoreIcon="`iconbaocun`" :MainHeaderMoreText="`保存`" :MainHeaderMoreClick="SaveForm">
       <div class="Container">
-        <div class="Content" v-if="UserInfo !== null && UserInfo.isValidAli">
+        <div class="Content">
 
           <div>
             <div class="Line flex-h">
-              <span>支付宝账号</span>
+              <em>*</em>
+              <span>店铺名称</span>
               <div class="flex-item">
                 <div>
-                  <input type="text" placeholder="请输入您的支付宝账号">
+                  <input type="text" placeholder="请输入您的店铺名称" v-model="ShopName">
                 </div>
               </div>
             </div>
             <div class="Line flex-h">
-              <span>真实姓名</span>
+              <em>*</em>
+              <span>店主联系人</span>
               <div class="flex-item">
                 <div>
-                  <input type="text" placeholder="请输入您的真实姓名">
+                  <input type="text" placeholder="请输入您的真实姓名" v-model="RealName">
                 </div>
               </div>
             </div>
             <div class="Line flex-h">
-              <span>联系人电话</span>
+              <em>*</em>
+              <span>手机号码</span>
               <div class="flex-item">
                 <div>
-                  <input type="text" placeholder="请填写您的手机号码">
+                  <input type="text" placeholder="请填写正确的手机号码" v-model="Phone">
                 </div>
               </div>
             </div>
+          </div>
+
+          <div>
             <div class="Line flex-h">
-              <span>联系人邮箱</span>
-              <div class="flex-item">
-                <div>
-                  <input type="text" placeholder="请填写您的邮箱">
-                </div>
+              <em>*</em>
+              <span>营业执照</span>
+            </div>
+            <div class="PhotoList">
+              <a class="Add" @click="$refs.ZzFile.click()" v-if="ZZImg === null">
+                <i class="iconfont iconjia centerLabel"></i>
+              </a>
+              <div v-if="ZZImg !== null">
+                <img :src="ZZImg" class="centerLabel contain" alt="">
+                <a class="iconfont iconguanbi" @click="ZZImg = null"></a>
               </div>
+              <input type="file" ref="ZzFile" @change="ZzFileChange" style="display: none">
             </div>
+          </div>
+
+          <div>
             <div class="Line flex-h">
-              <span>店铺地址</span>
-              <div class="flex-item">
+              <span>身份证</span>
+            </div>
+            <div class="IdCardList">
+              <div>
+                <a @click="$refs.SfzzmFile.click()">
+                  <img v-if="SfzzmImg !== null" :src="SfzzmImg" class="centerLabel contain" alt="">
+                </a>
+                <span>身份证正面照</span>
+                <input type="file" ref="SfzzmFile" @change="SfzzmFileChange" style="display: none">
+              </div>
+              <div>
+                <a @click="$refs.SfzfmFile.click()">
+                  <img v-if="SfzfmImg !== null" :src="SfzfmImg" class="centerLabel contain" alt="">
+                </a>
+                <span>身份证背面照</span>
+                <input type="file" ref="SfzfmFile" @change="SfzfmFileChange" style="display: none">
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div class="Line flex-h">
+              <span>所在地区</span>
+              <div class="flex-item" @click="ShowAreaSelect = true">
                 <div>
-                  <input type="text" placeholder="请填写详细的店铺地址">
+                  <span v-if="Province !== ''">{{Province}} {{City}}</span>
+                  <span v-else>请选择地区</span>
                 </div>
               </div>
+              <i class="iconfont iconjiantouright"></i>
             </div>
             <div class="Line flex-h">
-              <span>代销证编号</span>
+              <span>详细地址</span>
               <div class="flex-item">
                 <div>
-                  <input type="text" placeholder="请填写编号">
+                  <input type="text" placeholder="街道、门牌号等" style="text-align: right;" v-model="AddressDetail">
                 </div>
               </div>
             </div>
             <div class="Line flex-h">
-              <span>代销证截止日期</span>
-              <div class="flex-item">
+              <span>营业时间</span>
+              <div class="flex-item" @click="ShowTimeStartSelect = true">
                 <div>
-                  <span>xxxx</span>
+                  <span style="text-align: center;">{{StartTime === null ? '开始时间' : StartTime}}</span>
+                </div>
+              </div>
+              <em>至</em>
+              <div class="flex-item" @click="ShowTimeEndSelect = true">
+                <div>
+                  <span style="text-align: center;">{{EndTime === null ? '结束时间' : EndTime}}</span>
                 </div>
               </div>
               <i class="iconfont iconjiantouright"></i>
             </div>
+            <router-link tag="div" :to="{ name: 'ZhiFuBaoRenZheng' }" class="Line flex-h">
+              <span>收款管理</span>
+              <div class="flex-item"></div>
+              <i class="iconfont iconjiantouright"></i>
+            </router-link>
           </div>
 
-          <div class="PhotoList flex-h">
-            <div class="flex-item">
-              <ul>
-                <li>
-                  <a>
-                    <i class="iconfont iconjia centerLabel"></i>
-                  </a>
-                  <span>上传代销证</span>
-                </li>
-                <li>
-                  <div>
-                    <img src="" class="centerLabel contain" alt="">
-                  </div>
-                  <span>示例</span>
-                </li>
-                <li>
-                  <div>
-                    <img src="" class="centerLabel contain" alt="">
-                  </div>
-                  <span></span>
-                </li>
-              </ul>
+        </div>
+        <div class="MapContainer" v-show="ShowAreaSelect">
+          <MapSearch @Close="ShowAreaSelect = false" @Sure="SureAddress"></MapSearch>
+        </div>
+        <div class="PickLayer" v-show="ShowTimeStartSelect">
+          <div>
+            <van-datetime-picker v-model="CurrentStartDate" type="time" @confirm="StartTimeConfirm" @cancel="ShowTimeStartSelect = false" />
+          </div>
+        </div>
+        <div class="PickLayer" v-show="ShowTimeEndSelect">
+          <div>
+            <van-datetime-picker v-model="CurrentEndDate" type="time" @confirm="EndTimeConfirm" @cancel="ShowTimeEndSelect = false" />
+          </div>
+        </div>
+
+        <div class="QrCodeLayer" v-if="!CurrentShopInfo.isAliAuthed && ShowQrCodeLayer">
+          <div class="centerLabel">
+            <div class="Top">
+              <span>授权二维码</span>
+              <a class="iconfont iconguanbi" @click="ShowQrCodeLayer = false"></a>
             </div>
-            <div class="flex-item">
-              <ul>
-                <li>
-                  <a>
-                    <i class="iconfont iconjia centerLabel"></i>
-                  </a>
-                  <span>上传门牌头</span>
-                </li>
-                <li>
-                  <div>
-                    <img src="" class="centerLabel contain" alt="">
-                  </div>
-                  <span>示例</span>
-                </li>
-                <li>
-                  <div>
-                    <img src="" class="centerLabel contain" alt="">
-                  </div>
-                  <span></span>
-                </li>
-              </ul>
+            <div class="QrCode">
+              <img :src="QrCodeUrl" class="centerLabel contain" alt="">
             </div>
+            <span class="Tips">请保存此二维码截图至手机，并用手机支付宝识别图中二维码，进行授权。</span>
           </div>
-
-        </div>
-        <div class="Content" v-if="UserInfo !== null && !UserInfo.isValidAli">
-          <a class="AliShouQuan centerLabel" @click="ShouQuan">支付宝授权</a>
         </div>
       </div>
     </MainPageContainer>
 </template>
 
 <script>
+import QRCode from 'qrcode'
+import { Picker, DatetimePicker } from 'vant'
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import MapSearch from '../../../components/common/MapSearch'
 import { createNamespacedHelpers } from 'vuex'
-const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'index',
   data () {
     return {
+      QrCodeUrl: null,
+      ShowQrCodeLayer: true,
+      ShopName: '',
+      RealName: '',
+      Phone: '',
+      AddressDetail: '',
+      Province: '',
+      City: '',
+      Address: '',
+      Lat: null,
+      Lng: null,
       DataLock: false,
-      Timer: null
+      CurrentStartDate: '08:00',
+      ShowTimeStartSelect: false,
+      CurrentEndDate: '18:00',
+      ShowTimeEndSelect: false,
+      ShowAreaSelect: false,
+      ZzFileData: null,
+      ZZImg: null,
+      SfzzmImg: null,
+      SfzfmImg: null,
+      AreaList: [null, null],
+      StartTime: null,
+      EndTime: null
     }
   },
   computed: {
     })
   },
   components: {
-    MainPageContainer
+    MapSearch,
+    MainPageContainer,
+    'van-picker': Picker,
+    'van-datetime-picker': DatetimePicker
   },
   created () {
-    if (this.UserInfo !== null) {
-      this.UserInfoChange()
+    if (this.CurrentShopInfo !== null) {
+      this.ShopInfoChange()
     }
   },
   mounted () {
     })
   },
   methods: {
+    ...mapUserMutations([
+      ''
+    ]),
     ...mapUserActions([
-      'GetAliAppId'
+      'ImgUpload',
+      'ShopValid',
+      'GetCurrentShopInfo'
     ]),
-    ShouQuan () {
-      this.GetAliAppId().then((res) => {
-        console.log(111)
-        window.ap.getAuthCode({
-          appId: res.data.data,
-          scopes: ['auth_base'],
-          showErrorTip: true
-        }, (subRes) => {
-          console.log(subRes, 222)
+    ShopInfoChange () {
+      this.ShopName = this.CurrentShopInfo.name
+      this.ZZImg = this.CurrentShopInfo.businessLicense
+      this.AddressDetail = this.CurrentShopInfo.address
+      this.City = this.CurrentShopInfo.cityId
+      this.Province = this.CurrentShopInfo.provinceName
+      this.SfzzmImg = this.CurrentShopInfo.shopkeeper.frontIdCard
+      this.SfzfmImg = this.CurrentShopInfo.shopkeeper.backIdCard
+      this.RealName = this.CurrentShopInfo.shopkeeper.name
+      this.Phone = this.CurrentShopInfo.shopkeeper.phone
+      this.Lat = this.CurrentShopInfo.lat
+      this.Lng = this.CurrentShopInfo.lng
+      this.StartTime = this.CurrentShopInfo.openTime
+      this.EndTime = this.CurrentShopInfo.closeTime
+      if (!this.CurrentShopInfo.isAliAuthed) {
+        QRCode.toDataURL(this.CurrentShopInfo.aliAuthURL).then((res) => {
+          this.QrCodeUrl = res
+        }).catch((res) => {
+          console.log(res)
         })
-      })
+      }
     },
-    UserInfoChange () {
-      if (this.UserInfo !== null && !this.UserInfo.isValidAli) {
-
+    CheckForm () { // 校验表单
+      if (this.ShopName === '') {
+        this.Toast('店铺名不能为空')
+        return false
+      }
+      if (this.RealName === '') {
+        this.Toast('真实姓名不能为空')
+        return false
+      }
+      if (this.Phone === '') {
+        this.Toast('手机号不能为空')
+        return false
       }
+      if (this.ZZImg === null) {
+        this.Toast('营业执照必须上传')
+        return false
+      }
+      return true
+    },
+    SaveForm () { // 保存认证
+      if (this.DataLock || !this.CheckForm()) return
+      this.DataLock = true
+      let Data = {
+        shop: {
+          businessLicense: this.ZZImg,
+          address: this.AddressDetail,
+          cityId: this.City,
+          keeperId: this.UserInfo.keeperId,
+          lat: this.Lat,
+          lng: this.Lng,
+          name: this.ShopName,
+          provinceId: this.Province,
+          openTime: this.StartTime,
+          closeTime: this.EndTime
+        },
+        shopkeeper: {
+          avatar: this.UserInfo.avatar,
+          backIdCard: this.SfzfmImg,
+          frontIdCard: this.SfzzmImg,
+          keeperId: this.UserInfo.keeperId,
+          name: this.UserInfo.name,
+          phone: this.UserInfo.phone
+        }
+      }
+      this.ShopValid({ data: { ...Data } }).then((res) => {
+        this.Toast('认证提交成功')
+        this.GetCurrentShopInfo()
+        this.DataLock = false
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    },
+    EndTimeConfirm (e) { // 确定选择结束时间
+      this.EndTime = this.CurrentEndDate
+      this.ShowTimeEndSelect = false
+    },
+    StartTimeConfirm (e) { // 确定选择开始时间
+      this.StartTime = this.CurrentStartDate
+      this.ShowTimeStartSelect = false
+    },
+    SureAddress (e) { // 确认选取地址
+      this.Province = e.province
+      this.City = e.city
+      this.Address = e.title
+      this.AddressDetail = e.address
+      this.Lat = e.point.lat
+      this.Lng = e.point.lng
+      this.ShowAreaSelect = false
+    },
+    SfzzmFileChange (e) { // 身份证正面照更新
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'shop' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.SfzzmFile.value = ''
+        this.SfzzmImg = res.data.data
+      })
+    },
+    SfzfmFileChange (e) { // 身份证反面照更新
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'shop' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.SfzfmFile.value = ''
+        this.SfzfmImg = res.data.data
+      })
+    },
+    ZzFileChange (e) { // 营业执照图片更新
+      let aFormData = new FormData()
+      aFormData.append('file', e.target.files[0])
+      this.ImgUpload({ urlData: { plat: 'shop' }, data: aFormData, headers: { 'Content-Type': 'multipart/form-data' } }).then((res) => {
+        this.$refs.ZzFile.value = ''
+        this.ZZImg = res.data.data
+      })
     },
     Refresh (done) { // 页面下拉刷新
       window.setTimeout(() => {

src/pages/WoDe/ZhiFuBaoRenZheng/page.scss

       position: relative;
       overflow: hidden;
       padding-bottom: 0.2rem;
-      min-height: 100%;
-      > .AliShouQuan {
-        font-size: 0.14rem;
-        line-height: 0.4rem;
-        width: 80%;
-        text-align: center;
-        background: #d91e36;
-        color: #fff;
-        border-radius: 0.06rem;
-      }
       > div {
         padding: 0 0.15rem;
         background: #fff;
             margin-left: 0.1rem;
           }
         }
-        &.PhotoList {
-          padding-top: 0.15rem;
+        > .PhotoList {
+          font-size: 0;
+          padding-bottom: 0.15rem 0.15rem 0;
+          text-align: center;
+          > * {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 0.15rem;
+            margin-bottom: 0.15rem;
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+          > a {
+            width: 0.6rem;
+            height: 0.6rem;
+            border: 0.01rem dashed #ccc;
+            position: relative;
+            overflow: hidden;
+            box-sizing: border-box;
+          }
+          > div {
+            width: 0.6rem;
+            height: 0.6rem;
+            position: relative;
+            overflow: visible;
+            background: #ccc;
+            > img {
+              z-index: 1;
+            }
+            > a {
+              display: inline-block;
+              position: absolute;
+              font-size: 0.1rem;
+              width: 0.16rem;
+              line-height: 0.16rem;
+              text-align: center;
+              color: #fff;
+              border-radius: 100%;
+              background: #d91e36;
+              right: -0.04rem;
+              top: -0.04rem;
+              z-index: 2;
+            }
+          }
+        }
+        > .IdCardList {
+          position: relative;
+          overflow: visible;
+          text-align: center;
+          font-size: 0;
+          white-space: nowrap;
           padding-bottom: 0.15rem;
-          padding-left: 0;
           > div {
+            display: inline-block;
+            vertical-align: middle;
+            width: 1.28rem;
             position: relative;
-            border-left: 0.01rem solid #f7f7f7;
-            padding-left: 0.15rem;
+            overflow: visible;
+            margin-left: 0.4rem;
             &:first-child {
-              border-left: none;
+              margin-left: 0;
             }
-            > ul {
-              font-size: 0;
-              > li {
-                display: inline-block;
-                vertical-align: middle;
-                position: relative;
-                margin-left: 0.1rem;
-                margin-bottom: 0.1rem;
-                width: 0.7rem;
-                &:nth-child(2n + 1) {
-                  margin-left: 0;
-                }
-                > a {
-                  width: 100%;
-                  display: block;
-                  padding-bottom: 100%;
-                  position: relative;
-                  overflow: hidden;
-                  box-sizing: border-box;
-                  border: 0.01rem dashed #ccc;
-                  > i {
-                    font-size: 0.2rem;
-                    color: #999;
-                  }
-                }
-                > div {
-                  width: 100%;
-                  padding-bottom: 100%;
-                  position: relative;
-                  overflow: hidden;
-                  background: #ccc;
-                }
-                > span {
-                  font-size: 0.12rem;
-                  display: block;
-                  text-align: center;
-                  line-height: 0.2rem;
-                  height: 0.2rem;
-                }
-              }
+            > a {
+              width: 100%;
+              display: block;
+              padding-bottom: 58.59%;
+              background: #fff;
+              border-radius: 0.06rem;
+              position: relative;
+              overflow: hidden;
+              box-shadow: 0 0 0.02rem 0.02rem rgba(0, 0, 0, 0.05);
+            }
+            > span {
+              display: block;
+              font-size: 0.12rem;
+              line-break: 0.2rem;
+              text-align: center;
+              margin-top: 0.15rem;
             }
           }
         }
       }
     }
+    > .MapContainer {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 100;
+    }
+    > .PickLayer {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 100;
+      > div {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        overflow: hidden;
+      }
+    }
+    > .QrCodeLayer {
+      width: 100%;
+      position: fixed;
+      z-index: 10;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      > div {
+        width: 80%;
+        border-radius: 0.06rem;
+        background: #fff;
+        padding: 0.1rem 0;
+        > .Top {
+          position: relative;
+          overflow: hidden;
+          > span {
+            display: block;
+            font-size: 0.14rem;
+            text-align: center;
+            position: relative;
+            z-index: 1;
+            line-height: 0.4rem;
+          }
+          > a {
+            display: inline-block;
+            font-size: 0.18rem;
+            position: absolute;
+            z-index: 2;
+            right: 0.15rem;
+            top: 0;
+            line-height: 0.4rem;
+          }
+        }
+        > .QrCode {
+          width: 1.5rem;
+          height: 1.5rem;
+          border: 0.01rem solid #eee;
+          position: relative;
+          overflow: hidden;
+          margin: 0 auto;
+        }
+        > span {
+          display: block;
+          padding: 0 0.15rem;
+          font-size: 0.12rem;
+          line-height: 0.2rem;
+          margin-top: 0.15rem;
+          text-align: center;
+        }
+      }
+    }
   }
 }