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="1">
            <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="1" :offset="8">
            <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 {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) {
            getPersonCarNumPC().then(response =>{
              if(response.code ='8888'){
                let data = response.data;
                data.forEach(function(item,index){
                    if(item.carNumber ==carNum){
                      existFlg=true;
                    }
                });
               if(data.length >=3){
                 this.$message({
                   type: 'error',
                   message: '最多只能绑定3个车牌'
                 });
                }else if(existFlg){
                  this.$message({
                    type: 'error',
                    message: '该车牌已经绑定！'
                  });
                }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>