微信公众号个人页面集合

liuqimichale
1 parent 0c49c87e
Showing 36 changed files with 415 additions and 79 deletions
build/utils.js
package-lock.json
package.json
src/assets/css/base.scss
src/assets/css/reset.css
src/assets/images/mySelf/photoBG.png
src/assets/images/mySelf/selfNavBg.png
src/assets/images/parkPay/addCarNum.png
src/assets/images/blackBG.png → src/assets/images/parkPay/blackBG.png
src/assets/images/blueBG.png → src/assets/images/parkPay/blueBG.png
src/assets/images/carBlack.png → src/assets/images/parkPay/carBlack.png
src/assets/images/carBlue.png → src/assets/images/parkPay/carBlue.png
src/assets/images/carGreen.png → src/assets/images/parkPay/carGreen.png
src/assets/images/carWhite.png → src/assets/images/parkPay/carWhite.png
src/assets/images/carYellow.png → src/assets/images/parkPay/carYellow.png
src/assets/images/choose.png → src/assets/images/parkPay/choose.png
src/assets/images/choosed.png → src/assets/images/parkPay/choosed.png
src/assets/images/greenBG.png → src/assets/images/parkPay/greenBG.png
src/assets/images/icon-delete.png → src/assets/images/parkPay/icon-delete.png
src/assets/images/icon_chose_n@2x.png → src/assets/images/parkPay/icon_chose_n@2x.png
@@ -61,7 +61,14 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: path.resolve(__dirname, '../src/assets/css/base.scss')
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
@@ -149,8 +149,7 @@
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
     },
     "array-flatten": {
       "version": "1.1.1",
@@ -5453,6 +5452,15 @@
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz",
       "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
+    "mint-ui": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npm.taobao.org/mint-ui/download/mint-ui-2.2.13.tgz",
+      "requires": {
+        "array-find-index": "^1.0.2",
+        "raf.js": "0.0.4",
+        "vue-lazyload": "^1.0.1"
+      }
+    },
     "mississippi": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-2.0.0.tgz",
@@ -6914,6 +6922,11 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "raf.js": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npm.taobao.org/raf.js/download/raf.js-0.0.4.tgz",
+      "integrity": "sha1-8Vr0RdJBsn+nExpXRQtn75xAL+w="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -8691,6 +8704,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz?cache=0&sync_timestamp=1613791698648&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-lazyload%2Fdownload%2Fvue-lazyload-1.3.3.tgz",
+      "integrity": "sha1-TfUKJxvem3TDyveiKNbgr1DVaC8="
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz?cache=0&sync_timestamp=1608188050165&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-13.7.3.tgz",
@@ -14,6 +14,8 @@
     "css-loader": "^3.6.0",
     "js-base64": "^3.6.0",
     "less-loader": "^4.1.0",
+    "mint-ui": "^2.2.13",
+    "node-sass": "^5.0.0",
     "sass-loader": "^7.3.1",
     "vue": "^2.5.2",
     "vue-h5-popup": "^1.0.2",
@@ -32,12 +34,13 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "crypto-js": "^4.0.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^3.6.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -46,8 +49,13 @@
     "postcss-url": "^7.2.1",
     "prettier": "^2.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
+    "sass-resources-loader": "^2.1.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^2.0.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^5.0.0",
     "swiper": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+$commonLeftRightPadding:0 10px;
@@ -57,3 +57,7 @@ body,html,#app
   height: 100%;
   background: #FCFCFC;
 }
+
+.leftRightPadding{
+  padding: 0 10px;
+}
@@ -6,9 +6,19 @@ import router from &#39;./router&#39;
  
 import './assets/css/reset.css'  // 引入公共样式
  
-import h5Popup from 'vue-h5-popup'; // 引入弹窗
+import h5Popup from 'vue-h5-popup' // 引入弹窗
 Vue.use(h5Popup)
  
+
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+Vue.use(MintUI)  // 引入MintUI
+
+
+//全局设置的基本样式
+import './assets/css/base.scss'
+
+
 import utils from './utils/utils' // 工具类
 Vue.prototype.$utils = utils
  
 import Vue from 'vue'
 import Router from 'vue-router'
-// import plateNumber from '@/components/plateNumber'
-import parkRecord from '@/components/parkRecord'
-import navigation from '@/components/navigation'
+import plateNumber from '@/views/parkPay/plateNumber'
+import parkRecord from '@/views/parkPay/parkRecord'
+import selfNav from '@/views/mySelf/selfNav'
  
 Vue.use(Router)
  
@@ -11,14 +11,14 @@ export default new Router({
     {
       path: '/',
       redirect: {
-        name: 'parkRecord'
+        name: 'selfNav'
       }
     },
-    {
-      path: '/navigation',
-      name: 'navigation',
-      component: navigation
-    },
+    // {
+    //   path: '/navigation',
+    //   name: 'navigation',
+    //   component: navigation
+    // },
  
     {
       path: '/parkRecord',
@@ -28,15 +28,53 @@ export default new Router({
     {
       path: '/plateNumber',
       name: 'plateNumber',
-      component: () => import("@/components/plateNumber.vue")
+      component: plateNumber
     },
  
     {
       path: '/orderPay',
       name: 'orderPay',
-      component: () => import("@/components/orderPay.vue")
+      component: () => import("@/views/parkPay/orderPay.vue")
+    },
+
+     //---------------- 个人页面导航
+    {
+      path: '/selfNav',
+      name: 'selfNav',
+      component: () => import("@/views/mySelf/selfNav.vue")
+    },
+
+    // ------------------------建议反馈
+    {
+      path: '/suggestionBack',
+      name: 'suggestionBack',
+      component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
+    },
+
+    // ------------------------停车记录
+    {
+      path: '/parkNotes',
+      name: 'parkNotes',
+      component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
+    },
+
+
+    // ------------------------停车记录
+    {
+      path: '/binDing',
+      name: 'binDing',
+      component: () => import("@/views/binding/binDing.vue")
     },
  
  
+
+
+
+
+
+
+
+
+
   ]
 })
+<template>
+  <div>
+
+    <mt-field label="手机号" placeholder="请输入正确的手机号" type="tel" v-model="phone" :attr="{ maxlength: 13 }"></mt-field>
+
+    <mt-field label="验证码" v-model="codeText">
+      <div class="getCode" @click="getCode">{{timeNum}}</div>
+    </mt-field>
+
+    <div style="margin-top: 34px" class="leftRightPadding">
+      <mt-button type="danger" size="large">绑定</mt-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'binDing',
+  data() {
+    return {
+      codeText: '',
+      phone: '',
+      timeText: '获取验证码',
+      timeNum: 60,
+    }
+  },
+  created(){
+    this.timeNum = this.timeText
+  },
+  methods: {
+    getCode: function () {
+      var _this = this
+      // this.timeText = this.timeNum+'S'
+      let Num = 5
+      var timer = setInterval(function () {
+        _this.timeNum = Num-- +'s'
+        if(Num== -1){
+          _this.timeNum = '获取验证码'
+          clearInterval(timer)
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .getCode {
+    width: 100px;
+    height: 48px;
+    line-height: 48px;
+    background: #ef4f4f;
+    color: #fff;
+    text-align: center;
+  }
+</style>
+<template>
+  <div class="leftRightPadding">
+    <p class="suggestion-tip">请选择您反馈的问题类型</p>
+    <ul class="suggestionList">
+      <li
+        @click="chooseHandle(index)"
+        v-for="(i, index) in suggestionList"
+        :key="i.id"
+        :class="{choosedActive: currentIndex==index}"
+      >
+        {{i.text}}
+      </li>
+    </ul>
+
+    <div class="clear"></div>
+
+    <mt-field label="" placeholder="请详细描述反馈问题，或提出改进建议。（300字以内）" type="textarea" rows="4" v-model="introduction" :attr="{ maxlength: 2 }"></mt-field>
+
+    <div  style="margin-top: 34px">
+      <mt-button type="danger" size="large">提交</mt-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'suggestionBack',
+  data() {
+    return {
+      suggestionList: [
+        { id: 1, text: 'APP问题' },
+        { id: 2, text: '支付问题' },
+        { id: 3, text: '停车场问题' },
+        { id: 4, text: '服务投诉' },
+        { id: 5, text: '改进建议' },
+        { id: 6, text: '其他问题' },
+      ],
+      currentIndex: 0,
+      introduction: '',
+    }
+  },
+  methods: {
+    chooseHandle: function (i) {
+      console.log(i)
+      this.currentIndex = i
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .suggestion-tip {
+    margin: 17px 0 13px;
+    color: #6666;
+  }
+
+  .suggestionList {
+
+    li {
+      float: left;
+      width: calc((100% - 19px) / 2);
+      height: 33px;
+      line-height: 33px;
+      margin-bottom: 16px;
+      border: 1px solid #B18181;
+      text-align: center;
+      font-size: 13px;
+      &:nth-child(odd) {
+        margin-right: 19px;
+      }
+    }
+    .choosedActive {
+      background: #F75959;
+      border: 1px solid #A51E1E;
+      color: #fff;
+    }
+
+  }
+</style>
+<template>
+    <div>
+      <ul class="notesList">
+        <li>车牌号: <span>蒙DMW169</span></li>
+        <li>车牌颜色: <span>蓝色</span></li>
+        <li>进场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>出场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>停车时长: <span>18分33秒</span></li>
+      </ul>
+      <ul class="notesList">
+        <li>车牌号: <span>蒙DMW169</span></li>
+        <li>车牌颜色: <span>蓝色</span></li>
+        <li>进场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>出场时间: <span>2020-12-19 12：59：18</span></li>
+        <li>停车时长: <span>18分33秒</span></li>
+      </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'parkRecord'
+}
+</script>
+
+<style scoped lang="scss">
+.notesList{
+  background: #fff;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+</style>
+<template>
+  <div>
+    <div class="person-bg">
+      <div class="person-ifo">
+        <div class="person-pic"></div>
+        <ul class="person-con">
+          <li>15911111111</li>
+          <li>账户余额: <span>￥100.00</span></li>
+          <li>我的卡券：<span>20张</span></li>
+        </ul>
+      </div>
+    </div>
+
+    <mt-cell title="会员卡"  is-link :to="{ name: 'Toast' }"></mt-cell>
+
+    <mt-cell title="车辆管理"  is-link :to="{ name: 'Toast' }"></mt-cell>
+
+    <mt-cell title="停车记录"  is-link :to="{ name: 'parkNotes' }"></mt-cell>
+
+    <mt-cell title="建议反馈"  is-link :to="{ name: 'suggestionBack' }"></mt-cell>
+
+    <div class="leftRightPadding" style="margin-top: 34px">
+      <mt-button type="danger" size="large">退出账户</mt-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selfNav'
+}
+</script>
+
+<style scoped lang="scss">
+  .person-bg {
+    height: 160px;
+    background: url("../../assets/images/mySelf/selfNavBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .person-ifo {
+    padding: $commonLeftRightPadding;
+    padding-top: 45px;
+    display: flex;
+    color: #ffbfbf;
+    .person-pic{
+      width: 64px;
+      height: 64px;
+      margin-right: 15px;
+      background: url("../../assets/images/mySelf/photoBG.png") no-repeat;
+    }
+  }
+  .person-con{
+    span{
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .mint-cell{
+    border-bottom: 1px solid #EFEDED;
+  }
+</style>
@@ -39,7 +39,7 @@
  
 <script>
 import Swiper from 'swiper' //  应入swiper
-import { swiperQuery } from '../api/navigation/navigation'
+import { swiperQuery } from '../../api/navigation/navigation'
 export default {
   name: 'navigation',
   data() {
@@ -111,7 +111,7 @@ export default {
     width: 200px;
     margin: 20px auto 10px;
     padding-left: 20px;
-    background: url("../assets/images/tip.png") no-repeat 0 center;
+    background: url("../../assets/images/parkPay/tip.png") no-repeat 0 center;
     background-size: 14px 14px;
     text-align: center;
   }
@@ -130,27 +130,27 @@ export default {
     color: #fff;
   }
   .carBlue {
-    background: url("../assets/images/blueBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carYellow {
-    background: url("../assets/images/yellowBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carGreen {
-    background: url("../assets/images/greenBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carWhite {
-    background: url("../assets/images/whiteBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carBlack {
-    background: url("../assets/images/blackBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
     background-size: 100% 100%;
   }
   .toParkRecord{
@@ -160,7 +160,7 @@ export default {
     line-height: 50px;
     font-size: 16px;
     text-align: center;
-    background: url("../assets/images/toParkRecord.png") no-repeat;
+    background: url("../../assets/images/parkPay/toParkRecord.png") no-repeat;
     background-size: 100% 50px;
     cursor: pointer;
   }
@@ -22,7 +22,7 @@
       </li>
     </ul>
     <div style="padding: 20px 18px">
-      <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
+      <div class="toPay" @click="toPay">微信支付</div>
     </div>
  
     <div v-if="appOrderTimeout">
@@ -51,7 +51,6 @@ export default {
       arrearageActFee: 0,
       arrearageDiscFee: 0,
       arrearageActFee: 0,
-      clientBrowser: '', // 客户端
       paySrcType: '', //支付的类型   101 是本次   103是历史欠费
       orderId: '',  //支付的订单
       webAppCode: '', // 微信code
@@ -65,7 +64,6 @@ export default {
     this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
     this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
     this.arrearageActFee = this.$route.query.arrearageActFee // 实收
-    this.clientBrowser = this.$utils.clientBrowser() //支付方式
     this.paySrcType = this.$route.query.paySrcType // 实收
     this.orderId = this.$route.query.ordeID // 订单号
     console.log(this.orderId)
@@ -73,10 +71,8 @@ export default {
  
     let userAgent = navigator.userAgent;
     this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
+    this.webAppCode = this.getCode();
  
-    if (this.clientBrowser == "微信") {
-      this.webAppCode = this.getCode();
-    }
   },
   methods: {
     getCode() {
@@ -115,35 +111,9 @@ export default {
     },
     dopay(orderID) {
       let me = this
-      if (this.clientBrowser == '支付宝') { // 支付宝支付
-        var jsondata = {
-          orderBigType: 100,
-          payOrderType: this.paySrcType,
-          rltOrderId: orderID,
-          payType: 1, // 1 是支付宝    2是微信
-          terminalSource: 7,
-          orderActFee: this.arrearageActFee,
-          orderTotalFee: this.arrearageTotalFee,
-          orderDicountFee: this.arrearageDiscFee,
-          payUserId: '',
-          terminalOS: this.isAndroid ? 'AND' : 'IOS',
-          couponType: 1, //优惠类型
-          couponCode: this.arrearageDiscFee,
-        };
  
-        doPay(jsondata).then(response => {
-          console.log(response)
-          if (response.code == 0) {//进场
-            window.location.href = response.data.h5PayRequest
-            // document.write(response.data);//打开支付表单
-          } else {//其他情况如【该卡号场内已存在】
-            console.log(response.message);
-          }
  
-        })
-      }
  
-      if (this.clientBrowser == '微信') { // 微信支付
         var vm = this
         //第一步获取openid
         var codeParams = {
@@ -208,7 +178,7 @@ export default {
           }
         })
  
-      }
+
     },
     toPay() {
       let me = this
@@ -277,27 +247,27 @@ export default {
   }
  
   .carBlue {
-    background: url("../assets/images/blueBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carYellow {
-    background: url("../assets/images/yellowBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carGreen {
-    background: url("../assets/images/greenBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carWhite {
-    background: url("../assets/images/whiteBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
   .carBlack {
-    background: url("../assets/images/blackBG.png") no-repeat;
+    background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
     background-size: 100% 100%;
   }
  
@@ -346,7 +316,7 @@ export default {
  
   .tip {
     padding-left: 40px;
-    background: url("../assets/images/tip.png") no-repeat 18px center;
+    background: url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
     background-size: 16px 16px;
     color: #666;
   }
@@ -358,7 +358,7 @@ export default {
     height: 25px;
     line-height: 25px;
     padding-left: 45px;
-    background: #FEF8DB url("../assets/images/tip.png") no-repeat 18px center;
+    background: #FEF8DB url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
     background-size: 18px 18px;
   }
  
@@ -377,23 +377,23 @@ export default {
     li:first-child {
       width: 150px;
       &.carBlue {
-        background: url("../assets/images/carBlue.png") no-repeat 90px center;
+        background: url("../../assets/images/parkPay/carBlue.png") no-repeat 90px center;
         background-size: 28px 17px;
       }
       &.carYellow {
-        background: url("../assets/images/carYellow.png") no-repeat 90px center;
+        background: url("../../assets/images/parkPay/carYellow.png") no-repeat 90px center;
         background-size: 28px 17px;
       }
       &.carGreen {
-        background: url("../assets/images/carGreen.png") no-repeat 90px center;
+        background: url("../../assets/images/parkPay/carGreen.png") no-repeat 90px center;
         background-size: 28px 17px;
       }
       &.carWhite {
-        background: url("../assets/images/carWhite.png") no-repeat 90px center;
+        background: url("../../assets/images/parkPay/carWhite.png") no-repeat 90px center;
         background-size: 28px 17px;
       }
       &.carBlack {
-        background: url("../assets/images/carBlack.png") no-repeat 90px center;
+        background: url("../../assets/images/parkPay/carBlack.png") no-repeat 90px center;
         background-size: 28px 17px;
       }
     }
@@ -448,14 +448,14 @@ export default {
  
   .cost-main-history{
     margin-bottom: 10px;
-    background:#fff url("../assets/images/choose.png") no-repeat 10px center;
+    background:#fff url("../../assets/images/parkPay/choose.png") no-repeat 10px center;
     background-size: 20px 20px;
     cursor: pointer;
   }
  
  
   .isChecked{
-    background:#fff url("../assets/images/choosed.png") no-repeat 10px center;
+    background:#fff url("../../assets/images/parkPay/choosed.png") no-repeat 10px center;
     background-size: 20px 20px;
   }
  
@@ -488,12 +488,12 @@ export default {
     justify-content: space-between;
     .check-btn{
       padding-left: 30px;
-      background: url("../assets/images/choose.png") no-repeat 0 center;
+      background: url("../../assets/images/parkPay/choose.png") no-repeat 0 center;
       background-size: 20px 20px;
       cursor: pointer;
     }
     .isAllChecked{
-      background: url("../assets/images/choosed.png") no-repeat 0 center;
+      background: url("../../assets/images/parkPay/choosed.png") no-repeat 0 center;
       background-size: 20px 20px;
     }
     .settle-btn{
@@ -508,7 +508,7 @@ export default {
  
   .noRecord {
     padding-top: 200px;
-    background: url("../assets/images/noRecord.png") no-repeat center 60px;
+    background: url("../../assets/images/parkPay/noRecord.png") no-repeat center 60px;
     background-size: 161px 124px;
     text-align: center;
   }
@@ -31,10 +31,10 @@
       <div class="radio-box">
         <label class="flex-items-center">
           <img v-if="formData.commonCard == 1"
-               src="../assets/images/icon_chose_s@2x.png"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
                alt="">
           <img v-else
-               src="../assets/images/icon_chose_n@2x.png"
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
                alt="">
           <input type="radio"
                  v-model="formData.commonCard"
@@ -42,10 +42,10 @@
         </label>
         <label class="flex-items-center">
           <img v-if="formData.commonCard == 2"
-               src="../assets/images/icon_chose_s@2x.png"
+               src="../../assets/images/parkPay/icon_chose_s@2x.png"
                alt="">
           <img v-else
-               src="../assets/images/icon_chose_n@2x.png"
+               src="../../assets/images/parkPay/icon_chose_n@2x.png"
                alt="">
           <input type="radio"
                  v-model="formData.commonCard"
@@ -57,6 +57,26 @@
       <div class="submit-box" @click="submitFn()">
         查询
       </div>
+
+      <div>
+        <p style="margin-bottom: 18px;margin-top: 18px;">已绑定车牌</p>
+        <ul class="bound-list">
+          <li>
+            <span>鄂B4567R</span>
+            <span>查看订单</span>
+          </li>
+          <li>
+            <span>鄂B4567R</span>
+            <span>查看订单</span>
+          </li>
+        </ul>
+        <div style="text-align: center;padding: 10px 0;">暂无绑定车牌</div>
+        <div class="addCarNum"><span></span>添加车辆</div>
+      </div>
+
+
+
+
     </div>
     <div class="first-word-wrap"
          v-if="firstWrapStatus">
@@ -218,7 +238,7 @@
               :key="index"
               @click="clickKeyBoard(item)">{{item}}</span>
         <span class="bordernone"></span>
-        <span class="delete" @click="deleteWord"><img src="../assets/images/icon-delete.png" alt=""></span>
+        <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
       </div>
       <div class="cancel">
         <span @click="keyBoardStatus = false">完成</span>
@@ -724,4 +744,33 @@ export default {
       }
     }
   }
+  .bound-list{
+    li{
+      padding: 0 10px;
+      height: 34px;
+      margin-bottom: 12px;
+      line-height: 34px;
+      background: #F2F1F1;
+      border-radius: 2px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .addCarNum{
+    height: 34px;
+    line-height: 34px;
+    background: #FFFFFF;
+    border-radius: 2px;
+    border: 1px solid #F2F1F1;
+    text-align: center;
+    span{
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
+      margin-right: 10px;
+      vertical-align: sub;
+      cursor: pointer;
+    }
+  }
 </style>