medical-mall/pages/mall/delivery/vehicle.uvue

<!-- 配送端 - 车辆管理 -->
<template>
  <view class="vehicle-container">
    <!-- 头部标题 -->
    <view class="page-header">
      <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()
  },

  methods: {
    // 加载车辆信息
    loadVehicles() {
      // TODO: 调用API获取车辆列表
      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
}
</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);
}

.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>