车辆认证

刘淇
1 parent 002e5c7b
Showing 7 changed files with 329 additions and 84 deletions
src/api/myCars/myCars.js
src/assets/css/reset.css
src/main.js
src/utils/utils.js
src/views/carManage/addCar.vue
src/views/carManage/certification.vue
src/views/carManage/myCars.vue
+import request from '@/utils/request'
+
+//车辆信息查询
+export function queryUserCars(params) {
+  return request({
+    url: 'user/car/queryUserCars',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
+//车辆信息维护
+export function userCarsInfoEdit(params) {
+  return request({
+    url: 'user/car/userCarsInfoEdit',
+    method: 'post',
+    data: params
+  })
+}
+
+//车辆信息维护
+export function uploadPic(params) {
+  return request({
+    url: 'pic/uploadPic',
+    method: 'post',
+    data: params,
+    // headers: {
+    //   'Content-Type': 'multipart/form-data'
+    // }
+    headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() },
+    contentType: false
+  })
+}
+
+
+
+
@@ -61,3 +61,36 @@ body,html,#app
 .leftRightPadding{
   padding: 0 10px;
 }
+
+
+.carColor{
+  width: 28px;
+  height: 17px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.blueBg{
+  background: url("../images/myCars/blue.png");
+  background-size: 100% 100%;
+
+}
+.yellowBg{
+  background: url("../images/myCars/yellow.png");
+  background-size: 100% 100%;
+
+}
+.whiteBg{
+  background: url("../images/myCars/white.png");
+  background-size: 100% 100%;
+
+}
+.blackBg{
+  background: url("../images/myCars/black.png");
+  background-size: 100% 100%;
+
+}
+.greenBg{
+  background: url("../images/myCars/green.png");
+  background-size: 100% 100%;
+
+}
@@ -16,9 +16,9 @@ import &#39;mint-ui/lib/style.css&#39;
 Vue.use(Mint);
-// import { MessageBox } from 'mint-ui'
-// // Vue.use(MessageBox)
-// Vue.prototype.$msgbox = MessageBox
+import { MessageBox } from 'mint-ui'
+// Vue.use(MessageBox)
+Vue.prototype.$msgbox = MessageBox
 // import { Indicator } from 'mint-ui';
 // Vue.prototype.$Indicator = Indicator
@@ -68,9 +68,10 @@ import {
   Confirm,
   Toast,
   dateFormat,
-  Loading
+  Loading,
 }from 'vux'
+
 Vue.component('loading', Loading)
 Vue.component('Toast', Toast)
 Vue.component('Confirm', Confirm)
@@ -98,6 +99,9 @@ Vue.use(LoadingPlugin)
 import  { ToastPlugin } from 'vux'
 Vue.use(ToastPlugin)
+import  { ConfirmPlugin } from 'vux'
+Vue.use(ConfirmPlugin)
+
 router.beforeEach((to, from, next) => {
   if(to.meta.title){
     document.title = to.meta.title
@@ -203,7 +203,7 @@ export default {
       deviceInfo: this.myDeviceInfo,
       salt: salt,
       sign_type: "md5",
-      token: sessionStorage.getItem("wx_Token"),
+      token: '7f61e743f9e24f86b1673e32c16e181e',  //7f61e743f9e24f86b1673e32c16e181e   sessionStorage.getItem("wx_Token")
       orgId: this.myOrgId
     };
     return reqData;
@@ -271,6 +271,7 @@
 </template>
 <script>
+import { userCarsInfoEdit } from "@/api/myCars/myCars"
 export default {
   data() {
@@ -409,7 +410,7 @@ export default {
     },
     submitFn() {
       let plateLicense;
-      if (this.formData.commonCard === "1") {
+      if (this.formData.commonCard == "1") {
         plateLicense = this.plate_license_1;
         plateLicense = this.palindrome(plateLicense);
         if (plateLicense.length < 7) {
@@ -417,7 +418,7 @@ export default {
           return;
         }
       }
-      if (this.formData.commonCard === "2") {
+      if (this.formData.commonCard == "2") {
         plateLicense = this.plate_license_2;
         plateLicense = this.palindrome(plateLicense);
         if (plateLicense.length < 8) {
@@ -427,13 +428,47 @@ export default {
       }
       this.$emit("getPlateLicense", plateLicense);
       console.log(plateLicense);
-      this.$router.push({
-        path: "myCars",
-        query: {
-          carNumber: plateLicense,
-          carNumberColor: this.currentColor
+      this.userCarsInfoEdit(plateLicense)
+
+      // this.$router.push({
+      //   path: "myCars",
+      //   query: {
+      //     carNumber: plateLicense,
+      //     carNumberColor: this.currentColor
+      //   }
+      // });
+    },
+    // 添加车牌
+    userCarsInfoEdit(plateLicense){
+      let arr = []
+      // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+      let carlist = {
+        carNumber: plateLicense,
+        carNumberColor:this.currentColor.toString()
+      }
+      let jsondata =  this.$utils.commonParams();
+      arr.push(carlist);
+      // 状态；1-已使用，0-未使用， 2-已使用+未使用
+      jsondata.optType = '00'
+      // jsondata.carNumberColor = this.currentColor.toString()
+      jsondata.carNumbers = JSON.stringify(arr)
+      jsondata.sign = this.$utils.signObject(jsondata);
+      console.log(JSON.stringify(jsondata))
+      userCarsInfoEdit(jsondata).then(data => {
+        console.log(data)
+        if (data.code == 0) {
+          this.$router.push({
+            path: "myCars",
+            // query: {
+            //   carNumber: plateLicense,
+            //   carNumberColor: this.currentColor
+            // }
+          });
+        }else{
+          this.$vux.toast.text(data.message, 'top')
         }
-      });
+
+      })
     },
     palindrome(str) {
       var arr = str.split("");
@@ -2,19 +2,18 @@
   <div>
     <group>
       <cell>
-        <p slot="title">车牌号码:蒙123213</p>
-        <p slot class="carColor"></p>
+        <p slot="title">车牌号码:{{ $route.query.carNum }}</p>
+        <p slot class="carColor" :class="carBgFilter($route.query.carNumberColor)"></p>
       </cell>
     </group>
     <div style="padding: 15px;position: relative">
-      <div class="carPic"></div>
+      <img :src="carPic" width="100%" height="180px">
       <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>
@@ -26,49 +25,106 @@
     </div>
     <div style="padding: 20px 15px">
-      <x-button type="primary">提交认证</x-button>
+      <x-button type="primary" @click.native="cerHandle">提交认证</x-button>
     </div>
   </div>
 </template>
 <script>
+
+import { userCarsInfoEdit, uploadPic } from "@/api/myCars/myCars";
 export default {
   name: "certification",
   data() {
     return {
+      carPic: require("../../assets/images/myCars/carPic.png"),
       formData: new FormData(),
-      // fil: ""
+      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;
-      //   }
-      // }
+    addImg(e) {
+      // this.formData = new window.FormData();
+      // 获取待上传的文件对象
+      this.fil = e.target.files[0];
+      console.log(this.fil);
+      let file = e.target.files[0];
+      // 声明一个读取文件对象
+      let reader = new FileReader();
+      // 开始读取文件内容
+      reader.readAsDataURL(file);
+      // 读取操作结束时触发
+      reader.onloadend = (ev) => {
+        // 赋值给vue对象属性
+        this.carPic = ev.target.result;
+      };
     },
-    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);
+    cerHandle() {
+      if (this.fil) {
+        console.log(this.fil);
+        let params = new FormData();
+        params.append("picFile", this.fil);
+        params.append("fileType", 7);
+        params.append("token", "7f61e743f9e24f86b1673e32c16e181e");
+        uploadPic(params).then(data => {
+          console.log(data);
+          if (data.code == 0) {
+            let res = data.data;
+            this.rez(res);
+          } else {
+            this.$vux.toast.text(data.message, "top")
+          }
+        });
+      } else {
+        this.$vux.toast.text('请先上传图片再认证', "top")
       }
-      return url;
     },
-  },
+    rez(res) {
+      let arr = [];
+      let carlist = {
+        carNumber: this.$route.query.carNum,
+        cerPicturePath: res,
+        carNumberColor: this.$route.query.carNumberColor,
+        id: this.$route.query.id
+      };
+      let jsondata = this.$utils.commonParams();
+      arr.push(carlist);
+      // 状态；1-已使用，0-未使用， 2-已使用+未使用
+      jsondata.optType = "02";
+      jsondata.carNumbers = JSON.stringify(arr);
+      jsondata.sign = this.$utils.signObject(jsondata);
+      userCarsInfoEdit(jsondata).then(data => {
+        console.log(data);
+        if (data.code == 0) {
+          this.$router.push({
+            path: "myCars"
+          });
+        } else {
+          this.$vux.toast.text(data.message, "top");
+        }
+      });
+    },
+    carBgFilter: function(val) {
+      console.log(val);
+      // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+      if (val == 0) {
+        return "blueBg";
+      }
+      if (val == 1) {
+        return "yellowBg";
+      }
+      if (val == 2) {
+        return "whiteBg";
+      }
+      if (val == 3) {
+        return "blackBg";
+      }
+      if (val == 4) {
+        return "greenBg";
+      }
+    }
+  }
 };
 </script>
@@ -77,15 +133,6 @@ export default {
     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;
 <template>
   <div>
     <ul class="carsList">
-      <li>
+      <li v-for="(i, index) in carList" :key="i.id">
         <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
           <p >
-            蒙D12345 　<span class="carColor"></span>
+            {{ i.carNumber}} 　<span class="carColor" :class="carBgFilter(i.carNumberColor)"></span>
           </p>
-          <p class=" check-status">
+
+          <p class=" certification-status" v-if="i.examineState == 0" @click="toCer(i)">
+            立即认证
+          </p>
+          <p class=" check-status" v-if="i.examineState == 1">
             审核中
           </p>
+
+          <p class="  pass-status" v-if="i.examineState == 2">
+            通过
+          </p>
+          <p class="" v-if="i.examineState == 3">
+            驳回
+          </p>
           <!--<p class=" pass-status">-->
           <!--已认证-->
           <!--</p>-->
         </div>
         <div style="display: flex;justify-content: space-between">
           <p>
-            汽油车
+            {{ i.carNumberColor==2?'新能源车':'汽油车'}}
           </p>
-          <p style="color: blue" @click="deleteShowHandle">
+          <p style="color: blue" @click="deleteShowHandle(i)">
             解绑车辆
           </p>
           <!--<p class=" pass-status">-->
@@ -25,7 +36,8 @@
           <!--</p>-->
         </div>
         <p class="top-border">
-          您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务
+          {{i.examineStateMsg}}
+          <!--您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务-->
         </p>
         <!--<p class="top-border">-->
         <!--您已经提交审核申请,请耐心等待-->
@@ -34,11 +46,9 @@
         <!--您可以查看历史停车记录了-->
         <!--</p>-->
       </li>
-      <li></li>
-      <li></li>
     </ul>
-    <div style="padding: 20px 15px">
-      <x-button type="primary">立即添加</x-button>
+    <div style="padding: 20px 15px" v-if="carList.length<3">
+      <x-button type="primary"  @click.native="addCarNumb">立即添加</x-button>
     </div>
     <div class="tipWrap">
@@ -54,32 +64,110 @@
       </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>
+
+import { queryUserCars, userCarsInfoEdit } from "@/api/myCars/myCars"
 export default {
+
   name: "myCars",
   data(){
     return {
-      deleteShow: false
+      deleteShow: false, // 删除弹窗
+      carList:[],
+
     }
   },
+  mounted(){
+    this.queryUserCars()
+  },
   methods:{
-    deleteShowHandle(){
-      this.deleteShow = true
+    // 我的车辆查询
+    queryUserCars(){
+      let jsondata =  this.$utils.commonParams();
+      console.log(jsondata)
+      jsondata.sign = this.$utils.signObject(jsondata);
+      queryUserCars(jsondata).then(data => {
+        console.log(data)
+        this.carList = data.data
+      })
+    },
+    toCer(i){
+      this.$router.push({
+        path:'certification',
+        query:{
+          carNum:i.carNumber,
+          carNumberColor:i.carNumberColor,
+          id: i.id
+        }
+      })
+    },
+    addCarNumb(){
+      this.$router.push({
+        path:'addCar'
+      })
+    },
+    deleteShowHandle(i){
+      let me = this
+      this.$vux.confirm.show({
+        title: '提示',
+        content: '是否删除该车辆',
+        // onShow () {
+        //   console.log('plugin show')
+        // },
+        // onHide () {
+        //   console.log('plugin hide')
+        // },
+        onCancel () {
+          console.log('plugin cancel')
+        },
+        onConfirm () {
+          console.log('plugin confirm')
+          me.deleteCarNumb(i)
+        }
+      })
+    },
+    deleteCarNumb(item){
+      console.log(item)
+      let arr = []
+      arr.push(item)
+      let jsondata =  this.$utils.commonParams();
+      // 状态；1-已使用，0-未使用， 2-已使用+未使用
+      jsondata.optType = '01'
+      jsondata.carNumbers = JSON.stringify(arr)
+      jsondata.sign = this.$utils.signObject(jsondata);
+      userCarsInfoEdit(jsondata).then(data => {
+        console.log(data)
+        this.$vux.toast.text(data.message, 'top')
+        this.queryUserCars()
+      })
+    },
+    carBgFilter:function(val) {
+      console.log(val)
+      // 车牌颜色:0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+      if(val == 0){
+        return 'blueBg'
+      }
+      if(val == 1){
+        return 'yellowBg'
+      }
+      if(val == 2){
+        return 'whiteBg'
+      }
+      if(val == 3){
+        return 'blackBg'
+      }
+      if(val == 4){
+        return 'greenBg'
+      }
     }
+  },
+  filters:{
+
   }
 };
 </script>
@@ -96,14 +184,7 @@ export default {
       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;
@@ -118,6 +199,12 @@ export default {
     border-radius: 15px;
     color: blue;
   }
+  .certification-status{
+    padding: 2px 8px;
+    border: 1px solid red;
+    border-radius: 15px;
+    color: red;
+  }
   .top-border {
     margin-top: 6px;
@@ -125,7 +212,7 @@ export default {
     border-top: 1px solid #ddd;
   }
   .tipWrap{
-    padding: 0 15px;
+    padding: 15px 15px 0;
     p{
       text-indent: 15px;
     }