maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车牌颜色根据选择的颜色进行显示

Browse Source
This commit is contained in:
赵毅 2025-09-04 11:37:37 +08:00
parent 08e77df1a5
commit 68839c2447
2 changed files with 123 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/park/index/index.css
View File

@ -3,16 +3,25 @@ page {
padding-top: 20rpx;
}
/* 车辆信息容器样式 */
.container-box{
height: 83vh;
overflow-y: auto;
}
.car-info-container {
width: 100%;
width: 92%;
background-color: #ffffff;
padding: 30rpx;
border-bottom: 1rpx solid #eeeeee;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.car-info{
display: flex;
justify-content: space-between;
}
/* 车牌样式 */
.license-plate {
display: flex;
@ -27,6 +36,7 @@ page {
border-radius: 8rpx;
}
.plate-type {
background-color: #1890ff;
color: white;
@ -40,6 +50,62 @@ page {
font-size: 32rpx;
color: #333333;
font-weight: 500;
display: flex;
align-items: center;
padding: 15rpx 30rpx;
border-radius: 10rpx;
}
/* 蓝色车牌样式 */
.plate-color-blue {
background-color: #1890ff;
color: white;
}
/* 黄色车牌样式 */
.plate-color-yellow {
background-color: #ffc53d;
color: black;
}
/* 黑色车牌样式 */
.plate-color-black {
background-color: #333333;
color: white;
}
/* 白色车牌样式 */
.plate-color-white {
background-color: white;
color: black;
border: 1rpx solid #dddddd;
}
/* 绿色车牌样式 */
.plate-color-green {
background-color: #37bd75;
color: white;
}
/* 渐变绿底黑字车牌样式 */
.plate-color-gradient-green {
background: linear-gradient(180deg, #ffffff 0%, #2fe259 100%);
color: black;
}
/* 黄绿双拼底黑字车牌样式 */
.plate-color-yellow-green {
background: linear-gradient(90deg, #ffc53d 30%, #37bd75 0%);
color: black;
}
.plate-energy{
font-size: 24rpx;
padding: 7rpx 15rpx;
margin-left: 15rpx;
border-radius: 10rpx;
background-color: #f2f3f4;
color: #37bd75;
}
/* 添加车辆按钮样式 */

54
packages/park/index/index.vue
View File

@ -1,12 +1,28 @@
<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">{{ item.car_number_color }}</text>
<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>
<text class="plate-number">{{ item.car_number }}</text>
</view>
</view>
@ -40,6 +56,40 @@ export default {
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({