BJ_web_developers / wxgzh

Commit 002e5c7b8b665314d35c85f7b183e87e56d64243

Authored by 刘淇
1 parent 13b6a53a

添加车牌

Inline Side-by-side
Showing 12 changed files with 1072 additions and 15 deletions
src/assets/images/myCars/black.png 0 → 100644
View file @002e5c7

1.12 KB
src/assets/images/myCars/blue.png 0 → 100644
View file @002e5c7

1.18 KB
src/assets/images/myCars/camera.png 0 → 100644
View file @002e5c7

4.21 KB
src/assets/images/myCars/carPic.png 0 → 100644
View file @002e5c7

14 KB
src/assets/images/myCars/green.png 0 → 100644
View file @002e5c7

3.33 KB
src/assets/images/myCars/white.png 0 → 100644
View file @002e5c7

918 Bytes
src/assets/images/myCars/yellow.png 0 → 100644
View file @002e5c7

1.19 KB
src/main.js
  View file @002e5c7
@@ -6,21 +6,21 @@ import router from './router' @@ -6,21 +6,21 @@ import router from './router'
6 6
7 import './assets/css/reset.css' // 引入公共样式 7 import './assets/css/reset.css' // 引入公共样式
8 8
9 -// import h5Popup from 'vue-h5-popup' // 引入弹窗  
10 -// Vue.use(h5Popup)  
11 -  
12 9
13 // import MintUI from 'mint-ui' 10 // import MintUI from 'mint-ui'
14 // import 'mint-ui/lib/style.css' 11 // import 'mint-ui/lib/style.css'
15 // Vue.use(MintUI) // 引入MintUI 12 // Vue.use(MintUI) // 引入MintUI
16 13
17 - 14 +import Mint from 'mint-ui';
18 import 'mint-ui/lib/style.css' 15 import 'mint-ui/lib/style.css'
19 -import { MessageBox } from 'mint-ui'  
20 -// Vue.use(MessageBox)  
21 -Vue.prototype.$msgbox = MessageBox  
22 -import { Indicator } from 'mint-ui';  
23 -Vue.prototype.$Indicator = Indicator 16 +Vue.use(Mint);
  17 +
  18 +
  19 +// import { MessageBox } from 'mint-ui'
  20 +// // Vue.use(MessageBox)
  21 +// Vue.prototype.$msgbox = MessageBox
  22 +// import { Indicator } from 'mint-ui';
  23 +// Vue.prototype.$Indicator = Indicator
24 24
25 import { Field } from 'mint-ui'; 25 import { Field } from 'mint-ui';
26 26
@@ -45,9 +45,6 @@ Vue.prototype.$common = common @@ -45,9 +45,6 @@ Vue.prototype.$common = common
45 import variables from './utils/variables' // 公共验证 45 import variables from './utils/variables' // 公共验证
46 Vue.prototype.$variables = variables 46 Vue.prototype.$variables = variables
47 47
48 -import Mint from 'mint-ui';  
49 -import 'mint-ui/lib/style.css'  
50 -Vue.use(Mint);  
51 48
52 49
53 50
src/router/index.js
  View file @002e5c7
@@ -149,7 +149,23 @@ export default new Router({ @@ -149,7 +149,23 @@ export default new Router({
149 } 149 }
150 }, 150 },
151 151
  152 + {
  153 + path: '/addCar',
  154 + name: 'addCar',
  155 + component: () => import("@/views/carManage/addCar.vue"),
  156 + meta:{
  157 + title:'绑定车牌'
  158 + }
  159 + },
152 160
  161 + {
  162 + path: '/certification',
  163 + name: 'certification',
  164 + component: () => import("@/views/carManage/certification.vue"),
  165 + meta:{
  166 + title:'车牌认证'
  167 + }
  168 + },
153 169
154 170
155 // 171 //
src/views/carManage/addCar.vue 0 → 100644
  View file @002e5c7
  1 +<template>
  2 + <div id="page">
  3 +
  4 +
  5 + <div class="wrap">
  6 + <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
  7 +
  8 + <ul class="color-choose">
  9 + <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
  10 + :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"
  11 + >
  12 + {{i.name}}
  13 + </li>
  14 +
  15 + </ul>
  16 +
  17 +
  18 + <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
  19 + <div class="num-box">
  20 + <div class="num0" @click="clickFirstWrap()">
  21 + <span>{{formData.num0}}</span>
  22 + </div>
  23 + <div class="num1" @click="clickKeyWordWrap(1)"><span>{{formData.num1}}</span></div>
  24 + <!--<em class="spot"></em>-->
  25 + <div class="num1" @click="clickKeyWordWrap(2)"><span>{{formData.num2}}</span></div>
  26 + <div class="num1" @click="clickKeyWordWrap(3)"><span>{{formData.num3}}</span></div>
  27 + <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
  28 + <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
  29 + <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
  30 + <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span>
  31 + </div>
  32 + </div>
  33 +
  34 +
  35 + <!--<div class="radio-box">-->
  36 + <!--<label class="flex-items-center">-->
  37 + <!--<img v-if="formData.commonCard == 1"-->
  38 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  39 + <!--alt="">-->
  40 + <!--<img v-else-->
  41 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  42 + <!--alt="">-->
  43 + <!--<input type="radio"-->
  44 + <!--v-model="formData.commonCard"-->
  45 + <!--value="1"/>普通车牌-->
  46 + <!--</label>-->
  47 + <!--<label class="flex-items-center">-->
  48 + <!--<img v-if="formData.commonCard == 2"-->
  49 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  50 + <!--alt="">-->
  51 + <!--<img v-else-->
  52 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  53 + <!--alt="">-->
  54 + <!--<input type="radio"-->
  55 + <!--v-model="formData.commonCard"-->
  56 + <!--value="2"/>新能源车牌-->
  57 + <!--</label>-->
  58 + <!--</div>-->
  59 + <div class="tipWrap">
  60 + <span>温馨提示:</span>
  61 + <p>
  62 + 1、请绑定真实有效的车牌号，否则将无法使用车牌支付等功能。
  63 + </p>
  64 + <p>
  65 + 2、一个账号最多绑定三个车牌号码。
  66 + </p>
  67 + </div>
  68 + <div class="submit-box" @click="submitFn()">
  69 + 立即添加
  70 + </div>
  71 + </div>
  72 + <div class="first-word-wrap"
  73 + v-if="firstWrapStatus">
  74 + <div class="first-word"
  75 + @click="selectFirstWord($event)">
  76 + <div class="word">
  77 + <span>苏</span>
  78 + </div>
  79 + <div class="word">
  80 + <span>湘</span>
  81 + </div>
  82 + <div class="word">
  83 + <span>津</span>
  84 + </div>
  85 + <div class="word">
  86 + <span>鄂</span>
  87 + </div>
  88 + <div class="word">
  89 + <span>沪</span>
  90 + </div>
  91 + <div class="word">
  92 + <span>粤</span>
  93 + </div>
  94 + <div class="word">
  95 + <span>渝</span>
  96 + </div>
  97 + <div class="word">
  98 + <span>琼</span>
  99 + </div>
  100 + </div>
  101 + <div class="first-word"
  102 + @click="selectFirstWord($event)">
  103 + <div class="word">
  104 + <span>冀</span>
  105 + </div>
  106 + <div class="word">
  107 + <span>川</span>
  108 + </div>
  109 + <div class="word">
  110 + <span>晋</span>
  111 + </div>
  112 + <div class="word">
  113 + <span>贵</span>
  114 + </div>
  115 + <div class="word">
  116 + <span>辽</span>
  117 + </div>
  118 + <div class="word">
  119 + <span>云</span>
  120 + </div>
  121 + <div class="word">
  122 + <span>吉</span>
  123 + </div>
  124 + <div class="word">
  125 + <span>陕</span>
  126 + </div>
  127 + </div>
  128 + <div class="first-word"
  129 + @click="selectFirstWord($event)">
  130 + <div class="word">
  131 + <span>黑</span>
  132 + </div>
  133 + <div class="word">
  134 + <span>甘</span>
  135 + </div>
  136 + <div class="word">
  137 + <span>蒙</span>
  138 + </div>
  139 + <div class="word">
  140 + <span>青</span>
  141 + </div>
  142 + <div class="word">
  143 + <span>浙</span>
  144 + </div>
  145 + <div class="word">
  146 + <span>皖</span>
  147 + </div>
  148 + <div class="word">
  149 + <span>藏</span>
  150 + </div>
  151 + <div class="word">
  152 + <span>闽</span>
  153 + </div>
  154 + </div>
  155 + <div class="first-word"
  156 + @click="selectFirstWord($event)">
  157 + <div class="word">
  158 + <span>京</span>
  159 + </div>
  160 + <div class="word">
  161 + <span>赣</span>
  162 + </div>
  163 + <div class="word">
  164 + <span>桂</span>
  165 + </div>
  166 + <div class="word">
  167 + <span>鲁</span>
  168 + </div>
  169 + <div class="word">
  170 + <span>宁</span>
  171 + </div>
  172 + <div class="word">
  173 + <span>豫</span>
  174 + </div>
  175 + <div class="word">
  176 + <span>新</span>
  177 + </div>
  178 + <!--<div class="word">-->
  179 + <!--<span>学</span>-->
  180 + <!--</div>-->
  181 + <div class="word bordernone">
  182 + <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
  183 + </div>
  184 + </div>
  185 +
  186 + <!--<div class="first-word"-->
  187 + <!--@click="selectFirstWord($event)">-->
  188 + <!--<div class="word">-->
  189 + <!--<span>港</span>-->
  190 + <!--</div>-->
  191 + <!--<div class="word">-->
  192 + <!--<span>澳</span>-->
  193 + <!--</div>-->
  194 + <!--<div class="word">-->
  195 + <!--<span>领</span>-->
  196 + <!--</div>-->
  197 +
  198 + <!--<div class="word">-->
  199 + <!--<span>警</span>-->
  200 + <!--</div>-->
  201 +
  202 +
  203 + <!--<div class="word bordernone">-->
  204 + <!--</div>-->
  205 + <!--<div class="word bordernone">-->
  206 + <!--</div>-->
  207 + <!--<div class="word bordernone">-->
  208 + <!--</div>-->
  209 + <!--<div class="word bordernone">-->
  210 + <!--</div>-->
  211 + <!--</div>-->
  212 + </div>
  213 + <div class="keyboard-wrap" v-if="keyBoardStatus === true">
  214 + <!-- <div class="number-wrap"></div>
  215 + <div class="letter-wrap"></div>
  216 + <div class="cn-wrap"></div> -->
  217 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  218 + <span v-for="(item,index) in allKeyWord._1"
  219 + :key="index"
  220 + @click="clickKeyBoard(item)">{{item}}</span>
  221 + </div>
  222 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  223 + <span v-for="(item,index) in allKeyWord._2"
  224 + :key="index"
  225 + @click="clickKeyBoard(item)">{{item}}</span>
  226 + <span class="bordernone"></span>
  227 + <span class="bordernone"></span>
  228 + <span class="bordernone"></span>
  229 + <span class="bordernone"></span>
  230 + </div>
  231 + <div class="keyboard">
  232 + <span v-for="(item,index) in allKeyWord._3"
  233 + :key="index"
  234 + @click="clickKeyBoard(item)">{{item}}</span>
  235 + </div>
  236 + <div class="keyboard">
  237 + <span v-for="(item,index) in allKeyWord._4"
  238 + :key="index"
  239 + @click="clickKeyBoard(item)">{{item}}</span>
  240 + </div>
  241 + <div class="keyboard">
  242 + <span v-for="(item,index) in allKeyWord._5"
  243 + :key="index"
  244 + @click="clickKeyBoard(item)">{{item}}</span>
  245 + </div>
  246 + <div class="keyboard">
  247 + <span v-for="(item,index) in allKeyWord._6"
  248 + :key="index"
  249 + @click="clickKeyBoard(item)">{{item}}</span>
  250 + <span class="bordernone"></span>
  251 + <span class="bordernone"></span>
  252 + <span class="bordernone"></span>
  253 + <!-- <span class="bordernone" v-if="activeKeyWordIndex === 1"></span>
  254 + <span class="bordernone" v-if="activeKeyWordIndex === 1"></span> -->
  255 + <!-- <span @click="deleteWord" v-if="activeKeyWordIndex === 1">x</span> -->
  256 + </div>
  257 + <div class="keyboard" v-if="activeKeyWordIndex !== 1">
  258 + <span v-for="(item,index) in allKeyWord._7"
  259 + :key="index"
  260 + @click="clickKeyBoard(item)">{{item}}</span>
  261 + <span class="bordernone"></span>
  262 + <span class="delete" @click="deleteWord"><img src="../../assets/images/parkPay/icon-delete.png" alt=""></span>
  263 + </div>
  264 + <div class="cancel">
  265 + <span @click="keyBoardStatus = false">完成</span>
  266 + </div>
  267 + </div>
  268 +
  269 +
  270 + </div>
  271 +</template>
  272 +<script>
  273 +
  274 +
  275 +export default {
  276 + data() {
  277 + return {
  278 + colorList: [
  279 + {
  280 + name: "蓝牌",
  281 + id: "0"
  282 + },
  283 + {
  284 + name: "黄牌",
  285 + id: "1"
  286 + },
  287 + {
  288 + name: "白牌",
  289 + id: "2"
  290 + },
  291 + {
  292 + name: "黑牌",
  293 + id: "3"
  294 + },
  295 + {
  296 + name: "绿牌",
  297 + id: "4"
  298 + },
  299 + ],
  300 + currentColor: 0,
  301 + activeBG: "#0054C0",
  302 + formData: {
  303 + commonCard: "1",
  304 + num0: "苏",
  305 + num1: "B",
  306 + num2: "",
  307 + num3: "",
  308 + num4: "",
  309 + num5: "",
  310 + num6: "",
  311 + num7: ""
  312 + },
  313 + allKeyWord: {
  314 + _1: [1, 2, 3, 4, 5, 6, 7],
  315 + _2: [8, 9, 0],
  316 + _3: ["A", "B", "C", "D", "E", "F", "G"],
  317 + _4: ["H", "J", "K", "L", "M", "N", "O"],
  318 + _5: ["P", "Q", "R", "S", "T", "U", "V"],
  319 + _6: ["W", "X", "Y", "Z"],
  320 + _7: ["港", "澳", "学", "领", "警"]
  321 + },
  322 + activeKeyWordIndex: 1, // 当前车牌号
  323 + keyBoardStatus: false,
  324 + firstWrapStatus: false, // 选择弹窗
  325 + confirmTitle: "",
  326 + submitConfirm: false,
  327 + submitConfirmFalse: false,
  328 + submitConfirmText: ""
  329 + };
  330 + },
  331 + created() {
  332 + },
  333 + mounted() {
  334 + },
  335 + methods: {
  336 + chooseColor(index) { // 颜色选择
  337 + this.currentColor = index;
  338 + switch (this.currentColor) {
  339 + case 0 :
  340 + this.formData.commonCard = 1
  341 + return this.activeBG = "#0054C0";
  342 + break;
  343 + case 1 :
  344 + this.formData.commonCard = 1
  345 + return this.activeBG = "#FEBE00";
  346 + break;
  347 + case 2 :
  348 + this.formData.commonCard = 1
  349 + return this.activeBG = "#E4E5E7";
  350 + break;
  351 + case 3 :
  352 + this.formData.commonCard = 1
  353 + return this.activeBG = "#333333";
  354 + break;
  355 + case 4 :
  356 + this.formData.commonCard = 2
  357 + return this.activeBG = "#97DEA1";
  358 + break;
  359 + }
  360 + },
  361 + clickFirstWrap() {
  362 + // 点击第一个输入框
  363 + this.firstClickStatus = true;
  364 + this.firstWrapStatus = true;
  365 + this.keyBoardStatus = false;
  366 + this.formData.num0 = "";
  367 + },
  368 + selectFirstWord(event) {
  369 + // 选择省份
  370 + if (event.target.localName !== "span") {
  371 + return;
  372 + }
  373 + this.formData.num0 = event.target.innerText;
  374 + this.firstSelectStatus = true;
  375 + this.firstWrapStatus = false;
  376 + this.firstClickStatus = false;
  377 + this.keyBoardStatus = true;
  378 + this.activeKeyWordIndex = 1;
  379 + // this.$refs.num1.focus()
  380 + // document.getElementById('num1').focus()
  381 + },
  382 + clickKeyBoard(item) { // 点击自定义键盘
  383 + console.log(item);
  384 + this.formData["num" + this.activeKeyWordIndex] = item;
  385 + if (this.formData.commonCard === "1") {
  386 + this.activeKeyWordIndex++;
  387 + if (this.activeKeyWordIndex > 6) {
  388 + this.keyBoardStatus = false;
  389 + }
  390 + } else {
  391 + this.activeKeyWordIndex++;
  392 + if (this.activeKeyWordIndex > 7) {
  393 + this.keyBoardStatus = false;
  394 + }
  395 + }
  396 + },
  397 + deleteWord() { // 退格
  398 + // console.log(this.activeKeyWordIndex)
  399 + // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
  400 + if (this.activeKeyWordIndex > 1) {
  401 + this.formData["num" + (this.activeKeyWordIndex - 1)] = "";
  402 + this.activeKeyWordIndex--;
  403 + }
  404 + },
  405 + clickKeyWordWrap(activeKeyWordIndex) {
  406 + this.keyBoardStatus = true;
  407 + this.activeKeyWordIndex = activeKeyWordIndex;
  408 + this.formData["num" + this.activeKeyWordIndex] = "";
  409 + },
  410 + submitFn() {
  411 + let plateLicense;
  412 + if (this.formData.commonCard === "1") {
  413 + plateLicense = this.plate_license_1;
  414 + plateLicense = this.palindrome(plateLicense);
  415 + if (plateLicense.length < 7) {
  416 + this.$msgbox("提示", "请输入正确的车牌号");
  417 + return;
  418 + }
  419 + }
  420 + if (this.formData.commonCard === "2") {
  421 + plateLicense = this.plate_license_2;
  422 + plateLicense = this.palindrome(plateLicense);
  423 + if (plateLicense.length < 8) {
  424 + this.$msgbox("提示", "请输入正确的车牌号");
  425 + return;
  426 + }
  427 + }
  428 + this.$emit("getPlateLicense", plateLicense);
  429 + console.log(plateLicense);
  430 + this.$router.push({
  431 + path: "myCars",
  432 + query: {
  433 + carNumber: plateLicense,
  434 + carNumberColor: this.currentColor
  435 + }
  436 + });
  437 + },
  438 + palindrome(str) {
  439 + var arr = str.split("");
  440 + arr = arr.filter(function(val) {
  441 + return (
  442 + val !== " " &&
  443 + val !== "," &&
  444 + val !== "." &&
  445 + val !== "?" &&
  446 + val !== ":" &&
  447 + val !== ";" &&
  448 + val !== "`" &&
  449 + val !== "'" &&
  450 + val !== "_" &&
  451 + val !== "/" &&
  452 + val !== "-" &&
  453 + val !== "\\" &&
  454 + val !== "" &&
  455 + val !== "(" &&
  456 + val !== ")"
  457 + );
  458 + });
  459 + return arr.join("");
  460 + },
  461 + checkIsHasSpecialStr(str) {
  462 + var flag = false;
  463 + var arr = str.split("");
  464 + arr.forEach(val => {
  465 + if (
  466 + val === "!" ||
  467 + val === "}" ||
  468 + val === "{" ||
  469 + val === "]" ||
  470 + val === "[" ||
  471 + val === "&" ||
  472 + val === "$" ||
  473 + val === "@" ||
  474 + val === " " ||
  475 + val === "," ||
  476 + val === "." ||
  477 + val === "?" ||
  478 + val === ":" ||
  479 + val === ";" ||
  480 + val === "`" ||
  481 + val === "'" ||
  482 + val === "_" ||
  483 + val === "/" ||
  484 + val === "-" ||
  485 + val === "\\" ||
  486 + val === "" ||
  487 + val === "(" ||
  488 + val === ")"
  489 + ) {
  490 + flag = true;
  491 + }
  492 + });
  493 + return flag;
  494 + },
  495 + checkIsHasChineseStr(str) {
  496 + var Reg = /.*[\u4e00-\u9fa5]+.*/;
  497 + if (Reg.test(str)) {
  498 + return true;
  499 + }
  500 + return false;
  501 + }
  502 + },
  503 + computed: {
  504 + plate_license_1() {
  505 + return (
  506 + this.formData.num0 +
  507 + this.formData.num1 +
  508 + this.formData.num2 +
  509 + this.formData.num3 +
  510 + this.formData.num4 +
  511 + this.formData.num5 +
  512 + this.formData.num6
  513 + );
  514 + },
  515 + plate_license_2() {
  516 + return (
  517 + this.formData.num0 +
  518 + this.formData.num1 +
  519 + this.formData.num2 +
  520 + this.formData.num3 +
  521 + this.formData.num4 +
  522 + this.formData.num5 +
  523 + this.formData.num6 +
  524 + this.formData.num7
  525 + );
  526 + }
  527 + }
  528 +};
  529 +</script>
  530 +<style lang="scss" scoped>
  531 +
  532 +
  533 + .flex-items-center {
  534 + display: flex;
  535 + align-items: center;
  536 + }
  537 +
  538 + .wrap {
  539 + padding: 0 18px;
  540 + .radio-box {
  541 + display: flex;
  542 + align-items: center;
  543 + justify-content: flex-end;
  544 + margin-top: 18px;
  545 + text-align: right;
  546 + input[type="radio"] {
  547 + display: none;
  548 + }
  549 + label {
  550 + padding-left: 0.6rem;
  551 + cursor: pointer;
  552 + img {
  553 + width: 0.8rem;
  554 + margin-right: 0.1rem;
  555 + }
  556 + }
  557 + }
  558 +
  559 + .color-choose {
  560 + width: 265px;
  561 + height: 34px;
  562 + margin: 0 auto;
  563 + background: #F3F3F3;
  564 + border-radius: 6px;
  565 + display: flex;
  566 + li {
  567 + flex: 1;
  568 + text-align: center;
  569 + line-height: 34px;
  570 + border-radius: 6px;
  571 + }
  572 + }
  573 + .card-header {
  574 + font-size: 0.75rem;
  575 + margin: 0.2rem 0 0.5rem;
  576 + color: #4a4a4a;
  577 + }
  578 + // input输入框
  579 + .num-box {
  580 + display: flex;
  581 + justify-content: space-between;
  582 + align-items: center;
  583 + .spot {
  584 + width: 0.2rem;
  585 + height: 0.2rem;
  586 + border-radius: 50%;
  587 + background-color: #d8d8d8;
  588 + }
  589 + & > div {
  590 + width: 1.8rem;
  591 + height: 1.8rem;
  592 + border: 1px solid #e4e4e4;
  593 + &.first {
  594 + position: relative;
  595 + text-align: center;
  596 + line-height: 1.7rem;
  597 + font-weight: 200;
  598 + .input-wrap {
  599 + position: absolute;
  600 + top: 0;
  601 + left: 0;
  602 + right: 0;
  603 + bottom: 0;
  604 + &.active {
  605 + z-index: 100;
  606 + }
  607 + }
  608 + em {
  609 + color: #979797;
  610 + font-size: 1.6rem;
  611 + line-height: 1.7rem;
  612 + }
  613 + span {
  614 + display: inline-block;
  615 + width: 100%;
  616 + height: 100%;
  617 + // background-color: #9cbce2;
  618 + color: #828282;
  619 + line-height: 1.8rem;
  620 + }
  621 + }
  622 + &.active {
  623 + border: 1px solid #4a90e2;
  624 + &:after {
  625 + border-bottom: 0.5rem solid #4a90e2;
  626 + }
  627 + }
  628 + span {
  629 + display: flex;
  630 + align-items: center;
  631 + justify-content: center;
  632 + width: 100%;
  633 + height: 100%;
  634 + font-size: 1rem;
  635 + color: #828282;
  636 + &.first {
  637 + background-color: #9cbce2;
  638 + color: #fff;
  639 + text-indent: 0.4rem;
  640 + border-radius: 0;
  641 + }
  642 + }
  643 + }
  644 + }
  645 + .submit-box {
  646 + width: 100%;
  647 + height: 44px;
  648 + line-height: 44px;
  649 + border-radius: 4px;
  650 + font-size: 20px;
  651 + margin-top: 18px;
  652 + background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  653 + color: #fff;
  654 + text-align: center;
  655 + }
  656 + .info {
  657 + font-size: 0.5rem;
  658 + margin-top: 0.9rem;
  659 + color: #828282;
  660 + text-align: left;
  661 + img {
  662 + width: 0.6rem;
  663 + vertical-align: middle;
  664 + }
  665 + }
  666 + }
  667 +
  668 + .first-word-wrap {
  669 + // height: 9.4rem;
  670 + background-color: #D2D5DB;
  671 + padding: 0.6rem 0.8rem 1.1rem;
  672 + position: fixed;
  673 + bottom: 0;
  674 + left: 0;
  675 + right: 0;
  676 + .first-word {
  677 + display: flex;
  678 + justify-content: space-between;
  679 + margin-bottom: 0.45rem;
  680 + .word {
  681 + box-sizing: border-box;
  682 + width: 1.8rem;
  683 + height: 1.8rem;
  684 + // border: 1px solid #9cbce2;
  685 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  686 + border-radius: 0.16rem;
  687 + text-align: center;
  688 + &.bordernone {
  689 + border: none;
  690 + box-shadow: none
  691 + }
  692 + span {
  693 + box-sizing: border-box;
  694 + display: flex;
  695 + align-items: center;
  696 + justify-content: center;
  697 + text-align: center;
  698 + width: 100%;
  699 + height: 100%;
  700 + background-color: #fff;
  701 + color: #000;
  702 + // border: 1px solid #fff;
  703 + border-radius: 0.125rem;
  704 + }
  705 + img {
  706 + width: 1.6rem;
  707 + }
  708 + }
  709 + &:nth-last-of-type(1) {
  710 + margin-bottom: 0rem;
  711 + }
  712 + }
  713 + }
  714 +
  715 + .keyboard-wrap {
  716 + background-color: #D2D5DB;
  717 + position: fixed;
  718 + bottom: 0;
  719 + left: 0;
  720 + right: 0;
  721 + padding: 0.6rem 0.6rem 0.4rem;
  722 + .keyboard {
  723 + display: flex;
  724 + justify-content: space-between;
  725 + align-items: center;
  726 + height: 2rem;
  727 + margin-bottom: 0.3rem;
  728 + span {
  729 + text-align: center;
  730 + display: flex;
  731 + width: 1.8rem;
  732 + align-items: center;
  733 + justify-content: center;
  734 + height: 1.8rem;
  735 + margin: 0 0.3rem;
  736 + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
  737 + background-color: #fff;
  738 + border-radius: 0.125rem;
  739 + &:active {
  740 + background-color: #e4e4e4;
  741 + }
  742 + &.bordernone {
  743 + border: none;
  744 + box-shadow: none;
  745 + background-color: #D2D5DB;
  746 + &:active {
  747 + background-color: #D2D5DB;
  748 + }
  749 + }
  750 + &.delete {
  751 + background-color: #465266;
  752 + img {
  753 + width: 1.15rem;
  754 + }
  755 + }
  756 + }
  757 + }
  758 + .cancel {
  759 + display: flex;
  760 + justify-content: flex-end;
  761 + align-items: center;
  762 + span {
  763 + display: flex;
  764 + align-items: center;
  765 + justify-content: center;
  766 + width: 3.6rem;
  767 + height: 1.8rem;
  768 + background-color: #465266;
  769 + color: #fff;
  770 + border-radius: 0.125rem;
  771 + }
  772 + }
  773 + }
  774 +
  775 + .tipWrap{
  776 + margin-top: 20px;
  777 + p{
  778 + text-indent: 15px;
  779 + }
  780 + }
  781 +
  782 + .addCarNum {
  783 + height: 34px;
  784 + line-height: 34px;
  785 + background: #FFFFFF;
  786 + border-radius: 2px;
  787 + border: 1px solid #F2F1F1;
  788 + text-align: center;
  789 + span {
  790 + width: 16px;
  791 + height: 16px;
  792 + display: inline-block;
  793 + background: url("../../assets/images/parkPay/addCarNum.png") no-repeat;
  794 + margin-right: 10px;
  795 + vertical-align: sub;
  796 + cursor: pointer;
  797 + }
  798 + }
  799 +
  800 +</style>
src/views/carManage/certification.vue 0 → 100644
  View file @002e5c7
  1 +<template>
  2 + <div>
  3 + <group>
  4 + <cell>
  5 + <p slot="title">车牌号码:蒙123213</p>
  6 + <p slot class="carColor"></p>
  7 + </cell>
  8 + </group>
  9 +
  10 + <div style="padding: 15px;position: relative">
  11 + <div class="carPic"></div>
  12 + <div class="camera"></div>
  13 + <input type="file" class="upload" @change="addImg" ref="inputer"
  14 + accept="image/png,image/jpeg,image/gif,image/jpg"/>
  15 +
  16 + </div>
  17 +
  18 + <div class="tipWrap">
  19 + <span>照片须符合如下条件:</span>
  20 + <p>
  21 + 1、行驶证正面。
  22 + </p>
  23 + <p>
  24 + 2、信息清晰显示真实有效。
  25 + </p>
  26 + </div>
  27 +
  28 + <div style="padding: 20px 15px">
  29 + <x-button type="primary">提交认证</x-button>
  30 + </div>
  31 +
  32 + </div>
  33 +</template>
  34 +
  35 +<script>
  36 +export default {
  37 + name: "certification",
  38 + data() {
  39 + return {
  40 + formData: new FormData(),
  41 + // fil: ""
  42 + };
  43 + },
  44 + methods: {
  45 + addImg(event) {
  46 + let inputDOM = this.$refs.inputer;
  47 + // 通过DOM取文件数据
  48 + let fil = inputDOM.files;
  49 + console.log(inputDOM.files);
  50 + console.log(this.getObjectURL(fil))
  51 + // let oldLen = this.imgLen;
  52 + // for (let i = 0; i < this.fil.length; i++) {
  53 + // let size = Math.floor(this.fil[i].size / 1024);
  54 + // if (size > 5 * 1024 * 1024) {
  55 + // alert("请选择5M以内的图片！");
  56 + // return false;
  57 + // }
  58 + // }
  59 + },
  60 + getObjectURL(file) {
  61 + var url = null;
  62 + if (window.createObjectURL != undefined) { // basic
  63 + url = window.createObjectURL(file);
  64 + } else if (window.URL != undefined) { // mozilla(firefox)
  65 + url = window.URL.createObjectURL(file);
  66 + } else if (window.webkitURL != undefined) { // webkit or chrome
  67 + url = window.webkitURL.createObjectURL(file);
  68 + }
  69 + return url;
  70 + },
  71 + },
  72 +};
  73 +</script>
  74 +
  75 +<style scoped lang="scss">
  76 + > > > .weui-cells {
  77 + margin-top: 0;
  78 + }
  79 +
  80 + .carColor {
  81 + width: 28px;
  82 + height: 17px;
  83 + display: inline-block;
  84 + background: url("../../assets/images/myCars/black.png");
  85 + background-size: 100% 100%;
  86 + vertical-align: middle;
  87 + }
  88 +
  89 + .carPic {
  90 + width: 100%;
  91 + height: 160px;
  92 + background: url("../../assets/images/myCars/carPic.png");
  93 + background-size: 100% 100%;
  94 + }
  95 +
  96 + .camera {
  97 + position: absolute;
  98 + top: 50%;
  99 + left: 50%;
  100 + transform: translate(-50%, -50%);
  101 + width: 70px;
  102 + height: 70px;
  103 + background: url("../../assets/images/myCars/camera.png");
  104 + background-size: 100% 100%;
  105 + }
  106 +
  107 + .upload {
  108 + width: 100%;
  109 + height: 100%;
  110 + opacity: 0;
  111 + position: absolute;
  112 + top: 0;
  113 + left: 0;
  114 + z-index: 100;
  115 + }
  116 +
  117 + .tipWrap {
  118 + padding: 15px;
  119 + p {
  120 + text-indent: 15px;
  121 + }
  122 + }
  123 +</style>
src/views/carManage/myCars.vue
  View file @002e5c7
1 <template> 1 <template>
2 - <div>1myCars</div> 2 + <div>
  3 + <ul class="carsList">
  4 + <li>
  5 + <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
  6 + <p >
  7 + 蒙D12345 　<span class="carColor"></span>
  8 + </p>
  9 + <p class=" check-status">
  10 + 审核中
  11 + </p>
  12 + <!--<p class=" pass-status">-->
  13 + <!--已认证-->
  14 + <!--</p>-->
  15 + </div>
  16 + <div style="display: flex;justify-content: space-between">
  17 + <p>
  18 + 汽油车
  19 + </p>
  20 + <p style="color: blue" @click="deleteShowHandle">
  21 + 解绑车辆
  22 + </p>
  23 + <!--<p class=" pass-status">-->
  24 + <!--已认证-->
  25 + <!--</p>-->
  26 + </div>
  27 + <p class="top-border">
  28 + 您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
  29 + </p>
  30 + <!--<p class="top-border">-->
  31 + <!--您已经提交审核申请,请耐心等待-->
  32 + <!--</p>-->
  33 + <!--<p class="top-border">-->
  34 + <!--您可以查看历史停车记录了-->
  35 + <!--</p>-->
  36 + </li>
  37 + <li></li>
  38 + <li></li>
  39 + </ul>
  40 + <div style="padding: 20px 15px">
  41 + <x-button type="primary">立即添加</x-button>
  42 + </div>
  43 +
  44 + <div class="tipWrap">
  45 + <span>温馨提示:</span>
  46 + <p>
  47 + 1、车辆绑定后请提交行驶证进行真实性验证,48小时内反馈审核结果,如自行解绑车牌后,再次重新绑定，需重新审核认证。
  48 + </p>
  49 + <p>
  50 + 2、未认证车牌只支持当前停车费和历史欠费记录。
  51 + </p>
  52 + <p>
  53 + 3、认证车牌支持查看历史停车记录。
  54 + </p>
  55 + </div>
  56 +
  57 + <div v-transfer-dom>
  58 + <confirm v-model="deleteShow"
  59 + :title="提示"
  60 + @on-cancel="onCancel"
  61 + @on-confirm="onConfirm"
  62 + @on-show="onShow"
  63 + @on-hide="onHide">
  64 + <p style="text-align:center;">是否删除该车辆</p>
  65 + </confirm>
  66 + </div>
  67 +
  68 + </div>
3 </template> 69 </template>
4 70
5 <script> 71 <script>
6 export default { 72 export default {
7 - name: "myCars" 73 + name: "myCars",
  74 + data(){
  75 + return {
  76 + deleteShow: false
  77 + }
  78 + },
  79 + methods:{
  80 + deleteShowHandle(){
  81 + this.deleteShow = true
  82 + }
  83 + }
8 }; 84 };
9 </script> 85 </script>
10 86
11 -<style scoped> 87 +<style scoped lang="scss">
  88 + .carsList {
  89 + padding: 0 15px;
  90 + font-size: 12px;
  91 + > li {
  92 + /*height:100px;*/
  93 + margin-top: 15px;
  94 + padding: 10px;
  95 + border-radius: 10px;
  96 + box-shadow: 0 1px 3px #ddd;
  97 + }
  98 + }
  99 + .carColor{
  100 + width: 28px;
  101 + height: 17px;
  102 + display: inline-block;
  103 + background: url("../../assets/images/myCars/black.png");
  104 + background-size: 100% 100%;
  105 + vertical-align: middle;
  106 + }
  107 +
  108 + .check-status {
  109 + padding: 1px 8px;
  110 + border: 1px solid #ffbe00;
  111 + border-radius: 15px;
  112 + color: #ffbe00;
  113 + }
  114 +
  115 + .pass-status {
  116 + padding: 2px 8px;
  117 + border: 1px solid blue;
  118 + border-radius: 15px;
  119 + color: blue;
  120 + }
  121 +
  122 + .top-border {
  123 + margin-top: 6px;
  124 + padding-top: 6px;
  125 + border-top: 1px solid #ddd;
  126 + }
  127 + .tipWrap{
  128 + padding: 0 15px;
  129 + p{
  130 + text-indent: 15px;
  131 + }
  132 + }
12 133
13 </style> 134 </style>