src/views/mySelf/myCars/myCars.vue

<template>
  <section style="padding: 20px 15px;">
    <p style="color: #343434;font-size: 30px;font-weight: 600;padding-bottom: 15px;">我的车辆</p>
    <div>
      <van-row v-for="item in carList" :key="item.id">
        <van-col span="3" style="text-align: center">
          <van-image style="margin-top: 18px;" :src="require('../../../assets/images/myCars/carNumBg.png')"/>
        </van-col>
        <van-col span="14" style="font-size: 16px;">
          {{item.carNumber}}
        </van-col>
        <van-col span="5" v-if="item.examineState == 0" @click="toRzcarNumber(item.carNumber,item.id)">
          <p style="color: #1aad19">立即认证</p>
        </van-col>
        <van-col span="5" v-else-if="item.examineState == 0">
          <p style="color: #FF555D">通过认证</p>
        </van-col>
        <van-col span="5" v-else>
          <p style="color: #2282C5">审核中</p>
        </van-col>
        <van-col span="2">
          <p @click="toDeletecarNumber(item,_index)">
            <van-icon name="cross" color="#D1D1D6"/>
          </p>
        </van-col>
      </van-row>
      <section class="addBtnBg" @click="toAddCarPage" v-if="carList.length<3">
        <van-image style="margin-top: 10px" :src="require('../../../assets/images/myCars/addBtn.png')"/>
        添加车辆
      </section>
      <section style="margin-top: 20px;">
        宣化停车友情提示:
      </section>
      <section>
        1、每个车牌同一时间只能被一个用户绑定，如需被其他账户绑定，需先解绑;
      </section>
      <section>
        2、车牌号非本人绑定时，可以拔打客服电话反馈进行解绑;
      </section>
      <section>
        3、车牌绑定后可以提交行驶证进行真实性验证，48小时内反馈审核结果;如自行解绑车牌后，再次重新绑定需重新审核认证;
      </section>
      <section>
        4、未认证的车牌只支持支付当前停车费和历史欠费记录;
      </section>
      <section>
        5、认证的车牌支持查看历史停车记录;
      </section>
      <section>
        6、一个账号最多允许绑定三个车牌号，该账号可为三辆车购买会员卡(购买会员卡仅限一车牌绑定使用)。
      </section>
    </div>
  </section>
</template>
<script>
import { queryUserCars, userCarsInfoEdit } from "@/api/myCars/myCars";
export default {
  name: "myCars",
  data() {
    return {
      carList: []
    };
  },
  created() {
    this.queryUserCars();
  },
  methods: {
    queryUserCars() {
      let jsondata = {};
      jsondata.sign = this.$utils.signObject(jsondata);
      queryUserCars(jsondata).then(response => {
        console.log(response);
        this.carList = response.data;
      });
    },
    toAddCarPage() {
      this.$router.push({
          name: "addCarNum"
        }
      );
    },
    toRzcarNumber(carNumber, id) {
      this.$router.push({
          name: "rzCarNumber",
          query: {
            carNumber: carNumber,
            id: id
          }
        }
      );
    },
    toDeletecarNumber(item,index){
      let arr = []
      arr.push(item);
      let jsondata = {
        optType: '01' ,
        carNumbers: JSON.stringify(arr)
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      userCarsInfoEdit(jsondata).then(response => {
        console.log(response);
        if(response.code==0){
          this.queryUserCars();
          this.$toast('删除成功')
        }
      });
    }
  }
};
</script>
<style scoped>
  .van-row {
    margin-bottom: 20px;
    height: 60px;
    line-height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(114, 124, 143, 0.2);
    border-radius: 8px;
  }
  .addBtnBg {
    margin-top: 40px;
    height: 45px;
    line-height: 45px;
    background: url("../../../assets/images/myCars/addBtnBg.png") no-repeat;
    background-size: 100% 100%;
    color: #2282C5;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }
</style>