108 lines
3.0 KiB
Vue

<template>
<view class="container">
<!-- 车辆信息区域 -->
<view class="container-box">
<view class="car-info-container" v-for="(item, index) in carList" :key="index">
<view class="car-info">
<view class="license-plate">
<view class="plate-type-box">
<text class="plate-type" :class="{
'plate-color-blue': item.car_number_color === '蓝色',
'plate-color-yellow': item.car_number_color === '黄色',
'plate-color-black': item.car_number_color === '黑色',
'plate-color-white': item.car_number_color === '白色',
'plate-color-green': item.car_number_color === '绿色',
'plate-color-gradient-green': item.car_number_color === '渐变绿底黑字',
'plate-color-yellow-green': item.car_number_color === '黄绿双拼底黑字'
}">{{ item.car_number_color }}</text>
</view>
<view class="plate-number">
{{ item.car_number }}
<view class="plate-energy" v-if="getActualCarNumberLength(item.car_number) > 7">新能源</view>
</view>
</view>
<u-icon name="trash" size="45rpx" @click="deleteCar(item)"></u-icon>
</view>
</view>
</view>
<!-- 添加车辆按钮 -->
<button class="add-car-btn" @click="addCar">添加车辆</button>
</view>
</template>
<script>
import {
isPhone,
picUrl,
request,
upload,
NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'
export default {
data() {
return {
carList: []
}
},
methods: {
getCarList() {
const params = {
user_id: uni.getStorageSync('userId')
}
request(apiArr.carList, "POST", params).then((res) => {
this.carList = res.car_list;
})
},
// 计算车牌号的实际长度,去除所有不可见字符
getActualCarNumberLength(carNumber) {
if (!carNumber) return 0;
// 去除所有空格和不可见字符
const actualNumber = carNumber.replace(/\s/g, '');
return actualNumber.length;
},
deleteCar(item) {
uni.showModal({
title: '提示',
content: '确定删除该车辆吗?',
success: (res) => {
if (res.confirm) {
const params = {
user_id: uni.getStorageSync('userId'),
car_id: item.car_id
}
request(apiArr.deleteCar, "POST", params).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '删除成功',
icon: 'success',
duration: 2000
});
this.getCarList();
}
})
}
}
})
},
addCar() {
// 跳转到添加车辆页面
uni.navigateTo({
url: '/packages/park/addCar/index'
})
}
},
onShow() {
this.getCarList();
}
}
</script>
<style>
@import url('./index.css');
</style>