BJ_web_developers / wxgzh

<template>
  <div>
    <ul class="carsList">
      <li v-for="(i, index) in carList" :key="i.id">
        <div style="display: flex;justify-content: space-between;margin-bottom: 6px;">
          <p >
            {{ i.carNumber}} 　<span class="carColor" :class="carBgFilter(i.carNumberColor)"></span>
          </p>

          <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(i)">
            解绑车辆
          </p>
          <!--<p class=" pass-status">-->
          <!--已认证-->
          <!--</p>-->
        </div>
        <p class="top-border">
          {{i.examineStateMsg}}
          <!--您可以申请 <span style="color: blue">立刻认证</span>,享受更多服务-->
        </p>
        <!--<p class="top-border">-->
        <!--您已经提交审核申请,请耐心等待-->
        <!--</p>-->
        <!--<p class="top-border">-->
        <!--您可以查看历史停车记录了-->
        <!--</p>-->
      </li>
    </ul>
    <div style="padding: 20px 15px" v-if="carList.length<3">
      <x-button type="primary"  @click.native="addCarNumb">立即添加</x-button>
    </div>

    <div class="tipWrap">
      <span>温馨提示:</span>
      <p>
        1、车辆绑定后请提交行驶证进行真实性验证,48小时内反馈审核结果,如自行解绑车牌后,再次重新绑定，需重新审核认证。
      </p>
      <p>
        2、未认证车牌只支持当前停车费和历史欠费记录。
      </p>
      <p>
        3、认证车牌支持查看历史停车记录。
      </p>
    </div>



  </div>
</template>

<script>

import { queryUserCars, userCarsInfoEdit } from "@/api/myCars/myCars"
export default {

  name: "myCars",
  data(){
    return {
      deleteShow: false, // 删除弹窗
      carList:[],

    }
  },
  mounted(){
    this.queryUserCars()
  },
  methods:{
    // 我的车辆查询
    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>

<style scoped lang="scss">
  .carsList {
    padding: 0 15px;
    font-size: 12px;
    > li {
      /*height:100px;*/
      margin-top: 15px;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 1px 3px #ddd;
    }
  }


  .check-status {
    padding: 1px 8px;
    border: 1px solid #ffbe00;
    border-radius: 15px;
    color: #ffbe00;
  }

  .pass-status {
    padding: 2px 8px;
    border: 1px solid blue;
    border-radius: 15px;
    color: blue;
  }
  .certification-status{
    padding: 2px 8px;
    border: 1px solid red;
    border-radius: 15px;
    color: red;
  }

  .top-border {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #ddd;
  }
  .tipWrap{
    padding: 15px 15px 0;
    p{
      text-indent: 15px;
    }
  }

</style>