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>