src/views/mycar/index.vue

<template>
  <div>
    <div class="search-wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" label-width="60px" label-position="left">
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="7">
            <el-form-item label="账户ID">
              <el-input v-model="form.custId" maxlength="20" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="7">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" maxlength="20" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-row :gutter="20" style="margin-top: 8px">
      <el-col :span="12">
        <el-card class="box-card" style="height: 300px">
          <div slot="header" class="clearfix">
            <span>车牌绑定</span>
          </div>
          <el-form ref="bondform" :model="bondform" label-width="60px" label-position="left" :rules="rules">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="车牌号" prop="carNum">
                  <el-input type="text" v-model="bondform.carNum"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" :loading="bondformBtnVisible" @click="checkCarNum('bondform')">绑定车牌</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="min-height: 300px">
          <div slot="header" class="clearfix">
            <span>解绑车牌</span>
          </div>
          <el-form ref="form" :model="form" label-width="60px" label-position="left">
            <el-row :gutter="20" v-for="item in alredyBoundCar" style="margin-top: 4px">
              <el-col :span="12">
                <el-form-item label="已绑车牌">
                  <el-input  :value="item.carNumber"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="alredyBoundCarBtn(item.carNumber)">解绑车牌</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {checkCarNumIsbind,getPersonCarNumPC,boundCarNum,unboundCarNum} from '@/api/mycar.js';
  export default {
    data() {
      var carNumValidator = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入车牌号'));
        }
        if (!/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/.test(this.bondform.carNum)||this.bondform.carNum.length<7) {
          callback(new Error('请输入正确的车牌号'));
        }
        callback();
      };
      return {
        form: {
          custId: '',
          phone: '',
        },
        /**绑定车牌.*/
        bondform: {
          carNum: ''
        },
        /**已绑定车牌.*/
        alredyBoundCar:[],
        bondformBtnVisible: false,
        dialogFormVisible: false,
        problemform: {
          carnum: '',
        },
        rules:{
          carNum:[{ validator: carNumValidator, trigger: 'blur' }]
          }
      }
    },
    methods: {
      /**校验是否已经绑定*/
      checkCarNum(formName){
        // debugger
        //checkBoundCarNum
        let that = this;
        let custId = this.form.custId;
        let carNum = this.bondform.carNum;
        let existFlg = false;
        this.$refs[formName].validate((valid) => {
          if (!valid)  return false;
          debugger
          if(null != that.alredyBoundCar && that.alredyBoundCar.length >0){
            if(that.alredyBoundCar.length ==5){
              this.$message({
                type: 'error',
                message: '最多只能绑定5个车牌！'
              });
              return false
            }else{
              let flg =false;
              that.alredyBoundCar.forEach((item,index)=>{
                if(item.carNumber == carNum){
                  flg = true
                }
              });
              if(flg){
                this.$message({
                  type: 'error',
                  message: '请勿做重复绑定！'
                });
                return false
              }else {
                let checkReq ={
                  carNumber:carNum
                }
                checkCarNumIsbind(checkReq).then(response =>{
                  if(response.code =='8888'){
                    if(null != response.data && null != response.data.id){
                      this.$message({
                        type: 'error',
                        message: '改车牌已被其他车主绑定!'
                      });
                      return false
                    }else{
                      that.bondCarNum(custId,carNum)
                    }
                  }
                });
              }
            }
          }else{
            let checkReq ={
              carNumber:carNum
            }
            checkCarNumIsbind(checkReq).then(response =>{
              if(response.code =='8888'){
                if(null != response.data && null != response.data.id){
                  this.$message({
                    type: 'error',
                    message: '该车牌已被其他车主绑定!'
                  });
                  return false
                }else{
                  that.bondCarNum(custId,carNum)
                }
              }
            });
          }
        });
      },
      /**绑定车牌*/
      bondCarNum:function(custId,carNum){
           let  that =this;
            let req ={
              custId:custId,
              carNumber:carNum,
              sysCode:'1001',
              carBindingStatus:1, //绑定
            };
            boundCarNum(req).then(response =>{
               if(response.code='8888'){
                 that.bondform.carNum='';
                 this.$message({
                   type: 'success',
                   message: '车牌绑定成功！'
                 });
                 that.getPersonCarNumPC();
               }
            });
      },
      /**获取车牌.*/
      getPersonCarNumPC:function () {
        let that =this;
        getPersonCarNumPC().then(response =>{
          if(response.code ='8888'){
            that.alredyBoundCar=response.data;
          }
        });
      },
      /**解绑车牌.*/
      alredyBoundCarBtn:function (carNum) {
        if("" == carNum || null ==carNum || undefined == carNum){
          this.$message({
            type: 'error',
            message: '解绑的车牌不能为空'
          });
        }
        let that =this;
        let custId = this.form.custId;
        let req ={
          custId:custId,
          carNumber:carNum,
          sysCode:'1001',
          carBindingStatus:2, //解绑
        };
        // debugger
        unboundCarNum(req).then(response =>{
          if(response.code ='8888'){
            this.$message({
              type: 'success',
              message: '车牌解绑成功！'
            });
            this.getPersonCarNumPC();
          }else{
            this.$message({
              type: 'error',
              message: '车牌解绑失败！'
            });
          }
        });
      }
    },
    mounted:function(){
      let userInfo = this.$store.state.user.userInfo;
      this.form={
        custId: userInfo.custId,
          phone: userInfo.userPhone
      };
      this.getPersonCarNumPC();
    }
  }
</script>
<style lang="scss">
  .search-wrap {
    background-color: #FFF;
    padding: 15px;
  }
  .card-second-top {
    margin-top: 15px;
  }
  .el-card__header {
    padding: 10px 20px;
  }
  .el-radio {
    margin-right: 80px;
  }
  .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0px;
    margin-top: 15px;
  }
</style>