338 lines
7.5 KiB
Plaintext
338 lines
7.5 KiB
Plaintext
<!-- 配送端 - 车辆管理 -->
|
||
<template>
|
||
<view class="vehicle-container">
|
||
<!-- 头部标题 -->
|
||
<view class="page-header">
|
||
<!-- 返回按钮：左上角垂直居中 -->
|
||
<view class="back-box" @click="goBack">
|
||
<text class="back-icon">‹</text>
|
||
<text class="back-text">返回</text>
|
||
</view>
|
||
<text class="page-title">车辆管理</text>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<view class="content-wrapper">
|
||
<!-- 车辆列表 -->
|
||
<view v-if="vehicleList.length > 0" class="vehicle-list">
|
||
<view v-for="vehicle in vehicleList" :key="vehicle.id" class="vehicle-item">
|
||
<view class="vehicle-info">
|
||
<text class="vehicle-icon">🚗</text>
|
||
<view class="info-details">
|
||
<text class="info-label">车牌号: {{ vehicle.plate_number }}</text>
|
||
<text class="info-label">车型: {{ vehicle.vehicle_type_name }}</text>
|
||
<text class="info-label">状态: {{ getVehicleStatusText(vehicle.status) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="vehicle-actions">
|
||
<button class="action-btn primary" @click="editVehicle(vehicle.id)">编辑</button>
|
||
<button class="action-btn secondary" @click="deleteVehicle(vehicle.id)">删除</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无数据时显示 -->
|
||
<view v-else class="no-data">
|
||
<text class="no-data-text">暂无车辆信息</text>
|
||
<button class="add-btn" @click="addVehicle">添加车辆</button>
|
||
</view>
|
||
|
||
<!-- 添加车辆按钮（如果列表为空） -->
|
||
<view v-if="vehicleList.length > 0" class="add-button-section">
|
||
<button class="add-btn" @click="addVehicle">添加新车辆</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
import type { DeliveryDriverType } from '@/types/mall-types.uts'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 模拟车辆数据
|
||
vehicleList: [] as Array<VehicleType>
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.loadVehicles()
|
||
},
|
||
|
||
onShow() {
|
||
// 页面每次显示时都检查是否有新添加的车辆
|
||
this.loadVehicles()
|
||
},
|
||
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
// 加载车辆信息
|
||
loadVehicles() {
|
||
// 1. 从本地存储获取新添加的车辆（如果存在）
|
||
const newVehicleFromStorage = uni.getStorageSync('new_vehicle_for_list')
|
||
if (newVehicleFromStorage) {
|
||
// 2. 清除本地存储，防止重复添加
|
||
uni.removeStorageSync('new_vehicle_for_list')
|
||
// 3. 将新车辆添加到列表开头
|
||
this.vehicleList.unshift(newVehicleFromStorage)
|
||
return // 如果有新数据，直接使用，不加载旧的模拟数据
|
||
}
|
||
|
||
// 4. 如果没有新数据，才加载旧的模拟数据（实际项目中应从API获取）
|
||
if (this.vehicleList.length === 0) { // 避免重复加载模拟数据
|
||
this.vehicleList = [
|
||
{
|
||
id: '1',
|
||
plate_number: '京A12345',
|
||
vehicle_type: 1,
|
||
vehicle_type_name: '电动车',
|
||
status: 1, // 1: 正常, 2: 维修中, 3: 停用
|
||
driver_id: 'driver001',
|
||
created_at: '2024-01-01',
|
||
updated_at: '2024-12-01'
|
||
},
|
||
{
|
||
id: '2',
|
||
plate_number: '沪B67890',
|
||
vehicle_type: 2,
|
||
vehicle_type_name: '摩托车',
|
||
status: 2, // 维修中
|
||
driver_id: 'driver001',
|
||
created_at: '2024-01-02',
|
||
updated_at: '2024-12-02'
|
||
},
|
||
{
|
||
id: '3',
|
||
plate_number: '粤C11223',
|
||
vehicle_type: 3,
|
||
vehicle_type_name: '汽车',
|
||
status: 3, // 停用
|
||
driver_id: 'driver001',
|
||
created_at: '2024-01-03',
|
||
updated_at: '2024-12-03'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
// 获取车辆状态文本
|
||
getVehicleStatusText(status: number): string {
|
||
const statusMap = {
|
||
1: '正常',
|
||
2: '维修中',
|
||
3: '停用'
|
||
}
|
||
return statusMap[status] || '未知状态'
|
||
},
|
||
|
||
// 编辑车辆
|
||
editVehicle(vehicleId: string) {
|
||
uni.navigateTo({
|
||
url: `/pages/mall/delivery/vehicle-edit?id=${vehicleId}`
|
||
})
|
||
},
|
||
|
||
// 删除车辆
|
||
deleteVehicle(vehicleId: string) {
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '确定要删除该车辆吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 调用API删除车辆
|
||
this.vehicleList = this.vehicleList.filter(v => v.id !== vehicleId)
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 添加车辆
|
||
addVehicle() {
|
||
uni.navigateTo({
|
||
url: '/pages/mall/delivery/vehicle-add'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 定义 VehicleType 类型
|
||
type VehicleType = {
|
||
id: string
|
||
plate_number: string
|
||
vehicle_type: number
|
||
vehicle_type_name: string
|
||
status: number
|
||
driver_id: string
|
||
created_at: string
|
||
updated_at: string
|
||
brand?: string
|
||
color?: string
|
||
image?: string
|
||
remark?: string
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.vehicle-container {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.page-header {
|
||
background-color: #fff;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.back-box {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: 10rpx;
|
||
border-radius: 8rpx;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.back-box:active {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 36rpx;
|
||
color: #333;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
.content-wrapper {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.vehicle-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.vehicle-item {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
border-left: 6rpx solid #4CAF50;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.vehicle-info {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.vehicle-icon {
|
||
font-size: 48rpx;
|
||
margin-right: 15rpx;
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.info-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.vehicle-actions {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 20rpx;
|
||
border-radius: 15rpx;
|
||
font-size: 26rpx;
|
||
border: none;
|
||
font-weight: 500;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.primary {
|
||
background: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.secondary {
|
||
background: #f0f0f0;
|
||
color: #333;
|
||
border: 1rpx solid #ddd;
|
||
}
|
||
|
||
.no-data {
|
||
text-align: center;
|
||
padding: 80rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.no-data-text {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.add-btn {
|
||
background-color: #4CAF50;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx 40rpx;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.add-button-section {
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
</style> |