From 94c1e6a30c91486f4878880000717bb2ae8241ae Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Tue, 2 Mar 2021 10:54:13 +0800
Subject: [PATCH] 微信公众号  个人页面集合

---
 build/utils.js                                |   9 ++++++++-
 package-lock.json                             |  22 ++++++++++++++++++++--
 package.json                                  |  10 +++++++++-
 src/assets/css/base.scss                      |   1 +
 src/assets/css/reset.css                      |   4 ++++
 src/assets/images/blackBG.png                 | Bin 5699 -> 0 bytes
 src/assets/images/blueBG.png                  | Bin 5738 -> 0 bytes
 src/assets/images/carBlack.png                | Bin 1727 -> 0 bytes
 src/assets/images/carBlue.png                 | Bin 1927 -> 0 bytes
 src/assets/images/carGreen.png                | Bin 3407 -> 0 bytes
 src/assets/images/carWhite.png                | Bin 1480 -> 0 bytes
 src/assets/images/carYellow.png               | Bin 1904 -> 0 bytes
 src/assets/images/choose.png                  | Bin 967 -> 0 bytes
 src/assets/images/choosed.png                 | Bin 1177 -> 0 bytes
 src/assets/images/greenBG.png                 | Bin 6063 -> 0 bytes
 src/assets/images/icon-delete.png             | Bin 845 -> 0 bytes
 src/assets/images/icon_chose_n@2x.png         | Bin 982 -> 0 bytes
 src/assets/images/icon_chose_s@2x.png         | Bin 935 -> 0 bytes
 src/assets/images/mySelf/photoBG.png          | Bin 0 -> 9248 bytes
 src/assets/images/mySelf/selfNavBg.png        | Bin 0 -> 30163 bytes
 src/assets/images/noRecord.png                | Bin 13368 -> 0 bytes
 src/assets/images/parkPay/addCarNum.png       | Bin 0 -> 459 bytes
 src/assets/images/parkPay/blackBG.png         | Bin 0 -> 5699 bytes
 src/assets/images/parkPay/blueBG.png          | Bin 0 -> 5738 bytes
 src/assets/images/parkPay/carBlack.png        | Bin 0 -> 1727 bytes
 src/assets/images/parkPay/carBlue.png         | Bin 0 -> 1927 bytes
 src/assets/images/parkPay/carGreen.png        | Bin 0 -> 3407 bytes
 src/assets/images/parkPay/carWhite.png        | Bin 0 -> 1480 bytes
 src/assets/images/parkPay/carYellow.png       | Bin 0 -> 1904 bytes
 src/assets/images/parkPay/choose.png          | Bin 0 -> 967 bytes
 src/assets/images/parkPay/choosed.png         | Bin 0 -> 1177 bytes
 src/assets/images/parkPay/greenBG.png         | Bin 0 -> 6063 bytes
 src/assets/images/parkPay/icon-delete.png     | Bin 0 -> 845 bytes
 src/assets/images/parkPay/icon_chose_n@2x.png | Bin 0 -> 982 bytes
 src/assets/images/parkPay/icon_chose_s@2x.png | Bin 0 -> 935 bytes
 src/assets/images/parkPay/noRecord.png        | Bin 0 -> 13368 bytes
 src/assets/images/parkPay/tip.png             | Bin 0 -> 1185 bytes
 src/assets/images/parkPay/toParkRecord.png    | Bin 0 -> 2015 bytes
 src/assets/images/parkPay/whiteBG.png         | Bin 0 -> 5821 bytes
 src/assets/images/parkPay/yellowBG.png        | Bin 0 -> 5900 bytes
 src/assets/images/tip.png                     | Bin 1185 -> 0 bytes
 src/assets/images/toParkRecord.png            | Bin 2015 -> 0 bytes
 src/assets/images/whiteBG.png                 | Bin 5821 -> 0 bytes
 src/assets/images/yellowBG.png                | Bin 5900 -> 0 bytes
 src/components/navigation.vue                 | 172 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/orderPay.vue                   | 353 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/parkRecord.vue                 | 515 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/components/plateNumber.vue                | 727 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 src/main.js                                   |  12 +++++++++++-
 src/router/index.js                           |  60 +++++++++++++++++++++++++++++++++++++++++++++++++-----------
 src/views/binding/binDing.vue                 |  56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/mySelf/feedback/suggestionBack.vue  |  79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/mySelf/parkNotes/parkNotes.vue      |  32 ++++++++++++++++++++++++++++++++
 src/views/mySelf/selfNav.vue                  |  64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/parkPay/navigation.vue              | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/parkPay/orderPay.vue                | 323 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/parkPay/parkRecord.vue              | 515 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/parkPay/plateNumber.vue             | 776 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 58 files changed, 2119 insertions(+), 1783 deletions(-)
 create mode 100644 src/assets/css/base.scss
 delete mode 100644 src/assets/images/blackBG.png
 delete mode 100644 src/assets/images/blueBG.png
 delete mode 100644 src/assets/images/carBlack.png
 delete mode 100644 src/assets/images/carBlue.png
 delete mode 100644 src/assets/images/carGreen.png
 delete mode 100644 src/assets/images/carWhite.png
 delete mode 100644 src/assets/images/carYellow.png
 delete mode 100644 src/assets/images/choose.png
 delete mode 100644 src/assets/images/choosed.png
 delete mode 100644 src/assets/images/greenBG.png
 delete mode 100755 src/assets/images/icon-delete.png
 delete mode 100755 src/assets/images/icon_chose_n@2x.png
 delete mode 100755 src/assets/images/icon_chose_s@2x.png
 create mode 100644 src/assets/images/mySelf/photoBG.png
 create mode 100644 src/assets/images/mySelf/selfNavBg.png
 delete mode 100644 src/assets/images/noRecord.png
 create mode 100644 src/assets/images/parkPay/addCarNum.png
 create mode 100644 src/assets/images/parkPay/blackBG.png
 create mode 100644 src/assets/images/parkPay/blueBG.png
 create mode 100644 src/assets/images/parkPay/carBlack.png
 create mode 100644 src/assets/images/parkPay/carBlue.png
 create mode 100644 src/assets/images/parkPay/carGreen.png
 create mode 100644 src/assets/images/parkPay/carWhite.png
 create mode 100644 src/assets/images/parkPay/carYellow.png
 create mode 100644 src/assets/images/parkPay/choose.png
 create mode 100644 src/assets/images/parkPay/choosed.png
 create mode 100644 src/assets/images/parkPay/greenBG.png
 create mode 100755 src/assets/images/parkPay/icon-delete.png
 create mode 100755 src/assets/images/parkPay/icon_chose_n@2x.png
 create mode 100755 src/assets/images/parkPay/icon_chose_s@2x.png
 create mode 100644 src/assets/images/parkPay/noRecord.png
 create mode 100644 src/assets/images/parkPay/tip.png
 create mode 100644 src/assets/images/parkPay/toParkRecord.png
 create mode 100644 src/assets/images/parkPay/whiteBG.png
 create mode 100644 src/assets/images/parkPay/yellowBG.png
 delete mode 100644 src/assets/images/tip.png
 delete mode 100644 src/assets/images/toParkRecord.png
 delete mode 100644 src/assets/images/whiteBG.png
 delete mode 100644 src/assets/images/yellowBG.png
 delete mode 100644 src/components/navigation.vue
 delete mode 100644 src/components/orderPay.vue
 delete mode 100644 src/components/parkRecord.vue
 delete mode 100644 src/components/plateNumber.vue
 create mode 100644 src/views/binding/binDing.vue
 create mode 100644 src/views/mySelf/feedback/suggestionBack.vue
 create mode 100644 src/views/mySelf/parkNotes/parkNotes.vue
 create mode 100644 src/views/mySelf/selfNav.vue
 create mode 100644 src/views/parkPay/navigation.vue
 create mode 100644 src/views/parkPay/orderPay.vue
 create mode 100644 src/views/parkPay/parkRecord.vue
 create mode 100644 src/views/parkPay/plateNumber.vue

diff --git a/build/utils.js b/build/utils.js
index 4b117ed..8220903 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -61,7 +61,14 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: path.resolve(__dirname, '../src/assets/css/base.scss')
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
diff --git a/package-lock.json b/package-lock.json
index a0157ec..2d3ca99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -149,8 +149,7 @@
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
     },
     "array-flatten": {
       "version": "1.1.1",
@@ -5453,6 +5452,15 @@
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
       "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
+    "mint-ui": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npm.taobao.org/mint-ui/download/mint-ui-2.2.13.tgz",
+      "requires": {
+        "array-find-index": "^1.0.2",
+        "raf.js": "0.0.4",
+        "vue-lazyload": "^1.0.1"
+      }
+    },
     "mississippi": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-2.0.0.tgz",
@@ -6914,6 +6922,11 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "raf.js": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npm.taobao.org/raf.js/download/raf.js-0.0.4.tgz",
+      "integrity": "sha1-8Vr0RdJBsn+nExpXRQtn75xAL+w="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -8691,6 +8704,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz?cache=0&sync_timestamp=1613791698648&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-lazyload%2Fdownload%2Fvue-lazyload-1.3.3.tgz",
+      "integrity": "sha1-TfUKJxvem3TDyveiKNbgr1DVaC8="
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz?cache=0&sync_timestamp=1608188050165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-13.7.3.tgz",
diff --git a/package.json b/package.json
index ded9088..dee7ea4 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "css-loader": "^3.6.0",
     "js-base64": "^3.6.0",
     "less-loader": "^4.1.0",
+    "mint-ui": "^2.2.13",
+    "node-sass": "^5.0.0",
     "sass-loader": "^7.3.1",
     "vue": "^2.5.2",
     "vue-h5-popup": "^1.0.2",
@@ -32,12 +34,13 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "crypto-js": "^4.0.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^3.6.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -46,8 +49,13 @@
     "postcss-url": "^7.2.1",
     "prettier": "^2.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
+    "sass-resources-loader": "^2.1.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^2.0.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^5.0.0",
     "swiper": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
new file mode 100644
index 0000000..0bd703f
--- /dev/null
+++ b/src/assets/css/base.scss
@@ -0,0 +1 @@
+$commonLeftRightPadding:0 10px;
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index 88d535c..1ad44a8 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -57,3 +57,7 @@ body,html,#app
   height: 100%;
   background: #FCFCFC;
 }
+
+.leftRightPadding{
+  padding: 0 10px;
+}
diff --git a/src/assets/images/blackBG.png b/src/assets/images/blackBG.png
deleted file mode 100644
index fa94812..0000000
Binary files a/src/assets/images/blackBG.png and /dev/null differ
diff --git a/src/assets/images/blueBG.png b/src/assets/images/blueBG.png
deleted file mode 100644
index 69f76a8..0000000
Binary files a/src/assets/images/blueBG.png and /dev/null differ
diff --git a/src/assets/images/carBlack.png b/src/assets/images/carBlack.png
deleted file mode 100644
index 2698b70..0000000
Binary files a/src/assets/images/carBlack.png and /dev/null differ
diff --git a/src/assets/images/carBlue.png b/src/assets/images/carBlue.png
deleted file mode 100644
index 7923127..0000000
Binary files a/src/assets/images/carBlue.png and /dev/null differ
diff --git a/src/assets/images/carGreen.png b/src/assets/images/carGreen.png
deleted file mode 100644
index bfa1ded..0000000
Binary files a/src/assets/images/carGreen.png and /dev/null differ
diff --git a/src/assets/images/carWhite.png b/src/assets/images/carWhite.png
deleted file mode 100644
index 560df08..0000000
Binary files a/src/assets/images/carWhite.png and /dev/null differ
diff --git a/src/assets/images/carYellow.png b/src/assets/images/carYellow.png
deleted file mode 100644
index 561a94f..0000000
Binary files a/src/assets/images/carYellow.png and /dev/null differ
diff --git a/src/assets/images/choose.png b/src/assets/images/choose.png
deleted file mode 100644
index 6093f8e..0000000
Binary files a/src/assets/images/choose.png and /dev/null differ
diff --git a/src/assets/images/choosed.png b/src/assets/images/choosed.png
deleted file mode 100644
index b261da8..0000000
Binary files a/src/assets/images/choosed.png and /dev/null differ
diff --git a/src/assets/images/greenBG.png b/src/assets/images/greenBG.png
deleted file mode 100644
index d3abb0a..0000000
Binary files a/src/assets/images/greenBG.png and /dev/null differ
diff --git a/src/assets/images/icon-delete.png b/src/assets/images/icon-delete.png
deleted file mode 100755
index ae5d28e..0000000
Binary files a/src/assets/images/icon-delete.png and /dev/null differ
diff --git a/src/assets/images/icon_chose_n@2x.png b/src/assets/images/icon_chose_n@2x.png
deleted file mode 100755
index a766823..0000000
Binary files a/src/assets/images/icon_chose_n@2x.png and /dev/null differ
diff --git a/src/assets/images/icon_chose_s@2x.png b/src/assets/images/icon_chose_s@2x.png
deleted file mode 100755
index 9cadd84..0000000
Binary files a/src/assets/images/icon_chose_s@2x.png and /dev/null differ
diff --git a/src/assets/images/mySelf/photoBG.png b/src/assets/images/mySelf/photoBG.png
new file mode 100644
index 0000000..7dea754
Binary files /dev/null and b/src/assets/images/mySelf/photoBG.png differ
diff --git a/src/assets/images/mySelf/selfNavBg.png b/src/assets/images/mySelf/selfNavBg.png
new file mode 100644
index 0000000..c1f0d1d
Binary files /dev/null and b/src/assets/images/mySelf/selfNavBg.png differ
diff --git a/src/assets/images/noRecord.png b/src/assets/images/noRecord.png
deleted file mode 100644
index 5680be0..0000000
Binary files a/src/assets/images/noRecord.png and /dev/null differ
diff --git a/src/assets/images/parkPay/addCarNum.png b/src/assets/images/parkPay/addCarNum.png
new file mode 100644
index 0000000..67fac55
Binary files /dev/null and b/src/assets/images/parkPay/addCarNum.png differ
diff --git a/src/assets/images/parkPay/blackBG.png b/src/assets/images/parkPay/blackBG.png
new file mode 100644
index 0000000..fa94812
Binary files /dev/null and b/src/assets/images/parkPay/blackBG.png differ
diff --git a/src/assets/images/parkPay/blueBG.png b/src/assets/images/parkPay/blueBG.png
new file mode 100644
index 0000000..69f76a8
Binary files /dev/null and b/src/assets/images/parkPay/blueBG.png differ
diff --git a/src/assets/images/parkPay/carBlack.png b/src/assets/images/parkPay/carBlack.png
new file mode 100644
index 0000000..2698b70
Binary files /dev/null and b/src/assets/images/parkPay/carBlack.png differ
diff --git a/src/assets/images/parkPay/carBlue.png b/src/assets/images/parkPay/carBlue.png
new file mode 100644
index 0000000..7923127
Binary files /dev/null and b/src/assets/images/parkPay/carBlue.png differ
diff --git a/src/assets/images/parkPay/carGreen.png b/src/assets/images/parkPay/carGreen.png
new file mode 100644
index 0000000..bfa1ded
Binary files /dev/null and b/src/assets/images/parkPay/carGreen.png differ
diff --git a/src/assets/images/parkPay/carWhite.png b/src/assets/images/parkPay/carWhite.png
new file mode 100644
index 0000000..560df08
Binary files /dev/null and b/src/assets/images/parkPay/carWhite.png differ
diff --git a/src/assets/images/parkPay/carYellow.png b/src/assets/images/parkPay/carYellow.png
new file mode 100644
index 0000000..561a94f
Binary files /dev/null and b/src/assets/images/parkPay/carYellow.png differ
diff --git a/src/assets/images/parkPay/choose.png b/src/assets/images/parkPay/choose.png
new file mode 100644
index 0000000..6093f8e
Binary files /dev/null and b/src/assets/images/parkPay/choose.png differ
diff --git a/src/assets/images/parkPay/choosed.png b/src/assets/images/parkPay/choosed.png
new file mode 100644
index 0000000..b261da8
Binary files /dev/null and b/src/assets/images/parkPay/choosed.png differ
diff --git a/src/assets/images/parkPay/greenBG.png b/src/assets/images/parkPay/greenBG.png
new file mode 100644
index 0000000..d3abb0a
Binary files /dev/null and b/src/assets/images/parkPay/greenBG.png differ
diff --git a/src/assets/images/parkPay/icon-delete.png b/src/assets/images/parkPay/icon-delete.png
new file mode 100755
index 0000000..ae5d28e
Binary files /dev/null and b/src/assets/images/parkPay/icon-delete.png differ
diff --git a/src/assets/images/parkPay/icon_chose_n@2x.png b/src/assets/images/parkPay/icon_chose_n@2x.png
new file mode 100755
index 0000000..a766823
Binary files /dev/null and b/src/assets/images/parkPay/icon_chose_n@2x.png differ
diff --git a/src/assets/images/parkPay/icon_chose_s@2x.png b/src/assets/images/parkPay/icon_chose_s@2x.png
new file mode 100755
index 0000000..9cadd84
Binary files /dev/null and b/src/assets/images/parkPay/icon_chose_s@2x.png differ
diff --git a/src/assets/images/parkPay/noRecord.png b/src/assets/images/parkPay/noRecord.png
new file mode 100644
index 0000000..5680be0
Binary files /dev/null and b/src/assets/images/parkPay/noRecord.png differ
diff --git a/src/assets/images/parkPay/tip.png b/src/assets/images/parkPay/tip.png
new file mode 100644
index 0000000..49253c6
Binary files /dev/null and b/src/assets/images/parkPay/tip.png differ
diff --git a/src/assets/images/parkPay/toParkRecord.png b/src/assets/images/parkPay/toParkRecord.png
new file mode 100644
index 0000000..e6b1694
Binary files /dev/null and b/src/assets/images/parkPay/toParkRecord.png differ
diff --git a/src/assets/images/parkPay/whiteBG.png b/src/assets/images/parkPay/whiteBG.png
new file mode 100644
index 0000000..7c89e6f
Binary files /dev/null and b/src/assets/images/parkPay/whiteBG.png differ
diff --git a/src/assets/images/parkPay/yellowBG.png b/src/assets/images/parkPay/yellowBG.png
new file mode 100644
index 0000000..34e26b0
Binary files /dev/null and b/src/assets/images/parkPay/yellowBG.png differ
diff --git a/src/assets/images/tip.png b/src/assets/images/tip.png
deleted file mode 100644
index 49253c6..0000000
Binary files a/src/assets/images/tip.png and /dev/null differ
diff --git a/src/assets/images/toParkRecord.png b/src/assets/images/toParkRecord.png
deleted file mode 100644
index e6b1694..0000000
Binary files a/src/assets/images/toParkRecord.png and /dev/null differ
diff --git a/src/assets/images/whiteBG.png b/src/assets/images/whiteBG.png
deleted file mode 100644
index 7c89e6f..0000000
Binary files a/src/assets/images/whiteBG.png and /dev/null differ
diff --git a/src/assets/images/yellowBG.png b/src/assets/images/yellowBG.png
deleted file mode 100644
index 34e26b0..0000000
Binary files a/src/assets/images/yellowBG.png and /dev/null differ
diff --git a/src/components/navigation.vue b/src/components/navigation.vue
deleted file mode 100644
index 89aa038..0000000
--- a/src/components/navigation.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <div>
-    <div style="height: 206px;">
-      <div class="swiper-container">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide"  v-for="item in swiperData" :key="item.id" :style="{backgroundImage:'url(' + item.url + ')'}"
-            @click="openImgUrl(item)"
-          ></div>
-        </div>
-        <!-- 如果需要分页器 -->
-        <div class="swiper-pagination"></div>
-
-        <!-- 如果需要滚动条 -->
-        <!--    <div class="swiper-scrollbar"></div>-->
-      </div>
-    </div>
-    <p class="carNumberTip">
-      请确认您当前缴费车牌号
-    </p>
-
-    <div class="car-wrap">
-      <div class="carBG" :class="carWrapBG | formateColor">
-        <p class="carNumber">{{carNumber}}</p>
-      </div>
-
-      <p class="toParkRecord">
-        是我的车，去支付
-      </p>
-
-      <p class="toPlateNumber">
-        不是我的车，手动输入
-      </p>
-
-    </div>
-
-
-  </div>
-</template>
-
-<script>
-import Swiper from 'swiper' //  应入swiper
-import { swiperQuery } from '../api/navigation/navigation'
-export default {
-  name: 'navigation',
-  data() {
-    return {
-      carNumber: '',  // 车牌号码
-      carWrapBG: 0,// 车牌颜色
-      swiperData: [], // 轮播数据
-    }
-  },
-  mounted() {
-    this.carNumber = this.$route.query.carNumber  // 车牌号码
-    this.carWrapBG = this.$route.query.carNumberColor // 车牌颜色
-    console.log(this.carNumber)
-
-  },
-  created() {
-    this.initSWiper()
-  },
-  methods: {
-    initSWiper(){
-      var salt = this.$utils.myCommonSalt(32)
-      var jsondata = {
-        app_id: this.$utils.myVarAppid,
-        deviceInfo: this.$utils.myDeviceInfo,
-        salt: salt,
-        sign_type: 'md5',
-        sign: '1',
-        orgId:this.$utils.myOrgId,
-        jumpType: '8'
-      };
-      // jsondata = JSON.stringify(jsondata);
-      swiperQuery(jsondata).then( res => {
-        this.swiperData = res.data
-        console.log(this.swiperData)
-        new Swiper ('.swiper-container', {
-          pagination: '.swiper-pagination',
-          paginationClickable: true,
-          centeredSlides: true,
-          notNextTick: true,
-          autoplay: 5000,
-          autoplayDisableOnInteraction: true,
-
-          observer: true,       //修改swiper自己或子元素时，自动初始化swiper
-          observeParents: true, //修改swiper的父元素时，自动初始化swiper
-          onSlideChangeStart: function (swiper) {
-            //console.log(swiper.activeIndex)
-          }
-        })
-      })
-    },
-    openImgUrl(i){ // 点击图片跳转
-      window.open(i.jumpUrl)
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  .swiper-container{
-    height: 206px;
-  }
-  .swiper-slide{
-    /*width: 100%;*/
-    height: 206px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .carNumberTip {
-    width: 200px;
-    margin: 20px auto 10px;
-    padding-left: 20px;
-    background: url("../assets/images/tip.png") no-repeat 0 center;
-    background-size: 14px 14px;
-    text-align: center;
-  }
-
-  .car-wrap {
-    padding: 0px 40px;
-    background: #FFF;
-  }
-
-  .carBG {
-    width: 100%;
-    height: 100px;
-    line-height: 100px;
-    text-align: center;
-    font-size: 24px;
-    color: #fff;
-  }
-  .carBlue {
-    background: url("../assets/images/blueBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carYellow {
-    background: url("../assets/images/yellowBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carGreen {
-    background: url("../assets/images/greenBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carWhite {
-    background: url("../assets/images/whiteBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carBlack {
-    background: url("../assets/images/blackBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-  .toParkRecord{
-    margin-top: 40px;
-    margin-bottom: 20px;
-    height: 50px;
-    line-height: 50px;
-    font-size: 16px;
-    text-align: center;
-    background: url("../assets/images/toParkRecord.png") no-repeat;
-    background-size: 100% 50px;
-    cursor: pointer;
-  }
-  .toPlateNumber{
-    text-align: right;
-    cursor: pointer;
-  }
-
-</style>
diff --git a/src/components/orderPay.vue b/src/components/orderPay.vue
deleted file mode 100644
index ee16f4d..0000000
--- a/src/components/orderPay.vue
+++ /dev/null
@@ -1,353 +0,0 @@
-<template>
-  <div>
-    <div class="car-wrap">
-      <div class="carBG" :class="carWrapBG | formateColor">
-        <p class="carNumber">{{carNumber}}</p>
-        <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p>
-      </div>
-    </div>
-
-    <ul class="fee-wrap">
-      <li>
-        <span>待缴金额</span>
-        <span>{{(arrearageActFee/100).toFixed(2)}}</span>
-      </li>
-      <li>
-        <span>优惠金额</span>
-        <span>{{(arrearageDiscFee/100).toFixed(2)}}</span>
-      </li>
-      <li>
-        <span>应付金额</span>
-        <span>{{(arrearageActFee/100).toFixed(2)}}</span>
-      </li>
-    </ul>
-    <div style="padding: 20px 18px">
-      <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
-    </div>
-
-    <div v-if="appOrderTimeout">
-      <p class="tip">
-        温馨提示：
-      </p>
-      <p style="color: #666;padding: 0 18px;">
-        {{appOrderTimeout}}
-      </p>
-    </div>
-
-
-
-  </div>
-</template>
-
-<script>
-import {aliPay, getOpenId, vxPayQuery, doPay, doOrderCreate} from '@/api/orderPay/orderPay'
-
-export default {
-  name: 'orderPay',
-  data() {
-    return {
-      carWrapBG: 0,
-      carNumber: '京A12312',
-      arrearageActFee: 0,
-      arrearageDiscFee: 0,
-      arrearageActFee: 0,
-      clientBrowser: '', // 客户端
-      paySrcType: '', //支付的类型   101 是本次   103是历史欠费
-      orderId: '',  //支付的订单
-      webAppCode: '', // 微信code
-      appOrderTimeout: '', // 超时描述
-      isAndroid: '', // 终端类型
-    }
-  },
-  created() {
-    this.carWrapBG = this.$route.query.carColor //车牌颜色
-    this.carNumber = this.$route.query.carNumber
-    this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
-    this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
-    this.arrearageActFee = this.$route.query.arrearageActFee // 实收
-    this.clientBrowser = this.$utils.clientBrowser() //支付方式
-    this.paySrcType = this.$route.query.paySrcType // 实收
-    this.orderId = this.$route.query.ordeID // 订单号
-    console.log(this.orderId)
-    this.appOrderTimeout = this.$route.query.appOrderTimeout  //提示
-
-    let userAgent = navigator.userAgent;
-    this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
-
-    if (this.clientBrowser == "微信") {
-      this.webAppCode = this.getCode();
-    }
-  },
-  methods: {
-    getCode() {
-      var appID = this.$utils.myVxAppId;
-      var code = this.getUrlParam('code');
-      var local = window.location.href;
-      if (code == null || code === '') {
-        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
-      } else {
-        return code;
-      }
-    },
-    doOrderCreate(orderID) { // 欠费创建订单号
-      var jsondata = {
-        orderBigType: 100,
-        payOrderType: this.paySrcType,
-        parkOrderIds: orderID,
-        terminalSource: 7,
-        operName: '',
-        operCode: '',
-      };
-      // jsondata = JSON.stringify(jsondata);
-      doOrderCreate(jsondata).then(res => {
-        console.log(res)
-        this.orderId = res.data.rltOrderId
-        console.log(this.orderId)
-        this.dopay(this.orderId)
-      })
-
-    },
-    getUrlParam(name) {
-      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
-      var r = window.location.search.substr(1).match(reg)
-      if (r != null) return unescape(r[2])
-      return null
-    },
-    dopay(orderID) {
-      let me = this
-      if (this.clientBrowser == '支付宝') { // 支付宝支付
-        var jsondata = {
-          orderBigType: 100,
-          payOrderType: this.paySrcType,
-          rltOrderId: orderID,
-          payType: 1, // 1 是支付宝    2是微信
-          terminalSource: 7,
-          orderActFee: this.arrearageActFee,
-          orderTotalFee: this.arrearageTotalFee,
-          orderDicountFee: this.arrearageDiscFee,
-          payUserId: '',
-          terminalOS: this.isAndroid ? 'AND' : 'IOS',
-          couponType: 1, //优惠类型
-          couponCode: this.arrearageDiscFee,
-        };
-
-        doPay(jsondata).then(response => {
-          console.log(response)
-          if (response.code == 0) {//进场
-            window.location.href = response.data.h5PayRequest
-            // document.write(response.data);//打开支付表单
-          } else {//其他情况如【该卡号场内已存在】
-            console.log(response.message);
-          }
-
-        })
-      }
-
-      if (this.clientBrowser == '微信') { // 微信支付
-        var vm = this
-        //第一步获取openid
-        var codeParams = {
-          code: this.webAppCode,
-          appId: this.$utils.myVxAppId
-        };
-        getOpenId(codeParams).then(resu => {
-          if (resu.code == 0) {
-            // me.vxPay(res.data, this.orderId)
-
-            var jsondata = {
-              orderBigType: 100,
-              payOrderType: this.paySrcType,
-              rltOrderId: orderID,
-              payType: 2, // 1 是支付宝    2是微信
-              terminalSource: 7,
-              orderActFee: this.arrearageActFee,
-              orderTotalFee: this.arrearageTotalFee,
-              orderDicountFee: this.arrearageDiscFee,
-              payUserId: resu.data,
-              terminalOS: this.isAndroid ? 'AND' : 'IOS',
-              couponType: 1, //优惠类型
-              couponCode: this.arrearageDiscFee,
-            };
-
-            doPay(jsondata).then(res => {
-              console.log(res)
-              if (res.code == 0) { //
-                //alertMsg("出场成功");
-                if (res.data) {
-                  var data = JSON.parse(res.data.jsPayRequest);
-                  console.log(JSON.stringify(data));
-                  if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
-                    if (document.addEventListener) {
-                      document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
-                    } else if (document.attachEvent) {
-                      document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
-                      document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
-                    }
-                  } else {
-                    console.log('准备调用微信支付')
-                    vm.onBridgeReady(data)
-                  }
-                } else {
-                  alert("没有找到返回值");
-                }
-              } else {
-                alert('支付错误')
-                console.log(res.message);
-                alert(res.message);
-              }
-
-            })
-
-          } else if (res.code == 40163) { //code been used, hints[重复code问题]
-            alert('获取opendid错误--------')
-            alert(res.message)
-            console.log(res.message);
-          } else {
-            alert('获取opendid错误')
-            alert(res.message)
-          }
-        })
-
-      }
-    },
-    toPay() {
-      let me = this
-      let _order = []
-      // this.orderId = JSON.parse(this.orderId)
-      console.log(this.orderId)
-      if (this.paySrcType == 103) {
-        this.orderId = JSON.parse(this.orderId)
-        this.doOrderCreate(this.orderId)
-      } else {
-        console.log(this.orderId)
-        console.log(typeof this.orderId)
-
-        this.dopay(this.orderId)
-      }
-
-    },
-
-    onBridgeReady(params) {
-      console.log('调用微信支付WeixinJSBridge')
-      WeixinJSBridge.invoke(
-        'getBrandWCPayRequest', {
-          "appId": params.appId,     //公众号名称，由商户传入
-          "timeStamp": params.timeStamp,         //时间戳，自1970年以来的秒数
-          "nonceStr": params.nonceStr, //随机串
-          "package": params.package,
-          "signType": params.signType,         //微信签名方式：
-          "paySign": params.paySign //微信签名
-        },
-
-        // 'getBrandWCPayRequest', params,
-        //
-        // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
-        //   'appId': data.appId, // 公众号名称，由商户传入
-        //   'timeStamp': data.timeStamp, // 时间戳
-        //   'nonceStr': data.nonceStr, // 随机串
-        //   'package': data.package, // 预支付id
-        //   'signType': data.signType, // 微信签名方式
-        //   'paySign': data.paySign // 微信签名
-        // },
-        function (res) {
-          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-          if (res.err_msg === 'get_brand_wcpay_request:ok') {
-            console.log('成功')
-          } else {
-            console.log('失败')
-            alert('支付失败')
-          }
-        }
-      )
-    },
-  },
-
-}
-</script>
-
-<style scoped lang="scss">
-  .car-wrap {
-    padding: 7px 7px;
-    background: #FFF;
-  }
-
-  .carBG {
-    width: 100%;
-    height: 130px;
-  }
-
-  .carBlue {
-    background: url("../assets/images/blueBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carYellow {
-    background: url("../assets/images/yellowBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carGreen {
-    background: url("../assets/images/greenBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carWhite {
-    background: url("../assets/images/whiteBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carBlack {
-    background: url("../assets/images/blackBG.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .carNumber {
-    padding: 20px 0 10px;
-    font-size: 30px;
-    color: #fff;
-    text-align: center;
-  }
-
-  .payFee {
-    font-size: 24px;
-    color: #FF7B7B;
-    text-align: center;
-  }
-
-  .fee-wrap {
-    background: #FFF;
-    padding: 0 18px;
-    > li {
-      display: flex;
-      justify-content: space-between;
-      height: 30px;
-      line-height: 30px;
-      border-bottom: 1px solid #EAEAEA;
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-
-  }
-
-  .toPay {
-    width: 100%;
-    height: 44px;
-    margin: 0 auto;
-    line-height: 44px;
-    text-align: center;
-    background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
-    border-radius: 4px;
-    border: 1px solid #0D72E2;
-    font-size: 20px;
-    color: #FFF;
-    cursor: pointer;
-  }
-
-  .tip {
-    padding-left: 40px;
-    background: url("../assets/images/tip.png") no-repeat 18px center;
-    background-size: 16px 16px;
-    color: #666;
-  }
-</style>
diff --git a/src/components/parkRecord.vue b/src/components/parkRecord.vue
deleted file mode 100644
index 99fcaa0..0000000
--- a/src/components/parkRecord.vue
+++ /dev/null
@@ -1,515 +0,0 @@
-<template>
-  <div style="height: 100%">
-    <div v-if="parkList.length>0" style="height: 100%">
-      <ul class="tabWrap">
-        <li v-for="(i,index) in tabList"
-            :key="i.id"
-            :class="{tabActive:currentTabActive == index}"
-            @click="tabHandle(index)"
-        >{{i.text}}
-        </li>
-      </ul>
-
-
-      <!--本次缴费-->
-      <div v-show="currentTabActive==0">
-
-        <div v-if="parkingData.length>0">
-          <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车30分钟内无需缴费，请直接离场。</p>
-
-          <div class="cost-main" v-for="i in parkingData">
-            <ul class="cost-header">
-              <li :class="carColor | formateColor">{{i.carNumber}}</li>
-              <li>本次费用</li>
-            </ul>
-
-            <div class="cost-body">
-              <p>车辆类型：临停车</p>
-              <p>车场名称：{{i.parkName}}
-              </p>
-              <p> 进场时间：{{i.parkInTime}}
-              </p>
-              <p>出场时间：{{i.parkOutTime}}
-              </p>
-              <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
-              <div class="out-wrap">
-                <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
-                <p class="out-btn" @click="toPayCurrent(i)" v-if="parkingData[0].parkDuration>2100">出场缴费</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!--没有在停费用-->
-        <div class="noRecord" v-else>暂无记录</div>
-
-
-      </div>
-
-
-      <!--历史缴费-->
-      <div v-show="currentTabActive==1" class="history-con" >
-        <div v-if="historyList.length>0" style="height: 100%;">
-          <div class="history-body" >
-            <p class="money-all">总欠费金额：
-              <span>¥{{(allMoney/100).toFixed(2)}}</span>
-            </p>
-
-            <div class="cost-main  cost-main-history" style="padding-left: 50px;"
-
-                 v-for="(i, index) in historyList" :key="i.id"
-                 @click="chooseHandle(i, index)"
-                 :class="{isChecked: i.checked}"
-            >
-              <ul class="cost-header">
-                <li :class="carColor | formateColor">{{i.carNumber}}</li>
-                <li>欠费</li>
-              </ul>
-
-              <div class="cost-body">
-                <p>车辆类型：临停车</p>
-
-                <p>车场名称：{{i.parkName}}
-                </p>
-                <p> 进场时间：{{i.parkInTime}}
-                </p>
-                <p>出场时间：{{i.parkOutTime}}
-                </p>
-                <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
-                <div class="out-wrap">
-                  <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
-                </div>
-
-              </div>
-            </div>
-
-          </div>
-
-
-          <div class="history-footer">
-            <p class="statistical-data">您已选中
-              <span>{{historyCheckedLen}}</span>笔交易
-              &nbsp;&nbsp;&nbsp;&nbsp;合计：¥ <span>{{(historyCheckedMon/100).toFixed(2)}}</span>
-            </p>
-            <div class="opration-wrap">
-              <p class="check-btn" :class="{isAllChecked:allChecked}"
-                 @click="checkedAll"
-              >全选</p>
-              <p class="settle-btn" @click="toPayHisroryPage">清缴欠费</p>
-            </div>
-          </div>
-        </div>
-
-
-        <!--没有在停费用-->
-        <div class="noRecord" v-else>暂无记录</div>
-
-      </div>
-
-    </div>
-
-
-    <div v-else class="noRecord">
-      暂无记录
-    </div>
-
-    <modal-alert ref="alert">
-      <div class="trave-tip-content txt-l" slot="content">
-        <div class="confirm-text">
-          <p>请至少选择一笔记录</p>
-        </div>
-      </div>
-      <span slot="button">知道了</span>
-    </modal-alert>
-  </div>
-</template>
-
-<script>
-import { parkRecordList, historyQuery, parkingQuery } from '@/api/parkRecord/parkRecord.js'
-
-
-export default {
-  name: 'parkRecord',
-  data() {
-    return {
-      tabList: [  // 切换数据
-        { text: '在停缴费', id: 1 },
-        { text: '欠费待缴', id: 2 },
-      ],
-      carColor: 1,// 车牌颜色
-      currentTabActive: 1, // 显示当前哪个
-      carNumber: '', //  车牌号码
-      parkingData:[], //  在停数据
-      parkList: [], // 停车记录数据
-      historyList:[  // 历史欠费数据
-        {money:100,checked:false, id: 1},
-      ] ,
-      allChecked:false, // 全部选择事件
-      allMoney:0, // 欠费所有的费用
-      historyCheckedLen:0, //选中了几笔交易
-      historyCheckedMon: 0, //选中了待缴纳的金额
-      orderIds: [] // 选中数据的订单 数组
-    }
-  },
-  mounted(){
-  },
-  created() {
-    this.carNumber = this.$route.query.carNumber  // 获取车牌号
-    this.carColor = this.$route.query.carNumberColor  // 获取颜色   0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
-    console.log(this.carNumber)
-    this.parkRecordList(this.carNumber)
-  },
-  methods: {
-    parkRecordList(){  // 获取停车记录数据
-      var salt = this.$utils.myCommonSalt(32);
-      var jsondata = {
-        app_id: this.$utils.myVarAppid,
-        deviceInfo: this.$utils.myDeviceInfo,
-        salt: salt,
-        sign_type: "md5",
-        pageNum: 1,
-        pageSize: 1000,
-        parkState: 10,
-        terminalSource: 7,
-        carNumber: this.carNumber,
-        carNumberColor: this.carColor,
-        // sign: md5sign,
-        orgId: this.$utils.myOrgId
-      }
-      jsondata.sign = this.$utils.signObject(jsondata)
-
-      // jsondata.sign = md5sign
-      console.log('停车记录传参  ' + JSON.stringify(jsondata));
-      parkRecordList(jsondata).then(response => {
-        console.log(response)
-        this.parkList = response.data.dataList
-
-        this.parkingData = this.parkList.filter(item => {
-          return item.parkState == '10'
-        })
-        if(this.parkingData.length>0){
-          this.currentTabActive = 0
-        }
-        console.log(this.parkingData)
-        this.historyList = this.parkList.filter(item => {
-          return item.parkState == '20'
-        })
-        this.historyList.forEach( i => {
-          this.allMoney += Number(i.unPayFee)
-        })
-
-        console.log(this.historyList)
-      })
-    },
-
-    tabHandle(index) { // tab 切换
-      this.currentTabActive = index
-    },
-    chooseHandle(i, index) { // 历史欠费单个选择事件
-      i.checked = !i.checked
-      let me = this
-      if(i.checked ){ //单个选中
-        me.historyCheckedLen ++
-        if(me.historyCheckedLen == this.historyList.length){
-          this.allChecked = true
-
-        }
-        me.orderIds.push(i.orderId)
-        me.historyCheckedMon += Number(i.unPayFee)
-      }else{ //单个不选中
-        let _i = me.orderIds.indexOf(i.orderId)
-        me.orderIds.splice(_i,1)
-        this.allChecked = false
-        me.historyCheckedLen --
-        me.historyCheckedMon -= Number(i.unPayFee)
-      }
-
-
-    },
-    checkedAll() { // 全选选择事件
-      this.allChecked = !this.allChecked
-      if(this.allChecked){  //全选
-        let me  = this
-        this.historyList.forEach(function(item){
-          item.checked = true;
-          me.orderIds.push(item.orderId)
-        });
-        this.historyCheckedMon = this.allMoney
-        this.historyCheckedLen = this.historyList.length
-
-      }else{ //反选
-        this.historyList.forEach(function(item){
-          item.checked = false;
-
-        });
-        this.historyCheckedLen = 0
-        this.historyCheckedMon = 0
-        this.orderIds = []
-      }
-    },
-    toPayCurrent(i){ // 缴纳本次在停费用
-      var salt = this.$utils.myCommonSalt(32);
-      var jsondata = {
-        app_id: this.$utils.myVarAppid,
-        deviceInfo: this.$utils.myDeviceInfo,
-        salt: salt,
-        sign_type: "md5",
-        payType: 4,
-        appId: this.$utils.myVxAppId,
-        orderId: i.orderId,
-        terminalSource: '7',
-        parkCode: i.parkCode,
-        carNumber: this.carNumber,
-      }
-      jsondata.sign = this.$utils.signObject(jsondata)
-      parkingQuery(jsondata).then(result => {
-        console.log(result)
-        let res = result.data
-        let _dis = res.discountFee
-        let discountFee = _dis.slice(1,_dis.length-1)
-
-        this.$router.push(
-          {
-            path:'orderPay',
-            query:{
-              carColor: this.carColor,// 车牌颜色
-              arrearageTotalFee: res.orderTotalFee,// 应收
-              arrearageDiscFee: discountFee*100,// 优惠
-              arrearageActFee: res.orderFee,// 实收
-              carNumber: this.carNumber, // 车牌
-              paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
-              ordeID: i.orderId, //支付的订单号
-              appOrderTimeout: res.appOrderTimeout, // 超时描述
-            }
-          }
-        )
-      })
-    },
-    toPayHisroryPage() { // 缴纳历史费用
-      if(this.historyCheckedLen==0){
-        this.$refs.alert.open()
-        return
-      }
-      var salt = this.$utils.myCommonSalt(32);
-
-      var list = "[" + this.orderIds + "]"
-
-      var jsondata = {
-        app_id: this.$utils.myVarAppid,
-        deviceInfo: this.$utils.myDeviceInfo,
-        salt: salt,
-        // sign: md5sign,
-        sign_type: "md5",
-        appId: this.$utils.myVxAppId,
-        orderIds: list,
-        terminalSource: '7',
-        payType: 4,
-        orgId: this.$utils.myOrgId,
-      }
-      jsondata.sign = this.$utils.signObject(jsondata)
-
-      historyQuery(jsondata).then(response => {
-        console.log(response)
-        let res = response.data.carArrearages[0]
-        console.log(res)
-        this.orderIds = JSON.stringify(this.orderIds)
-        this.$router.push(
-          {
-            path:'orderPay',
-            query:{
-              carColor:this.carColor,// 车牌颜色
-              arrearageTotalFee: res.arrearageTotalFee,// 应收
-              arrearageDiscFee: res.arrearageDiscFee,// 优惠
-              arrearageActFee: res.arrearageActFee,// 实收
-              carNumber: this.carNumber, // 车牌
-              paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
-              ordeID: this.orderIds, //支付的订单号
-            }
-          }
-        )
-      })
-    }
-  },
-  filters: {
-
-  }
-}
-</script>
-
-<style scoped lang="scss">
-  .tabWrap {
-    height: 38px;
-    background: #FFF;
-    display: flex;
-    color: #666;
-    li {
-      flex: 1;
-      line-height: 38px;
-      text-align: center;
-      border-bottom: 1px solid #DFDFDF;
-    }
-    .tabActive {
-      color: #0564CC;
-      border-bottom: 1px solid #0564CC;
-      font-weight: bold;
-    }
-  }
-
-  .free-tip {
-    height: 25px;
-    line-height: 25px;
-    padding-left: 45px;
-    background: #FEF8DB url("../assets/images/tip.png") no-repeat 18px center;
-    background-size: 18px 18px;
-  }
-
-  .cost-main {
-    padding-left: 18px;
-    background: #fff;
-  }
-
-  .cost-header {
-    display: flex;
-    justify-content: space-between;
-    height: 45px;
-    line-height: 45px;
-    border-bottom: 1px solid #DFDFDF;
-    font-weight: bold;
-    li:first-child {
-      width: 150px;
-      &.carBlue {
-        background: url("../assets/images/carBlue.png") no-repeat 90px center;
-        background-size: 28px 17px;
-      }
-      &.carYellow {
-        background: url("../assets/images/carYellow.png") no-repeat 90px center;
-        background-size: 28px 17px;
-      }
-      &.carGreen {
-        background: url("../assets/images/carGreen.png") no-repeat 90px center;
-        background-size: 28px 17px;
-      }
-      &.carWhite {
-        background: url("../assets/images/carWhite.png") no-repeat 90px center;
-        background-size: 28px 17px;
-      }
-      &.carBlack {
-        background: url("../assets/images/carBlack.png") no-repeat 90px center;
-        background-size: 28px 17px;
-      }
-    }
-    li:last-child {
-      margin-right: 18px;
-      color: #BC0202;
-    }
-  }
-
-  .cost-body {
-    padding-top: 10px;
-    position: relative;
-    > p {
-      padding-bottom: 10px;
-    }
-    .out-wrap {
-      position: absolute;
-      right: 18px;
-      top: 50%;
-      transform: translateY(-50%);
-      .mon-wrap {
-        font-size: 16px;
-        color: #333;
-        font-weight: bold;
-      }
-      .out-btn {
-        width: 72px;
-        height: 24px;
-        margin-top: 18px;
-        line-height: 24px;
-        text-align: center;
-        background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
-        border-radius: 4px;
-        color: #FFF;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .history-con{
-    height: calc(100% - 38px);
-    overflow: hidden;
-  }
-  .history-body{
-    height: calc(100% - 81px);
-    overflow-y: scroll;
-  }
-  .history-footer{
-    height: 81px;
-    background: #F8F8F8;
-  }
-
-  .cost-main-history{
-    margin-bottom: 10px;
-    background:#fff url("../assets/images/choose.png") no-repeat 10px center;
-    background-size: 20px 20px;
-    cursor: pointer;
-  }
-
-
-  .isChecked{
-    background:#fff url("../assets/images/choosed.png") no-repeat 10px center;
-    background-size: 20px 20px;
-  }
-
-  .money-all{
-    padding-left: 18px;
-    height: 25px;
-    line-height: 25px;
-    font-weight: 500;
-    background: #FEF8DB;
-    span{
-      color: #BC0202;
-    }
-  }
-
-  .statistical-data{
-    padding-left: 18px;
-    height: 32px;
-    line-height: 32px;
-    background: #E6FAFA;
-    span{
-      color: #D20000;
-    }
-  }
-  .opration-wrap{
-    padding-left: 18px;
-    height: 49px;
-    line-height: 49px;
-    background: #f8f8f8;
-    display: flex;
-    justify-content: space-between;
-    .check-btn{
-      padding-left: 30px;
-      background: url("../assets/images/choose.png") no-repeat 0 center;
-      background-size: 20px 20px;
-      cursor: pointer;
-    }
-    .isAllChecked{
-      background: url("../assets/images/choosed.png") no-repeat 0 center;
-      background-size: 20px 20px;
-    }
-    .settle-btn{
-      width: 106px;
-      height: 49px;
-      background: linear-gradient(145deg, #2783E9 0%, #227ADC 100%);
-      text-align: center;
-      color: #fff;
-      cursor: pointer;
-    }
-  }
-
-  .noRecord {
-    padding-top: 200px;
-    background: url("../assets/images/noRecord.png") no-repeat center 60px;
-    background-size: 161px 124px;
-    text-align: center;
-  }
-</style>
diff --git a/src/components/plateNumber.vue b/src/components/plateNumber.vue
deleted file mode 100644
index e5dca39..0000000
--- a/src/components/plateNumber.vue
+++ /dev/null
@@ -1,727 +0,0 @@
-<template>
-  <div id="page">
-    <div class="wrap">
-      <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
-
-      <ul class="color-choose">
-        <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
-        :style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"
-        >
-          {{i.name}}
-        </li>
-
-      </ul>
-
-      <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
-      <div class="num-box">
-        <div class="num0" @click="clickFirstWrap()">
-          <span>{{formData.num0}}</span>
-        </div>
-        <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
-        <!--<em class="spot"></em>-->
-        <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
-        <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
-        <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
-        <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
-        <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
-        <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
-      </div>
-
-
-      <div class="radio-box">
-        <label class="flex-items-center">
-          <img v-if="formData.commonCard == 1"
-               src="../assets/images/icon_chose_s@2x.png"
-               alt="">
-          <img v-else
-               src="../assets/images/icon_chose_n@2x.png"
-               alt="">
-          <input type="radio"
-                 v-model="formData.commonCard"
-                 value="1" />普通车牌
-        </label>
-        <label class="flex-items-center">
-          <img v-if="formData.commonCard == 2"
-               src="../assets/images/icon_chose_s@2x.png"
-               alt="">
-          <img v-else
-               src="../assets/images/icon_chose_n@2x.png"
-               alt="">
-          <input type="radio"
-                 v-model="formData.commonCard"
-                 value="2" />新能源车牌
-        </label>
-      </div>
-
-
-      <div class="submit-box" @click="submitFn()">
-        查询
-      </div>
-    </div>
-    <div class="first-word-wrap"
-         v-if="firstWrapStatus">
-      <div class="first-word"
-           @click="selectFirstWord($event)">
-        <div class="word">
-          <span>京</span>
-        </div>
-        <div class="word">
-          <span>湘</span>
-        </div>
-        <div class="word">
-          <span>津</span>
-        </div>
-        <div class="word">
-          <span>鄂</span>
-        </div>
-        <div class="word">
-          <span>沪</span>
-        </div>
-        <div class="word">
-          <span>粤</span>
-        </div>
-        <div class="word">
-          <span>渝</span>
-        </div>
-        <div class="word">
-          <span>琼</span>
-        </div>
-      </div>
-      <div class="first-word"
-           @click="selectFirstWord($event)">
-        <div class="word">
-          <span>翼</span>
-        </div>
-        <div class="word">
-          <span>川</span>
-        </div>
-        <div class="word">
-          <span>晋</span>
-        </div>
-        <div class="word">
-          <span>贵</span>
-        </div>
-        <div class="word">
-          <span>辽</span>
-        </div>
-        <div class="word">
-          <span>云</span>
-        </div>
-        <div class="word">
-          <span>吉</span>
-        </div>
-        <div class="word">
-          <span>陕</span>
-        </div>
-      </div>
-      <div class="first-word"
-           @click="selectFirstWord($event)">
-        <div class="word">
-          <span>黑</span>
-        </div>
-        <div class="word">
-          <span>甘</span>
-        </div>
-        <div class="word">
-          <span>苏</span>
-        </div>
-        <div class="word">
-          <span>青</span>
-        </div>
-        <div class="word">
-          <span>浙</span>
-        </div>
-        <div class="word">
-          <span>皖</span>
-        </div>
-        <div class="word">
-          <span>藏</span>
-        </div>
-        <div class="word">
-          <span>闽</span>
-        </div>
-      </div>
-      <div class="first-word"
-           @click="selectFirstWord($event)">
-        <div class="word">
-          <span>蒙</span>
-        </div>
-        <div class="word">
-          <span>赣</span>
-        </div>
-        <div class="word">
-          <span>桂</span>
-        </div>
-        <div class="word">
-          <span>鲁</span>
-        </div>
-        <div class="word">
-          <span>宁</span>
-        </div>
-        <div class="word">
-          <span>豫</span>
-        </div>
-        <div class="word">
-          <span>新</span>
-        </div>
-        <div class="word bordernone">
-          <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
-        </div>
-      </div>
-    </div>
-    <div class="keyboard-wrap" v-if="keyBoardStatus === true">
-      <!-- <div class="number-wrap"></div>
-      <div class="letter-wrap"></div>
-      <div class="cn-wrap"></div> -->
-      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
-        <span v-for="(item,index) in allKeyWord._1"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-      </div>
-      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
-        <span v-for="(item,index) in allKeyWord._2"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-      </div>
-      <div class="keyboard">
-        <span v-for="(item,index) in allKeyWord._3"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-      </div>
-      <div class="keyboard">
-        <span v-for="(item,index) in allKeyWord._4"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-      </div>
-      <div class="keyboard">
-        <span v-for="(item,index) in allKeyWord._5"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-      </div>
-      <div class="keyboard">
-        <span v-for="(item,index) in allKeyWord._6"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <span class="bordernone"></span>
-        <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
-        <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
-        <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
-      </div>
-      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
-        <span v-for="(item,index) in allKeyWord._7"
-              :key="index"
-              @click="clickKeyBoard(item)">{{item}}</span>
-        <span class="bordernone"></span>
-        <span class="delete" @click="deleteWord"><img src="../assets/images/icon-delete.png" alt=""></span>
-      </div>
-      <div class="cancel">
-        <span @click="keyBoardStatus = false">完成</span>
-      </div>
-    </div>
-
-
-    <modal-alert ref="alert">
-      <div class="trave-tip-content txt-l" slot="content">
-        <div class="confirm-text">
-          <p>请输入正确的车牌号</p>
-        </div>
-      </div>
-      <span slot="button">知道了</span>
-    </modal-alert>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {
-      colorList:[
-        {
-          name:'蓝牌',
-          id:'1'
-        },
-        {
-          name:'黄牌',
-          id:'2'
-        },
-        {
-          name:'绿牌',
-          id:'3'
-        },
-        {
-          name:'白牌',
-          id:'4'
-        },
-        {
-          name:'黑牌',
-          id:'5'
-        },
-      ],
-      currentColor:0,
-      activeBG:'#0054C0',
-      formData: {
-        commonCard: '1',
-        num0: '',
-        num1: '',
-        num2: '',
-        num3: '',
-        num4: '',
-        num5: '',
-        num6: '',
-        num7: ''
-      },
-      allKeyWord: {
-        _1: [1, 2, 3, 4, 5, 6, 7],
-        _2: [8, 9, 0],
-        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
-        _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
-        _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
-        _6: ['W', 'X', 'Y', 'Z'],
-        _7: ['港', '澳', '学', '领', '警']
-      },
-      activeKeyWordIndex: 1, // 当前车牌号
-      keyBoardStatus: false,
-      firstWrapStatus: false, // 选择弹窗
-      confirmTitle: '',
-      submitConfirm: false,
-      submitConfirmFalse: false,
-      submitConfirmText: ''
-    }
-  },
-  mounted () {
-  },
-  methods: {
-    chooseColor (index){ // 颜色选择
-      this.currentColor = index
-      switch (this.currentColor) {
-        case 0 :
-          return this.activeBG = '#0054C0'
-          break;
-        case 1 :
-          return this.activeBG = '#FEBE00'
-          break;
-        case 2 :
-          return this.activeBG = '#97DEA1'
-          break;
-        case 3 :
-          return this.activeBG = '#E4E5E7'
-          break;
-        case 4 :
-          return this.activeBG = '#333333'
-          break;
-      }
-    },
-    clickFirstWrap () {
-      // 点击第一个输入框
-      this.firstClickStatus = true
-      this.firstWrapStatus = true
-      this.keyBoardStatus = false
-      this.formData.num0 = ''
-    },
-    selectFirstWord (event) {
-      // 选择省份
-      if (event.target.localName !== 'span') {
-        return
-      }
-      this.formData.num0 = event.target.innerText
-      this.firstSelectStatus = true
-      this.firstWrapStatus = false
-      this.firstClickStatus = false
-      this.keyBoardStatus = true
-      this.activeKeyWordIndex = 1
-      // this.$refs.num1.focus()
-      // document.getElementById('num1').focus()
-    },
-    clickKeyBoard (item) { // 点击自定义键盘
-      console.log(item)
-      this.formData['num' + this.activeKeyWordIndex] = item
-
-      if (this.formData.commonCard === '1') {
-        this.activeKeyWordIndex++
-        if (this.activeKeyWordIndex > 6) {
-          this.keyBoardStatus = false
-        }
-      } else {
-        this.activeKeyWordIndex++
-        if (this.activeKeyWordIndex > 7) {
-          this.keyBoardStatus = false
-        }
-      }
-    },
-    deleteWord () { // 退格
-      // console.log(this.activeKeyWordIndex)
-      // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
-      if (this.activeKeyWordIndex > 1) {
-        this.formData['num' + (this.activeKeyWordIndex - 1)] = ''
-        this.activeKeyWordIndex--
-      }
-    },
-    clickKeyWordWrap (activeKeyWordIndex) {
-      this.keyBoardStatus = true
-      this.activeKeyWordIndex = activeKeyWordIndex
-      this.formData['num' + this.activeKeyWordIndex] = ''
-    },
-    submitFn () {
-      let plateLicense
-      if (this.formData.commonCard === '1') {
-        plateLicense = this.plate_license_1
-        plateLicense = this.palindrome(plateLicense)
-        if (plateLicense.length < 7) {
-          this.$refs.alert.open()
-          return
-        }
-      }
-      if (this.formData.commonCard === '2') {
-        plateLicense = this.plate_license_2
-        plateLicense = this.palindrome(plateLicense)
-        if (plateLicense.length < 8) {
-          this.$refs.alert.open()
-          return
-        }
-      }
-      this.$emit('getPlateLicense',plateLicense)
-      console.log(plateLicense);
-      this.$router.push({
-        path:'parkRecord',
-        query:{
-          carNumber:plateLicense
-        }
-      })
-    },
-    palindrome (str) {
-      var arr = str.split('')
-      arr = arr.filter(function (val) {
-        return (
-          val !== ' ' &&
-          val !== ',' &&
-          val !== '.' &&
-          val !== '?' &&
-          val !== ':' &&
-          val !== ';' &&
-          val !== '`' &&
-          val !== "'" &&
-          val !== '_' &&
-          val !== '/' &&
-          val !== '-' &&
-          val !== '\\' &&
-          val !== '' &&
-          val !== '(' &&
-          val !== ')'
-        )
-      })
-      return arr.join('')
-    },
-    checkIsHasSpecialStr (str) {
-      var flag = false
-      var arr = str.split('')
-      arr.forEach(val => {
-        if (
-          val === '!' ||
-          val === '}' ||
-          val === '{' ||
-          val === ']' ||
-          val === '[' ||
-          val === '&' ||
-          val === '$' ||
-          val === '@' ||
-          val === ' ' ||
-          val === ',' ||
-          val === '.' ||
-          val === '?' ||
-          val === ':' ||
-          val === ';' ||
-          val === '`' ||
-          val === "'" ||
-          val === '_' ||
-          val === '/' ||
-          val === '-' ||
-          val === '\\' ||
-          val === '' ||
-          val === '(' ||
-          val === ')'
-        ) {
-          flag = true
-        }
-      })
-      return flag
-    },
-    checkIsHasChineseStr (str) {
-      var Reg = /.*[\u4e00-\u9fa5]+.*/
-      if (Reg.test(str)) {
-        return true
-      }
-      return false
-    }
-  },
-  computed: {
-    plate_license_1 () {
-      return (
-        this.formData.num0 +
-        this.formData.num1 +
-        this.formData.num2 +
-        this.formData.num3 +
-        this.formData.num4 +
-        this.formData.num5 +
-        this.formData.num6
-      )
-    },
-    plate_license_2 () {
-      return (
-        this.formData.num0 +
-        this.formData.num1 +
-        this.formData.num2 +
-        this.formData.num3 +
-        this.formData.num4 +
-        this.formData.num5 +
-        this.formData.num6 +
-        this.formData.num7
-      )
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-  .flex-items-center {
-    display: flex;
-    align-items: center;
-  }
-  .wrap {
-    padding:0 18px;
-    .radio-box {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      margin-top: 18px;
-      text-align: right;
-      input[type="radio"] {
-        display: none;
-      }
-      label {
-        padding-left: 0.6rem;
-        cursor: pointer;
-        img {
-          width: 0.8rem;
-          margin-right: 0.1rem;
-        }
-      }
-    }
-
-    .color-choose{
-      width: 265px;
-      height: 34px;
-      margin: 0 auto;
-      background: #F3F3F3;
-      border-radius: 6px;
-      display: flex;
-      li{
-        flex: 1;
-        text-align: center;
-        line-height: 34px;
-        border-radius: 6px;
-      }
-    }
-    .card-header {
-      font-size: 0.75rem;
-      margin: 0.2rem 0 0.5rem;
-      color: #4a4a4a;
-    }
-    // input输入框
-    .num-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .spot {
-        width: 0.2rem;
-        height: 0.2rem;
-        border-radius: 50%;
-        background-color: #d8d8d8;
-      }
-      & > div {
-        width: 1.8rem;
-        height: 1.8rem;
-        border: 1px solid #e4e4e4;
-        &.first {
-          position: relative;
-          text-align: center;
-          line-height: 1.7rem;
-          font-weight: 200;
-          .input-wrap {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            &.active {
-              z-index: 100;
-            }
-          }
-          em {
-            color: #979797;
-            font-size: 1.6rem;
-            line-height: 1.7rem;
-          }
-          span {
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            // background-color: #9cbce2;
-            color: #828282;
-            line-height: 1.8rem;
-          }
-        }
-        &.active {
-          border: 1px solid #4a90e2;
-          &:after {
-            border-bottom: 0.5rem solid #4a90e2;
-          }
-        }
-        span {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-          font-size: 1rem;
-          color: #828282;
-          &.first {
-            background-color: #9cbce2;
-            color: #fff;
-            text-indent: 0.4rem;
-            border-radius: 0;
-          }
-        }
-      }
-    }
-    .submit-box {
-      width: 100%;
-      height: 44px;
-      line-height: 44px;
-      border-radius: 4px;
-      font-size: 20px;
-      margin-top: 18px;
-      background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
-      color: #fff;
-      text-align: center;
-    }
-    .info {
-      font-size: 0.5rem;
-      margin-top: 0.9rem;
-      color: #828282;
-      text-align: left;
-      img {
-        width: 0.6rem;
-        vertical-align: middle;
-      }
-    }
-  }
-  .first-word-wrap {
-    // height: 9.4rem;
-    background-color: #D2D5DB;
-    padding: 0.6rem 0.8rem 1.1rem;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    .first-word {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 0.45rem;
-      .word {
-        box-sizing: border-box;
-        width: 1.8rem;
-        height: 1.8rem;
-        // border: 1px solid #9cbce2;
-        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
-        border-radius: 0.16rem;
-        text-align: center;
-        &.bordernone {
-          border: none;
-          box-shadow:none
-        }
-        span {
-          box-sizing: border-box;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          text-align: center;
-          width: 100%;
-          height: 100%;
-          background-color: #fff;
-          color: #000;
-          // border: 1px solid #fff;
-          border-radius: 0.125rem;
-        }
-        img {
-          width: 1.6rem;
-        }
-      }
-      &:nth-last-of-type(1){
-        margin-bottom: 0rem;
-      }
-    }
-  }
-  .keyboard-wrap {
-    background-color: #D2D5DB;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0.6rem 0.6rem 0.4rem;
-    .keyboard {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 2rem;
-      margin-bottom: 0.3rem;
-      span {
-        text-align: center;
-        display: flex;
-        width: 1.8rem;
-        align-items: center;
-        justify-content: center;
-        height: 1.8rem;
-        margin: 0 0.3rem;
-        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
-        background-color: #fff;
-        border-radius: 0.125rem;
-        &:active {
-          background-color: #e4e4e4;
-        }
-        &.bordernone{
-          border: none;
-          box-shadow: none;
-          background-color: #D2D5DB;
-          &:active{
-            background-color:#D2D5DB;
-          }
-        }
-        &.delete{
-          background-color: #465266;
-          img{
-            width: 1.15rem;
-          }
-        }
-      }
-    }
-    .cancel{
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      span{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 3.6rem;
-        height: 1.8rem;
-        background-color: #465266;
-        color: #fff;
-        border-radius: 0.125rem;
-      }
-    }
-  }
-</style>
diff --git a/src/main.js b/src/main.js
index f825b23..466e18b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,9 +6,19 @@ import router from './router'
 
 import './assets/css/reset.css'  // 引入公共样式
 
-import h5Popup from 'vue-h5-popup'; // 引入弹窗
+import h5Popup from 'vue-h5-popup' // 引入弹窗
 Vue.use(h5Popup)
 
+
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+Vue.use(MintUI)  // 引入MintUI
+
+
+//全局设置的基本样式
+import './assets/css/base.scss'
+
+
 import utils from './utils/utils' // 工具类
 Vue.prototype.$utils = utils
 
diff --git a/src/router/index.js b/src/router/index.js
index 2b86f01..6d3fcbe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-// import plateNumber from '@/components/plateNumber'
-import parkRecord from '@/components/parkRecord'
-import navigation from '@/components/navigation'
+import plateNumber from '@/views/parkPay/plateNumber'
+import parkRecord from '@/views/parkPay/parkRecord'
+import selfNav from '@/views/mySelf/selfNav'
 
 Vue.use(Router)
 
@@ -11,14 +11,14 @@ export default new Router({
     {
       path: '/',
       redirect: {
-        name: 'parkRecord'
+        name: 'selfNav'
       }
     },
-    {
-      path: '/navigation',
-      name: 'navigation',
-      component: navigation
-    },
+    // {
+    //   path: '/navigation',
+    //   name: 'navigation',
+    //   component: navigation
+    // },
 
     {
       path: '/parkRecord',
@@ -28,15 +28,53 @@ export default new Router({
     {
       path: '/plateNumber',
       name: 'plateNumber',
-      component: () => import("@/components/plateNumber.vue")
+      component: plateNumber
     },
 
     {
       path: '/orderPay',
       name: 'orderPay',
-      component: () => import("@/components/orderPay.vue")
+      component: () => import("@/views/parkPay/orderPay.vue")
+    },
+
+     //---------------- 个人页面导航
+    {
+      path: '/selfNav',
+      name: 'selfNav',
+      component: () => import("@/views/mySelf/selfNav.vue")
+    },
+
+    // ------------------------建议反馈
+    {
+      path: '/suggestionBack',
+      name: 'suggestionBack',
+      component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
+    },
+
+    // ------------------------停车记录
+    {
+      path: '/parkNotes',
+      name: 'parkNotes',
+      component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
+    },
+
+
+    // ------------------------停车记录
+    {
+      path: '/binDing',
+      name: 'binDing',
+      component: () => import("@/views/binding/binDing.vue")
     },
 
 
+
+
+
+
+
+
+
+
+
   ]
 })
diff --git a/src/views/binding/binDing.vue b/src/views/binding/binDing.vue
new file mode 100644
index 0000000..a7fe640
--- /dev/null
+++ b/src/views/binding/binDing.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+
+    <mt-field label="手机号" placeholder="请输入正确的手机号" type="tel" v-model="phone" :attr="{ maxlength: 13 }"></mt-field>
+
+    <mt-field label="验证码" v-model="codeText">
+      <div class="getCode" @click="getCode">{{timeNum}}</div>
+    </mt-field>
+
+    <div style="margin-top: 34px" class="leftRightPadding">
+      <mt-button type="danger" size="large">绑定</mt-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'binDing',
+  data() {
+    return {
+      codeText: '',
+      phone: '',
+      timeText: '获取验证码',
+      timeNum: 60,
+    }
+  },
+  created(){
+    this.timeNum = this.timeText
+  },
+  methods: {
+    getCode: function () {
+      var _this = this
+      // this.timeText = this.timeNum+'S'
+      let Num = 5
+      var timer = setInterval(function () {
+        _this.timeNum = Num-- +'s'
+        if(Num== -1){
+          _this.timeNum = '获取验证码'
+          clearInterval(timer)
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .getCode {
+    width: 100px;
+    height: 48px;
+    line-height: 48px;
+    background: #ef4f4f;
+    color: #fff;
+    text-align: center;
+  }
+</style>
diff --git a/src/views/mySelf/feedback/suggestionBack.vue b/src/views/mySelf/feedback/suggestionBack.vue
new file mode 100644
index 0000000..ab6b4c0
--- /dev/null
+++ b/src/views/mySelf/feedback/suggestionBack.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="leftRightPadding">
+    <p class="suggestion-tip">请选择您反馈的问题类型</p>
+    <ul class="suggestionList">
+      <li
+        @click="chooseHandle(index)"
+        v-for="(i, index) in suggestionList"
+        :key="i.id"
+        :class="{choosedActive: currentIndex==index}"
+      >
+        {{i.text}}
+      </li>
+    </ul>
+
+    <div class="clear"></div>
+
+    <mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model="introduction" :attr="{ maxlength: 2 }"></mt-field>
+
+    <div  style="margin-top: 34px">
+      <mt-button type="danger" size="large">提交</mt-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'suggestionBack',
+  data() {
+    return {
+      suggestionList: [
+        { id: 1, text: 'APP问题' },
+        { id: 2, text: '支付问题' },
+        { id: 3, text: '停车场问题' },
+        { id: 4, text: '服务投诉' },
+        { id: 5, text: '改进建议' },
+        { id: 6, text: '其他问题' },
+      ],
+      currentIndex: 0,
+      introduction: '',
+    }
+  },
+  methods: {
+    chooseHandle: function (i) {
+      console.log(i)
+      this.currentIndex = i
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .suggestion-tip {
+    margin: 17px 0 13px;
+    color: #6666;
+  }
+
+  .suggestionList {
+
+    li {
+      float: left;
+      width: calc((100% - 19px) / 2);
+      height: 33px;
+      line-height: 33px;
+      margin-bottom: 16px;
+      border: 1px solid #B18181;
+      text-align: center;
+      font-size: 13px;
+      &:nth-child(odd) {
+        margin-right: 19px;
+      }
+    }
+    .choosedActive {
+      background: #F75959;
+      border: 1px solid #A51E1E;
+      color: #fff;
+    }
+
+  }
+</style>
diff --git a/src/views/mySelf/parkNotes/parkNotes.vue b/src/views/mySelf/parkNotes/parkNotes.vue
new file mode 100644
index 0000000..b8bddb3
--- /dev/null
+++ b/src/views/mySelf/parkNotes/parkNotes.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+      <ul class="notesList">
+        <li>车牌号: <span>蒙DMW169</span></li>
+        <li>车牌颜色: <span>蓝色</span></li>
+        <li>进场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>出场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>停车时长: <span>18分33秒</span></li>
+      </ul>
+      <ul class="notesList">
+        <li>车牌号: <span>蒙DMW169</span></li>
+        <li>车牌颜色: <span>蓝色</span></li>
+        <li>进场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>出场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>停车时长: <span>18分33秒</span></li>
+      </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'parkRecord'
+}
+</script>
+
+<style scoped lang="scss">
+.notesList{
+  background: #fff;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/mySelf/selfNav.vue b/src/views/mySelf/selfNav.vue
new file mode 100644
index 0000000..607589c
--- /dev/null
+++ b/src/views/mySelf/selfNav.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="person-bg">
+      <div class="person-ifo">
+        <div class="person-pic"></div>
+        <ul class="person-con">
+          <li>15911111111</li>
+          <li>账户余额: <span>￥100.00</span></li>
+          <li>我的卡券：<span>20张</span></li>
+        </ul>
+      </div>
+    </div>
+
+    <mt-cell title="会员卡"  is-link :to="{ name: 'Toast' }"></mt-cell>
+
+    <mt-cell title="车辆管理"  is-link :to="{ name: 'Toast' }"></mt-cell>
+
+    <mt-cell title="停车记录"  is-link :to="{ name: 'parkNotes' }"></mt-cell>
+
+    <mt-cell title="建议反馈"  is-link :to="{ name: 'suggestionBack' }"></mt-cell>
+
+    <div class="leftRightPadding" style="margin-top: 34px">
+      <mt-button type="danger" size="large">退出账户</mt-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selfNav'
+}
+</script>
+
+<style scoped lang="scss">
+  .person-bg {
+    height: 160px;
+    background: url("../../assets/images/mySelf/selfNavBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .person-ifo {
+    padding: $commonLeftRightPadding;
+    padding-top: 45px;
+    display: flex;
+    color: #ffbfbf;
+    .person-pic{
+      width: 64px;
+      height: 64px;
+      margin-right: 15px;
+      background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
+    }
+  }
+  .person-con{
+    span{
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .mint-cell{
+    border-bottom: 1px solid #EFEDED;
+  }
+</style>
diff --git a/src/views/parkPay/navigation.vue b/src/views/parkPay/navigation.vue
new file mode 100644
index 0000000..4881a65
--- /dev/null
+++ b/src/views/parkPay/navigation.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div style="height: 206px;">
+      <div class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide"  v-for="item in swiperData" :key="item.id" :style="{backgroundImage:'url(' + item.url + ')'}"
+            @click="openImgUrl(item)"
+          ></div>
+        </div>
+        <!-- 如果需要分页器 -->
+        <div class="swiper-pagination"></div>
+
+        <!-- 如果需要滚动条 -->
+        <!--    <div class="swiper-scrollbar"></div>-->
+      </div>
+    </div>
+    <p class="carNumberTip">
+      请确认您当前缴费车牌号
+    </p>
+
+    <div class="car-wrap">
+      <div class="carBG" :class="carWrapBG | formateColor">
+        <p class="carNumber">{{carNumber}}</p>
+      </div>
+
+      <p class="toParkRecord">
+        是我的车，去支付
+      </p>
+
+      <p class="toPlateNumber">
+        不是我的车，手动输入
+      </p>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper' //  应入swiper
+import { swiperQuery } from '../../api/navigation/navigation'
+export default {
+  name: 'navigation',
+  data() {
+    return {
+      carNumber: '',  // 车牌号码
+      carWrapBG: 0,// 车牌颜色
+      swiperData: [], // 轮播数据
+    }
+  },
+  mounted() {
+    this.carNumber = this.$route.query.carNumber  // 车牌号码
+    this.carWrapBG = this.$route.query.carNumberColor // 车牌颜色
+    console.log(this.carNumber)
+
+  },
+  created() {
+    this.initSWiper()
+  },
+  methods: {
+    initSWiper(){
+      var salt = this.$utils.myCommonSalt(32)
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: 'md5',
+        sign: '1',
+        orgId:this.$utils.myOrgId,
+        jumpType: '8'
+      };
+      // jsondata = JSON.stringify(jsondata);
+      swiperQuery(jsondata).then( res => {
+        this.swiperData = res.data
+        console.log(this.swiperData)
+        new Swiper ('.swiper-container', {
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          centeredSlides: true,
+          notNextTick: true,
+          autoplay: 5000,
+          autoplayDisableOnInteraction: true,
+
+          observer: true,       //修改swiper自己或子元素时，自动初始化swiper
+          observeParents: true, //修改swiper的父元素时，自动初始化swiper
+          onSlideChangeStart: function (swiper) {
+            //console.log(swiper.activeIndex)
+          }
+        })
+      })
+    },
+    openImgUrl(i){ // 点击图片跳转
+      window.open(i.jumpUrl)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .swiper-container{
+    height: 206px;
+  }
+  .swiper-slide{
+    /*width: 100%;*/
+    height: 206px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .carNumberTip {
+    width: 200px;
+    margin: 20px auto 10px;
+    padding-left: 20px;
+    background: url("../../assets/images/parkPay/tip.png") no-repeat 0 center;
+    background-size: 14px 14px;
+    text-align: center;
+  }
+
+  .car-wrap {
+    padding: 0px 40px;
+    background: #FFF;
+  }
+
+  .carBG {
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    font-size: 24px;
+    color: #fff;
+  }
+  .carBlue {
+    background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carYellow {
+    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carGreen {
+    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carWhite {
+    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carBlack {
+    background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .toParkRecord{
+    margin-top: 40px;
+    margin-bottom: 20px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    text-align: center;
+    background: url("../../assets/images/parkPay/toParkRecord.png") no-repeat;
+    background-size: 100% 50px;
+    cursor: pointer;
+  }
+  .toPlateNumber{
+    text-align: right;
+    cursor: pointer;
+  }
+
+</style>
diff --git a/src/views/parkPay/orderPay.vue b/src/views/parkPay/orderPay.vue
new file mode 100644
index 0000000..b900383
--- /dev/null
+++ b/src/views/parkPay/orderPay.vue
@@ -0,0 +1,323 @@
+<template>
+  <div>
+    <div class="car-wrap">
+      <div class="carBG" :class="carWrapBG | formateColor">
+        <p class="carNumber">{{carNumber}}</p>
+        <p class="payFee">{{(arrearageActFee/100).toFixed(2)}}元</p>
+      </div>
+    </div>
+
+    <ul class="fee-wrap">
+      <li>
+        <span>待缴金额</span>
+        <span>{{(arrearageActFee/100).toFixed(2)}}</span>
+      </li>
+      <li>
+        <span>优惠金额</span>
+        <span>{{(arrearageDiscFee/100).toFixed(2)}}</span>
+      </li>
+      <li>
+        <span>应付金额</span>
+        <span>{{(arrearageActFee/100).toFixed(2)}}</span>
+      </li>
+    </ul>
+    <div style="padding: 20px 18px">
+      <div class="toPay" @click="toPay">微信支付</div>
+    </div>
+
+    <div v-if="appOrderTimeout">
+      <p class="tip">
+        温馨提示：
+      </p>
+      <p style="color: #666;padding: 0 18px;">
+        {{appOrderTimeout}}
+      </p>
+    </div>
+
+
+
+  </div>
+</template>
+
+<script>
+import {aliPay, getOpenId, vxPayQuery, doPay, doOrderCreate} from '@/api/orderPay/orderPay'
+
+export default {
+  name: 'orderPay',
+  data() {
+    return {
+      carWrapBG: 0,
+      carNumber: '京A12312',
+      arrearageActFee: 0,
+      arrearageDiscFee: 0,
+      arrearageActFee: 0,
+      paySrcType: '', //支付的类型   101 是本次   103是历史欠费
+      orderId: '',  //支付的订单
+      webAppCode: '', // 微信code
+      appOrderTimeout: '', // 超时描述
+      isAndroid: '', // 终端类型
+    }
+  },
+  created() {
+    this.carWrapBG = this.$route.query.carColor //车牌颜色
+    this.carNumber = this.$route.query.carNumber
+    this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
+    this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
+    this.arrearageActFee = this.$route.query.arrearageActFee // 实收
+    this.paySrcType = this.$route.query.paySrcType // 实收
+    this.orderId = this.$route.query.ordeID // 订单号
+    console.log(this.orderId)
+    this.appOrderTimeout = this.$route.query.appOrderTimeout  //提示
+
+    let userAgent = navigator.userAgent;
+    this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
+    this.webAppCode = this.getCode();
+
+  },
+  methods: {
+    getCode() {
+      var appID = this.$utils.myVxAppId;
+      var code = this.getUrlParam('code');
+      var local = window.location.href;
+      if (code == null || code === '') {
+        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
+      } else {
+        return code;
+      }
+    },
+    doOrderCreate(orderID) { // 欠费创建订单号
+      var jsondata = {
+        orderBigType: 100,
+        payOrderType: this.paySrcType,
+        parkOrderIds: orderID,
+        terminalSource: 7,
+        operName: '',
+        operCode: '',
+      };
+      // jsondata = JSON.stringify(jsondata);
+      doOrderCreate(jsondata).then(res => {
+        console.log(res)
+        this.orderId = res.data.rltOrderId
+        console.log(this.orderId)
+        this.dopay(this.orderId)
+      })
+
+    },
+    getUrlParam(name) {
+      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+      var r = window.location.search.substr(1).match(reg)
+      if (r != null) return unescape(r[2])
+      return null
+    },
+    dopay(orderID) {
+      let me = this
+
+
+
+        var vm = this
+        //第一步获取openid
+        var codeParams = {
+          code: this.webAppCode,
+          appId: this.$utils.myVxAppId
+        };
+        getOpenId(codeParams).then(resu => {
+          if (resu.code == 0) {
+            // me.vxPay(res.data, this.orderId)
+
+            var jsondata = {
+              orderBigType: 100,
+              payOrderType: this.paySrcType,
+              rltOrderId: orderID,
+              payType: 2, // 1 是支付宝    2是微信
+              terminalSource: 7,
+              orderActFee: this.arrearageActFee,
+              orderTotalFee: this.arrearageTotalFee,
+              orderDicountFee: this.arrearageDiscFee,
+              payUserId: resu.data,
+              terminalOS: this.isAndroid ? 'AND' : 'IOS',
+              couponType: 1, //优惠类型
+              couponCode: this.arrearageDiscFee,
+            };
+
+            doPay(jsondata).then(res => {
+              console.log(res)
+              if (res.code == 0) { //
+                //alertMsg("出场成功");
+                if (res.data) {
+                  var data = JSON.parse(res.data.jsPayRequest);
+                  console.log(JSON.stringify(data));
+                  if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
+                    if (document.addEventListener) {
+                      document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
+                    } else if (document.attachEvent) {
+                      document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
+                      document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
+                    }
+                  } else {
+                    console.log('准备调用微信支付')
+                    vm.onBridgeReady(data)
+                  }
+                } else {
+                  alert("没有找到返回值");
+                }
+              } else {
+                alert('支付错误')
+                console.log(res.message);
+                alert(res.message);
+              }
+
+            })
+
+          } else if (res.code == 40163) { //code been used, hints[重复code问题]
+            alert('获取opendid错误--------')
+            alert(res.message)
+            console.log(res.message);
+          } else {
+            alert('获取opendid错误')
+            alert(res.message)
+          }
+        })
+
+
+    },
+    toPay() {
+      let me = this
+      let _order = []
+      // this.orderId = JSON.parse(this.orderId)
+      console.log(this.orderId)
+      if (this.paySrcType == 103) {
+        this.orderId = JSON.parse(this.orderId)
+        this.doOrderCreate(this.orderId)
+      } else {
+        console.log(this.orderId)
+        console.log(typeof this.orderId)
+
+        this.dopay(this.orderId)
+      }
+
+    },
+
+    onBridgeReady(params) {
+      console.log('调用微信支付WeixinJSBridge')
+      WeixinJSBridge.invoke(
+        'getBrandWCPayRequest', {
+          "appId": params.appId,     //公众号名称，由商户传入
+          "timeStamp": params.timeStamp,         //时间戳，自1970年以来的秒数
+          "nonceStr": params.nonceStr, //随机串
+          "package": params.package,
+          "signType": params.signType,         //微信签名方式：
+          "paySign": params.paySign //微信签名
+        },
+
+        // 'getBrandWCPayRequest', params,
+        //
+        // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
+        //   'appId': data.appId, // 公众号名称，由商户传入
+        //   'timeStamp': data.timeStamp, // 时间戳
+        //   'nonceStr': data.nonceStr, // 随机串
+        //   'package': data.package, // 预支付id
+        //   'signType': data.signType, // 微信签名方式
+        //   'paySign': data.paySign // 微信签名
+        // },
+        function (res) {
+          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+          if (res.err_msg === 'get_brand_wcpay_request:ok') {
+            console.log('成功')
+          } else {
+            console.log('失败')
+            alert('支付失败')
+          }
+        }
+      )
+    },
+  },
+
+}
+</script>
+
+<style scoped lang="scss">
+  .car-wrap {
+    padding: 7px 7px;
+    background: #FFF;
+  }
+
+  .carBG {
+    width: 100%;
+    height: 130px;
+  }
+
+  .carBlue {
+    background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carYellow {
+    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carGreen {
+    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carWhite {
+    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carBlack {
+    background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carNumber {
+    padding: 20px 0 10px;
+    font-size: 30px;
+    color: #fff;
+    text-align: center;
+  }
+
+  .payFee {
+    font-size: 24px;
+    color: #FF7B7B;
+    text-align: center;
+  }
+
+  .fee-wrap {
+    background: #FFF;
+    padding: 0 18px;
+    > li {
+      display: flex;
+      justify-content: space-between;
+      height: 30px;
+      line-height: 30px;
+      border-bottom: 1px solid #EAEAEA;
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+
+  }
+
+  .toPay {
+    width: 100%;
+    height: 44px;
+    margin: 0 auto;
+    line-height: 44px;
+    text-align: center;
+    background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+    border-radius: 4px;
+    border: 1px solid #0D72E2;
+    font-size: 20px;
+    color: #FFF;
+    cursor: pointer;
+  }
+
+  .tip {
+    padding-left: 40px;
+    background: url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
+    background-size: 16px 16px;
+    color: #666;
+  }
+</style>
diff --git a/src/views/parkPay/parkRecord.vue b/src/views/parkPay/parkRecord.vue
new file mode 100644
index 0000000..5d8d183
--- /dev/null
+++ b/src/views/parkPay/parkRecord.vue
@@ -0,0 +1,515 @@
+<template>
+  <div style="height: 100%">
+    <div v-if="parkList.length>0" style="height: 100%">
+      <ul class="tabWrap">
+        <li v-for="(i,index) in tabList"
+            :key="i.id"
+            :class="{tabActive:currentTabActive == index}"
+            @click="tabHandle(index)"
+        >{{i.text}}
+        </li>
+      </ul>
+
+
+      <!--本次缴费-->
+      <div v-show="currentTabActive==0">
+
+        <div v-if="parkingData.length>0">
+          <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车30分钟内无需缴费，请直接离场。</p>
+
+          <div class="cost-main" v-for="i in parkingData">
+            <ul class="cost-header">
+              <li :class="carColor | formateColor">{{i.carNumber}}</li>
+              <li>本次费用</li>
+            </ul>
+
+            <div class="cost-body">
+              <p>车辆类型：临停车</p>
+              <p>车场名称：{{i.parkName}}
+              </p>
+              <p> 进场时间：{{i.parkInTime}}
+              </p>
+              <p>出场时间：{{i.parkOutTime}}
+              </p>
+              <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
+              <div class="out-wrap">
+                <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
+                <p class="out-btn" @click="toPayCurrent(i)" v-if="parkingData[0].parkDuration>2100">出场缴费</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--没有在停费用-->
+        <div class="noRecord" v-else>暂无记录</div>
+
+
+      </div>
+
+
+      <!--历史缴费-->
+      <div v-show="currentTabActive==1" class="history-con" >
+        <div v-if="historyList.length>0" style="height: 100%;">
+          <div class="history-body" >
+            <p class="money-all">总欠费金额：
+              <span>¥{{(allMoney/100).toFixed(2)}}</span>
+            </p>
+
+            <div class="cost-main  cost-main-history" style="padding-left: 50px;"
+
+                 v-for="(i, index) in historyList" :key="i.id"
+                 @click="chooseHandle(i, index)"
+                 :class="{isChecked: i.checked}"
+            >
+              <ul class="cost-header">
+                <li :class="carColor | formateColor">{{i.carNumber}}</li>
+                <li>欠费</li>
+              </ul>
+
+              <div class="cost-body">
+                <p>车辆类型：临停车</p>
+
+                <p>车场名称：{{i.parkName}}
+                </p>
+                <p> 进场时间：{{i.parkInTime}}
+                </p>
+                <p>出场时间：{{i.parkOutTime}}
+                </p>
+                <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
+                <div class="out-wrap">
+                  <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+
+          <div class="history-footer">
+            <p class="statistical-data">您已选中
+              <span>{{historyCheckedLen}}</span>笔交易
+              &nbsp;&nbsp;&nbsp;&nbsp;合计：¥ <span>{{(historyCheckedMon/100).toFixed(2)}}</span>
+            </p>
+            <div class="opration-wrap">
+              <p class="check-btn" :class="{isAllChecked:allChecked}"
+                 @click="checkedAll"
+              >全选</p>
+              <p class="settle-btn" @click="toPayHisroryPage">清缴欠费</p>
+            </div>
+          </div>
+        </div>
+
+
+        <!--没有在停费用-->
+        <div class="noRecord" v-else>暂无记录</div>
+
+      </div>
+
+    </div>
+
+
+    <div v-else class="noRecord">
+      暂无记录
+    </div>
+
+    <modal-alert ref="alert">
+      <div class="trave-tip-content txt-l" slot="content">
+        <div class="confirm-text">
+          <p>请至少选择一笔记录</p>
+        </div>
+      </div>
+      <span slot="button">知道了</span>
+    </modal-alert>
+  </div>
+</template>
+
+<script>
+import { parkRecordList, historyQuery, parkingQuery } from '@/api/parkRecord/parkRecord.js'
+
+
+export default {
+  name: 'parkRecord',
+  data() {
+    return {
+      tabList: [  // 切换数据
+        { text: '在停缴费', id: 1 },
+        { text: '欠费待缴', id: 2 },
+      ],
+      carColor: 1,// 车牌颜色
+      currentTabActive: 1, // 显示当前哪个
+      carNumber: '', //  车牌号码
+      parkingData:[], //  在停数据
+      parkList: [], // 停车记录数据
+      historyList:[  // 历史欠费数据
+        {money:100,checked:false, id: 1},
+      ] ,
+      allChecked:false, // 全部选择事件
+      allMoney:0, // 欠费所有的费用
+      historyCheckedLen:0, //选中了几笔交易
+      historyCheckedMon: 0, //选中了待缴纳的金额
+      orderIds: [] // 选中数据的订单 数组
+    }
+  },
+  mounted(){
+  },
+  created() {
+    this.carNumber = this.$route.query.carNumber  // 获取车牌号
+    this.carColor = this.$route.query.carNumberColor  // 获取颜色   0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+    console.log(this.carNumber)
+    this.parkRecordList(this.carNumber)
+  },
+  methods: {
+    parkRecordList(){  // 获取停车记录数据
+      var salt = this.$utils.myCommonSalt(32);
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: "md5",
+        pageNum: 1,
+        pageSize: 1000,
+        parkState: 10,
+        terminalSource: 7,
+        carNumber: this.carNumber,
+        carNumberColor: this.carColor,
+        // sign: md5sign,
+        orgId: this.$utils.myOrgId
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+
+      // jsondata.sign = md5sign
+      console.log('停车记录传参  ' + JSON.stringify(jsondata));
+      parkRecordList(jsondata).then(response => {
+        console.log(response)
+        this.parkList = response.data.dataList
+
+        this.parkingData = this.parkList.filter(item => {
+          return item.parkState == '10'
+        })
+        if(this.parkingData.length>0){
+          this.currentTabActive = 0
+        }
+        console.log(this.parkingData)
+        this.historyList = this.parkList.filter(item => {
+          return item.parkState == '20'
+        })
+        this.historyList.forEach( i => {
+          this.allMoney += Number(i.unPayFee)
+        })
+
+        console.log(this.historyList)
+      })
+    },
+
+    tabHandle(index) { // tab 切换
+      this.currentTabActive = index
+    },
+    chooseHandle(i, index) { // 历史欠费单个选择事件
+      i.checked = !i.checked
+      let me = this
+      if(i.checked ){ //单个选中
+        me.historyCheckedLen ++
+        if(me.historyCheckedLen == this.historyList.length){
+          this.allChecked = true
+
+        }
+        me.orderIds.push(i.orderId)
+        me.historyCheckedMon += Number(i.unPayFee)
+      }else{ //单个不选中
+        let _i = me.orderIds.indexOf(i.orderId)
+        me.orderIds.splice(_i,1)
+        this.allChecked = false
+        me.historyCheckedLen --
+        me.historyCheckedMon -= Number(i.unPayFee)
+      }
+
+
+    },
+    checkedAll() { // 全选选择事件
+      this.allChecked = !this.allChecked
+      if(this.allChecked){  //全选
+        let me  = this
+        this.historyList.forEach(function(item){
+          item.checked = true;
+          me.orderIds.push(item.orderId)
+        });
+        this.historyCheckedMon = this.allMoney
+        this.historyCheckedLen = this.historyList.length
+
+      }else{ //反选
+        this.historyList.forEach(function(item){
+          item.checked = false;
+
+        });
+        this.historyCheckedLen = 0
+        this.historyCheckedMon = 0
+        this.orderIds = []
+      }
+    },
+    toPayCurrent(i){ // 缴纳本次在停费用
+      var salt = this.$utils.myCommonSalt(32);
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: "md5",
+        payType: 4,
+        appId: this.$utils.myVxAppId,
+        orderId: i.orderId,
+        terminalSource: '7',
+        parkCode: i.parkCode,
+        carNumber: this.carNumber,
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+      parkingQuery(jsondata).then(result => {
+        console.log(result)
+        let res = result.data
+        let _dis = res.discountFee
+        let discountFee = _dis.slice(1,_dis.length-1)
+
+        this.$router.push(
+          {
+            path:'orderPay',
+            query:{
+              carColor: this.carColor,// 车牌颜色
+              arrearageTotalFee: res.orderTotalFee,// 应收
+              arrearageDiscFee: discountFee*100,// 优惠
+              arrearageActFee: res.orderFee,// 实收
+              carNumber: this.carNumber, // 车牌
+              paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
+              ordeID: i.orderId, //支付的订单号
+              appOrderTimeout: res.appOrderTimeout, // 超时描述
+            }
+          }
+        )
+      })
+    },
+    toPayHisroryPage() { // 缴纳历史费用
+      if(this.historyCheckedLen==0){
+        this.$refs.alert.open()
+        return
+      }
+      var salt = this.$utils.myCommonSalt(32);
+
+      var list = "[" + this.orderIds + "]"
+
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        // sign: md5sign,
+        sign_type: "md5",
+        appId: this.$utils.myVxAppId,
+        orderIds: list,
+        terminalSource: '7',
+        payType: 4,
+        orgId: this.$utils.myOrgId,
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+
+      historyQuery(jsondata).then(response => {
+        console.log(response)
+        let res = response.data.carArrearages[0]
+        console.log(res)
+        this.orderIds = JSON.stringify(this.orderIds)
+        this.$router.push(
+          {
+            path:'orderPay',
+            query:{
+              carColor:this.carColor,// 车牌颜色
+              arrearageTotalFee: res.arrearageTotalFee,// 应收
+              arrearageDiscFee: res.arrearageDiscFee,// 优惠
+              arrearageActFee: res.arrearageActFee,// 实收
+              carNumber: this.carNumber, // 车牌
+              paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
+              ordeID: this.orderIds, //支付的订单号
+            }
+          }
+        )
+      })
+    }
+  },
+  filters: {
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .tabWrap {
+    height: 38px;
+    background: #FFF;
+    display: flex;
+    color: #666;
+    li {
+      flex: 1;
+      line-height: 38px;
+      text-align: center;
+      border-bottom: 1px solid #DFDFDF;
+    }
+    .tabActive {
+      color: #0564CC;
+      border-bottom: 1px solid #0564CC;
+      font-weight: bold;
+    }
+  }
+
+  .free-tip {
+    height: 25px;
+    line-height: 25px;
+    padding-left: 45px;
+    background: #FEF8DB url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
+    background-size: 18px 18px;
+  }
+
+  .cost-main {
+    padding-left: 18px;
+    background: #fff;
+  }
+
+  .cost-header {
+    display: flex;
+    justify-content: space-between;
+    height: 45px;
+    line-height: 45px;
+    border-bottom: 1px solid #DFDFDF;
+    font-weight: bold;
+    li:first-child {
+      width: 150px;
+      &.carBlue {
+        background: url("../../assets/images/parkPay/carBlue.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carYellow {
+        background: url("../../assets/images/parkPay/carYellow.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carGreen {
+        background: url("../../assets/images/parkPay/carGreen.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carWhite {
+        background: url("../../assets/images/parkPay/carWhite.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+      &.carBlack {
+        background: url("../../assets/images/parkPay/carBlack.png") no-repeat 90px center;
+        background-size: 28px 17px;
+      }
+    }
+    li:last-child {
+      margin-right: 18px;
+      color: #BC0202;
+    }
+  }
+
+  .cost-body {
+    padding-top: 10px;
+    position: relative;
+    > p {
+      padding-bottom: 10px;
+    }
+    .out-wrap {
+      position: absolute;
+      right: 18px;
+      top: 50%;
+      transform: translateY(-50%);
+      .mon-wrap {
+        font-size: 16px;
+        color: #333;
+        font-weight: bold;
+      }
+      .out-btn {
+        width: 72px;
+        height: 24px;
+        margin-top: 18px;
+        line-height: 24px;
+        text-align: center;
+        background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+        border-radius: 4px;
+        color: #FFF;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .history-con{
+    height: calc(100% - 38px);
+    overflow: hidden;
+  }
+  .history-body{
+    height: calc(100% - 81px);
+    overflow-y: scroll;
+  }
+  .history-footer{
+    height: 81px;
+    background: #F8F8F8;
+  }
+
+  .cost-main-history{
+    margin-bottom: 10px;
+    background:#fff url("../../assets/images/parkPay/choose.png") no-repeat 10px center;
+    background-size: 20px 20px;
+    cursor: pointer;
+  }
+
+
+  .isChecked{
+    background:#fff url("../../assets/images/parkPay/choosed.png") no-repeat 10px center;
+    background-size: 20px 20px;
+  }
+
+  .money-all{
+    padding-left: 18px;
+    height: 25px;
+    line-height: 25px;
+    font-weight: 500;
+    background: #FEF8DB;
+    span{
+      color: #BC0202;
+    }
+  }
+
+  .statistical-data{
+    padding-left: 18px;
+    height: 32px;
+    line-height: 32px;
+    background: #E6FAFA;
+    span{
+      color: #D20000;
+    }
+  }
+  .opration-wrap{
+    padding-left: 18px;
+    height: 49px;
+    line-height: 49px;
+    background: #f8f8f8;
+    display: flex;
+    justify-content: space-between;
+    .check-btn{
+      padding-left: 30px;
+      background: url("../../assets/images/parkPay/choose.png") no-repeat 0 center;
+      background-size: 20px 20px;
+      cursor: pointer;
+    }
+    .isAllChecked{
+      background: url("../../assets/images/parkPay/choosed.png") no-repeat 0 center;
+      background-size: 20px 20px;
+    }
+    .settle-btn{
+      width: 106px;
+      height: 49px;
+      background: linear-gradient(145deg, #2783E9 0%, #227ADC 100%);
+      text-align: center;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  .noRecord {
+    padding-top: 200px;
+    background: url("../../assets/images/parkPay/noRecord.png") no-repeat center 60px;
+    background-size: 161px 124px;
+    text-align: center;
+  }
+</style>
diff --git a/src/views/parkPay/plateNumber.vue b/src/views/parkPay/plateNumber.vue
new file mode 100644
index 0000000..047dc0a
--- /dev/null
+++ b/src/views/parkPay/plateNumber.vue
@@ -0,0 +1,776 @@
+<template>
+  <div id="page">
+    <div class="wrap">
+      <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
+
+      <ul class="color-choose">
+        <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
+        :style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"
+        >
+          {{i.name}}
+        </li>
+
+      </ul>
+
+      <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
+      <div class="num-box">
+        <div class="num0" @click="clickFirstWrap()">
+          <span>{{formData.num0}}</span>
+        </div>
+        <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
+        <!--<em class="spot"></em>-->
+        <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
+        <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
+        <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
+      </div>
+
+
+      <div class="radio-box">
+        <label class="flex-items-center">
+          <img v-if="formData.commonCard == 1"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
+               alt="">
+          <img v-else
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
+               alt="">
+          <input type="radio"
+                 v-model="formData.commonCard"
+                 value="1" />普通车牌
+        </label>
+        <label class="flex-items-center">
+          <img v-if="formData.commonCard == 2"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
+               alt="">
+          <img v-else
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
+               alt="">
+          <input type="radio"
+                 v-model="formData.commonCard"
+                 value="2" />新能源车牌
+        </label>
+      </div>
+
+
+      <div class="submit-box" @click="submitFn()">
+        查询
+      </div>
+
+      <div>
+        <p style="margin-bottom: 18px;margin-top: 18px;">已绑定车牌</p>
+        <ul class="bound-list">
+          <li>
+            <span>鄂B4567R</span>
+            <span>查看订单</span>
+          </li>
+          <li>
+            <span>鄂B4567R</span>
+            <span>查看订单</span>
+          </li>
+        </ul>
+        <div style="text-align: center;padding: 10px 0;">暂无绑定车牌</div>
+        <div class="addCarNum"><span></span>添加车辆</div>
+      </div>
+
+
+
+
+    </div>
+    <div class="first-word-wrap"
+         v-if="firstWrapStatus">
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>京</span>
+        </div>
+        <div class="word">
+          <span>湘</span>
+        </div>
+        <div class="word">
+          <span>津</span>
+        </div>
+        <div class="word">
+          <span>鄂</span>
+        </div>
+        <div class="word">
+          <span>沪</span>
+        </div>
+        <div class="word">
+          <span>粤</span>
+        </div>
+        <div class="word">
+          <span>渝</span>
+        </div>
+        <div class="word">
+          <span>琼</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>翼</span>
+        </div>
+        <div class="word">
+          <span>川</span>
+        </div>
+        <div class="word">
+          <span>晋</span>
+        </div>
+        <div class="word">
+          <span>贵</span>
+        </div>
+        <div class="word">
+          <span>辽</span>
+        </div>
+        <div class="word">
+          <span>云</span>
+        </div>
+        <div class="word">
+          <span>吉</span>
+        </div>
+        <div class="word">
+          <span>陕</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>黑</span>
+        </div>
+        <div class="word">
+          <span>甘</span>
+        </div>
+        <div class="word">
+          <span>苏</span>
+        </div>
+        <div class="word">
+          <span>青</span>
+        </div>
+        <div class="word">
+          <span>浙</span>
+        </div>
+        <div class="word">
+          <span>皖</span>
+        </div>
+        <div class="word">
+          <span>藏</span>
+        </div>
+        <div class="word">
+          <span>闽</span>
+        </div>
+      </div>
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>蒙</span>
+        </div>
+        <div class="word">
+          <span>赣</span>
+        </div>
+        <div class="word">
+          <span>桂</span>
+        </div>
+        <div class="word">
+          <span>鲁</span>
+        </div>
+        <div class="word">
+          <span>宁</span>
+        </div>
+        <div class="word">
+          <span>豫</span>
+        </div>
+        <div class="word">
+          <span>新</span>
+        </div>
+        <div class="word bordernone">
+          <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
+        </div>
+      </div>
+    </div>
+    <div class="keyboard-wrap" v-if="keyBoardStatus === true">
+      <!-- <div class="number-wrap"></div>
+      <div class="letter-wrap"></div>
+      <div class="cn-wrap"></div> -->
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._1"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._2"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._3"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._4"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._5"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+      </div>
+      <div class="keyboard">
+        <span v-for="(item,index) in allKeyWord._6"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <span class="bordernone"></span>
+        <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
+        <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
+        <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
+      </div>
+      <div class="keyboard" v-if="activeKeyWordIndex !== 1">
+        <span v-for="(item,index) in allKeyWord._7"
+              :key="index"
+              @click="clickKeyBoard(item)">{{item}}</span>
+        <span class="bordernone"></span>
+        <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
+      </div>
+      <div class="cancel">
+        <span @click="keyBoardStatus = false">完成</span>
+      </div>
+    </div>
+
+
+    <modal-alert ref="alert">
+      <div class="trave-tip-content txt-l" slot="content">
+        <div class="confirm-text">
+          <p>请输入正确的车牌号</p>
+        </div>
+      </div>
+      <span slot="button">知道了</span>
+    </modal-alert>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      colorList:[
+        {
+          name:'蓝牌',
+          id:'1'
+        },
+        {
+          name:'黄牌',
+          id:'2'
+        },
+        {
+          name:'绿牌',
+          id:'3'
+        },
+        {
+          name:'白牌',
+          id:'4'
+        },
+        {
+          name:'黑牌',
+          id:'5'
+        },
+      ],
+      currentColor:0,
+      activeBG:'#0054C0',
+      formData: {
+        commonCard: '1',
+        num0: '',
+        num1: '',
+        num2: '',
+        num3: '',
+        num4: '',
+        num5: '',
+        num6: '',
+        num7: ''
+      },
+      allKeyWord: {
+        _1: [1, 2, 3, 4, 5, 6, 7],
+        _2: [8, 9, 0],
+        _3: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+        _4: ['H', 'J', 'K', 'L', 'M', 'N', 'O'],
+        _5: ['P', 'Q', 'R', 'S', 'T', 'U', 'V'],
+        _6: ['W', 'X', 'Y', 'Z'],
+        _7: ['港', '澳', '学', '领', '警']
+      },
+      activeKeyWordIndex: 1, // 当前车牌号
+      keyBoardStatus: false,
+      firstWrapStatus: false, // 选择弹窗
+      confirmTitle: '',
+      submitConfirm: false,
+      submitConfirmFalse: false,
+      submitConfirmText: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    chooseColor (index){ // 颜色选择
+      this.currentColor = index
+      switch (this.currentColor) {
+        case 0 :
+          return this.activeBG = '#0054C0'
+          break;
+        case 1 :
+          return this.activeBG = '#FEBE00'
+          break;
+        case 2 :
+          return this.activeBG = '#97DEA1'
+          break;
+        case 3 :
+          return this.activeBG = '#E4E5E7'
+          break;
+        case 4 :
+          return this.activeBG = '#333333'
+          break;
+      }
+    },
+    clickFirstWrap () {
+      // 点击第一个输入框
+      this.firstClickStatus = true
+      this.firstWrapStatus = true
+      this.keyBoardStatus = false
+      this.formData.num0 = ''
+    },
+    selectFirstWord (event) {
+      // 选择省份
+      if (event.target.localName !== 'span') {
+        return
+      }
+      this.formData.num0 = event.target.innerText
+      this.firstSelectStatus = true
+      this.firstWrapStatus = false
+      this.firstClickStatus = false
+      this.keyBoardStatus = true
+      this.activeKeyWordIndex = 1
+      // this.$refs.num1.focus()
+      // document.getElementById('num1').focus()
+    },
+    clickKeyBoard (item) { // 点击自定义键盘
+      console.log(item)
+      this.formData['num' + this.activeKeyWordIndex] = item
+
+      if (this.formData.commonCard === '1') {
+        this.activeKeyWordIndex++
+        if (this.activeKeyWordIndex > 6) {
+          this.keyBoardStatus = false
+        }
+      } else {
+        this.activeKeyWordIndex++
+        if (this.activeKeyWordIndex > 7) {
+          this.keyBoardStatus = false
+        }
+      }
+    },
+    deleteWord () { // 退格
+      // console.log(this.activeKeyWordIndex)
+      // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
+      if (this.activeKeyWordIndex > 1) {
+        this.formData['num' + (this.activeKeyWordIndex - 1)] = ''
+        this.activeKeyWordIndex--
+      }
+    },
+    clickKeyWordWrap (activeKeyWordIndex) {
+      this.keyBoardStatus = true
+      this.activeKeyWordIndex = activeKeyWordIndex
+      this.formData['num' + this.activeKeyWordIndex] = ''
+    },
+    submitFn () {
+      let plateLicense
+      if (this.formData.commonCard === '1') {
+        plateLicense = this.plate_license_1
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 7) {
+          this.$refs.alert.open()
+          return
+        }
+      }
+      if (this.formData.commonCard === '2') {
+        plateLicense = this.plate_license_2
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 8) {
+          this.$refs.alert.open()
+          return
+        }
+      }
+      this.$emit('getPlateLicense',plateLicense)
+      console.log(plateLicense);
+      this.$router.push({
+        path:'parkRecord',
+        query:{
+          carNumber:plateLicense
+        }
+      })
+    },
+    palindrome (str) {
+      var arr = str.split('')
+      arr = arr.filter(function (val) {
+        return (
+          val !== ' ' &&
+          val !== ',' &&
+          val !== '.' &&
+          val !== '?' &&
+          val !== ':' &&
+          val !== ';' &&
+          val !== '`' &&
+          val !== "'" &&
+          val !== '_' &&
+          val !== '/' &&
+          val !== '-' &&
+          val !== '\\' &&
+          val !== '' &&
+          val !== '(' &&
+          val !== ')'
+        )
+      })
+      return arr.join('')
+    },
+    checkIsHasSpecialStr (str) {
+      var flag = false
+      var arr = str.split('')
+      arr.forEach(val => {
+        if (
+          val === '!' ||
+          val === '}' ||
+          val === '{' ||
+          val === ']' ||
+          val === '[' ||
+          val === '&' ||
+          val === '$' ||
+          val === '@' ||
+          val === ' ' ||
+          val === ',' ||
+          val === '.' ||
+          val === '?' ||
+          val === ':' ||
+          val === ';' ||
+          val === '`' ||
+          val === "'" ||
+          val === '_' ||
+          val === '/' ||
+          val === '-' ||
+          val === '\\' ||
+          val === '' ||
+          val === '(' ||
+          val === ')'
+        ) {
+          flag = true
+        }
+      })
+      return flag
+    },
+    checkIsHasChineseStr (str) {
+      var Reg = /.*[\u4e00-\u9fa5]+.*/
+      if (Reg.test(str)) {
+        return true
+      }
+      return false
+    }
+  },
+  computed: {
+    plate_license_1 () {
+      return (
+        this.formData.num0 +
+        this.formData.num1 +
+        this.formData.num2 +
+        this.formData.num3 +
+        this.formData.num4 +
+        this.formData.num5 +
+        this.formData.num6
+      )
+    },
+    plate_license_2 () {
+      return (
+        this.formData.num0 +
+        this.formData.num1 +
+        this.formData.num2 +
+        this.formData.num3 +
+        this.formData.num4 +
+        this.formData.num5 +
+        this.formData.num6 +
+        this.formData.num7
+      )
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .flex-items-center {
+    display: flex;
+    align-items: center;
+  }
+  .wrap {
+    padding:0 18px;
+    .radio-box {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: 18px;
+      text-align: right;
+      input[type="radio"] {
+        display: none;
+      }
+      label {
+        padding-left: 0.6rem;
+        cursor: pointer;
+        img {
+          width: 0.8rem;
+          margin-right: 0.1rem;
+        }
+      }
+    }
+
+    .color-choose{
+      width: 265px;
+      height: 34px;
+      margin: 0 auto;
+      background: #F3F3F3;
+      border-radius: 6px;
+      display: flex;
+      li{
+        flex: 1;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+      }
+    }
+    .card-header {
+      font-size: 0.75rem;
+      margin: 0.2rem 0 0.5rem;
+      color: #4a4a4a;
+    }
+    // input输入框
+    .num-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .spot {
+        width: 0.2rem;
+        height: 0.2rem;
+        border-radius: 50%;
+        background-color: #d8d8d8;
+      }
+      & > div {
+        width: 1.8rem;
+        height: 1.8rem;
+        border: 1px solid #e4e4e4;
+        &.first {
+          position: relative;
+          text-align: center;
+          line-height: 1.7rem;
+          font-weight: 200;
+          .input-wrap {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            &.active {
+              z-index: 100;
+            }
+          }
+          em {
+            color: #979797;
+            font-size: 1.6rem;
+            line-height: 1.7rem;
+          }
+          span {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            // background-color: #9cbce2;
+            color: #828282;
+            line-height: 1.8rem;
+          }
+        }
+        &.active {
+          border: 1px solid #4a90e2;
+          &:after {
+            border-bottom: 0.5rem solid #4a90e2;
+          }
+        }
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          font-size: 1rem;
+          color: #828282;
+          &.first {
+            background-color: #9cbce2;
+            color: #fff;
+            text-indent: 0.4rem;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+    .submit-box {
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      border-radius: 4px;
+      font-size: 20px;
+      margin-top: 18px;
+      background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
+      color: #fff;
+      text-align: center;
+    }
+    .info {
+      font-size: 0.5rem;
+      margin-top: 0.9rem;
+      color: #828282;
+      text-align: left;
+      img {
+        width: 0.6rem;
+        vertical-align: middle;
+      }
+    }
+  }
+  .first-word-wrap {
+    // height: 9.4rem;
+    background-color: #D2D5DB;
+    padding: 0.6rem 0.8rem 1.1rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .first-word {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.45rem;
+      .word {
+        box-sizing: border-box;
+        width: 1.8rem;
+        height: 1.8rem;
+        // border: 1px solid #9cbce2;
+        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        border-radius: 0.16rem;
+        text-align: center;
+        &.bordernone {
+          border: none;
+          box-shadow:none
+        }
+        span {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          width: 100%;
+          height: 100%;
+          background-color: #fff;
+          color: #000;
+          // border: 1px solid #fff;
+          border-radius: 0.125rem;
+        }
+        img {
+          width: 1.6rem;
+        }
+      }
+      &:nth-last-of-type(1){
+        margin-bottom: 0rem;
+      }
+    }
+  }
+  .keyboard-wrap {
+    background-color: #D2D5DB;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0.6rem 0.6rem 0.4rem;
+    .keyboard {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 2rem;
+      margin-bottom: 0.3rem;
+      span {
+        text-align: center;
+        display: flex;
+        width: 1.8rem;
+        align-items: center;
+        justify-content: center;
+        height: 1.8rem;
+        margin: 0 0.3rem;
+        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        background-color: #fff;
+        border-radius: 0.125rem;
+        &:active {
+          background-color: #e4e4e4;
+        }
+        &.bordernone{
+          border: none;
+          box-shadow: none;
+          background-color: #D2D5DB;
+          &:active{
+            background-color:#D2D5DB;
+          }
+        }
+        &.delete{
+          background-color: #465266;
+          img{
+            width: 1.15rem;
+          }
+        }
+      }
+    }
+    .cancel{
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      span{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3.6rem;
+        height: 1.8rem;
+        background-color: #465266;
+        color: #fff;
+        border-radius: 0.125rem;
+      }
+    }
+  }
+  .bound-list{
+    li{
+      padding: 0 10px;
+      height: 34px;
+      margin-bottom: 12px;
+      line-height: 34px;
+      background: #F2F1F1;
+      border-radius: 2px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .addCarNum{
+    height: 34px;
+    line-height: 34px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    border: 1px solid #F2F1F1;
+    text-align: center;
+    span{
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
+      margin-right: 10px;
+      vertical-align: sub;
+      cursor: pointer;
+    }
+  }
+</style>
--
libgit2 0.21.4