379 lines
8.7 KiB
Plaintext
379 lines
8.7 KiB
Plaintext
<template>
|
|
<view class="edit-vehicle-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="header-bar">
|
|
<!-- 左侧：返回按钮 -->
|
|
<view class="nav-left" @click="goBack">
|
|
<text class="nav-icon">←</text>
|
|
</view>
|
|
|
|
<!-- 中部：页面标题 -->
|
|
<text class="page-title">编辑车辆</text>
|
|
|
|
<!-- 右侧：留空 -->
|
|
<view class="nav-right"></view>
|
|
</view>
|
|
|
|
<!-- 编辑表单区 -->
|
|
<scroll-view class="form-wrapper" scroll-y="true">
|
|
<!-- 车牌号 -->
|
|
<view class="form-item">
|
|
<text class="item-label">车牌号</text>
|
|
<input class="item-input" v-model="formData.plate_number" placeholder="请输入车牌号" />
|
|
</view>
|
|
|
|
<!-- 车辆类型 -->
|
|
<view class="form-item">
|
|
<text class="item-label">车辆类型</text>
|
|
<picker :value="vehicleTypeIndex" :range="vehicleTypes" @change="onVehicleTypeChange">
|
|
<view class="picker-view">{{ formData.vehicle_type ? vehicleTypes[vehicleTypeIndex] : '请选择车辆类型' }}</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 车辆品牌 -->
|
|
<view class="form-item">
|
|
<text class="item-label">车辆品牌</text>
|
|
<input class="item-input" v-model="formData.brand" placeholder="请输入车辆品牌" />
|
|
</view>
|
|
|
|
<!-- 车辆颜色 -->
|
|
<view class="form-item">
|
|
<text class="item-label">车辆颜色</text>
|
|
<input class="item-input" v-model="formData.color" placeholder="请输入车辆颜色" />
|
|
</view>
|
|
|
|
<!-- 车辆照片 -->
|
|
<view class="form-item">
|
|
<text class="item-label">车辆照片</text>
|
|
<view class="avatar-upload" @click="chooseVehicleImage">
|
|
<image :src="formData.vehicle_image || '/static/default-vehicle.png'" class="avatar-image" />
|
|
<text class="upload-text">点击上传车辆照片</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<text class="item-label">备注</text>
|
|
<textarea class="item-textarea" v-model="formData.remark" placeholder="请输入备注信息" />
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="bottom-actions">
|
|
<button class="action-btn cancel" @click="cancel">取消</button>
|
|
<button class="action-btn save" @click="saveVehicle">保存</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 当前车辆ID
|
|
vehicleId: '',
|
|
// 表单数据
|
|
formData: {
|
|
plate_number: '',
|
|
vehicle_type: 0,
|
|
brand: '',
|
|
color: '',
|
|
vehicle_image: '',
|
|
remark: ''
|
|
},
|
|
// 车辆类型选项
|
|
vehicleTypes: ['电动车', '摩托车', '面包车', '小型货车'],
|
|
vehicleTypeIndex: 0
|
|
}
|
|
},
|
|
|
|
onLoad(options: any) {
|
|
this.vehicleId = options.id as string
|
|
if (this.vehicleId) {
|
|
this.loadVehicleData()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 加载车辆数据
|
|
loadVehicleData() {
|
|
// 模拟从API获取数据
|
|
// 实际项目中应调用API
|
|
const mockVehicles = [
|
|
{
|
|
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',
|
|
brand: '雅迪',
|
|
color: '蓝色',
|
|
image: '/static/vehicle1.jpg',
|
|
remark: '日常使用'
|
|
},
|
|
{
|
|
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',
|
|
brand: '本田',
|
|
color: '黑色',
|
|
image: '/static/vehicle2.jpg',
|
|
remark: '维修中'
|
|
}
|
|
]
|
|
|
|
const found = mockVehicles.find(v => v.id === this.vehicleId)
|
|
if (found) {
|
|
this.formData = {
|
|
plate_number: found.plate_number,
|
|
vehicle_type: found.vehicle_type,
|
|
brand: found.brand,
|
|
color: found.color,
|
|
vehicle_image: found.image,
|
|
remark: found.remark
|
|
}
|
|
// 设置车辆类型索引
|
|
this.vehicleTypeIndex = this.vehicleTypes.indexOf(found.vehicle_type_name)
|
|
}
|
|
},
|
|
|
|
// 选择车辆类型
|
|
onVehicleTypeChange(e: UniEvent<HTMLInputElement>) {
|
|
const index = parseInt(e.detail.value)
|
|
this.vehicleTypeIndex = index
|
|
this.formData.vehicle_type = index + 1 // 假设后端从1开始
|
|
},
|
|
|
|
// 选择车辆照片
|
|
chooseVehicleImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.formData.vehicle_image = res.tempFilePaths[0]
|
|
}
|
|
})
|
|
},
|
|
|
|
// 取消
|
|
cancel() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 保存
|
|
saveVehicle() {
|
|
// 验证输入
|
|
if (!this.formData.plate_number.trim()) {
|
|
uni.showToast({
|
|
title: '请输入车牌号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 模拟更新车辆数据
|
|
const updatedVehicle = {
|
|
id: this.vehicleId,
|
|
plate_number: this.formData.plate_number,
|
|
vehicle_type: this.formData.vehicle_type,
|
|
vehicle_type_name: this.vehicleTypes[this.vehicleTypeIndex],
|
|
brand: this.formData.brand,
|
|
color: this.formData.color,
|
|
image: this.formData.vehicle_image,
|
|
remark: this.formData.remark,
|
|
updated_at: new Date().toISOString()
|
|
}
|
|
|
|
// 将更新后的车辆数据保存到本地存储，以便上一页可以获取
|
|
uni.setStorageSync('updated_vehicle_for_list', updatedVehicle)
|
|
|
|
// 模拟保存过程
|
|
uni.showLoading({
|
|
title: '保存中...'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
// 保存成功后返回上一页
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
|
|
// 实际项目中应调用 API 保存数据
|
|
console.log('更新的车辆数据:', updatedVehicle)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.edit-vehicle-container {
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.header-bar {
|
|
background-color: #fff;
|
|
padding: 20rpx 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #e9ecef;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.nav-left {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding: 10rpx;
|
|
border-radius: 8rpx;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.nav-left:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.nav-left:active {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 36rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
flex: 1; /* 让标题占据中间剩余空间 */
|
|
}
|
|
|
|
.nav-right {
|
|
width: 60rpx; /* 与左侧箭头区域宽度一致 */
|
|
height: 1rpx;
|
|
}
|
|
|
|
.form-wrapper {
|
|
flex: 1;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.form-item {
|
|
background-color: #fff;
|
|
margin: 20rpx;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.item-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.item-input {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
padding: 10rpx 0;
|
|
border: none;
|
|
outline: none;
|
|
text-align: right;
|
|
}
|
|
|
|
.picker-view {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
text-align: right;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.avatar-upload {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
border: 4rpx solid #ddd;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.item-textarea {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
padding: 10rpx 0;
|
|
border: none;
|
|
outline: none;
|
|
text-align: right;
|
|
height: 100rpx;
|
|
resize: none;
|
|
}
|
|
|
|
.bottom-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 25rpx 30rpx;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 35rpx;
|
|
font-size: 26rpx;
|
|
border: none;
|
|
font-weight: 500;
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cancel {
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
|
|
.save {
|
|
background-color: #4CAF50;
|
|
color: #fff;
|
|
}
|
|
</style> |