个人中心

刘淇
1 parent 4eb9c766
Showing 29 changed files with 2413 additions and 217 deletions
build/utils.js
package-lock.json
package.json
src/api/getUserIfo.js
src/assets/css/reset.css
src/assets/css/resetVantUi.less
src/assets/images/cards/novipcard.png
src/assets/images/cards/vipcardbg.png
src/assets/images/cards/vipcardbg1.png
src/assets/images/myCars/addBtn.png
src/assets/images/myCars/addBtnBg.png
src/assets/images/myCars/carNumBg.png
src/assets/images/myCars/fornt.png
src/components/vant-number-plate/vnp-input-box.vue
src/components/vant-number-plate/vnp-input.vue
src/components/vant-number-plate/vnp-keyboard.vue
src/main.js
src/router/index.js
src/utils/utils.js
src/views/binding/binDing.vue
@@ -59,7 +59,11 @@ exports.cssLoaders = function (options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
+    less: generateLoaders('less', {
+      modifyVars: {
+        'hack': `true; @import "${path.join(__dirname, '../src/assets/css/resetVantUi.less')}";`
+      }
+    }),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass').concat(
       {
@@ -4,6 +4,21 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.5.tgz",
+      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -41,6 +56,21 @@
       "integrity": "sha1-FZJUFOCtLNdlv+9YhC9+JqesyyQ=",
       "dev": true
     },
+    "@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz",
@@ -1815,8 +1845,9 @@
     },
     "clone": {
       "version": "2.1.2",
-      "resolved": "http://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
-      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+      "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "dev": true
     },
     "clone-deep": {
       "version": "4.0.1",
@@ -2018,6 +2049,15 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "http://registry.npm.taobao.org/copy-concurrently/download/copy-concurrently-1.0.5.tgz",
@@ -4821,6 +4861,13 @@
       "integrity": "sha1-Cpf7h2mG6AgcYxFg+PnziRV/AEM=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -5179,6 +5226,12 @@
       "resolved": "http://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz",
@@ -5340,10 +5393,49 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "less-loader": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/less-loader/download/less-loader-4.1.0.tgz",
-      "integrity": "sha1-LBNSxbCaT4QQFJAnT9UWdN5BNj4=",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "dev": true,
       "requires": {
         "clone": "^2.1.1",
         "loader-utils": "^1.1.0",
@@ -6014,6 +6106,47 @@
         }
       }
     },
+    "needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
@@ -6603,6 +6736,12 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
@@ -6697,7 +6836,8 @@
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "dev": true
     },
     "pinkie": {
       "version": "2.0.4",
@@ -9293,6 +9433,12 @@
       "integrity": "sha1-8shUBoALmw90yfdGW4HqrSQSUvg=",
       "dev": true
     },
+    "tslib": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz",
+      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==",
+      "dev": true
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "http://registry.npm.taobao.org/tty-browserify/download/tty-browserify-0.0.0.tgz",
@@ -9684,6 +9830,25 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.54",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.12.54.tgz",
+      "integrity": "sha512-t7DCiLxNosDrg0Jm5EY9p0A5cAMo5OadmizbYtPEc0ru+OJKEa3kcfxtKIK5on7ZPqoOkyYJt8e6BQ1VDMPsrg==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "dependencies": {
+        "vue-lazyload": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+          "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+        }
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -13,11 +13,11 @@
     "axios": "^0.21.1",
     "css-loader": "^3.6.0",
     "js-base64": "^3.6.0",
-    "less-loader": "^4.1.0",
     "mint-ui": "^2.2.13",
     "moment": "^2.29.1",
     "node-sass": "^4.14.1",
     "sass-loader": "^7.3.1",
+    "vant": "^2.12.54",
     "vue": "^2.5.2",
     "vue-baidu-map": "^0.21.22",
     "vue-h5-popup": "^1.0.2",
@@ -41,6 +41,8 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "less": "^4.1.3",
+    "less-loader": "^4.1.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
+import request from '@/utils/request'
+
+export function getTokenByOpenId(params) { // 获取用户token和手机号
+  return request({
+    url: 'wxPublicUser/getTokenByOpenId',
+    method: 'post',
+    data: params
+  })
+}
+
+
+export function saveFeedbackAndSuggest(params) { // 提交建议反馈
+  return request({
+    url: 'suggest/saveFeedbackAndSuggest',
+    method: 'post',
+    data: params
+  })
+}
+
+
+export function getFeedbackType(params) { // 获取建议反馈类型
+  return request({
+    url: 'suggest/getFeedbackType',
+    method: 'post',
+    data: params
+  })
+}
+
+
@@ -61,3 +61,7 @@ body,html,#app
 .leftRightPadding{
   padding: 0 10px;
 }
+
+.commonPagePadding{
+  padding: 0 10px;
+}
+
+
+  // Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+  //1989fa
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+@gradient-blue: linear-gradient(180deg, #2282C5 0%, #4B8EF1 58%, #63BEFD 100%);
+
+// Component Colors
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
+@background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+@animation-timing-function-enter: ease-out;
+@animation-timing-function-leave: ease-in;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
+
+// ActionSheet
+@action-sheet-max-height: 80%;
+@action-sheet-header-height: 48px;
+@action-sheet-header-font-size: @font-size-lg;
+@action-sheet-description-color: @gray-6;
+@action-sheet-description-font-size: @font-size-md;
+@action-sheet-description-line-height: @line-height-md;
+@action-sheet-item-background: @white;
+@action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-line-height: @line-height-lg;
+@action-sheet-item-text-color: @text-color;
+@action-sheet-item-disabled-text-color: @gray-5;
+@action-sheet-subname-color: @gray-6;
+@action-sheet-subname-font-size: @font-size-sm;
+@action-sheet-subname-line-height: @line-height-sm;
+@action-sheet-close-icon-size: 22px;
+@action-sheet-close-icon-color: @gray-5;
+@action-sheet-close-icon-active-color: @gray-6;
+@action-sheet-close-icon-padding: 0 @padding-md;
+@action-sheet-cancel-text-color: @gray-7;
+@action-sheet-cancel-padding-top: @padding-xs;
+@action-sheet-cancel-padding-color: @background-color;
+@action-sheet-loading-icon-size: 22px;
+
+// AddressEdit
+@address-edit-padding: @padding-sm;
+@address-edit-buttons-padding: @padding-xl @padding-base;
+@address-edit-button-margin-bottom: @padding-sm;
+@address-edit-detail-finish-color: @blue;
+@address-edit-detail-finish-font-size: @font-size-sm;
+
+// AddressList
+@address-list-padding: @padding-sm @padding-sm 80px;
+@address-list-disabled-text-color: @gray-6;
+@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
+@address-list-disabled-text-font-size: @font-size-md;
+@address-list-disabled-text-line-height: @line-height-md;
+@address-list-add-button-z-index: 999;
+@address-list-item-padding: @padding-sm;
+@address-list-item-text-color: @text-color;
+@address-list-item-disabled-text-color: @gray-5;
+@address-list-item-font-size: 13px;
+@address-list-item-line-height: @line-height-sm;
+@address-list-item-radio-icon-color: @red;
+@address-list-edit-icon-size: 20px;
+
+// Badge
+@badge-size: 16px;
+@badge-color: @white;
+@badge-padding: 0 3px;
+@badge-font-size: @font-size-sm;
+@badge-font-weight: @font-weight-bold;
+@badge-border-width: @border-width-base;
+@badge-background-color: @red;
+@badge-dot-color: @red;
+@badge-dot-size: 8px;
+@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+
+// Button
+@button-mini-height: 24px;
+@button-mini-font-size: @font-size-xs;
+@button-small-height: 32px;
+@button-small-font-size: @font-size-sm;
+@button-normal-font-size: @font-size-md;
+@button-large-height: 50px;
+@button-default-height: 44px;
+@button-default-line-height: 1.2;
+@button-default-font-size: @font-size-lg;
+@button-default-color: @text-color;
+@button-default-background-color: @white;
+@button-default-border-color: @border-color;
+@button-primary-color: @white;
+@button-primary-background-color: @green;
+@button-primary-border-color: @green;
+@button-info-color: @white;
+@button-info-background-color: @gradient-blue;
+@button-info-border-color: @gradient-blue;
+@button-danger-color: @white;
+@button-danger-background-color: @red;
+@button-danger-border-color: @red;
+@button-warning-color: @white;
+@button-warning-background-color: @orange;
+@button-warning-border-color: @orange;
+@button-border-width: @border-width-base;
+@button-border-radius: @border-radius-sm;
+@button-round-border-radius: @border-radius-max;
+@button-plain-background-color: @white;
+@button-disabled-opacity: @disabled-opacity;
+
+// Calendar
+@calendar-background-color: @white;
+@calendar-popup-height: 80%;
+@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+@calendar-header-title-height: 44px;
+@calendar-header-title-font-size: @font-size-lg;
+@calendar-header-subtitle-font-size: @font-size-md;
+@calendar-weekdays-height: 30px;
+@calendar-weekdays-font-size: @font-size-sm;
+@calendar-month-title-font-size: @font-size-md;
+@calendar-month-mark-color: fade(@gray-2, 80%);
+@calendar-month-mark-font-size: 160px;
+@calendar-day-height: 64px;
+@calendar-day-font-size: @font-size-lg;
+@calendar-range-edge-color: @white;
+@calendar-range-edge-background-color: @red;
+@calendar-range-middle-color: @red;
+@calendar-range-middle-background-opacity: 0.1;
+@calendar-selected-day-size: 54px;
+@calendar-selected-day-color: @white;
+@calendar-info-font-size: @font-size-xs;
+@calendar-info-line-height: @line-height-xs;
+@calendar-selected-day-background-color: @red;
+@calendar-day-disabled-color: @gray-5;
+@calendar-confirm-button-height: 36px;
+@calendar-confirm-button-margin: 7px 0;
+
+// Card
+@card-padding: @padding-xs @padding-md;
+@card-font-size: @font-size-sm;
+@card-text-color: @text-color;
+@card-background-color: @background-color-light;
+@card-thumb-size: 88px;
+@card-thumb-border-radius: @border-radius-lg;
+@card-title-line-height: 16px;
+@card-desc-color: @gray-7;
+@card-desc-line-height: @line-height-md;
+@card-price-color: @gray-8;
+@card-origin-price-color: @gray-6;
+@card-num-color: @gray-6;
+@card-origin-price-font-size: @font-size-xs;
+@card-price-font-size: @font-size-sm;
+@card-price-integer-font-size: @font-size-lg;
+@card-price-font-family: @price-integer-font-family;
+
+// Cascader
+@cascader-header-height: 48px;
+@cascader-title-font-size: @font-size-lg;
+@cascader-title-line-height: 20px;
+@cascader-close-icon-size: 22px;
+@cascader-close-icon-color: @gray-5;
+@cascader-close-icon-active-color: @gray-6;
+@cascader-selected-icon-size: 18px;
+@cascader-tabs-height: 48px;
+@cascader-active-color: @red;
+@cascader-options-height: 384px;
+@cascader-tab-color: @text-color;
+@cascader-unselected-tab-color: @gray-6;
+
+// Cell
+@cell-font-size: @font-size-md;
+@cell-line-height: 24px;
+@cell-vertical-padding: 10px;
+@cell-horizontal-padding: @padding-md;
+@cell-text-color: @text-color;
+@cell-background-color: @white;
+@cell-border-color: @border-color;
+@cell-active-color: @active-color;
+@cell-required-color: @red;
+@cell-label-color: @gray-6;
+@cell-label-font-size: @font-size-sm;
+@cell-label-line-height: @line-height-sm;
+@cell-label-margin-top: @padding-base;
+@cell-value-color: @gray-6;
+@cell-icon-size: 16px;
+@cell-right-icon-color: @gray-6;
+@cell-large-vertical-padding: @padding-sm;
+@cell-large-title-font-size: @font-size-lg;
+@cell-large-label-font-size: @font-size-md;
+
+// CellGroup
+@cell-group-background-color: @white;
+@cell-group-title-color: @gray-6;
+@cell-group-title-padding: @padding-md @padding-md @padding-xs;
+@cell-group-title-font-size: @font-size-md;
+@cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 @padding-md;
+@cell-group-inset-border-radius: @border-radius-lg;
+@cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl;
+
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-5;
+@checkbox-transition-duration: @animation-duration-fast;
+@checkbox-label-margin: @padding-xs;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray-5;
+@checkbox-disabled-label-color: @gray-5;
+@checkbox-disabled-background-color: @border-color;
+
+// Circle
+@circle-size: 100px;
+@circle-color: @blue;
+@circle-layer-color: @white;
+@circle-text-color: @text-color;
+@circle-text-font-weight: @font-weight-bold;
+@circle-text-font-size: @font-size-md;
+@circle-text-line-height: @line-height-md;
+
+// Collapse
+@collapse-item-transition-duration: @animation-duration-base;
+@collapse-item-content-padding: @padding-sm @padding-md;
+@collapse-item-content-font-size: @font-size-md;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-6;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray-5;
+
+// ContactCard
+@contact-card-padding: @padding-md;
+@contact-card-add-icon-size: 40px;
+@contact-card-add-icon-color: @blue;
+@contact-card-value-line-height: @line-height-md;
+
+// ContactEdit
+@contact-edit-padding: @padding-md;
+@contact-edit-fields-radius: @border-radius-md;
+@contact-edit-buttons-padding: @padding-xl 0;
+@contact-edit-button-margin-bottom: @padding-sm;
+@contact-edit-button-font-size: 16px;
+@contact-edit-field-label-width: 4.1em;
+
+// ContactList
+@contact-list-edit-icon-size: 16px;
+@contact-list-add-button-z-index: 999;
+@contact-list-item-padding: @padding-md;
+
+// CountDown
+@count-down-text-color: @text-color;
+@count-down-font-size: @font-size-md;
+@count-down-line-height: @line-height-md;
+
+// Coupon
+@coupon-margin: 0 @padding-sm @padding-sm;
+@coupon-content-height: 84px;
+@coupon-content-padding: 14px 0;
+@coupon-background-color: @white;
+@coupon-active-background-color: @active-color;
+@coupon-border-radius: @border-radius-lg;
+@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+@coupon-head-width: 96px;
+@coupon-amount-color: @red;
+@coupon-amount-font-size: 30px;
+@coupon-currency-font-size: 40%;
+@coupon-name-font-size: @font-size-md;
+@coupon-disabled-text-color: @gray-6;
+@coupon-description-padding: @padding-xs @padding-md;
+@coupon-description-border-color: @border-color;
+
+// CouponCell
+@coupon-cell-selected-text-color: @text-color;
+
+// CouponList
+@coupon-list-background-color: @background-color;
+@coupon-list-field-padding: 5px 0 5px @padding-md;
+@coupon-list-exchange-button-height: 32px;
+@coupon-list-close-button-height: 40px;
+@coupon-list-empty-image-size: 200px;
+@coupon-list-empty-tip-color: @gray-6;
+@coupon-list-empty-tip-font-size: @font-size-md;
+@coupon-list-empty-tip-line-height: @line-height-md;
+
+// Dialog
+@dialog-width: 320px;
+@dialog-small-screen-width: 90%;
+@dialog-font-size: @font-size-lg;
+@dialog-transition: @animation-duration-base;
+@dialog-border-radius: 16px;
+@dialog-background-color: @white;
+@dialog-header-font-weight: @font-weight-bold;
+@dialog-header-line-height: 24px;
+@dialog-header-padding-top: 26px;
+@dialog-header-isolated-padding: @padding-lg 0;
+@dialog-message-padding: @padding-lg;
+@dialog-message-font-size: @font-size-md;
+@dialog-message-line-height: @line-height-md;
+@dialog-message-max-height: 60vh;
+@dialog-has-title-message-text-color: @gray-7;
+@dialog-has-title-message-padding-top: @padding-xs;
+@dialog-button-height: 48px;
+@dialog-round-button-height: 36px;
+@dialog-confirm-button-text-color: @red;
+
+// Divider
+@divider-margin: @padding-md 0;
+@divider-text-color: @gray-6;
+@divider-font-size: @font-size-md;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: @padding-md;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;
+
+// DropdownMenu
+@dropdown-menu-height: 48px;
+@dropdown-menu-background-color: @white;
+@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12);
+@dropdown-menu-title-font-size: 15px;
+@dropdown-menu-title-text-color: @text-color;
+@dropdown-menu-title-active-text-color: @red;
+@dropdown-menu-title-disabled-text-color: @gray-6;
+@dropdown-menu-title-padding: 0 @padding-xs;
+@dropdown-menu-title-line-height: @line-height-lg;
+@dropdown-menu-option-active-color: @red;
+@dropdown-menu-content-max-height: 80%;
+@dropdown-item-z-index: 10;
+
+// Empty
+@empty-padding: @padding-xl 0;
+@empty-image-size: 160px;
+@empty-description-margin-top: @padding-md;
+@empty-description-padding: 0 60px;
+@empty-description-color: @gray-6;
+@empty-description-font-size: @font-size-md;
+@empty-description-line-height: @line-height-md;
+@empty-bottom-margin-top: 24px;
+
+// Field
+@field-label-width: 6.2em;
+@field-label-color: @gray-7;
+@field-label-margin-right: @padding-sm;
+@field-input-text-color: @text-color;
+@field-input-error-text-color: @red;
+@field-input-disabled-text-color: @gray-5;
+@field-placeholder-text-color: @gray-5;
+@field-icon-size: 16px;
+@field-clear-icon-size: 16px;
+@field-clear-icon-color: @gray-5;
+@field-right-icon-color: @gray-6;
+@field-error-message-color: @red;
+@field-error-message-font-size: 12px;
+@field-text-area-min-height: 60px;
+@field-word-limit-color: @gray-7;
+@field-word-limit-font-size: @font-size-sm;
+@field-word-limit-line-height: 16px;
+@field-disabled-text-color: @gray-5;
+
+// GridItem
+@grid-item-content-padding: @padding-md @padding-xs;
+@grid-item-content-background-color: @white;
+@grid-item-content-active-color: @active-color;
+@grid-item-icon-size: 28px;
+@grid-item-text-color: @gray-7;
+@grid-item-text-font-size: @font-size-sm;
+
+// GoodsAction
+@goods-action-background-color: @white;
+@goods-action-height: 50px;
+@goods-action-icon-width: 48px;
+@goods-action-icon-height: 100%;
+@goods-action-icon-color: @text-color;
+@goods-action-icon-size: 18px;
+@goods-action-icon-font-size: @font-size-xs;
+@goods-action-icon-active-color: @active-color;
+@goods-action-icon-text-color: @gray-7;
+@goods-action-button-height: 40px;
+@goods-action-button-warning-color: @gradient-orange;
+@goods-action-button-danger-color: @gradient-red;
+
+// IndexAnchor
+@index-anchor-z-index: 1;
+@index-anchor-padding: 0 @padding-md;
+@index-anchor-text-color: @text-color;
+@index-anchor-font-weight: @font-weight-bold;
+@index-anchor-font-size: @font-size-md;
+@index-anchor-line-height: 32px;
+@index-anchor-background-color: transparent;
+@index-anchor-sticky-text-color: @red;
+@index-anchor-sticky-background-color: @white;
+
+// IndexBar
+@index-bar-sidebar-z-index: 2;
+@index-bar-index-font-size: @font-size-xs;
+@index-bar-index-line-height: @line-height-xs;
+@index-bar-index-active-color: @red;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: @font-size-sm;
+@info-font-weight: @font-weight-bold;
+@info-border-width: @border-width-base;
+@info-background-color: @red;
+@info-dot-color: @red;
+@info-dot-size: 8px;
+@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+
+// Image
+@image-placeholder-text-color: @gray-6;
+@image-placeholder-font-size: @font-size-md;
+@image-placeholder-background-color: @background-color;
+@image-loading-icon-size: 32px;
+@image-loading-icon-color: @gray-4;
+@image-error-icon-size: 32px;
+@image-error-icon-color: @gray-4;
+
+// ImagePreview
+@image-preview-index-text-color: @white;
+@image-preview-index-font-size: @font-size-md;
+@image-preview-index-line-height: @line-height-md;
+@image-preview-index-text-shadow: 0 1px 1px @gray-8;
+@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
+@image-preview-close-icon-size: 22px;
+@image-preview-close-icon-color: @gray-5;
+@image-preview-close-icon-active-color: @gray-6;
+@image-preview-close-icon-margin: @padding-md;
+@image-preview-close-icon-z-index: 1;
+
+// List
+@list-text-color: @gray-6;
+@list-text-font-size: @font-size-md;
+@list-text-line-height: 50px;
+
+// Loading
+@loading-text-color: @gray-6;
+@loading-text-font-size: @font-size-md;
+@loading-spinner-color: @gray-5;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: 0.8s;
+
+// NavBar
+@nav-bar-height: 46px;
+@nav-bar-background-color: @white;
+@nav-bar-arrow-size: 16px;
+@nav-bar-icon-color: @blue;
+@nav-bar-text-color: @blue;
+@nav-bar-title-font-size: @font-size-lg;
+@nav-bar-title-text-color: @text-color;
+@nav-bar-z-index: 1;
+
+// NoticeBar
+@notice-bar-height: 40px;
+@notice-bar-padding: 0 @padding-md;
+@notice-bar-wrapable-padding: @padding-xs @padding-md;
+@notice-bar-text-color: @orange-dark;
+@notice-bar-font-size: @font-size-md;
+@notice-bar-line-height: 24px;
+@notice-bar-background-color: @orange-light;
+@notice-bar-icon-size: 16px;
+@notice-bar-icon-min-width: 24px;
+
+// Notify
+@notify-text-color: @white;
+@notify-padding: @padding-xs @padding-md;
+@notify-font-size: @font-size-md;
+@notify-line-height: @line-height-md;
+@notify-primary-background-color: @blue;
+@notify-success-background-color: @green;
+@notify-danger-background-color: @red;
+@notify-warning-background-color: @orange;
+
+// NumberKeyboard
+@number-keyboard-background-color: @gray-2;
+@number-keyboard-key-height: 48px;
+@number-keyboard-key-font-size: 28px;
+@number-keyboard-key-active-color: @gray-3;
+@number-keyboard-delete-font-size: @font-size-lg;
+@number-keyboard-title-color: @gray-7;
+@number-keyboard-title-height: 34px;
+@number-keyboard-title-font-size: @font-size-lg;
+@number-keyboard-close-padding: 0 @padding-md;
+@number-keyboard-close-color: @text-link-color;
+@number-keyboard-close-font-size: @font-size-md;
+@number-keyboard-button-text-color: @white;
+@number-keyboard-button-background-color: @blue;
+@number-keyboard-cursor-color: @text-color;
+@number-keyboard-cursor-width: 1px;
+@number-keyboard-cursor-height: 40%;
+@number-keyboard-cursor-animation-duration: 1s;
+@number-keyboard-z-index: 100;
+
+// Overlay
+@overlay-z-index: 1;
+@overlay-background-color: rgba(0, 0, 0, 0.7);
+
+// Pagination
+@pagination-height: 40px;
+@pagination-font-size: @font-size-md;
+@pagination-item-width: 36px;
+@pagination-item-default-color: @blue;
+@pagination-item-disabled-color: @gray-7;
+@pagination-item-disabled-background-color: @background-color;
+@pagination-background-color: @white;
+@pagination-desc-color: @gray-7;
+@pagination-disabled-opacity: @disabled-opacity;
+
+// Panel
+@panel-background-color: @white;
+@panel-header-value-color: @red;
+@panel-footer-padding: @padding-xs @padding-md;
+
+// PasswordInput
+@password-input-height: 50px;
+@password-input-margin: 0 @padding-md;
+@password-input-font-size: 20px;
+@password-input-border-radius: 6px;
+@password-input-background-color: @white;
+@password-input-info-color: @gray-6;
+@password-input-info-font-size: @font-size-md;
+@password-input-error-info-color: @red;
+@password-input-dot-size: 10px;
+@password-input-dot-color: @black;
+
+// Picker
+@picker-background-color: @white;
+@picker-toolbar-height: 44px;
+@picker-title-font-size: @font-size-lg;
+@picker-title-line-height: @line-height-md;
+@picker-action-padding: 0 @padding-md;
+@picker-action-font-size: @font-size-md;
+@picker-confirm-action-color: @text-link-color;
+@picker-cancel-action-color: @gray-6;
+@picker-option-font-size: @font-size-lg;
+@picker-option-text-color: @black;
+@picker-option-disabled-opacity: 0.3;
+@picker-loading-icon-color: @blue;
+@picker-loading-mask-color: rgba(255, 255, 255, 0.9);
+
+// Popover
+@popover-arrow-size: 6px;
+@popover-border-radius: @border-radius-lg;
+@popover-action-width: 128px;
+@popover-action-height: 44px;
+@popover-action-font-size: @font-size-md;
+@popover-action-line-height: @line-height-md;
+@popover-action-icon-size: 20px;
+@popover-light-text-color: @text-color;
+@popover-light-background-color: @white;
+@popover-light-action-disabled-text-color: @gray-5;
+@popover-dark-text-color: @white;
+@popover-dark-background-color: #4a4a4a;
+@popover-dark-action-disabled-text-color: @gray-6;
+
+// Popup
+@popup-background-color: @white;
+@popup-transition: transform @animation-duration-base;
+@popup-round-border-radius: 16px;
+@popup-close-icon-size: 22px;
+@popup-close-icon-color: @gray-5;
+@popup-close-icon-active-color: @gray-6;
+@popup-close-icon-margin: 16px;
+@popup-close-icon-z-index: 1;
+
+// Progress
+@progress-height: 4px;
+@progress-color: @blue;
+@progress-background-color: @gray-3;
+@progress-pivot-padding: 0 5px;
+@progress-pivot-text-color: @white;
+@progress-pivot-font-size: @font-size-xs;
+@progress-pivot-line-height: 1.6;
+@progress-pivot-background-color: @blue;
+
+// PullRefresh
+@pull-refresh-head-height: 50px;
+@pull-refresh-head-font-size: @font-size-md;
+@pull-refresh-head-text-color: @gray-6;
+
+// Radio
+@radio-size: 20px;
+@radio-border-color: @gray-5;
+@radio-transition-duration: @animation-duration-fast;
+@radio-label-margin: @padding-xs;
+@radio-label-color: @text-color;
+@radio-checked-icon-color: @blue;
+@radio-disabled-icon-color: @gray-5;
+@radio-disabled-label-color: @gray-5;
+@radio-disabled-background-color: @border-color;
+
+// Rate
+@rate-icon-size: 20px;
+@rate-icon-gutter: @padding-base;
+@rate-icon-void-color: @gray-5;
+@rate-icon-full-color: @red;
+@rate-icon-disabled-color: @gray-5;
+
+// ShareSheet
+@share-sheet-header-padding: @padding-sm @padding-md @padding-base;
+@share-sheet-title-color: @text-color;
+@share-sheet-title-font-size: @font-size-md;
+@share-sheet-title-line-height: @line-height-md;
+@share-sheet-description-color: @gray-6;
+@share-sheet-description-font-size: @font-size-sm;
+@share-sheet-description-line-height: 16px;
+@share-sheet-icon-size: 48px;
+@share-sheet-option-name-color: @gray-7;
+@share-sheet-option-name-font-size: @font-size-sm;
+@share-sheet-option-description-color: @gray-5;
+@share-sheet-option-description-font-size: @font-size-sm;
+@share-sheet-cancel-button-font-size: @font-size-lg;
+@share-sheet-cancel-button-height: 48px;
+@share-sheet-cancel-button-background: @white;
+
+// Search
+@search-padding: 10px @padding-sm;
+@search-background-color: @white;
+@search-content-background-color: @gray-1;
+@search-input-height: 34px;
+@search-label-padding: 0 5px;
+@search-label-color: @text-color;
+@search-label-font-size: @font-size-md;
+@search-left-icon-color: @gray-6;
+@search-action-padding: 0 @padding-xs;
+@search-action-text-color: @text-color;
+@search-action-font-size: @font-size-md;
+
+// Sidebar
+@sidebar-width: 80px;
+@sidebar-font-size: @font-size-md;
+@sidebar-line-height: @line-height-md;
+@sidebar-text-color: @text-color;
+@sidebar-disabled-text-color: @gray-5;
+@sidebar-padding: 20px @padding-sm;
+@sidebar-active-color: @active-color;
+@sidebar-background-color: @background-color;
+@sidebar-selected-font-weight: @font-weight-bold;
+@sidebar-selected-text-color: @text-color;
+@sidebar-selected-border-width: 4px;
+@sidebar-selected-border-height: 16px;
+@sidebar-selected-border-color: @red;
+@sidebar-selected-background-color: @white;
+
+// Skeleton
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @active-color;
+@skeleton-row-margin-top: @padding-sm;
+@skeleton-title-width: 40%;
+@skeleton-avatar-size: 32px;
+@skeleton-avatar-background-color: @active-color;
+@skeleton-animation-duration: 1.2s;
+
+// Slider
+@slider-active-background-color: @blue;
+@slider-inactive-background-color: @gray-3;
+@slider-disabled-opacity: @disabled-opacity;
+@slider-bar-height: 2px;
+@slider-button-width: 24px;
+@slider-button-height: 24px;
+@slider-button-border-radius: 50%;
+@slider-button-background-color: @white;
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+
+// Step
+@step-text-color: @gray-6;
+@step-active-color: @green;
+@step-process-text-color: @text-color;
+@step-font-size: @font-size-md;
+@step-line-color: @border-color;
+@step-finish-line-color: @green;
+@step-finish-text-color: @text-color;
+@step-icon-size: 12px;
+@step-circle-size: 5px;
+@step-circle-color: @gray-6;
+@step-horizontal-title-font-size: @font-size-sm;
+
+// Steps
+@steps-background-color: @white;
+
+// Sticky
+@sticky-z-index: 99;
+
+// Stepper
+@stepper-active-color: #e8e8e8;
+@stepper-background-color: @active-color;
+@stepper-button-icon-color: @text-color;
+@stepper-button-disabled-color: @background-color;
+@stepper-button-disabled-icon-color: @gray-5;
+@stepper-button-round-theme-color: @blue;
+@stepper-input-width: 32px;
+@stepper-input-height: 28px;
+@stepper-input-font-size: @font-size-md;
+@stepper-input-line-height: normal;
+@stepper-input-text-color: @text-color;
+@stepper-input-disabled-text-color: @gray-5;
+@stepper-input-disabled-background-color: @active-color;
+@stepper-border-radius: @border-radius-md;
+
+// SubmitBar
+@submit-bar-height: 50px;
+@submit-bar-z-index: 100;
+@submit-bar-background-color: @white;
+@submit-bar-button-width: 110px;
+@submit-bar-price-color: @red;
+@submit-bar-price-font-size: @font-size-md;
+@submit-bar-currency-font-size: @font-size-md;
+@submit-bar-text-color: @text-color;
+@submit-bar-text-font-size: @font-size-md;
+@submit-bar-tip-padding: @padding-xs @padding-sm;
+@submit-bar-tip-font-size: @font-size-sm;
+@submit-bar-tip-line-height: 1.5;
+@submit-bar-tip-color: #f56723;
+@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-icon-size: 12px;
+@submit-bar-button-height: 40px;
+@submit-bar-padding: 0 @padding-md;
+@submit-bar-price-integer-font-size: 20px;
+@submit-bar-price-font-family: @price-integer-font-family;
+
+// Swipe
+@swipe-indicator-size: 6px;
+@swipe-indicator-margin: @padding-sm;
+@swipe-indicator-active-opacity: 1;
+@swipe-indicator-inactive-opacity: 0.3;
+@swipe-indicator-active-background-color: @blue;
+@swipe-indicator-inactive-background-color: @border-color;
+
+// Switch
+@switch-size: 30px;
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
+0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: @animation-duration-base;
+@switch-disabled-opacity: @disabled-opacity;
+@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1);
+
+// SwitchCell
+@switch-cell-padding-top: @cell-vertical-padding - 1px;
+@switch-cell-padding-bottom: @cell-vertical-padding - 1px;
+@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
+@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
+
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-z-index: 1;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: @font-size-sm;
+@tabbar-item-text-color: @gray-7;
+@tabbar-item-active-color: @blue;
+@tabbar-item-active-background-color: @tabbar-background-color;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 22px;
+@tabbar-item-margin-bottom: 4px;
+
+// Tab
+@tab-text-color: @gray-7;
+@tab-active-text-color: @text-color;
+@tab-disabled-text-color: @gray-5;
+@tab-font-size: @font-size-md;
+@tab-line-height: @line-height-md;
+
+// Tabs
+@tabs-default-color: @red;
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: @white;
+@tabs-bottom-bar-width: 40px;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;
+
+// Tag
+@tag-padding: 0 @padding-base;
+@tag-text-color: @white;
+@tag-font-size: @font-size-sm;
+@tag-border-radius: 2px;
+@tag-line-height: 16px;
+@tag-medium-padding: 2px 6px;
+@tag-large-padding: @padding-base @padding-xs;
+@tag-large-border-radius: @border-radius-md;
+@tag-large-font-size: @font-size-md;
+@tag-round-border-radius: @border-radius-max;
+@tag-danger-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-warning-color: @orange;
+@tag-default-color: @gray-6;
+@tag-plain-background-color: @white;
+
+// Toast
+@toast-max-width: 70%;
+@toast-font-size: @font-size-md;
+@toast-text-color: @white;
+@toast-loading-icon-color: @white;
+@toast-line-height: @line-height-md;
+@toast-border-radius: @border-radius-lg;
+@toast-background-color: fade(@black, 70%);
+@toast-icon-size: 36px;
+@toast-text-min-width: 96px;
+@toast-text-padding: @padding-xs @padding-sm;
+@toast-default-padding: @padding-md;
+@toast-default-width: 88px;
+@toast-default-min-height: 88px;
+@toast-position-top-distance: 20%;
+@toast-position-bottom-distance: 20%;
+
+// TreeSelect
+@tree-select-font-size: @font-size-md;
+@tree-select-nav-background-color: @background-color;
+@tree-select-content-background-color: @white;
+@tree-select-nav-item-padding: 14px @padding-sm;
+@tree-select-item-height: 48px;
+@tree-select-item-active-color: @red;
+@tree-select-item-disabled-color: @gray-5;
+@tree-select-item-selected-size: 16px;
+
+// Uploader
+@uploader-size: 80px;
+@uploader-icon-size: 24px;
+@uploader-icon-color: @gray-4;
+@uploader-text-color: @gray-6;
+@uploader-text-font-size: @font-size-sm;
+@uploader-upload-background-color: @gray-1;
+@uploader-upload-active-color: @active-color;
+@uploader-delete-color: @white;
+@uploader-delete-icon-size: 14px;
+@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
+@uploader-file-background-color: @background-color;
+@uploader-file-icon-size: 20px;
+@uploader-file-icon-color: @gray-7;
+@uploader-file-name-padding: 0 @padding-base;
+@uploader-file-name-margin-top: @padding-xs;
+@uploader-file-name-font-size: @font-size-sm;
+@uploader-file-name-text-color: @gray-7;
+@uploader-mask-background-color: fade(@gray-8, 88%);
+@uploader-mask-icon-size: 22px;
+@uploader-mask-message-font-size: @font-size-sm;
+@uploader-mask-message-line-height: @line-height-xs;
+@uploader-loading-icon-size: 22px;
+@uploader-loading-icon-color: @white;
+@uploader-disabled-opacity: @disabled-opacity;
+
+// Sku
+@sku-item-background-color: @background-color;
+@sku-icon-gray-color: @gray-4;
+@sku-upload-mask-color: rgba(50, 50, 51, 0.8);
+<template>
+  <div class="vnp-input-box">
+    <ul>
+      <li
+        v-for="(item, index) in val"
+        :key="index"
+        :class="{ active: activeIndex === index }"
+        @click="handleClickItem(index)"
+      >
+        <span>{{ item }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      val: ["", "", "", "", "", "", "", ""],
+      activeIndex: this.editable ? 0 : undefined,
+    };
+  },
+  watch: {
+    activeIndex() {
+      this.$emit("activeChange", this.activeIndex);
+    },
+    value: {
+      immediate: true,
+      handler() {
+        if (this.val.join("") === this.value) {
+          return;
+        }
+        const val = this.value.split("");
+        if (this.editable) {
+          this.activeIndex = val.length;
+        }
+        while (val.length < 8) {
+          val.push("");
+        }
+        this.val = val;
+      },
+    },
+    val() {
+      this.$emit("input", this.val.join(""));
+    },
+  },
+  methods: {
+    handleClickItem(index) {
+      if (!this.editable) {
+        return;
+      }
+      this.activeIndex = index;
+    },
+    setValue(val) {
+      this.$set(this.val, this.activeIndex, val);
+      if (this.activeIndex < 7) {
+        this.activeIndex += 1;
+      }
+    },
+    del() {
+      this.$set(this.val, this.activeIndex, "");
+      if (this.activeIndex > 0) {
+        this.activeIndex -= 1;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+  .vnp-input-box {
+    padding: 10px 0;
+    border: 1px solid #d8d8d8;
+    border-radius: 2px;
+    color: #8d8d8d;
+    font-size: 15px;
+    text-align: center;
+
+    ul {
+      display: flex;
+    }
+    li {
+      flex: 1;
+      border-right: 1px solid #eaeaea;
+      height: 28px;
+      line-height: 28px;
+
+      &:first-child {
+        border-color: #a6a6a6;
+        flex: 1.3;
+      }
+      &:last-child {
+        border: none;
+      }
+      &.active {
+        color: #1989fa;
+
+        > span {
+          height: 100%;
+          width: 20px;
+          display: inline-block;
+          border-bottom: 1px solid #1989fa;
+        }
+      }
+    }
+  }
+</style>
+<template>
+  <div>
+    <vnp-input-box
+      :value="val"
+      @click.native="show = true"
+    ></vnp-input-box>
+    <vnp-keyboard
+      :show.sync="show"
+      v-model="val"
+    ></vnp-keyboard>
+  </div>
+</template>
+
+<script>
+import Box from "./vnp-input-box";
+import Keyboard  from "./vnp-keyboard";
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    'vnp-input-box': Box,
+    'vnp-keyboard': Keyboard
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  computed: {
+    val: {
+      set(v) {
+        this.$emit("input", v);
+      },
+      get() {
+        return this.value;
+      },
+    },
+  },
+};
+</script>
+<template>
+  <van-action-sheet v-model="visible" get-container="body">
+    <div class="vnp-header">
+      <button type="button" class="vnp-btn-finish" @click="finish">完成</button>
+    </div>
+
+    <div class="vnp-input-box-outer">
+      <vnp-input-box ref="inputBox" v-model="val" editable @activeChange="handleActiveChange"></vnp-input-box>
+    </div>
+
+    <div class="vnp-keys">
+      <div class="vnp-keys-row" v-for="(item, index) in list" :key="index">
+        <div
+          class="vnp-btn-key-wrapper"
+          v-for="(val, index) in item"
+          :key="index"
+          :class="{
+              'vnp-del-wrapper': val === 'del',
+              'vnp-type-wrapper': val === 'type'
+            }"
+        >
+          <van-button v-if="val === 'type'" class="vnp-btn-key" @click="handleChangeType">
+            <span v-if="type === 'cn'">中/<span class="vnp-smaller">英</span></span>
+            <span v-else><span class="vnp-smaller">中</span>/英</span>
+          </van-button>
+
+          <van-button v-else-if="val === 'del'" class="vnp-btn-key" @click="handleDel">
+            <svg
+              viewBox="0 0 32 22"
+              xmlns="http://www.w3.org/2000/svg"
+              class="vnp-delete-icon"
+            >
+              <path
+                d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </van-button>
+
+          <van-button v-else class="vnp-btn-key" :class="{'vnp-btn-empty': !val}" @click="handleClickKey(val)">
+            {{ val }}
+          </van-button
+          >
+        </div>
+      </div>
+    </div>
+  </van-action-sheet>
+</template>
+
+<script>
+import Box from './vnp-input-box'
+
+export default {
+  components: {
+    'vnp-input-box': Box
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+  },
+  data() {
+    return {
+      val: this.value,
+      type: "cn",
+      cn: [
+        ["京", "津", "沪", "渝", "冀", "豫", "云", "辽", "黑", "湘"],
+        ["皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋"],
+        ["蒙", "陕", "吉", "闽", "贵", "粤", "青", "藏", "川", "宁"],
+        ["type", "琼", "使", "领", "学", "", "", "", "del"]
+      ],
+      en: [
+        ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+        ["Q", "W", "E", "R", "T", "Y", "U", "O", "P"],
+        ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
+        ["type", "Z", "X", "C", "V", "B", "N", "M", "del"]
+      ],
+    }
+  },
+  computed: {
+    visible: {
+      set(val) {
+        this.$emit("update:show", val);
+      },
+      get() {
+        return this.show;
+      }
+    },
+    list() {
+      return this.type === "en" ? this.en : this.cn;
+    }
+  },
+  watch: {
+    show() {
+      if (this.show) {
+        this.val = this.value;
+      }
+    }
+  },
+  methods: {
+    handleChangeType() {
+      this.type = this.type === "en" ? "cn" : "en";
+    },
+    handleClickKey(val) {
+      if (val) {
+        this.$refs.inputBox.setValue(val);
+      }
+    },
+    handleActiveChange(activeIndex) {
+      if (activeIndex === 0) {
+        this.type = "cn";
+      } else {
+        this.type = "en";
+      }
+    },
+    handleDel() {
+      this.$refs.inputBox.del();
+    },
+    finish() {
+      this.$emit("input", this.val);
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .vnp-header {
+    height: 40px;
+    padding-top: 6px;
+    position: relative;
+
+    .vnp-btn-finish {
+      position: absolute;
+      right: 0;
+      height: 100%;
+      padding: 0 16px;
+      color: #576b95;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+
+  .vnp-input-box-outer {
+    width: 82%;
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 10px;
+  }
+
+  .vnp-keys {
+    padding: 3px;
+    background: #f2f3f5;
+    padding-bottom: 22px;
+
+    .vnp-keys-row {
+      display: flex;
+      justify-content: center;
+    }
+    .vnp-btn-key-wrapper {
+      flex: 0 1 calc((100% - 6px * 10) / 10);
+      padding: 3px;
+      box-sizing: content-box;
+
+      &.vnp-del-wrapper,
+      &.vnp-type-wrapper {
+        flex: 1;
+      }
+      &.vnp-type-wrapper {
+        .vnp-smaller {
+          color: #999;
+          font-size: 12px;
+        }
+      }
+
+      .vnp-btn-key {
+        padding: 0;
+        width: 100%;
+        border-radius: 4px;
+      }
+      .vnp-btn-empty {
+        background: transparent;
+        border: none;
+      }
+      .vnp-delete-icon {
+        width: 18px;
+        vertical-align: middle;
+      }
+    }
+  }
+</style>>
@@ -8,17 +8,27 @@ import &#39;./assets/css/reset.css&#39;  // 引入公共样式
  
 import './assets/iconfont/iconfont.css'
  
-import h5Popup from 'vue-h5-popup' // 引入弹窗
-Vue.use(h5Popup)
-
-
-import BaiduMap from 'vue-baidu-map'
-
-Vue.use(BaiduMap, {
-  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
-  ak: 'cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb'
+// 路由守卫
+router.beforeEach((to,from ,next)=>{
+  if(to.meta.title) {
+    document.title=to.meta.title;
+  }else {
+    document.title='宣化微信公众号';
+  }
+  next()
 })
  
+// import h5Popup from 'vue-h5-popup' // 引入弹窗
+// Vue.use(h5Popup)
+//
+//
+// import BaiduMap from 'vue-baidu-map'
+//
+// Vue.use(BaiduMap, {
+//   // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+//   ak: 'cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb'
+// })
+//
  
 import 'mint-ui/lib/style.css'
 import { MessageBox } from 'mint-ui'
@@ -32,6 +42,15 @@ import { Field } from &#39;mint-ui&#39;;
  
 Vue.component(Field.name, Field);
  
+
+
+
+
+
+
+
+
+
 //全局设置的基本样式
 import './assets/css/base.scss'
  
@@ -45,13 +64,21 @@ Vue.prototype.$moment = moment
 import utils from './utils/utils' // 工具类
 Vue.prototype.$utils = utils
 //
-// import Mint from 'mint-ui';
-// import 'mint-ui/lib/style.css'
-// Vue.use(Mint);
+import Mint from 'mint-ui';
+import 'mint-ui/lib/style.css'
+Vue.use(Mint);
+
+
+// 在main.js中
+
+import Vant from 'vant';
+
+import 'vant/lib/index.css';
+import 'vant/lib/index.less';
+
+Vue.use(Vant);
  
  
-import 'swiper/dist/css/swiper.min.css' // 轮播
-import 'swiper/dist/js/swiper.min'
  
 import vueFilter from './utils/filters'  // 公共filter
 for (let key in vueFilter){
@@ -67,50 +67,99 @@ export default new Router({
  
  
  
-    //  //---------------- 个人页面导航
-    // {
-    //   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")
-    // },
-    //
-    //
-    // // ------------------------购买会员卡提示
-    // {
-    //   path: '/cardPoint',
-    //   name: 'cardPoint',
-    //   component: () => import("@/views/cards/cardPoint.vue")
-    // },
-    //
-    //
-    // // ------------------------购买会员卡
-    // {
-    //   path: '/buyCard',
-    //   name: 'buyCard',
-    //   component: () => import("@/views/cards/buyCard.vue")
-    // },
+     //---------------- 个人页面导航
+    {
+      path: '/selfNav',
+      name: 'selfNav',
+      component: () => import("@/views/mySelf/selfNav.vue"),
+      meta: {title: "个人中心"}
+    },
+
+    // ------------------------建议反馈
+    {
+      path: '/suggestionBack',
+      name: 'suggestionBack',
+      component: () => import("@/views/mySelf/feedback/suggestionBack.vue"),
+      meta: {title: "建议反馈"}
+    },
+
+    // ------------------------停车记录
+    {
+      path: '/parkNotes',
+      name: 'parkNotes',
+      component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
+    },
+
+
+    // ------------------------登录
+    {
+      path: '/binDing',
+      name: 'binDing',
+      component: () => import("@/views/binding/binDing.vue"),
+      meta: {title: "绑定手机号"}
+    },
+    {
+      path: '/myCars',
+      name: 'myCars',
+      component: () => import("@/views//mySelf/myCars/myCars.vue"),
+      meta: {title: "我的车牌"}
+    },
+
+    {
+      path: '/addCarNum',
+      name: 'addCarNum',
+      component: () => import("@/views//mySelf/myCars/addCarNum.vue"),
+      meta: {title: "添加车牌"}
+    },
+    {
+      path: '/rzCarNumber',
+      name: 'rzCarNumber',
+      component: () => import("@/views//mySelf/myCars/rzCarNumber.vue"),
+      meta: {title: "认证车牌"}
+    },
+
+
+    {
+      path: '/cardList',
+      name: 'cardList',
+      component: () => import("@/views//cards/cardList.vue"),
+      meta: {title: "会员卡列表"}
+    },
+
+
+    {
+      path: '/buyCardDetail',
+      name: 'buyCardDetail',
+      component: () => import("@/views//cards/buyCardDetail.vue"),
+      meta: {title: "购买会员卡"}
+    },
+
+    {
+      path: '/buyVipCard',
+      name: 'buyVipCard',
+      component: () => import("@/views//cards/buyVipCard.vue"),
+      meta: {title: "购买会员卡"}
+    },
+
+
+
+
+
+    // ------------------------购买会员卡提示
+    {
+      path: '/cardPoint',
+      name: 'cardPoint',
+      component: () => import("@/views/cards/cardPoint.vue")
+    },
+
+
+    // ------------------------购买会员卡
+    {
+      path: '/buyCard',
+      name: 'buyCard',
+      component: () => import("@/views/cards/buyCard.vue"),
+      meta: {title: "购买会员卡"}
+    },
  
  
  
-import md5 from './md5.min.js';
+import md5 from "./md5.min.js";
+var myCommonSalt = function(val) { // 获取盐值
+  let len = parseInt(val);
+  let $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
+  let maxPos = $chars.length;
+  var pwd = "";
+  for (var i = 0; i < len; i++) {
+    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  console.log(pwd);
+  return pwd;
+};
 export default {
-  myCommonSalt: function (val) { // 获取盐值
-    let len = parseInt(val);
-    let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
-    let maxPos = $chars.length;
-    var pwd = '';
-    for (var i = 0; i < len; i++) {
-      pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
+  myCommonSalt,
+  formatDate: function(secs, type = 0) {         //type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日
+    var t = new Date(secs);
+    var year = t.getFullYear();
+    var month = t.getMonth() + 1;
+    if (month < 10) {
+      month = "0" + month;
+    }
+    var date = t.getDate();
+    if (date < 10) {
+      date = "0" + date;
+    }
+    var hour = t.getHours();
+    if (hour < 10) {
+      hour = "0" + hour;
+    }
+    var minute = t.getMinutes();
+    if (minute < 10) {
+      minute = "0" + minute;
+    }
+    var second = t.getSeconds();
+    if (second < 10) {
+      second = "0" + second;
+    }
+    if (type == 0) {
+      return year + "年" + month + "月" + date + "日";
+    } else {
+      return year + "-" + month + "-" + date;
     }
-    console.log(pwd);
-    return pwd;
   },
-
-  formatDate: function(secs, type=0){         //type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日
-    var t = new Date(secs)
-    var year = t.getFullYear()
-    var month = t.getMonth() + 1
-    if(month < 10){ month = '0' + month }
-    var date = t.getDate()
-    if(date < 10){ date = '0' + date }
-    var hour = t.getHours()
-    if(hour < 10){ hour = '0' + hour }
-    var minute = t.getMinutes()
-    if(minute < 10){ minute = '0' + minute }
-    var second = t.getSeconds()
-    if(second < 10){ second = '0' + second }
-    if(type==0){
-      return year + '年' + month + '月' + date + '日'
-    }else{
-      return year + '-'+month+'-'+date
-    }},
-
-  timestampToTime: function (timestamp) {
+  timestampToTime: function(timestamp) {
     var d = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
-    var youWant=d.getFullYear() + '-' + this.completedString(d.getMonth() + 1) + '-' + this.completedString(d.getDate()) ;
-    return  youWant
+    var youWant = d.getFullYear() + "-" + this.completedString(d.getMonth() + 1) + "-" + this.completedString(d.getDate());
+    return youWant;
   },
-  completedString:function(s) {
-    return s < 10 ? '0' + s : s
+  completedString: function(s) {
+    return s < 10 ? "0" + s : s;
   },
-
-
-
-  dateFormat: function (msd) {  // 时间转换
-    var time = msd
-
+  dateFormat: function(msd) {  // 时间转换
+    var time = msd;
     if (null != time && "" != time) {
-
       if (time > 60 && time < 60 * 60) {
-
         time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
-
           parseInt(time / 60.0)) * 60) + "秒";
-
       }
-
       else if (time >= 60 * 60 && time < 60 * 60 * 24) {
-
         time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
-
           parseInt(time / 3600.0)) * 60) + "分钟" +
-
           parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
-
             parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
-
       } else if (time >= 60 * 60 * 24) {
-
         time = parseInt(time / 3600.0 / 24) + "天" + parseInt((parseFloat(time / 3600.0 / 24) -
-
           parseInt(time / 3600.0 / 24)) * 24) + "小时" + parseInt((parseFloat(time / 3600.0) -
-
           parseInt(time / 3600.0)) * 60) + "分钟" +
-
           parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
-
             parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
-
       }
-
       else {
-
         time = parseInt(time) + "秒";
-
       }
-
     }
-
     return time;
   },
-
-  signObject: function (jsonObj){ //签名字段
-    let sort = []
-    for(let k in jsonObj){
+  // myVxAppId: 'wx1489e48e6a547023',
+  signObject: function(jsonObj) { //签名字段
+    jsonObj.sign_type = "md5";
+    jsonObj.app_id = "ud8yq5tv0inxupc05xfeau39jywlqoj2";
+    jsonObj.deviceInfo = "BC0703A4-AFB0-4B51-9089-9B7487C0CC6E";
+    jsonObj.salt = myCommonSalt(32);
+    jsonObj.token = "99ecd32eed1b4ebea71bc73b0aabbb99";
+    let sort = [];
+    for (let k in jsonObj) {
       sort.push({
         keyname: k,
         value: jsonObj[k]
-      })
+      });
     }
-    return this.myGetSign(sort)
+    return this.myGetSign(sort);
   },
-
-  clientBrowser: function () { // 判断客户端
+  clientBrowser: function() { // 判断客户端
     if (/MicroMessenger/.test(window.navigator.userAgent)) {
       console.log("微信客户端");
-      return '微信'
+      return "微信";
     } else if (/AlipayClient/.test(window.navigator.userAgent)) {
       console.log("支付宝客户端");
-      return '支付宝'
+      return "支付宝";
     } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
       console.log("农行客户端");
-      return '立即'
-    }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
+      return "立即";
+    } else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
       console.log("农行客户端");
-      return '立即'
-    }else {
+      return "立即";
+    } else {
       console.log("其他浏览器");
-      return '支付宝'
+      return "支付宝";
     }
   },
-
   // 1:支付宝 2：微信 3：银联 10:H5   4微信公众号   34 农行
-  clientBrowsePayType: function () { // 判断客户端
+  clientBrowsePayType: function() { // 判断客户端
     if (/MicroMessenger/.test(window.navigator.userAgent)) {
       console.log("微信客户端");
-      return '4'
+      return "4";
     } else if (/AlipayClient/.test(window.navigator.userAgent)) {
       console.log("支付宝客户端");
-      return '1'
+      return "1";
     } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
       console.log("农行客户端");
-      return '34'
-    }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
+      return "34";
+    } else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
       console.log("农行客户端");
-      return '34'
-    }else {
+      return "34";
+    } else {
       console.log("其他浏览器");
-      return '1'
+      return "1";
     }
   },
-  // 0eca8f5373ca4866aec2f8e9d9367104  老的id
-  // 14318527b13840c2a4af63fef52c2d6e 老的签名
-
-  // ud8yq5tv0inxupc05xfeau39jywlqoj2  新的id
-  // ny1u72b6k374sg379z0kqjgfxe2ycnpw 新的签名
-
-  myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid
-
-  myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息
-
-  myVxAppId: 'wx1489e48e6a547023',
-  // 测试环境 微信赤峰 appid   wxff4cebaedbf4f886
-  // 微信赤峰 appid   wx2af2bab90d433c86
-  // 黄石 appid    wxa1a66cc7d263afe6
-
-  myOrgId: '10120', // 归属地 赤峰id  10003    黄石 10079
-
-  myGetSign: function (objb) { // 获取签名
-    var compare = function (obj1, obj2) {
+  myVarAppid: "ud8yq5tv0inxupc05xfeau39jywlqoj2",// 公共请求Appid
+  myDeviceInfo: "BC0703A4-AFB0-4B51-9089-9B7487C0CC6E", // 公共请求设备信息
+  myVxAppId: "wx1489e48e6a547023",
+  openId: "oWw3o5rY_bFsiT_nFd2CEQWGZfhs",
+  myOrgId: "10120", // 归属地 赤峰id  10003    黄石 10079
+  myGetSign: function(objb) { // 获取签名
+    var compare = function(obj1, obj2) {
       var val1 = obj1.keyname;
       var val2 = obj2.keyname;
       if (val1 < val2) {
@@ -167,19 +143,18 @@ export default {
       } else {
         return 0;
       }
-    }
+    };
     objb.sort(compare);
-    var strmd5 = 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
-    for(var i=0;i<objb.length;i++){
-      if(objb[i].value != null&&objb[i].value != ''){
-        strmd5 += objb[i].keyname+objb[i].value;
+    var strmd5 = "ny1u72b6k374sg379z0kqjgfxe2ycnpw";
+    for (var i = 0; i < objb.length; i++) {
+      if (objb[i].value != null && objb[i].value != "") {
+        strmd5 += objb[i].keyname + objb[i].value;
       }
     }
-    strmd5 += 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
+    strmd5 += "ny1u72b6k374sg379z0kqjgfxe2ycnpw";
     // console.log('strmd5-------->'+strmd5);
     strmd5 = md5(strmd5);
-    strmd5=strmd5.toUpperCase();
+    strmd5 = strmd5.toUpperCase();
     return strmd5;
-  },
-
-}
+  }
+};
@@ -8,7 +8,7 @@
     </mt-field>
  
     <div style="margin-top: 34px" class="leftRightPadding">
-      <mt-button type="danger" size="large">绑定</mt-button>
+      <van-button type="info" block>绑定</van-button>
     </div>
   </div>
 </template>
+<template>
+  <section class="">
+    <div class="vipCardBg">
+      <ul class="cardTypeList">
+        <li>年卡</li>
+        <li>月卡</li>
+        <li>半年卡</li>
+      </ul>
+
+      <div class="van-ellipsis" style="padding: 20px 0  10px 20px">万达停车场plName</div>
+      <div class="van-ellipsis" style="padding: 0 0  0 20px">万达停车场plAddress</div>
+    </div>
+
+
+
+    <van-cell-group inset style="margin-bottom: 10px;" @click="LinkBuyCard">
+      <van-cell >
+        <template #title>
+          <span style="font-size: 20px;font-weight: 600;">年卡</span>
+        </template>
+      </van-cell>
+      <van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00"  is-link>
+      </van-cell>
+    </van-cell-group>
+
+    <van-cell-group inset style="margin-bottom: 10px;">
+      <van-cell >
+        <template #title>
+          <span style="font-size: 20px;font-weight: 600;">年卡</span>
+        </template>
+      </van-cell>
+      <van-cell title="万达月卡cardName" center value="立即购买" label="单价：￥1800.00"  is-link>
+      </van-cell>
+    </van-cell-group>
+  </section>
+
+</template>
+
+<script>
+export default {
+  name: "buyCardDetail",
+
+  methods:{
+    LinkBuyCard(){
+      this.$router.push({
+          name: "buyVipCard"
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .vipCardBg {
+    margin-top: 14px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    /* width: 100%; */
+    height: 150px;
+    background-image: url('../../assets/images/cards/vipcardbg.png');
+    background-repeat: no-repeat;
+    /* background-position: center center; */
+    background-size: 100% 100%;
+    -moz-background-size: 100% 100%;
+    font-size: 16px;
+    color: #fff;
+  }
+
+  .cardTypeList {
+    padding: 20px 0 10px 20px;
+    overflow: hidden;
+    > li {
+      float: left;
+      margin-right: 10px;
+      padding: 2px 20px;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, .3);
+    }
+  }
+</style>
+<template>
+  <section style="width: 100%;height: 100%;background: #fff">
+    <van-cell-group style="border-bottom: 10px solid #fafafa">
+      <van-cell title="车牌号" is-link>
+        <template>
+          <p @click="show = true" style="color: #1989fa">{{carNum}}</p>
+          <van-action-sheet v-model="show" :actions="actions" @select="onSelect"/>
+        </template>
+      </van-cell>
+      <van-cell title="适用停车场" value="万达停车场"/>
+      <van-cell title="卡类别" value="小型车月卡"/>
+      <van-cell title="卡名称" value="万达月卡"/>
+      <van-cell title="生效时间" is-link>
+        <template>
+          <p @click="showDate = true" style="color: #1989fa"> {{valueStart}}</p>
+        </template>
+      </van-cell>
+      <van-cell title="失效时间" value="2023-10-20"/>
+
+      <van-cell title="购买数量">
+        <template>
+          <van-stepper v-model.number="cardNum" theme="round" button-size="22" disable-input/>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+
+    <van-popup v-model="showDate" position="bottom" :style="{ height: '30%' }">
+      <van-datetime-picker
+        v-show="showDate"
+        v-model="currentDate"
+        type="date"
+        title="选择生效日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="confirmDate"
+        @cancel="cancelDate"
+      />
+    </van-popup>
+
+
+    <van-cell-group style="border-bottom: 10px solid #fafafa">
+      <van-cell title="单价">
+        <template>
+          <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
+        </template>
+      </van-cell>
+
+
+      <van-cell title="单价">
+        <template>
+          <p style="font-size: 16px;font-weight: 600;color: #f00;">20.00元</p>
+        </template>
+      </van-cell>
+
+
+      <van-cell title="支付金额">
+        <template>
+          <p style="font-size: 16px;font-weight: 600;color: #000;">3420.00元</p>
+        </template>
+      </van-cell>
+
+    </van-cell-group>
+
+
+    <div class="leftRightPadding" style="margin-top: 34px">
+      <!--<mt-button type="danger" size="large"></mt-button>-->
+      <van-button type="info" block>购买</van-button>
+    </div>
+
+  </section>
+</template>
+
+<script>
+import { Toast } from "vant";
+export default {
+  name: "buyVipCard",
+  data() {
+    return {
+      carNum: "京A1231",
+      show: false,
+      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }],
+      minDate: new Date(2020, 1, 1),
+      maxDate: new Date(2025, 10, 11),
+      currentDate: new Date(2023, 10, 11),
+      valueStart: "2023-10-01",
+      showDate: false,
+      cardNum: 1
+    };
+  },
+  methods: {
+    onSelect(item) {
+      // 默认情况下点击选项时不会自动收起
+      // 可以通过 close-on-click-action 属性开启自动收起
+      this.show = false;
+      this.carNum = item.name;
+      Toast(item.name);
+    },
+    confirmDate(val) {
+      console.log(val);
+      this.valueStart = val;
+      this.showDate = false;
+    },
+    cancelDate() {
+      this.showDate = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .order-line-bold {
+    background: #fafafa;
+    height: 12px;
+    margin-top: 12px;
+    padding: 0px;
+    overflow: hidden;
+  }
+</style>
+<template>
+
+  <section style="padding: 0 10px">
+
+    <van-row>
+      <van-col span="18">
+        <van-search
+          v-model="value"
+          placeholder="请输入搜索关键词"
+          @search="onSearch"
+        />
+      </van-col>
+      <van-col span="6" style="margin-top: 5px;">
+        <van-button type="info" round block>续费</van-button>
+      </van-col>
+    </van-row>
+
+    <ul>
+      <li class="cardListWrap" @click="toBuyCardPage">
+        <div class="van-ellipsis" style="padding: 20px 0  10px 10px">万达停车场plName</div>
+        <div class="van-ellipsis" style="padding: 10px 0  20px 10px">万达停车场plAddress</div>
+      </li>
+      <li class="cardListWrap">
+        <div class="van-ellipsis" style="padding: 20px 0  10px 10px">万达停车场plName</div>
+        <div class="van-ellipsis" style="padding: 10px 0  20px 10px">万达停车场plAddress</div>
+      </li>
+    </ul>
+
+
+    <section style="text-align: center;padding-top: 20px">
+      <van-image :src="require('../../assets/images/cards/novipcard.png')" />
+      <p>为找到会员卡</p>
+    </section>
+
+
+  </section>
+
+</template>
+
+<script>
+import { Toast } from 'vant';
+export default {
+  name: "cardList",
+  data() {
+    return {
+      value: '',
+    };
+  },
+  methods: {
+    onSearch(val) {
+      Toast(val);
+    },
+    onCancel() {
+      Toast('取消');
+    },
+    toBuyCardPage(){
+      this.$router.push({
+          name: "buyCardDetail"
+        }
+      );
+    }
+  },
+};
+</script>
+
+<style scoped>
+  .cardListWrap{
+    margin-top: 15px;
+    margin-left: 0px;
+    margin-right: 0px;
+    width: 100%;
+    height: 106px;
+    background: url("../../assets/images/cards/vipcardbg1.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 16px;
+  }
+
+</style>
@@ -5,44 +5,80 @@
       <li
         @click="chooseHandle(index)"
         v-for="(i, index) in suggestionList"
-        :key="i.id"
+        :key="i.code"
         :class="{choosedActive: currentIndex==index}"
       >
-        {{i.text}}
+        {{i.name}}
       </li>
     </ul>
  
-    <div class="clear"></div>
  
-    <mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model="introduction" :attr="{ maxlength: 2 }"></mt-field>
+
+    <!--<mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model="introduction" ></mt-field>-->
+
+    <van-field
+      v-model="introduction"
+      rows="2"
+      autosize
+      type="textarea"
+      maxlength="300"
+      placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）"
+      show-word-limit
+    />
  
     <div  style="margin-top: 34px">
-      <mt-button type="danger" size="large">提交</mt-button>
+      <van-button type="info" block @click="submitCon">提交</van-button>
     </div>
   </div>
 </template>
  
 <script>
+
+import { saveFeedbackAndSuggest, getFeedbackType } from '@/api/getUserIfo'
 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: '其他问题' },
-      ],
+      suggestionList: [],
       currentIndex: 0,
       introduction: '',
     }
   },
+  created(){
+    this.getFeedbackType()
+  },
   methods: {
+    getFeedbackType(){
+      let jsondata = {}
+      jsondata.sign = this.$utils.signObject(jsondata)
+      getFeedbackType(jsondata).then(response => {
+        console.log(response)
+        this.suggestionList = response.data
+      })
+    },
     chooseHandle: function (i) {
       console.log(i)
       this.currentIndex = i
+    },
+    submitCon(){
+      if(this.introduction){
+        let jsondata = {
+          feedbackCode:this.suggestionList[this.currentIndex].code,
+          suggestDesc:this.introduction,
+          // token:'99ecd32eed1b4ebea71bc73b0aabbb99'
+        }
+        jsondata.sign = this.$utils.signObject(jsondata)
+        saveFeedbackAndSuggest(jsondata).then(response => {
+          console.log(response)
+          if(response.code==0){
+            this.$toast("提交成功");
+          }
+          // this.phoneNum = response.data.phoneNum
+        })
+
+      }else{
+        this.$toast("请填写建议反馈内容");
+      }
     }
   }
 }
@@ -55,24 +91,27 @@ export default {
   }
  
   .suggestionList {
+    overflow: hidden;
  
     li {
       float: left;
       width: calc((100% - 19px) / 2);
-      height: 33px;
-      line-height: 33px;
+      height: 45px;
+      line-height: 45px;
       margin-bottom: 16px;
-      border: 1px solid #B18181;
+      border: 1px solid #2282C5;
       text-align: center;
-      font-size: 13px;
+      font-size: 16px;
+      border-radius: 4px;
+      color: #2282C5;
       &:nth-child(odd) {
         margin-right: 19px;
       }
     }
     .choosedActive {
-      background: #F75959;
-      border: 1px solid #A51E1E;
+      background: linear-gradient(180deg, #2282C5 0%, #4B8EF1 58%, #63BEFD 100%);
       color: #fff;
+      border: 0;
     }
  
   }
+<template>
+  <div style="padding: 20px 15px;">
+    <h3>请输入车牌号码</h3>
+    <div class="demo-two-box">
+      <vnp-input v-model="value"></vnp-input>
+    </div>
+
+    <van-button type="info" round block style="margin-top: 40px;" @click="toMyCarsPage">立即添加</van-button>
+  </div>
+</template>
+
+<script>
+import VnpInput from "@/components/vant-number-plate/vnp-input";
+export default {
+  name: "addCarNum",
+  components: {
+    "vnp-input": VnpInput
+  },
+  data() {
+    return {
+      show: false,
+      value: "冀"
+    };
+  },
+  methods: {
+    toMyCarsPage() {
+      console.log(this.value)
+      console.log(this.value.length)
+      this.$router.push({
+          name: "myCars"
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+  h3 {
+    text-align: center;
+    padding-bottom: 20px;
+  }
+</style>
+<template>
+  <section style="padding: 20px 15px;">
+    <p style="color: #343434;font-size: 30px;font-weight: 600;padding-bottom: 15px;">我的车辆</p>
+    <div>
+      <van-row>
+        <van-col span="3" style="text-align: center">
+          <van-image style="margin-top: 18px;" :src="require('../../../assets/images/myCars/carNumBg.png')"/>
+        </van-col>
+        <van-col span="14" style="font-size: 16px;">
+          京A1231231
+        </van-col>
+        <van-col span="5">
+          <!--<p style="color: #FF555D">立即认证</p>-->
+          <p style="color: #1aad19">通过认证</p>
+        </van-col>
+        <van-col span="2">
+          <p>
+            <van-icon name="cross" color="#D1D1D6"/>
+          </p>
+        </van-col>
+      </van-row>
+
+      <van-row>
+        <van-col span="3" style="text-align: center">
+          <van-image style="margin-top: 18px;" :src="require('../../../assets/images/myCars/carNumBg.png')"/>
+        </van-col>
+        <van-col span="14" style="font-size: 16px;">
+          京A1231231
+        </van-col>
+        <van-col span="5">
+          <p style="color: #FF555D" @click="toRzcarNumber">立即认证</p>
+        </van-col>
+        <van-col span="2">
+          <p>
+            <van-icon name="cross" color="#D1D1D6"/>
+          </p>
+        </van-col>
+      </van-row>
+
+      <van-row>
+        <van-col span="3" style="text-align: center">
+          <van-image style="margin-top: 18px;" :src="require('../../../assets/images/myCars/carNumBg.png')"/>
+        </van-col>
+        <van-col span="14" style="font-size: 16px;">
+          京A1231231
+        </van-col>
+        <van-col span="5">
+          <p style="color: #2282C5">审核中</p>
+        </van-col>
+        <van-col span="2">
+          <p>
+            <van-icon name="cross" color="#D1D1D6"/>
+          </p>
+        </van-col>
+      </van-row>
+
+      <section class="addBtnBg" @click="toAddCarPage">
+        <van-image style="margin-top: 10px" :src="require('../../../assets/images/myCars/addBtn.png')"/>
+        添加车辆
+      </section>
+
+
+      <section style="margin-top: 20px;">
+        宣化停车友情提示:
+      </section>
+
+      <section>
+        1、每个车牌同一时间只能被一个用户绑定，如需被其他账户绑定，需先解绑;
+      </section>
+
+      <section>
+        2、车牌号非本人绑定时，可以拔打客服电话反馈进行解绑;
+      </section>
+
+      <section>
+        3、车牌绑定后可以提交行驶证进行真实性验证，48小时内反馈审核结果;如自行解绑车牌后，再次重新绑定需重新审核认证;
+      </section>
+
+      <section>
+        4、未认证的车牌只支持支付当前停车费和历史欠费记录;
+      </section>
+
+      <section>
+        5、认证的车牌支持查看历史停车记录;
+      </section>
+
+      <section>
+        6、一个账号最多允许绑定三个车牌号，该账号可为三辆车购买会员卡(购买会员卡仅限一车牌绑定使用)。
+      </section>
+
+
+    </div>
+
+  </section>
+
+</template>
+
+<script>
+export default {
+  name: "myCars",
+  methods: {
+    toAddCarPage() {
+      this.$router.push({
+          name: "addCarNum"
+        }
+      );
+    },
+    toRzcarNumber(){
+      this.$router.push({
+          name: "rzCarNumber"
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .van-row {
+    margin-bottom: 20px;
+    height: 60px;
+    line-height: 60px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 6px 0px rgba(114, 124, 143, 0.2);
+    border-radius: 8px;
+  }
+
+  .addBtnBg {
+    margin-top: 40px;
+    height: 45px;
+    line-height: 45px;
+    background: url("../../../assets/images/myCars/addBtnBg.png") no-repeat;
+    background-size: 100% 100%;
+    color: #2282C5;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+  }
+</style>
+<template>
+  <div style="background: #fff;width: 100%;height: 100%">
+    <h3 style="padding: 10px 10px;border-bottom: 5px solid #f5f5f5">
+      车牌号码：
+      <b style="color:#2282C5">京A12321</b>
+    </h3>
+
+    <div style="padding: 10px 10px">
+
+      <van-uploader style="width: 100%" :after-read="afterRead" v-model="fileList" :max-count="1" preview-size="200">
+
+        <!--&lt;!&ndash;<div class="uploadBg"></div>&ndash;&gt;-->
+        <!--<van-image  style="width: 100%;height: 200px;"-->
+          <!--:src="require('../../../assets/images/myCars/fornt.png')" />-->
+      </van-uploader>
+
+      <!--<div class="uploadBg">-->
+       <!---->
+      <!--</div>-->
+
+
+      <h4>
+        照片须符合如下条件:
+      </h4>
+      <h6>
+        1、行驶证正面
+      </h6>
+      <h6>
+        2、信息清晰显示真实有效
+      </h6>
+
+      <van-button type="info" round block style="margin-top: 40px;" @click="toMyCarsPage">立即验证</van-button>
+
+
+
+    </div>
+
+
+
+
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "rzCarNumber",
+  data() {
+    return {
+      fileList: [],
+    };
+  },
+  methods:{
+    afterRead(file) {
+      // 此时可以自行将文件上传至服务器
+      console.log(file);
+    },
+    toMyCarsPage() {
+      console.log(this.fileList)
+      console.log(this.fileList.length)
+      this.$router.push({
+          name: "myCars"
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uploadBg{
+  width: 100%;
+  height: 200px;
+  background:#eee url("../../../assets/images/myCars/fornt.png") no-repeat;
+  background-size: 100% 100%;
+
+}
+</style>
@@ -4,32 +4,112 @@
       <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>
+          <li></li>
+          <li style="padding-top: 20px;font-size: 20px;">{{phoneNum}}</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: 'cardList' }"></mt-cell>-->
  
-    <mt-cell title="车辆管理"  is-link :to="{ name: 'Toast' }"></mt-cell>
+    <!--<mt-cell title="车辆管理" is-link :to="{ name: 'myCars' }"></mt-cell>-->
  
-    <mt-cell title="停车记录"  is-link :to="{ name: 'parkNotes' }"></mt-cell>
+    <!--<mt-cell title="车辆管理" is-link :to="{ name: 'parkNotes' }"></mt-cell>-->
  
-    <mt-cell title="建议反馈"  is-link :to="{ name: 'suggestionBack' }"></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>
+    <van-cell-group>
+      <van-cell v-for="i in navList" :key="i.title" :title="i.title" size="large" is-link @click="toNextPage(i.path)"/>
+    </van-cell-group>
+
+
+    <div class="leftRightPadding" style="margin-top: 34px" v-if="openId">
+      <!--<mt-button type="danger" size="large"></mt-button>-->
+      <van-button type="info" block>退出账户</van-button>
+    </div>
+    <div class="leftRightPadding" style="margin-top: 34px" v-else>
+      <van-button type="info" block @click="toBindingPage">登录绑定</van-button>
     </div>
  
   </div>
 </template>
  
 <script>
+
+import { getTokenByOpenId } from '@/api/getUserIfo'
 export default {
-  name: 'selfNav'
-}
+  name: "selfNav",
+  data() {
+    return {
+      navList: [
+        {
+          title: "会员卡", path: "cardList"
+        },
+        {
+          title: "车辆管理", path: "myCars"
+        },
+        {
+          title: "停车记录", path: "parkNotes"
+        },
+        {
+          title: "建议反馈", path: "suggestionBack"
+        }
+      ],
+      openId: "",
+      phoneNum:'',//手机号
+    };
+  },
+  mounted() {
+    this.openId = this.$utils.openId;
+    if(this.openId){
+      this.getTokenAndphoneNum()
+    }
+    console.log(this.openId);
+  },
+  created() {
+    // this.carNumber = this.$route.query.carNumber  // 获取车牌号
+    // this.carColor = this.$route.query.carNumberColor  // 获取颜色   0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+    // this.currentTabActive = this.$route.query.parkFlag ? this.$route.query.parkFlag : 0   // 0在停   1历史
+    // console.log(this.carNumber)
+    // this.parkRecordList(this.carNumber)
+  },
+  methods: {
+    toNextPage(path) {
+      if (this.openId) {
+        this.$router.push({
+            name: path
+          }
+        );
+      } else {
+        this.$toast("请先登录");
+        this.$router.push({
+            name: "binDing"
+          }
+        );
+      }
+    },
+    toBindingPage() {
+      this.$router.push({
+          name: "binDing"
+        }
+      );
+    },
+    getTokenAndphoneNum(){
+      let jsondata = {
+        openid: this.$utils.openId,
+      }
+      jsondata.sign = this.$utils.signObject(jsondata)
+      console.log('停车记录传参  ' + JSON.stringify(jsondata));
+      getTokenByOpenId(jsondata).then(response => {
+        console.log(response)
+        this.phoneNum = response.data.phoneNum
+        console.log(response.data.token)
+      })
+    }
+  }
+};
 </script>
  
 <style scoped lang="scss">
@@ -44,21 +124,20 @@ export default {
     padding-top: 45px;
     display: flex;
     color: #ffbfbf;
-    .person-pic{
+    .person-pic {
       width: 64px;
       height: 64px;
       margin-right: 15px;
       background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
     }
   }
-  .person-con{
-    span{
+
+  .person-con {
+    span {
       font-size: 16px;
       font-weight: bold;
     }
   }
  
-  .mint-cell{
-    border-bottom: 1px solid #EFEDED;
-  }
+
 </style>
+const path = require('path')
+module.exports = {
+  css:{
+    loaderOptions:{
+      less:{
+        modifyVars:{
+          //通过本地less文件覆盖变量
+          // true; @import "your-less-file-path.less";
+          modifyVars: {
+            hack: `true; @import "${path.resolve(__dirname, './src/assets/css/resetVantUi.less')}";`
+           }
+        }
+      }
+    }
+  }
+}
+
+}