From 002e5c7b8b665314d35c85f7b183e87e56d64243 Mon Sep 17 00:00:00 2001
From: liugongyu <290219706@qq.com>
Date: Fri, 7 Jan 2022 16:12:44 +0800
Subject: [PATCH] 添加车牌

---
 src/assets/images/myCars/black.png    | Bin 0 -> 1143 bytes
 src/assets/images/myCars/blue.png     | Bin 0 -> 1205 bytes
 src/assets/images/myCars/camera.png   | Bin 0 -> 4313 bytes
 src/assets/images/myCars/carPic.png   | Bin 0 -> 14313 bytes
 src/assets/images/myCars/green.png    | Bin 0 -> 3411 bytes
 src/assets/images/myCars/white.png    | Bin 0 -> 918 bytes
 src/assets/images/myCars/yellow.png   | Bin 0 -> 1223 bytes
 src/main.js                           |  21 +++++++++------------
 src/router/index.js                   |  16 ++++++++++++++++
 src/views/carManage/addCar.vue        | 800 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/carManage/certification.vue | 123 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/carManage/myCars.vue        | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 12 files changed, 1072 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/myCars/black.png
 create mode 100644 src/assets/images/myCars/blue.png
 create mode 100644 src/assets/images/myCars/camera.png
 create mode 100644 src/assets/images/myCars/carPic.png
 create mode 100644 src/assets/images/myCars/green.png
 create mode 100644 src/assets/images/myCars/white.png
 create mode 100644 src/assets/images/myCars/yellow.png
 create mode 100644 src/views/carManage/addCar.vue
 create mode 100644 src/views/carManage/certification.vue

diff --git a/src/assets/images/myCars/black.png b/src/assets/images/myCars/black.png
new file mode 100644
index 0000000..9a90e62
Binary files /dev/null and b/src/assets/images/myCars/black.png differ
diff --git a/src/assets/images/myCars/blue.png b/src/assets/images/myCars/blue.png
new file mode 100644
index 0000000..42c87da
Binary files /dev/null and b/src/assets/images/myCars/blue.png differ
diff --git a/src/assets/images/myCars/camera.png b/src/assets/images/myCars/camera.png
new file mode 100644
index 0000000..f8fdbae
Binary files /dev/null and b/src/assets/images/myCars/camera.png differ
diff --git a/src/assets/images/myCars/carPic.png b/src/assets/images/myCars/carPic.png
new file mode 100644
index 0000000..b3b6d9d
Binary files /dev/null and b/src/assets/images/myCars/carPic.png differ
diff --git a/src/assets/images/myCars/green.png b/src/assets/images/myCars/green.png
new file mode 100644
index 0000000..b07b815
Binary files /dev/null and b/src/assets/images/myCars/green.png differ
diff --git a/src/assets/images/myCars/white.png b/src/assets/images/myCars/white.png
new file mode 100644
index 0000000..d07b03b
Binary files /dev/null and b/src/assets/images/myCars/white.png differ
diff --git a/src/assets/images/myCars/yellow.png b/src/assets/images/myCars/yellow.png
new file mode 100644
index 0000000..507cbaf
Binary files /dev/null and b/src/assets/images/myCars/yellow.png differ
diff --git a/src/main.js b/src/main.js
index 831ba58..6976b61 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,21 +6,21 @@ import router from './router'
 
 import './assets/css/reset.css'  // 引入公共样式
 
-// 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 Mint from 'mint-ui';
 import 'mint-ui/lib/style.css'
-import { MessageBox } from 'mint-ui'
-// Vue.use(MessageBox)
-Vue.prototype.$msgbox = MessageBox
-import { Indicator } from 'mint-ui';
-Vue.prototype.$Indicator = Indicator
+Vue.use(Mint);
+
+
+// import { MessageBox } from 'mint-ui'
+// // Vue.use(MessageBox)
+// Vue.prototype.$msgbox = MessageBox
+// import { Indicator } from 'mint-ui';
+// Vue.prototype.$Indicator = Indicator
 
 import { Field } from 'mint-ui';
 
@@ -45,9 +45,6 @@ Vue.prototype.$common = common
 import variables from './utils/variables' // 公共验证
 Vue.prototype.$variables = variables
 
-import Mint from 'mint-ui';
-import 'mint-ui/lib/style.css'
-Vue.use(Mint);
 
 
 
diff --git a/src/router/index.js b/src/router/index.js
index 1c658ae..41ce1f8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -149,7 +149,23 @@ export default new Router({
       }
     },
 
+    {
+      path: '/addCar',
+      name: 'addCar',
+      component: () => import("@/views/carManage/addCar.vue"),
+      meta:{
+        title:'绑定车牌'
+      }
+    },
 
+    {
+      path: '/certification',
+      name: 'certification',
+      component: () => import("@/views/carManage/certification.vue"),
+      meta:{
+        title:'车牌认证'
+      }
+    },
 
 
     //
diff --git a/src/views/carManage/addCar.vue b/src/views/carManage/addCar.vue
new file mode 100644
index 0000000..3f5b51a
--- /dev/null
+++ b/src/views/carManage/addCar.vue
@@ -0,0 +1,800 @@
+<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="tipWrap">
+        <span>温馨提示:</span>
+        <p>
+          1、请绑定真实有效的车牌号，否则将无法使用车牌支付等功能。
+        </p>
+        <p>
+          2、一个账号最多绑定三个车牌号码。
+        </p>
+      </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">-->
+        <!--<span>学</span>-->
+        <!--</div>-->
+        <div class="word bordernone">
+          <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
+        </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 bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</div>-->
+      <!--<div class="word bordernone">-->
+      <!--</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>
+
+
+  </div>
+</template>
+<script>
+
+
+export default {
+  data() {
+    return {
+      colorList: [
+        {
+          name: "蓝牌",
+          id: "0"
+        },
+        {
+          name: "黄牌",
+          id: "1"
+        },
+        {
+          name: "白牌",
+          id: "2"
+        },
+        {
+          name: "黑牌",
+          id: "3"
+        },
+        {
+          name: "绿牌",
+          id: "4"
+        },
+      ],
+      currentColor: 0,
+      activeBG: "#0054C0",
+      formData: {
+        commonCard: "1",
+        num0: "苏",
+        num1: "B",
+        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: ""
+    };
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    chooseColor(index) { // 颜色选择
+      this.currentColor = index;
+      switch (this.currentColor) {
+        case 0 :
+          this.formData.commonCard = 1
+          return this.activeBG = "#0054C0";
+          break;
+        case 1 :
+          this.formData.commonCard = 1
+          return this.activeBG = "#FEBE00";
+          break;
+        case 2 :
+          this.formData.commonCard = 1
+          return this.activeBG = "#E4E5E7";
+          break;
+        case 3 :
+          this.formData.commonCard = 1
+          return this.activeBG = "#333333";
+          break;
+        case 4 :
+          this.formData.commonCard = 2
+          return this.activeBG = "#97DEA1";
+          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.$msgbox("提示", "请输入正确的车牌号");
+          return;
+        }
+      }
+      if (this.formData.commonCard === "2") {
+        plateLicense = this.plate_license_2;
+        plateLicense = this.palindrome(plateLicense);
+        if (plateLicense.length < 8) {
+          this.$msgbox("提示", "请输入正确的车牌号");
+          return;
+        }
+      }
+      this.$emit("getPlateLicense", plateLicense);
+      console.log(plateLicense);
+      this.$router.push({
+        path: "myCars",
+        query: {
+          carNumber: plateLicense,
+          carNumberColor: this.currentColor
+        }
+      });
+    },
+    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;
+      }
+    }
+  }
+
+  .tipWrap{
+    margin-top: 20px;
+    p{
+      text-indent: 15px;
+    }
+  }
+
+  .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>
diff --git a/src/views/carManage/certification.vue b/src/views/carManage/certification.vue
new file mode 100644
index 0000000..1bcacf4
--- /dev/null
+++ b/src/views/carManage/certification.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <group>
+      <cell>
+        <p slot="title">车牌号码:蒙123213</p>
+        <p slot class="carColor"></p>
+      </cell>
+    </group>
+
+    <div style="padding: 15px;position: relative">
+      <div class="carPic"></div>
+      <div class="camera"></div>
+      <input type="file" class="upload" @change="addImg" ref="inputer"
+             accept="image/png,image/jpeg,image/gif,image/jpg"/>
+
+    </div>
+
+    <div class="tipWrap">
+      <span>照片须符合如下条件:</span>
+      <p>
+        1、行驶证正面。
+      </p>
+      <p>
+        2、信息清晰显示真实有效。
+      </p>
+    </div>
+
+    <div style="padding: 20px 15px">
+      <x-button type="primary">提交认证</x-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "certification",
+  data() {
+    return {
+      formData: new FormData(),
+      // fil: ""
+    };
+  },
+  methods: {
+    addImg(event) {
+      let inputDOM = this.$refs.inputer;
+      // 通过DOM取文件数据
+      let fil = inputDOM.files;
+      console.log(inputDOM.files);
+      console.log(this.getObjectURL(fil))
+      // let oldLen = this.imgLen;
+      // for (let i = 0; i < this.fil.length; i++) {
+      //   let size = Math.floor(this.fil[i].size / 1024);
+      //   if (size > 5 * 1024 * 1024) {
+      //     alert("请选择5M以内的图片！");
+      //     return false;
+      //   }
+      // }
+    },
+    getObjectURL(file) {
+      var url = null;
+      if (window.createObjectURL != undefined) { // basic
+        url = window.createObjectURL(file);
+      } else if (window.URL != undefined) { // mozilla(firefox)
+        url = window.URL.createObjectURL(file);
+      } else if (window.webkitURL != undefined) { // webkit or chrome
+        url = window.webkitURL.createObjectURL(file);
+      }
+      return url;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  > > > .weui-cells {
+    margin-top: 0;
+  }
+
+  .carColor {
+    width: 28px;
+    height: 17px;
+    display: inline-block;
+    background: url("../../assets/images/myCars/black.png");
+    background-size: 100% 100%;
+    vertical-align: middle;
+  }
+
+  .carPic {
+    width: 100%;
+    height: 160px;
+    background: url("../../assets/images/myCars/carPic.png");
+    background-size: 100% 100%;
+  }
+
+  .camera {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 70px;
+    height: 70px;
+    background: url("../../assets/images/myCars/camera.png");
+    background-size: 100% 100%;
+  }
+
+  .upload {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+
+  .tipWrap {
+    padding: 15px;
+    p {
+      text-indent: 15px;
+    }
+  }
+</style>
diff --git a/src/views/carManage/myCars.vue b/src/views/carManage/myCars.vue
index 74550ac..3302399 100644
--- a/src/views/carManage/myCars.vue
+++ b/src/views/carManage/myCars.vue
@@ -1,13 +1,134 @@
 <template>
-    <div>1myCars</div>
+  <div>
+    <ul class="carsList">
+      <li>
+        <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
+          <p >
+            蒙D12345 　<span class="carColor"></span>
+          </p>
+          <p class=" check-status">
+            审核中
+          </p>
+          <!--<p class=" pass-status">-->
+          <!--已认证-->
+          <!--</p>-->
+        </div>
+        <div style="display: flex;justify-content: space-between">
+          <p>
+            汽油车
+          </p>
+          <p style="color: blue" @click="deleteShowHandle">
+            解绑车辆
+          </p>
+          <!--<p class=" pass-status">-->
+          <!--已认证-->
+          <!--</p>-->
+        </div>
+        <p class="top-border">
+          您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
+        </p>
+        <!--<p class="top-border">-->
+        <!--您已经提交审核申请,请耐心等待-->
+        <!--</p>-->
+        <!--<p class="top-border">-->
+        <!--您可以查看历史停车记录了-->
+        <!--</p>-->
+      </li>
+      <li></li>
+      <li></li>
+    </ul>
+    <div style="padding: 20px 15px">
+      <x-button type="primary">立即添加</x-button>
+    </div>
+
+    <div class="tipWrap">
+      <span>温馨提示:</span>
+      <p>
+        1、车辆绑定后请提交行驶证进行真实性验证,48小时内反馈审核结果,如自行解绑车牌后,再次重新绑定，需重新审核认证。
+      </p>
+      <p>
+        2、未认证车牌只支持当前停车费和历史欠费记录。
+      </p>
+      <p>
+        3、认证车牌支持查看历史停车记录。
+      </p>
+    </div>
+
+    <div v-transfer-dom>
+      <confirm v-model="deleteShow"
+               :title="提示"
+               @on-cancel="onCancel"
+               @on-confirm="onConfirm"
+               @on-show="onShow"
+               @on-hide="onHide">
+        <p style="text-align:center;">是否删除该车辆</p>
+      </confirm>
+    </div>
+
+  </div>
 </template>
 
 <script>
 export default {
-  name: "myCars"
+  name: "myCars",
+  data(){
+    return {
+      deleteShow: false
+    }
+  },
+  methods:{
+    deleteShowHandle(){
+      this.deleteShow = true
+    }
+  }
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  .carsList {
+    padding: 0 15px;
+    font-size: 12px;
+    > li {
+      /*height:100px;*/
+      margin-top: 15px;
+      padding: 10px;
+      border-radius: 10px;
+      box-shadow: 0 1px 3px #ddd;
+    }
+  }
+  .carColor{
+    width: 28px;
+    height: 17px;
+    display: inline-block;
+    background: url("../../assets/images/myCars/black.png");
+    background-size: 100% 100%;
+    vertical-align: middle;
+  }
+
+  .check-status {
+    padding: 1px 8px;
+    border: 1px solid #ffbe00;
+    border-radius: 15px;
+    color: #ffbe00;
+  }
+
+  .pass-status {
+    padding: 2px 8px;
+    border: 1px solid blue;
+    border-radius: 15px;
+    color: blue;
+  }
+
+  .top-border {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid #ddd;
+  }
+  .tipWrap{
+    padding: 0 15px;
+    p{
+      text-indent: 15px;
+    }
+  }
 
 </style>
--
libgit2 0.21.4