lanan-repair/pages/myCar/myCar.vue

<template>
  <view class="container">
    <VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆"></VNavigationBar>
    <view class="body">
      <scroll-view style="height: 100%" scroll-y="true">
        <view class="carList">
          <view v-for="(item, index) in carList" :key="index" class="carItem" @click="gotoDetail(item)">
            <image class="carImage"  :src="config.baseImageUrl+item.logoImg"  mode="aspectFit"></image>
            <view class="carInfo">
              <view class="carNum">{{ item.licenseNumber}}</view>
              <view class="name">品牌：{{ item.brandName }}</view>
              <view class="phone">型号：{{ item.carModelInput }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="addCarBtn" @click="gotoDetail()">
      <uni-icons color="#0174F6" type="plusempty"></uni-icons>
      添加车辆
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue';
import request from "../../utils/request";
import config from "config";
import {getUserInfoRequest} from "@/utils/common.js";
import {getToken,setUserInfo} from '@/utils/auth.js'

export default {
  computed: {
    config() {
      return config
    }
  },
  components: {
    VNavigationBar
  },
  data() {
    return {
      carList: [
        {
          carNum: '鲁A 781NB',
          name: '魏书豪',
          phone: '15726786903',
          image: ''
        }
      ]
    };
  },
  onLoad() {

     // 页面初始化
     this.getList();
  },
  onShow() {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      console.log("已登录")
      this.getUserInfos()
    }
    // 页面显示时执行初始化操作
    this.getList();
  },
  methods: {
    //获取当前登录用户信息
    async getUserInfos() {
      console.log("获取用户信息")
      getUserInfoRequest()
    },
   getList(){
      request({
        url: '/userClient/base/myCar/get',
        method: 'GET',
      }).then(res => {
        console.log(res);
        this.carList = res.data;
        console.log('图片路径', config.baseImageUrl+this.carList[0].logoImg)
      })
    },

    gotoDetail(item) {
     if (item){
       uni.navigateTo({
         url: `/pages/myCar/carDetail?car=${encodeURIComponent(JSON.stringify(item))}`
       });
     }
     else {
       uni.navigateTo({
         url: '/pages/myCar/carDetail'
       });
     }

    }

  }
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);

  .body {
    flex: 1;
    height: 0;
    background-color: #f3f5f7;
  }

  .carList {
    display: flex;
    flex-direction: column;
  }

  .carItem {
    box-sizing: border-box;
    width: 686rpx;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    column-gap: 20rpx;
  }

  .carImage {
    width: 240rpx;
    height: 150rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .carNum {
    font-weight: bold;
    font-size: 36rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .name,
  .phone {
    font-weight: 500;
    font-size: 28rpx;
    color: #858ba0;
  }

  .addCarBtn {
    padding: 34rpx 0;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12rpx;

    font-weight: 500;
    font-size: 32rpx;
    color: #0174f6;
  }
}
</style>