修改页面

README.md

@@ -27,3 +27,4 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "mdaya",
+  "name": "mgrading",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -4633,6 +4633,12 @@
         "domelementtype": "1"
       }
     },
+    "domready": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npm.taobao.org/domready/download/domready-1.0.8.tgz",
+      "integrity": "sha1-kfJS5Ze2Wvd+dFriTdAYXV4m1Yw=",
+      "dev": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.7.0.tgz?cache=0&sync_timestamp=1589052712571&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
@@ -6526,8 +6532,7 @@
       "version": "0.5.5",
       "resolved": "https://registry.npm.taobao.org/image-size/download/image-size-0.5.5.tgz",
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -7047,6 +7052,12 @@
       "integrity": "sha1-FC0RHzpuPa6PSpr9d9RYVbWpzOM=",
       "dev": true
     },
+    "js-base64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.2.tgz?cache=0&sync_timestamp=1593072135380&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.2.tgz",
+      "integrity": "sha1-z5MBvFzHVokqmmyNcTgyLllE+w0=",
+      "dev": true
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
@@ -7521,6 +7532,15 @@
       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
       "dev": true
     },
+    "merge-options": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/merge-options/download/merge-options-1.0.1.tgz",
+      "integrity": "sha1-KmSyRFe+zU5NxggoMkfpTOWJqjI=",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "^1.1"
+      }
+    },
     "merge-source-map": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/merge-source-map/download/merge-source-map-1.1.0.tgz",
@@ -7766,6 +7786,12 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/mitt/download/mitt-1.1.2.tgz",
+      "integrity": "sha1-OA5hSA1qYVtmDwertg1R4KTkvtY=",
+      "dev": true
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@@ -9179,6 +9205,15 @@
         }
       }
     },
+    "postcss-prefix-selector": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npm.taobao.org/postcss-prefix-selector/download/postcss-prefix-selector-1.7.2.tgz",
+      "integrity": "sha1-Ot7tkDmFc0KY8Z2PXgtlf52Q1Dw=",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.0"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
@@ -9259,6 +9294,64 @@
       "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
       "dev": true
     },
+    "posthtml": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npm.taobao.org/posthtml/download/posthtml-0.9.2.tgz?cache=0&sync_timestamp=1592805270374&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fposthtml%2Fdownload%2Fposthtml-0.9.2.tgz",
+      "integrity": "sha1-9MBtufZ7Yf0XxOJW5+PZUVv3Jv0=",
+      "dev": true,
+      "requires": {
+        "posthtml-parser": "^0.2.0",
+        "posthtml-render": "^1.0.5"
+      }
+    },
+    "posthtml-parser": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npm.taobao.org/posthtml-parser/download/posthtml-parser-0.2.1.tgz?cache=0&sync_timestamp=1573199134353&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fposthtml-parser%2Fdownload%2Fposthtml-parser-0.2.1.tgz",
+      "integrity": "sha1-NdUw3jhnQMK6JP8usvrznM3ycd0=",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^3.8.3",
+        "isobject": "^2.1.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npm.taobao.org/isobject/download/isobject-2.1.0.tgz",
+          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+          "dev": true,
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        }
+      }
+    },
+    "posthtml-rename-id": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npm.taobao.org/posthtml-rename-id/download/posthtml-rename-id-1.0.12.tgz",
+      "integrity": "sha1-z39us3FGvxr6wx5o8YxswZrmFDM=",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "1.0.5"
+      }
+    },
+    "posthtml-render": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npm.taobao.org/posthtml-render/download/posthtml-render-1.2.2.tgz?cache=0&sync_timestamp=1587028653619&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fposthtml-render%2Fdownload%2Fposthtml-render-1.2.2.tgz",
+      "integrity": "sha1-9VShntQNQOK/wWCCawqR1KI2Vs0=",
+      "dev": true
+    },
+    "posthtml-svg-mode": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npm.taobao.org/posthtml-svg-mode/download/posthtml-svg-mode-1.0.3.tgz",
+      "integrity": "sha1-q9VU+s6BIjyrDLNn4Y5O/SpOdLA=",
+      "dev": true,
+      "requires": {
+        "merge-options": "1.0.1",
+        "posthtml": "^0.9.2",
+        "posthtml-parser": "^0.2.1",
+        "posthtml-render": "^1.0.6"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz",
@@ -10842,6 +10935,246 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-baker": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npm.taobao.org/svg-baker/download/svg-baker-1.7.0.tgz",
+      "integrity": "sha1-g2f3jYdVUMUv5HVvcwPVxdfC6ac=",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.0",
+        "clone": "^2.1.1",
+        "he": "^1.1.1",
+        "image-size": "^0.5.1",
+        "loader-utils": "^1.1.0",
+        "merge-options": "1.0.1",
+        "micromatch": "3.1.0",
+        "postcss": "^5.2.17",
+        "postcss-prefix-selector": "^1.6.0",
+        "posthtml-rename-id": "^1.0",
+        "posthtml-svg-mode": "^1.0.3",
+        "query-string": "^4.3.2",
+        "traverse": "^0.6.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/define-property/download/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-accessor-descriptor/download/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha1-FpwvbT3x+ZJhgHI2XJsOofaHhlY=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz",
+              "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
+              "dev": true
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npm.taobao.org/is-data-descriptor/download/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha1-2Eh2Mh0Oet0DmQQGq7u9NrqSaMc=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz",
+              "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
+              "dev": true
+            }
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npm.taobao.org/is-descriptor/download/is-descriptor-1.0.2.tgz",
+          "integrity": "sha1-OxWXRqZmBLBPjIFSS6NlxfFNhuw=",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-6.0.3.tgz",
+              "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
+              "dev": true
+            }
+          }
+        },
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-5.1.0.tgz",
+          "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0=",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-3.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmicromatch%2Fdownload%2Fmicromatch-3.1.0.tgz",
+          "integrity": "sha1-UQLU6vILaZfWAI46z+HESj+oFeI=",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.2.2",
+            "define-property": "^1.0.0",
+            "extend-shallow": "^2.0.1",
+            "extglob": "^2.0.2",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^5.0.2",
+            "nanomatch": "^1.2.1",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz",
+          "integrity": "sha1-ut+hSX1GJE9jkPWLMZgw2RB4U8U=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.3",
+            "js-base64": "^2.1.9",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-3.2.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "svg-baker-runtime": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npm.taobao.org/svg-baker-runtime/download/svg-baker-runtime-1.4.7.tgz",
+      "integrity": "sha1-9HIGN/W2IC7vY3jYHx/q0IFfik4=",
+      "dev": true,
+      "requires": {
+        "deepmerge": "1.3.2",
+        "mitt": "1.1.2",
+        "svg-baker": "^1.7.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.3.2.tgz",
+          "integrity": "sha1-FmNpFinU2/42T6EqKk8KqGqjoFA=",
+          "dev": true
+        }
+      }
+    },
+    "svg-sprite-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/svg-sprite-loader/download/svg-sprite-loader-5.0.0.tgz",
+      "integrity": "sha1-/VxjxxEN88ookoLe9J805qYub2U=",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.0",
+        "deepmerge": "1.3.2",
+        "domready": "1.0.8",
+        "escape-string-regexp": "1.0.5",
+        "html-webpack-plugin": "^3.2.0",
+        "loader-utils": "^1.1.0",
+        "svg-baker": "^1.5.0",
+        "svg-baker-runtime": "^1.4.7",
+        "url-slug": "2.0.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.3.2.tgz",
+          "integrity": "sha1-FmNpFinU2/42T6EqKk8KqGqjoFA=",
+          "dev": true
+        }
+      }
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
@@ -11181,6 +11514,12 @@
         "punycode": "^2.1.1"
       }
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npm.taobao.org/traverse/download/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=",
+      "dev": true
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz",
@@ -11297,6 +11636,12 @@
       "integrity": "sha1-3Vepn2IHvt/0Yoq++5TFDblByPQ=",
       "dev": true
     },
+    "unidecode": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npm.taobao.org/unidecode/download/unidecode-0.1.8.tgz",
+      "integrity": "sha1-77swFTi8RSRqmsjFWdcvAVMFBT4=",
+      "dev": true
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/union-value/download/union-value-1.0.1.tgz",
@@ -11476,6 +11821,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-slug": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/url-slug/download/url-slug-2.0.0.tgz",
+      "integrity": "sha1-p4nVrtSZXA2VrzM3etHVxo1NcCc=",
+      "dev": true,
+      "requires": {
+        "unidecode": "0.1.8"
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",

package.json

@@ -39,6 +39,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "less": "^3.10.3",
     "less-loader": "^4.1.0",
+    "svg-sprite-loader": "^5.0.0",
     "vue-cli-plugin-axios": "0.0.4",
     "vue-template-compiler": "^2.6.10"
   },

public/index.html

@@ -17,7 +17,7 @@
     <meta name="description" content="" >
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>管乐迷</title>
+    <title>酷乐秀</title>
     <style>html{color:#000;overflow-y:scroll;overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:100px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}.link,.link:hover,.link:visited,a{color:#333}body,html{font-family:"PingFang SC","Heiti SC","SF UI Text","Helvetica Neue",Roboto,"Droid Sans Fallback",arial,sans-serif;font-weight:normal}body{font-size:.12rem;line-height:1.5}*{margin:0;padding:0;outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}img{border:0}del{text-decoration:line-through}.link:active,a{text-decoration:none}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-weight:500}h1{font-size:.36rem}h2{font-size:.28rem}h3{font-size:.24rem}h4{font-size:.2rem;line-height:.26rem}h5{font-size:.18rem;line-height:.24rem}h6{font-size:.16rem;line-height:.2rem}q:after,q:before{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}.link:active{color:#e61414}ins,u{text-decoration:underline;text-decoration-color:#eee}</style>
 
     <!-- <link rel="stylesheet" href="https://www.unpkg.com/vant@2.8.4/lib/index.css"> -->

src/common/axios.js

@@ -2,7 +2,7 @@
 /* eslint-disable */
 import axios from "axios"
 // import router from '../router/index'
-import { browser }  from '@/common/common'
+import { browser }  from '@/utils/common'
 import { Toast } from 'vant'
 
 // Full config:  https://github.com/axios/axios#request-config

src/components/MStep.vue

@@ -1,16 +1,9 @@
 <template>
-  <div class="mstep">
+  <div class="mStep">
     <div class="step">
         <div class="step-item" v-for="(item, index) in imgUrlList" :key="index">
-            <img v-if="number >= item.index" :src="item.active" alt key="oneImg" />
-            <img v-else :src="item.default" alt key="oneImg" />
-            <p :class="[number >= item.index ? item.activeClass : '']" >{{ item.text }}</p>
-        </div>
-    </div>
-    <div class="step">
-        <div class="step-item" v-for="(item, index) in imgUrlList2" :key="index">
-            <img v-if="number >= item.index" :src="item.active" alt key="twoImg" />
-            <img v-else :src="item.default" alt key="twoImg" />
+            <svg-icon v-if="number >= item.index" :iconClass="item.active" key="oneImg"></svg-icon>
+            <svg-icon v-else :iconClass="item.default" key="oneImg"></svg-icon>
             <p :class="[number >= item.index ? item.activeClass : '']" >{{ item.text }}</p>
         </div>
     </div>
@@ -18,8 +11,10 @@
 </template>
 
 <script>
+import SvgIcon from './SvgIcon'
 export default {
-    name: "mstep",
+    name: "mStep",
+    components: { SvgIcon },
     props: {
         number: {
             type: Number,
@@ -32,66 +27,45 @@ export default {
                 {
                     index: 1,
                     default: "",
-                    active: require("@/assets/images/level/icon_account_active.png"),
+                    active: "icon_account_active",
                     activeClass: "active",
-                    text: '账号'
+                    text: "账号"
                 }, {
                     index: 1.5,
-                    default: require("@/assets/images/level/icon_right_arrow.png"),
-                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    default: "icon_right_arrow",
+                    active: "icon_right_arrow_active",
                     activeClass: "active",
-                    text: ''
+                    text: ""
                 }, {
                     index: 2,
-                    default: require("@/assets/images/level/icon_baseInfo.png"),
-                    active: require("@/assets/images/level/icon_baseInfo_active.png"),
+                    default: "icon_baseInfo",
+                    active: "icon_baseInfo_active",
                     activeClass: "active",
-                    text: '基本信息'
+                    text: "基本信息"
                 }, {
                     index: 2.5,
-                    default: require("@/assets/images/level/icon_right_arrow.png"),
-                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    default: "icon_right_arrow",
+                    active: "icon_right_arrow_active",
                     activeClass: "active",
-                    text: ''
+                    text: ""
                 }, {
                     index: 3,
-                    default: require("@/assets/images/level/icon_level.png"),
-                    active: require("@/assets/images/level/icon_level_active.png"),
-                    activeClass: "active",
-                    text: '考级信息'
-                }
-            ],
-            imgUrlList2: [
-                {
-                    index: 4,
-                    default: require("@/assets/images/level/icon_payment.png"),
-                    active: require("@/assets/images/level/icon_payment_active.png"),
+                    default: "icon_level",
+                    active: "icon_level_active",
                     activeClass: "active",
-                    text: '支付'
+                    text: "考级信息"
                 }, {
-                    index: 4.5,
-                    default: require("@/assets/images/level/icon_right_arrow.png"),
-                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
+                    index: 3.5,
+                    default: "icon_right_arrow",
+                    active: "icon_right_arrow_active",
                     activeClass: "active",
-                    text: ''
+                    text: ""
                 }, {
-                    index: 5,
-                    default: require("@/assets/images/level/icon_certificate.png"),
-                    active: require("@/assets/images/level/icon_certificate_active.png"),
-                    activeClass: "active",
-                    text: '邮寄证书'
-                }, {
-                    index: 5.5,
-                    default: require("@/assets/images/level/icon_right_arrow.png"),
-                    active: require("@/assets/images/level/icon_right_arrow_active.png"),
-                    activeClass: "active",
-                    text: ''
-                }, {
-                    index: 6,
-                    default: require("@/assets/images/level/icon_card.png"),
-                    active: require("@/assets/images/level/icon_card_active.png"),
+                    index: 4,
+                    default: "icon_payment",
+                    active: "icon_payment_active",
                     activeClass: "active",
-                    text: '准考证'
+                    text: "支付"
                 }
             ]
         };
@@ -102,7 +76,7 @@ export default {
 
 <style lang="less" scoped>
 @import url("../assets/commonLess/variable");
-.mstep {
+.mStep {
     padding-bottom: 0.2rem;
     background-color: #ffffff;
     margin-top: .12rem;
@@ -115,13 +89,23 @@ export default {
     .step-item {
         font-size: 0;
         &:nth-of-type(odd) img {
-        width: 0.56rem;
+            width: 0.56rem;
         }
 
         &:nth-of-type(even) img {
             width: 0.2rem;
             padding: 0.15rem 0.25rem 0;
         }
+        &:nth-of-type(odd) svg {
+            width: 0.56rem;
+            height: .56rem;
+        }
+
+        &:nth-of-type(even) svg {
+            width: 0.18rem;
+            height: 0.18rem;
+            padding: 0.2rem 0.1rem 0;
+        }
 
         p {
             padding-top: 0.03rem;

src/components/SvgIcon.vue

@@ -0,0 +1,43 @@
+<template>
+    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+        <use :xlink:href="iconName" />
+    </svg>
+</template>
+
+<script>
+export default {
+    name: "SvgIcon",
+    props: {
+        iconClass: {
+            type: String,
+            required: true
+        },
+        className: {
+            type: String,
+            default: ""
+        }
+    },
+    computed: {
+        iconName() {
+            return `#icon-${this.iconClass}`;
+        },
+        svgClass() {
+            if (this.className) {
+                return 'svg-icon ' + this.className
+            } else {
+                return 'svg-icon'
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+</style>

src/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon' // svg组件
+
+// 注册到全局
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/icons/svg/icon_account_active.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="40px" viewBox="0 0 56 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组 5备份 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="h5报名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="报名备份-7" transform="translate(-19.000000, -100.000000)">
+            <g id="编组-5" transform="translate(19.000000, 100.000000)">
+                <g id="编组-4" transform="translate(8.000000, 0.000000)">
+                    <circle id="椭圆形" stroke="#2DC7AA" cx="19" cy="19" r="18.5"></circle>
+                    <g id="编组" transform="translate(11.000000, 10.000000)" fill="#2DC7AA" fill-rule="nonzero">
+                        <path d="M8.55,10.8 C6.98695313,10.8 5.51759766,10.2389062 4.41386719,9.21796875 C3.30785156,8.19703125 2.7,6.8428125 2.7,5.4 C2.7,3.9571875 3.30785156,2.60085938 4.41386719,1.58203125 C5.51988281,0.56109375 6.98695313,0 8.55,0 C10.1130469,0 11.5824023,0.56109375 12.6861328,1.58203125 C13.7921484,2.60296875 14.4,3.9571875 14.4,5.4 C14.4,6.8428125 13.7921484,8.19914063 12.6861328,9.21796875 C11.5824023,10.2389062 10.1130469,10.8 8.55,10.8 Z M8.55,1.35 C6.13001953,1.35 4.1625,3.16617187 4.1625,5.4 C4.1625,7.63382813 6.13001953,9.45 8.55,9.45 C10.9699805,9.45 12.9375,7.63382813 12.9375,5.4 C12.9375,3.16617188 10.9699805,1.35 8.55,1.35 Z" id="形状"></path>
+                        <path d="M17.28,18.9 C16.88175,18.9 16.56,18.6020833 16.56,18.2333333 C16.56,14.3729167 13.16925,11.2333333 9,11.2333333 C4.83075,11.2333333 1.44,14.3729167 1.44,18.2333333 C1.44,18.6020833 1.11825,18.9 0.72,18.9 C0.32175,18.9 0,18.6020833 0,18.2333333 C0,17.1083333 0.2385,16.0166667 0.7065,14.9895833 C1.15875,13.9979167 1.809,13.10625 2.63475,12.3416667 C3.4605,11.5770833 4.4235,10.975 5.4945,10.55625 C6.606,10.1208333 7.785,9.9 9,9.9 C10.215,9.9 11.394,10.1208333 12.50325,10.5541667 C13.57425,10.9729167 14.53725,11.575 15.363,12.3395833 C16.18875,13.1041667 16.839,13.9958333 17.29125,14.9875 C17.7615,16.0166667 18,17.1083333 18,18.2333333 C18,18.6020833 17.67825,18.9 17.28,18.9 Z" id="路径"></path>
+                    </g>
+                    <g id="编组-2" transform="translate(29.000000, 25.000000)">
+                        <circle id="椭圆形" fill="#2DC7AA" cx="6" cy="9" r="6"></circle>
+                        <text id="1" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#FFFFFF">
+                            <tspan x="3.094" y="13">1</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/svg/icon_baseInfo.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="40px" viewBox="0 0 56 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组 5备份</title>
+    <desc>Created with Sketch.</desc>
+    <g id="h5报名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="报名备份-7" transform="translate(-113.000000, -100.000000)">
+            <g id="编组-5备份" transform="translate(113.000000, 100.000000)">
+                <g id="编组-4" transform="translate(9.000000, 0.000000)">
+                    <circle id="椭圆形" stroke="#808080" cx="19" cy="19" r="18.5"></circle>
+                    <g id="编组-2" transform="translate(28.000000, 24.000000)">
+                        <circle id="椭圆形" fill="#808080" cx="6" cy="9" r="6"></circle>
+                        <text id="2" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#FFFFFF">
+                            <tspan x="2.4" y="13">2</tspan>
+                        </text>
+                    </g>
+                </g>
+                <g id="编组" transform="translate(19.000000, 10.000000)" fill="#808080" fill-rule="nonzero">
+                    <path d="M16,5.33333334 C16,2.4 13.6,0 10.6666667,0 C7.73333332,0 5.33333334,2.4 5.33333334,5.33333334 C5.33333334,7.06666668 6.26666668,8.66666668 7.6,9.6 C3.2,10.8 0,14.6666667 0,19.3333333 C0,19.7333333 0.26666666,20 0.66666666,20 C1.06666666,20 1.33333332,19.7333333 1.33333334,19.3333333 C1.33333334,14.5333333 5.2,10.6666667 10,10.6666667 L10.6666667,10.6666667 C13.6,10.6666667 16,8.26666666 16,5.33333334 Z M6.66666666,5.33333334 C6.66666666,3.06666668 8.4,1.33333334 10.6666667,1.33333334 C12.9333333,1.33333334 14.6666667,3.06666668 14.6666667,5.33333334 C14.6666667,7.6 12.9333333,9.33333334 10.6666667,9.33333334 C8.4,9.33333334 6.66666666,7.6 6.66666666,5.33333334 Z M16,12.6666667 C16,13.0666667 15.7333333,13.3333333 15.3333333,13.3333333 L12.6666667,13.3333333 C12.2666667,13.3333333 12,13.0666667 12,12.6666667 C12,12.2666666 12.2666667,12 12.6666667,12 L15.3333333,12 C15.7333333,12 16,12.2666667 16,12.6666667 Z M20,18 C20,18.4 19.7333333,18.6666667 19.3333333,18.6666667 L12.6666667,18.6666667 C12.2666667,18.6666667 12,18.4 12,18 C12,17.6 12.2666667,17.3333333 12.6666667,17.3333333 L19.3333333,17.3333333 C19.7333333,17.3333333 20,17.6 20,18 Z M12.6666667,14.6666667 L18,14.6666667 C18.4,14.6666667 18.6666667,14.9333333 18.6666667,15.3333333 C18.6666667,15.7333334 18.4,16 18,16 L12.6666667,16 C12.2666667,16 12,15.7333333 12,15.3333333 C12,14.9333333 12.2666667,14.6666667 12.6666667,14.6666667 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/svg/icon_baseInfo_active.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="40px" viewBox="0 0 56 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组 5备份</title>
+    <desc>Created with Sketch.</desc>
+    <g id="h5报名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-172.000000, -62.000000)">
+            <g id="编组-5备份-6" transform="translate(172.000000, 62.000000)">
+                <g id="编组-4" transform="translate(9.000000, 0.000000)">
+                    <circle id="椭圆形" stroke="#2DC7AA" cx="19" cy="19" r="18.5"></circle>
+                    <g id="编组-2" transform="translate(28.000000, 24.000000)">
+                        <circle id="椭圆形" fill="#2DC7AA" cx="6" cy="9" r="6"></circle>
+                        <text id="2" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" fill="#FFFFFF">
+                            <tspan x="2.4" y="13">2</tspan>
+                        </text>
+                    </g>
+                </g>
+                <g id="编组" transform="translate(19.000000, 10.000000)" fill="#2DC7AA" fill-rule="nonzero">
+                    <path d="M16,5.33333334 C16,2.4 13.6,0 10.6666667,0 C7.73333332,0 5.33333334,2.4 5.33333334,5.33333334 C5.33333334,7.06666668 6.26666668,8.66666668 7.6,9.6 C3.2,10.8 0,14.6666667 0,19.3333333 C0,19.7333333 0.26666666,20 0.66666666,20 C1.06666666,20 1.33333332,19.7333333 1.33333334,19.3333333 C1.33333334,14.5333333 5.2,10.6666667 10,10.6666667 L10.6666667,10.6666667 C13.6,10.6666667 16,8.26666666 16,5.33333334 Z M6.66666666,5.33333334 C6.66666666,3.06666668 8.4,1.33333334 10.6666667,1.33333334 C12.9333333,1.33333334 14.6666667,3.06666668 14.6666667,5.33333334 C14.6666667,7.6 12.9333333,9.33333334 10.6666667,9.33333334 C8.4,9.33333334 6.66666666,7.6 6.66666666,5.33333334 Z M16,12.6666667 C16,13.0666667 15.7333333,13.3333333 15.3333333,13.3333333 L12.6666667,13.3333333 C12.2666667,13.3333333 12,13.0666667 12,12.6666667 C12,12.2666666 12.2666667,12 12.6666667,12 L15.3333333,12 C15.7333333,12 16,12.2666667 16,12.6666667 Z M20,18 C20,18.4 19.7333333,18.6666667 19.3333333,18.6666667 L12.6666667,18.6666667 C12.2666667,18.6666667 12,18.4 12,18 C12,17.6 12.2666667,17.3333333 12.6666667,17.3333333 L19.3333333,17.3333333 C19.7333333,17.3333333 20,17.6 20,18 Z M12.6666667,14.6666667 L18,14.6666667 C18.4,14.6666667 18.6666667,14.9333333 18.6666667,15.3333333 C18.6666667,15.7333334 18.4,16 18,16 L12.6666667,16 C12.2666667,16 12,15.7333333 12,15.3333333 C12,14.9333333 12.2666667,14.6666667 12.6666667,14.6666667 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/svg/icon_right_arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="12px" viewBox="0 0 19 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组</title>
+    <desc>Created with Sketch.</desc>
+    <g id="h5报名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-125.000000, -256.000000)" fill="#CCCCCC" fill-rule="nonzero">
+            <g id="编组" transform="translate(134.500000, 262.000000) scale(-1, 1) translate(-134.500000, -262.000000) translate(125.000000, 256.000000)">
+                <path d="M3.06606811,4.97402817 L6.84891313,1.39295887 C6.94574656,1.29771682 6.94574656,1.14333573 6.84891313,1.04807382 L6.08904836,0.300852679 C5.99219473,0.205630487 5.83520138,0.205630487 5.73832756,0.300852679 L0.976283479,4.80898299 C0.970790529,4.81353062 0.965358164,4.81821726 0.960188329,4.82330107 L0.934763242,4.8483031 L0.200343751,5.54353432 C0.148504038,5.59453131 0.124694524,5.66248759 0.128369954,5.72925234 C0.124573356,5.79615611 0.14838287,5.86429111 0.200303361,5.91536754 L0.960168134,6.63558093 C0.965075438,6.64036686 0.970184689,6.64477548 0.975354524,6.64908481 L5.73830736,11.1579896 C5.83516099,11.2532515 5.99215434,11.2532515 6.08902816,11.1579896 L6.84889293,10.4107685 C6.94572637,10.3155463 6.94572637,10.1611652 6.84889293,10.0658834 L3.10152995,6.51839508 L17.879988,6.51839508 C18.0169684,6.51839508 18.1279785,6.40921226 18.1279785,6.27453095 L18.1279785,5.217793 C18.1279785,5.08313155 18.0169684,4.97392887 17.879988,4.97392887 L3.06606811,4.97402817 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/svg/icon_right_arrow_active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="12px" viewBox="0 0 19 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组备份 4</title>
+    <desc>Created with Sketch.</desc>
+    <g id="h5报名" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-128.000000, -229.000000)" fill="#2DC7AA" fill-rule="nonzero">
+            <g id="编组备份-4" transform="translate(137.500000, 235.000000) scale(-1, 1) translate(-137.500000, -235.000000) translate(128.000000, 229.000000)">
+                <path d="M3.06606811,4.97402817 L6.84891313,1.39295887 C6.94574656,1.29771682 6.94574656,1.14333573 6.84891313,1.04807382 L6.08904836,0.300852679 C5.99219473,0.205630487 5.83520138,0.205630487 5.73832756,0.300852679 L0.976283479,4.80898299 C0.970790529,4.81353062 0.965358164,4.81821726 0.960188329,4.82330107 L0.934763242,4.8483031 L0.200343751,5.54353432 C0.148504038,5.59453131 0.124694524,5.66248759 0.128369954,5.72925234 C0.124573356,5.79615611 0.14838287,5.86429111 0.200303361,5.91536754 L0.960168134,6.63558093 C0.965075438,6.64036686 0.970184689,6.64477548 0.975354524,6.64908481 L5.73830736,11.1579896 C5.83516099,11.2532515 5.99215434,11.2532515 6.08902816,11.1579896 L6.84889293,10.4107685 C6.94572637,10.3155463 6.94572637,10.1611652 6.84889293,10.0658834 L3.10152995,6.51839508 L17.879988,6.51839508 C18.0169684,6.51839508 18.1279785,6.40921226 18.1279785,6.27453095 L18.1279785,5.217793 C18.1279785,5.08313155 18.0169684,4.97392887 17.879988,4.97392887 L3.06606811,4.97402817 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
+import '@/icons'
 import router from './router/index'
 import "@babel/polyfill"
 import Es6Promise from 'es6-promise'

src/common/common.js → src/utils/common.js

@@ -43,8 +43,8 @@ const getYMD = (time, noIos) => {
 }
 
 /**
- * 
- * @param {周几的索引值} index 
+ *
+ * @param {周几的索引值} index
  */
 const getWeekString = (index) => {
   let weekText = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
@@ -112,20 +112,6 @@ const checkPhone = (phoneNumber) => {
   return result
 }
 
-// 学生地址
-const vaildManageUrl = () => {
-	let url = window.location.href
-	let returnUrl = ''
-	if (/dev/.test(url)) { // dev 环境
-		returnUrl = 'http://mandev.dayaedu.com'
-	} else if (/online/.test(url)) { //线上
-		returnUrl = 'https://manonline.dayaedu.com'
-	} else { // 默认dev环境
-		returnUrl = 'http://mandev.dayaedu.com'
-	}
-	return returnUrl
-}
-
 export {
   browser,
   getSTD,
@@ -135,6 +121,5 @@ export {
   nextMonthDay,
   isLeapYear,
   courseExpireDateArray,
-  checkPhone,
-  vaildManageUrl
+  checkPhone
 }

src/utils/loading.js

@@ -0,0 +1,14 @@
+import { Toast } from 'vant'
+
+// 加载
+export default function setLoading(status) {
+    if(status) {
+        Toast.loading({
+            duration: 0, // 持续展示 toast
+            forbidClick: true,
+            message: '加载中...',
+        })
+    } else {
+        Toast.clear()
+    }
+}

src/utils/validateRules.js

@@ -0,0 +1,8 @@
+// 手机号
+export const patternPhone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
+
+// 密码
+export const patternPwd = /^[0-9A-Za-z]{6,16}$/
+
+// 身份证号
+export const patternCard = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/

src/views/signup/SignUp.js

@@ -0,0 +1,46 @@
+import qs from 'qs'
+const axios = require('@/common/axios').default
+const apiPrefix = '/api-auth'
+// 手机号密码方式登录
+export function usernameLogin(data) {
+    return axios({
+        url: apiPrefix + '/usernameLogin',
+        method: 'post',
+        data: qs.stringify(data)
+    })
+}
+// 刷新token
+export function refreshToken(data) {
+    return axios({
+        url: apiPrefix + '/refreshToken',
+        method: 'post',
+        data
+    })
+}
+
+// 发送登录短信验证码
+export function sendSms(data) {
+    return axios({
+        url: apiPrefix + '/code/sendSms',
+        method: 'post',
+        data: qs.stringify(data)
+    })
+}
+
+// 校验短信验证码
+export function verifySmsCode(data) {
+    return axios({
+        url: apiPrefix + '/code/verifySmsCode',
+        method: 'post',
+        data: qs.stringify(data)
+    })
+}
+
+// 短信验证码的方式登录
+export function smsLogin(data) {
+    return axios({
+        url: apiPrefix + '/smsLogin',
+        method: 'post',
+        data: qs.stringify(data)
+    })
+}

src/views/signup/SignUpAccount.vue

@@ -4,21 +4,26 @@
         <m-step />
 
         <div class="title">基本信息</div>
-        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
-            <van-field v-model="form.phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="[{ pattern: patternPhone, message: '手机号输入有误' }]" />
+        <!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
+        <van-field v-model="form.phone" required name="phone" label="手机号" placeholder="请输入手机号" />
 
-            <van-field v-model="form.code" clearable name="code" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]" >
-                <template #button>
-                    <span class="codeText">获取验证码</span>
-                </template>
-            </van-field>
+        <van-field v-model="form.code" required clearable name="code" label="验证码" placeholder="请输入验证码" >
+            <template #button>
+                <span class="codeText" v-show="countDownStatus" @click="onGetCode">获取验证码</span>
+                <span class="code-text" v-show="!countDownStatus">
+                    <van-count-down
+                        ref="countdown"
+                        :auto-start="false"
+                        :time="countDownTime"
+                        @finish="onCountDownFinished"
+                        format="ss秒" />
+                </span>
+            </template>
+        </van-field>
 
-            <van-field v-model="form.password" name="passwrod" label="设置密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPwd, message: '6-16位数字或字母' }]" />
 
-            <van-field v-model="form.rePassword" name="rePassword" label="再次输入密码" placeholder="6-16位数字或字母" :rules="[{ pattern: patternPwd, message: '6-16位数字或字母' }]" />
-
-            <m-button class="stepBtn" text="下一步" native-type="submit" />
-        </van-form>
+        <m-button class="stepBtn" text="下一步" @click="onSubmit" native-type="submit" />
+        <!-- </van-form> -->
     </div>
 </template>
 <script>
@@ -26,19 +31,21 @@ import MHeader from '@/components/MHeader'
 import MStep from '@/components/MStep'
 import MButton from '@/components/MButton'
 // import { browser } from '@/common/common'
+import { patternPhone } from '@/utils/validateRules'
+import setLoading from '@/utils/loading'
+import { sendSms } from './SignUp'
 export default {
     name: 'signUpAccount',
 	components: { MHeader, MStep, MButton },
     data () {
         return {
-            patternPhone: /1(3|4|5|6|7|8|9)\d{9}/,
-            patternPwd: /^[0-9A-Za-z]{6,16}$/,
+            patternPhone: patternPhone,
             form: {
                 phone: null,
                 code: null,
-                password: null,
-                rePassword: null
             },
+            countDownStatus: true, // 到计时状态
+            countDownTime: 1000 * 10 // 倒计时时间
         }
     },
     mounted() {
@@ -48,19 +55,66 @@ export default {
         //     localStorage.setItem('Authorization', decodeURI(params.Authorization))
         //     localStorage.setItem('userInfo', decodeURI(params.Authorization))
         // }
+        // window.onbeforeunload = onbeforeunload_handler;
+        // window.onunload = onunload_handler;
+        // function onbeforeunload_handler(){
+        //     var warning="确认退出?";
+        //     return warning;
+        // }
+        // function onunload_handler(){
+        //     var warning="谢谢光临";
+        //     alert(warning);
+        // }
     },
     methods: {
+        async onGetCode() { // 获取验证码
+            setLoading(true)
+            if(!this.checkPhone(this.form.phone)) {
+                return
+            }
+            try {
+                const resultSend = await sendSms({ mobile: this.phoneNumber })
+                const result = resultSend.data
+                if(result.code === 200) {
+                    this.countDownStatus = false
+                    this.$refs.countdown.start() // 倒计时开始
+                } else {
+                    this.$toast(result.msg)
+                }
+            } catch (error) {
+                //
+            }
+            setLoading(false)
+        },
+        onCountDownFinished() { // 倒计时结束
+            this.countDownStatus = true
+            this.$refs.countdown.reset()
+        },
         onSubmit() {
-            // console.log('submit', values)
+            const form = this.form
+            if(!this.checkPhone(form.phone)) { // 手机号验证
+                return
+            }
+            if(!form.code) {
+                this.$toast('请输入验证码')
+                return
+            }
+
             this.$router.push({
                 path: '/signUpBaseInfo'
             })
         },
-        onFailed() {
-            // console.log('failed', errorInfo);
-            // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
-            // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
+        checkPhone(phoneNumber) {
+            let result = true
+            if(!(this.patternPhone.test(phoneNumber))){
+                this.$toast('手机号输入有误')
+                result = false
+            }
+            return result
         }
+    },
+    destroyed() {
+        this.$toast.clear()
     }
 }
 </script>
@@ -87,6 +141,11 @@ export default {
         font-size: .16rem
     }
 
+    /deep/.van-count-down {
+        font-size: .16rem;
+        // color: ;
+    }
+
     .codeText {
         font-size: .16rem;
         color: var(--main-color);

src/views/signup/SignUpBaseInfo.vue

@@ -3,45 +3,51 @@
         <m-header />
         <m-step :number="2" />
 
-        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
-            <div class="title">基本信息</div>
-            <van-field v-model="form.phone" name="phone" label="身份证号" placeholder="请输入身份证号" :rules="[{ pattern: patternPhone, message: '身份证号输入有误' }]" />
+        <!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
+        <div class="title">基本信息</div>
+        <van-field v-model="form.phone" required name="phone" label="身份证号" placeholder="请输入身份证号" :rules="[{ pattern: patternCard, message: '身份证号输入有误' }]" >
+            <template #button>
+                <span class="codeText">上传</span>
+            </template>
+        </van-field>
+        <!-- #2DC7AA -->
+        <div class="cardTips">如有括号，请用英文括号()</div>
+        <van-field required v-model="form.phone" name="phone" label="姓名" placeholder="请输入姓名" :rules="[{ required: true, message: '姓名输入有误' }]" />
 
-            <van-field v-model="form.phone" name="phone" label="姓名" placeholder="请输入姓名" :rules="[{ required: true, message: '姓名输入有误' }]" />
+        <van-field name="radio" label="性别">
+            <template #input>
+                <van-radio-group v-model="form.sex" direction="horizontal">
+                    <van-radio checked-color="var(--main-color)" :name="1">男</van-radio>
+                    <van-radio checked-color="var(--main-color)" :name="0">女</van-radio>
+                </van-radio-group>
+            </template>
+        </van-field>
 
-            <van-field name="radio" label="性别">
-                <template #input>
-                    <van-radio-group v-model="form.sex" direction="horizontal">
-                        <van-radio checked-color="var(--main-color)" :name="1">男</van-radio>
-                        <van-radio checked-color="var(--main-color)" :name="0">女</van-radio>
-                    </van-radio-group>
-                </template>
-            </van-field>
+        <van-field readonly clickable name="birthday" v-model="form.birthday" label="生日" placeholder="请选择" @click="birthdayStatus = true" is-link />
 
-            <van-field readonly clickable name="birthday" v-model="form.birthday" label="生日" placeholder="请选择" @click="birthdayStatus = true" is-link />
+        <van-field readonly clickable name="nation" v-model="form.nation" label="民族" placeholder="请选择" is-link />
 
-            <van-field readonly clickable name="nation" v-model="form.nation" label="民族" placeholder="请选择" is-link />
+        <div class="title">证件照上传</div>
 
-            <div class="title">证件照上传</div>
+        <div class="upload-img">
+            <van-uploader v-model="fileList" multiple :max-count="1" :max-size="3 * 1024 * 1024" >
+                <div class="upload-container">
+                    <i class="icon-upload-add"></i>
+                    <p>点击上传</p>
+                </div>
+            </van-uploader>
+            <p class="upload-tips">须使用免冠证件照，纯底色<br/>（纯白、纯蓝或纯红）<br/>（图像预览可能会异常）</p>
+        </div>
 
-            <div class="upload-img">
-                <van-uploader v-model="fileList" multiple :max-count="1" :max-size="3 * 1024 * 1024" >
-                    <div class="upload-container">
-                        <i class="icon-upload-add"></i>
-                        <p>点击上传</p>
-                    </div>
-                </van-uploader>
-                <p class="upload-tips">须使用免冠证件照，纯底色<br/>（纯白、纯蓝或纯红）<br/>（图像预览可能会异常）</p>
-            </div>
-
-            <m-button class="step-btn" text="下一步" native-type="submit" />
-        </van-form>
+        <m-button class="step-btn" @click="onSubmit" text="下一步" native-type="submit" />
+        <!-- </van-form> -->
 
         <van-popup v-model="birthdayStatus" position="bottom">
             <van-datetime-picker
                 type="date"
-                @cancel="birthdayStatus = false"/>
-                <!-- @confirm="onConfirm" -->
+                :formatter="formatter"
+                @cancel="birthdayStatus = false"
+                @confirm="onConfirm" />
         </van-popup>
     </div>
 </template>
@@ -49,14 +55,13 @@
 import MHeader from '@/components/MHeader'
 import MStep from '@/components/MStep'
 import MButton from '@/components/MButton'
-// import { browser } from '@/common/common'
+import { getYMD } from '@/utils/common'
 export default {
     name: 'signupBaseInfo',
 	components: { MHeader, MStep, MButton },
     data () {
         return {
-            patternPhone: /^1(3|4|5|6|7|8|9)\d{9}$/,
-            patternPwd: /^[0-9A-Za-z]{6,16}$/,
+            patternCard: /^1(3|4|5|6|7|8|9)\d{9}$/,
             birthdayStatus: false,
             form: {
                 phone: null,
@@ -78,11 +83,28 @@ export default {
     methods: {
         onSubmit() {
             // console.log('submit', values)
+            this.$router.push({
+                path: '/signUpLevel'
+            })
         },
         onFailed() {
             // console.log('failed', errorInfo);
             // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
             // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
+        },
+        onConfirm(val) {
+            this.form.birthday = getYMD(val, true)
+            this.birthdayStatus = false
+        },
+        formatter(type, val) {
+            if (type === 'year') {
+                return `${val}年`
+            } else if (type === 'month') {
+                return `${val}月`
+            } else if (type === 'day') {
+                return `${val}日`
+            }
+            return val
         }
     }
 }
@@ -155,5 +177,11 @@ export default {
     width: 1rem;
     height: 1.4rem;
 }
-
+.cardTips {
+    font-size: .14rem;
+    color: #2DC7AA;
+    padding-left: 1.28rem;
+    padding-top: .03rem;
+    padding-bottom: .15rem;
+}
 </style>

src/views/signup/SignUpLevel.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="signupLevel">
+    <div class="signUpLevel">
         <m-header />
         <m-step :number="3" />
 
-        <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed">
+        <!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
             <div class="title">基本信息</div>
             <van-field readonly clickable name="nation" label="报考专业" placeholder="请选择" is-link />
             <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
@@ -15,26 +15,31 @@
             </van-field>
             <van-field name="phone" label="乐曲一名称及作者" placeholder="请输入曲目名称及作者" />
             <van-field name="phone" label="乐曲二名称及作者" placeholder="请输入曲目名称及作者" />
-            <van-field readonly clickable name="nation" label="考点" placeholder="请选择" is-link />
-            <van-field readonly clickable name="nation" label="考试时间" placeholder="请选择" is-link />
-            <van-field readonly clickable name="nation" label="上一次考级" placeholder="发证机构" is-link />
-            <van-field readonly clearable name="code" label="证书" >
+
+            <div class="title">上次考级信息</div>
+             <van-field readonly clickable name="nation" label="上次考级级别" placeholder="请选择级别" is-link />
+             <van-field readonly clearable name="code" label="上次考级证书" >
+                <template #button>
+                    <span class="codeText">上传证书</span>
+                </template>
+            </van-field>
+            <div class="title">乐理知识</div>
+            <van-field readonly clickable name="nation" label="专业级别" placeholder="请选择专业级别" is-link />
+            <van-field readonly clickable name="nation" label="上次考级级别" placeholder="请选择" is-link />
+            <van-field readonly clearable name="code" label="上次考级证书" >
                 <template #button>
                     <span class="codeText">上传证书</span>
                 </template>
             </van-field>
-            <div class="title">音乐基础知识</div>
-            <van-field readonly clickable name="nation" label="音乐基础知识" placeholder="请选择" is-link />
-            <van-field readonly clickable name="nation" label="报考级别" placeholder="请选择" is-link />
             <div class="title">指导老师</div>
             <van-field name="phone" label="老师姓名" placeholder="请输入老师姓名" />
             <van-field name="phone" label="联系方式" placeholder="请输入联系方式" />
             <!-- <m-button class="stepBtn" text="下一步" native-type="submit" /> -->
             <div class="m-btn-group">
-                <van-button round color="var(--main-color)" style="background-color: transparent" plain>上一步</van-button>
-                <van-button round color="var(--main-color)">确认报名</van-button>
+                <van-button round color="var(--main-color)" @click="onBack" style="background-color: transparent" plain>上一步</van-button>
+                <van-button round color="var(--main-color)" @click="onSubmit">确认报名</van-button>
             </div>
-        </van-form>
+        <!-- </van-form> -->
 
         <van-popup v-model="birthdayStatus" position="bottom">
             <van-datetime-picker
@@ -70,7 +75,7 @@ import MStep from '@/components/MStep'
 // import MButton from '@/components/MButton'
 // import { browser } from '@/common/common'
 export default {
-    name: 'signupLevel',
+    name: 'signUpLevel',
 	components: { MHeader, MStep },
     data () {
         return {
@@ -98,17 +103,23 @@ export default {
     methods: {
         onSubmit() {
             // console.log('submit', values)
+            this.$router.push({
+                path: '/SignUpPayment'
+            })
         },
         onFailed() {
             // console.log('failed', errorInfo);
             // console.log(this.$refs['form'].scrollToField(errorInfo.errors[0].name))
             // this.$refs['form'].scrollToField(errorInfo.errors[0].name,  false)
+        },
+        onBack() {
+            window.history.go(-1)
         }
     }
 }
 </script>
 <style lang="less" scoped>
-.signupLevel {
+.signUpLevel {
     height: 100vh;
     overflow-y: auto;
     overflow-x: hidden;

vue.config.js

@@ -1,5 +1,7 @@
+const path = require('path')
+
 let targetUrl = 'http://admin.dayaedu.com'
-// let targetUrl = 'http://dyme.utools.club'
+// let targetUrl = 'http://192.168.3.28:8000/'
 // let targetUrl = 'http://192.168.3.27:8000' // 箭河
 // let targetUrl = 'http://192.168.3.48:8000'
 // let targetUrl = 'http://testadm.dayaedu.com/'
@@ -10,11 +12,15 @@ let targetUrl = 'http://admin.dayaedu.com'
 // const Version = 20191227;
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']
+
+function resolve (dir) {
+  return path.join(__dirname, './', dir)
+}
 module.exports = {
   publicPath: './',
   // outputDir: 'dist',
   // assetsDir: 'static',
-  // outputDir: 'dist', 
+  // outputDir: 'dist',
   // 调整内部的 webpack 配置。
   // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
   // chainWebpack: () => {},
@@ -22,18 +28,35 @@ module.exports = {
   chainWebpack: config => {
     config.devtool('inline-source-map')
     config.output.filename('[name].[hash].js').end();
-    // // chunkHash
-    // config.output.filename(`js/[name].[chunkhash].${Version}.js`).end();
-    // config.output.chunkFilename(`js/[id].[chunkhash].${Version}.js`).end();
-    // config.output.filename(`js/[name].[chunkhash].js`).end();
-    // config.output.chunkFilename(`js/[id].[chunkhash].js`).end();
-    // config.entry.app = ['babel-polyfill', './src/main.js']
 
-    // config.resolve.symlinks(true)
-    // config.plugin('html').tap(args => {
-    //   args[0].chunksSortMode = 'none'
-    //   return args
+    // const svgRule = config.module.rule('svg')
+    // // 清除已有的所有 loader,如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
+    // svgRule.uses.clear()
+    // // 添加要替换的 loader
+    // svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
+    // .options({
+    //     symbolId: 'icon-[name]'
     // })
+    // svg rule loader
+    const svgRule = config.module.rule('svg') // 找到svg-loader
+    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
+    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
+    svgRule // 添加svg新的loader处理
+      .test(/\.svg$/)
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+
+    // 修改images loader 添加svg处理
+    const imagesRule = config.module.rule('images')
+    imagesRule.exclude.add(resolve('src/icons'))
+    config.module
+      .rule('images')
+      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
+
+
     config.plugin('html').tap(args => {
       args[0].minify = {
         removeAttributeQuotes: false