BJ_web_developers / wxgzh

Commit 76b0bb3decaabe48d1d7eafc3c90c176f4d32a3a

Authored by 刘淇
1 parent 002e5c7b

车辆认证

Inline Side-by-side
Showing 7 changed files with 329 additions and 84 deletions
src/api/myCars/myCars.js 0 → 100644
  View file @76b0bb3
  1 +import request from '@/utils/request'
  2 +
  3 +//车辆信息查询
  4 +export function queryUserCars(params) {
  5 + return request({
  6 + url: 'user/car/queryUserCars',
  7 + method: 'post',
  8 + data: params
  9 + })
  10 +}
  11 +
  12 +
  13 +
  14 +//车辆信息维护
  15 +export function userCarsInfoEdit(params) {
  16 + return request({
  17 + url: 'user/car/userCarsInfoEdit',
  18 + method: 'post',
  19 + data: params
  20 + })
  21 +}
  22 +
  23 +//车辆信息维护
  24 +export function uploadPic(params) {
  25 + return request({
  26 + url: 'pic/uploadPic',
  27 + method: 'post',
  28 + data: params,
  29 + // headers: {
  30 + // 'Content-Type': 'multipart/form-data'
  31 + // }
  32 + headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() },
  33 + contentType: false
  34 + })
  35 +}
  36 +
  37 +
  38 +
  39 +
... ...
src/assets/css/reset.css
  View file @76b0bb3
... ... @@ -61,3 +61,36 @@ body,html,#app
61 61 .leftRightPadding{
62 62 padding: 0 10px;
63 63 }
  64 +
  65 +
  66 +.carColor{
  67 + width: 28px;
  68 + height: 17px;
  69 + display: inline-block;
  70 + vertical-align: middle;
  71 +}
  72 +.blueBg{
  73 + background: url("../images/myCars/blue.png");
  74 + background-size: 100% 100%;
  75 +
  76 +}
  77 +.yellowBg{
  78 + background: url("../images/myCars/yellow.png");
  79 + background-size: 100% 100%;
  80 +
  81 +}
  82 +.whiteBg{
  83 + background: url("../images/myCars/white.png");
  84 + background-size: 100% 100%;
  85 +
  86 +}
  87 +.blackBg{
  88 + background: url("../images/myCars/black.png");
  89 + background-size: 100% 100%;
  90 +
  91 +}
  92 +.greenBg{
  93 + background: url("../images/myCars/green.png");
  94 + background-size: 100% 100%;
  95 +
  96 +}
... ...
src/main.js
  View file @76b0bb3
... ... @@ -16,9 +16,9 @@ import 'mint-ui/lib/style.css'
16 16 Vue.use(Mint);
17 17  
18 18  
19   -// import { MessageBox } from 'mint-ui'
20   -// // Vue.use(MessageBox)
21   -// Vue.prototype.$msgbox = MessageBox
  19 +import { MessageBox } from 'mint-ui'
  20 +// Vue.use(MessageBox)
  21 +Vue.prototype.$msgbox = MessageBox
22 22 // import { Indicator } from 'mint-ui';
23 23 // Vue.prototype.$Indicator = Indicator
24 24  
... ... @@ -68,9 +68,10 @@ import {
68 68 Confirm,
69 69 Toast,
70 70 dateFormat,
71   - Loading
  71 + Loading,
72 72 }from 'vux'
73 73  
  74 +
74 75 Vue.component('loading', Loading)
75 76 Vue.component('Toast', Toast)
76 77 Vue.component('Confirm', Confirm)
... ... @@ -98,6 +99,9 @@ Vue.use(LoadingPlugin)
98 99 import { ToastPlugin } from 'vux'
99 100 Vue.use(ToastPlugin)
100 101  
  102 +import { ConfirmPlugin } from 'vux'
  103 +Vue.use(ConfirmPlugin)
  104 +
101 105 router.beforeEach((to, from, next) => {
102 106 if(to.meta.title){
103 107 document.title = to.meta.title
... ...
src/utils/utils.js
  View file @76b0bb3
... ... @@ -203,7 +203,7 @@ export default {
203 203 deviceInfo: this.myDeviceInfo,
204 204 salt: salt,
205 205 sign_type: "md5",
206   - token: sessionStorage.getItem("wx_Token"),
  206 + token: '7f61e743f9e24f86b1673e32c16e181e', //7f61e743f9e24f86b1673e32c16e181e sessionStorage.getItem("wx_Token")
207 207 orgId: this.myOrgId
208 208 };
209 209 return reqData;
... ...
src/views/carManage/addCar.vue
  View file @76b0bb3
... ... @@ -271,6 +271,7 @@
271 271 </template>
272 272 <script>
273 273  
  274 +import { userCarsInfoEdit } from "@/api/myCars/myCars"
274 275  
275 276 export default {
276 277 data() {
... ... @@ -409,7 +410,7 @@ export default {
409 410 },
410 411 submitFn() {
411 412 let plateLicense;
412   - if (this.formData.commonCard === "1") {
  413 + if (this.formData.commonCard == "1") {
413 414 plateLicense = this.plate_license_1;
414 415 plateLicense = this.palindrome(plateLicense);
415 416 if (plateLicense.length < 7) {
... ... @@ -417,7 +418,7 @@ export default {
417 418 return;
418 419 }
419 420 }
420   - if (this.formData.commonCard === "2") {
  421 + if (this.formData.commonCard == "2") {
421 422 plateLicense = this.plate_license_2;
422 423 plateLicense = this.palindrome(plateLicense);
423 424 if (plateLicense.length < 8) {
... ... @@ -427,13 +428,47 @@ export default {
427 428 }
428 429 this.$emit("getPlateLicense", plateLicense);
429 430 console.log(plateLicense);
430   - this.$router.push({
431   - path: "myCars",
432   - query: {
433   - carNumber: plateLicense,
434   - carNumberColor: this.currentColor
  431 + this.userCarsInfoEdit(plateLicense)
  432 +
  433 + // this.$router.push({
  434 + // path: "myCars",
  435 + // query: {
  436 + // carNumber: plateLicense,
  437 + // carNumberColor: this.currentColor
  438 + // }
  439 + // });
  440 + },
  441 + // 添加车牌
  442 + userCarsInfoEdit(plateLicense){
  443 + let arr = []
  444 + // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  445 + let carlist = {
  446 + carNumber: plateLicense,
  447 + carNumberColor:this.currentColor.toString()
  448 + }
  449 + let jsondata = this.$utils.commonParams();
  450 + arr.push(carlist);
  451 + // 状态；1-已使用，0-未使用， 2-已使用+未使用
  452 + jsondata.optType = '00'
  453 + // jsondata.carNumberColor = this.currentColor.toString()
  454 + jsondata.carNumbers = JSON.stringify(arr)
  455 + jsondata.sign = this.$utils.signObject(jsondata);
  456 + console.log(JSON.stringify(jsondata))
  457 + userCarsInfoEdit(jsondata).then(data => {
  458 + console.log(data)
  459 + if (data.code == 0) {
  460 + this.$router.push({
  461 + path: "myCars",
  462 + // query: {
  463 + // carNumber: plateLicense,
  464 + // carNumberColor: this.currentColor
  465 + // }
  466 + });
  467 + }else{
  468 + this.$vux.toast.text(data.message, 'top')
435 469 }
436   - });
  470 +
  471 + })
437 472 },
438 473 palindrome(str) {
439 474 var arr = str.split("");
... ...
src/views/carManage/certification.vue
  View file @76b0bb3
... ... @@ -2,19 +2,18 @@
2 2 <div>
3 3 <group>
4 4 <cell>
5   - <p slot="title">车牌号码:蒙123213</p>
6   - <p slot class="carColor"></p>
  5 + <p slot="title">车牌号码:{{ $route.query.carNum }}</p>
  6 + <p slot class="carColor" :class="carBgFilter($route.query.carNumberColor)"></p>
7 7 </cell>
8 8 </group>
9 9  
10 10 <div style="padding: 15px;position: relative">
11   - <div class="carPic"></div>
  11 + <img :src="carPic" width="100%" height="180px">
12 12 <div class="camera"></div>
13 13 <input type="file" class="upload" @change="addImg" ref="inputer"
14 14 accept="image/png,image/jpeg,image/gif,image/jpg"/>
15 15  
16 16 </div>
17   -
18 17 <div class="tipWrap">
19 18 <span>照片须符合如下条件:</span>
20 19 <p>
... ... @@ -26,49 +25,106 @@
26 25 </div>
27 26  
28 27 <div style="padding: 20px 15px">
29   - <x-button type="primary">提交认证</x-button>
  28 + <x-button type="primary" @click.native="cerHandle">提交认证</x-button>
30 29 </div>
31 30  
32 31 </div>
33 32 </template>
34 33  
35 34 <script>
  35 +
  36 +import { userCarsInfoEdit, uploadPic } from "@/api/myCars/myCars";
36 37 export default {
37 38 name: "certification",
38 39 data() {
39 40 return {
  41 + carPic: require("../../assets/images/myCars/carPic.png"),
40 42 formData: new FormData(),
41   - // fil: ""
  43 + fil: ""
42 44 };
43 45 },
44 46 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   - // }
  47 + addImg(e) {
  48 + // this.formData = new window.FormData();
  49 + // 获取待上传的文件对象
  50 + this.fil = e.target.files[0];
  51 + console.log(this.fil);
  52 + let file = e.target.files[0];
  53 + // 声明一个读取文件对象
  54 + let reader = new FileReader();
  55 + // 开始读取文件内容
  56 + reader.readAsDataURL(file);
  57 + // 读取操作结束时触发
  58 + reader.onloadend = (ev) => {
  59 + // 赋值给vue对象属性
  60 + this.carPic = ev.target.result;
  61 + };
59 62 },
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);
  63 + cerHandle() {
  64 + if (this.fil) {
  65 + console.log(this.fil);
  66 + let params = new FormData();
  67 + params.append("picFile", this.fil);
  68 + params.append("fileType", 7);
  69 + params.append("token", "7f61e743f9e24f86b1673e32c16e181e");
  70 + uploadPic(params).then(data => {
  71 + console.log(data);
  72 + if (data.code == 0) {
  73 + let res = data.data;
  74 + this.rez(res);
  75 + } else {
  76 + this.$vux.toast.text(data.message, "top")
  77 + }
  78 + });
  79 + } else {
  80 + this.$vux.toast.text('请先上传图片再认证', "top")
68 81 }
69   - return url;
70 82 },
71   - },
  83 + rez(res) {
  84 + let arr = [];
  85 + let carlist = {
  86 + carNumber: this.$route.query.carNum,
  87 + cerPicturePath: res,
  88 + carNumberColor: this.$route.query.carNumberColor,
  89 + id: this.$route.query.id
  90 + };
  91 + let jsondata = this.$utils.commonParams();
  92 + arr.push(carlist);
  93 + // 状态；1-已使用，0-未使用， 2-已使用+未使用
  94 + jsondata.optType = "02";
  95 + jsondata.carNumbers = JSON.stringify(arr);
  96 + jsondata.sign = this.$utils.signObject(jsondata);
  97 + userCarsInfoEdit(jsondata).then(data => {
  98 + console.log(data);
  99 + if (data.code == 0) {
  100 + this.$router.push({
  101 + path: "myCars"
  102 + });
  103 + } else {
  104 + this.$vux.toast.text(data.message, "top");
  105 + }
  106 + });
  107 + },
  108 + carBgFilter: function(val) {
  109 + console.log(val);
  110 + // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  111 + if (val == 0) {
  112 + return "blueBg";
  113 + }
  114 + if (val == 1) {
  115 + return "yellowBg";
  116 + }
  117 + if (val == 2) {
  118 + return "whiteBg";
  119 + }
  120 + if (val == 3) {
  121 + return "blackBg";
  122 + }
  123 + if (val == 4) {
  124 + return "greenBg";
  125 + }
  126 + }
  127 + }
72 128 };
73 129 </script>
74 130  
... ... @@ -77,15 +133,6 @@ export default {
77 133 margin-top: 0;
78 134 }
79 135  
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 136 .carPic {
90 137 width: 100%;
91 138 height: 160px;
... ...
src/views/carManage/myCars.vue
  View file @76b0bb3
1 1 <template>
2 2 <div>
3 3 <ul class="carsList">
4   - <li>
  4 + <li v-for="(i, index) in carList" :key="i.id">
5 5 <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
6 6 <p >
7   - 蒙D12345 　<span class="carColor"></span>
  7 + {{ i.carNumber}} 　<span class="carColor" :class="carBgFilter(i.carNumberColor)"></span>
8 8 </p>
9   - <p class=" check-status">
  9 +
  10 + <p class=" certification-status" v-if="i.examineState == 0" @click="toCer(i)">
  11 + 立即认证
  12 + </p>
  13 + <p class=" check-status" v-if="i.examineState == 1">
10 14 审核中
11 15 </p>
  16 +
  17 + <p class=" pass-status" v-if="i.examineState == 2">
  18 + 通过
  19 + </p>
  20 + <p class="" v-if="i.examineState == 3">
  21 + 驳回
  22 + </p>
12 23 <!--<p class=" pass-status">-->
13 24 <!--已认证-->
14 25 <!--</p>-->
15 26 </div>
16 27 <div style="display: flex;justify-content: space-between">
17 28 <p>
18   - 汽油车
  29 + {{ i.carNumberColor==2?'新能源车':'汽油车'}}
19 30 </p>
20   - <p style="color: blue" @click="deleteShowHandle">
  31 + <p style="color: blue" @click="deleteShowHandle(i)">
21 32 解绑车辆
22 33 </p>
23 34 <!--<p class=" pass-status">-->
... ... @@ -25,7 +36,8 @@
25 36 <!--</p>-->
26 37 </div>
27 38 <p class="top-border">
28   - 您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
  39 + {{i.examineStateMsg}}
  40 + <!--您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务-->
29 41 </p>
30 42 <!--<p class="top-border">-->
31 43 <!--您已经提交审核申请,请耐心等待-->
... ... @@ -34,11 +46,9 @@
34 46 <!--您可以查看历史停车记录了-->
35 47 <!--</p>-->
36 48 </li>
37   - <li></li>
38   - <li></li>
39 49 </ul>
40   - <div style="padding: 20px 15px">
41   - <x-button type="primary">立即添加</x-button>
  50 + <div style="padding: 20px 15px" v-if="carList.length<3">
  51 + <x-button type="primary" @click.native="addCarNumb">立即添加</x-button>
42 52 </div>
43 53  
44 54 <div class="tipWrap">
... ... @@ -54,32 +64,110 @@
54 64 </p>
55 65 </div>
56 66  
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 +
67 68  
68 69 </div>
69 70 </template>
70 71  
71 72 <script>
  73 +
  74 +import { queryUserCars, userCarsInfoEdit } from "@/api/myCars/myCars"
72 75 export default {
  76 +
73 77 name: "myCars",
74 78 data(){
75 79 return {
76   - deleteShow: false
  80 + deleteShow: false, // 删除弹窗
  81 + carList:[],
  82 +
77 83 }
78 84 },
  85 + mounted(){
  86 + this.queryUserCars()
  87 + },
79 88 methods:{
80   - deleteShowHandle(){
81   - this.deleteShow = true
  89 + // 我的车辆查询
  90 + queryUserCars(){
  91 + let jsondata = this.$utils.commonParams();
  92 + console.log(jsondata)
  93 + jsondata.sign = this.$utils.signObject(jsondata);
  94 + queryUserCars(jsondata).then(data => {
  95 + console.log(data)
  96 + this.carList = data.data
  97 + })
  98 + },
  99 + toCer(i){
  100 + this.$router.push({
  101 + path:'certification',
  102 + query:{
  103 + carNum:i.carNumber,
  104 + carNumberColor:i.carNumberColor,
  105 + id: i.id
  106 + }
  107 + })
  108 + },
  109 + addCarNumb(){
  110 + this.$router.push({
  111 + path:'addCar'
  112 + })
  113 + },
  114 + deleteShowHandle(i){
  115 + let me = this
  116 + this.$vux.confirm.show({
  117 + title: '提示',
  118 + content: '是否删除该车辆',
  119 + // onShow () {
  120 + // console.log('plugin show')
  121 + // },
  122 + // onHide () {
  123 + // console.log('plugin hide')
  124 + // },
  125 + onCancel () {
  126 + console.log('plugin cancel')
  127 + },
  128 + onConfirm () {
  129 + console.log('plugin confirm')
  130 + me.deleteCarNumb(i)
  131 + }
  132 + })
  133 + },
  134 + deleteCarNumb(item){
  135 + console.log(item)
  136 + let arr = []
  137 + arr.push(item)
  138 + let jsondata = this.$utils.commonParams();
  139 + // 状态；1-已使用，0-未使用， 2-已使用+未使用
  140 + jsondata.optType = '01'
  141 + jsondata.carNumbers = JSON.stringify(arr)
  142 + jsondata.sign = this.$utils.signObject(jsondata);
  143 + userCarsInfoEdit(jsondata).then(data => {
  144 + console.log(data)
  145 + this.$vux.toast.text(data.message, 'top')
  146 + this.queryUserCars()
  147 + })
  148 + },
  149 + carBgFilter:function(val) {
  150 + console.log(val)
  151 + // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  152 + if(val == 0){
  153 + return 'blueBg'
  154 + }
  155 + if(val == 1){
  156 + return 'yellowBg'
  157 + }
  158 + if(val == 2){
  159 + return 'whiteBg'
  160 + }
  161 + if(val == 3){
  162 + return 'blackBg'
  163 + }
  164 + if(val == 4){
  165 + return 'greenBg'
  166 + }
82 167 }
  168 + },
  169 + filters:{
  170 +
83 171 }
84 172 };
85 173 </script>
... ... @@ -96,14 +184,7 @@ export default {
96 184 box-shadow: 0 1px 3px #ddd;
97 185 }
98 186 }
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   - }
  187 +
107 188  
108 189 .check-status {
109 190 padding: 1px 8px;
... ... @@ -118,6 +199,12 @@ export default {
118 199 border-radius: 15px;
119 200 color: blue;
120 201 }
  202 + .certification-status{
  203 + padding: 2px 8px;
  204 + border: 1px solid red;
  205 + border-radius: 15px;
  206 + color: red;
  207 + }
121 208  
122 209 .top-border {
123 210 margin-top: 6px;
... ... @@ -125,7 +212,7 @@ export default {
125 212 border-top: 1px solid #ddd;
126 213 }
127 214 .tipWrap{
128   - padding: 0 15px;
  215 + padding: 15px 15px 0;
129 216 p{
130 217 text-indent: 15px;
131 218 }
... ...