huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新页面和修改对应逻辑

Browse Source
This commit is contained in:
not-like-juvenile
2026-01-26 17:12:37 +08:00
parent b1c845d571
commit 1c83f29f7d
10 changed files with 1297 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
pages/mall/delivery/vehicle-edit.uvue Normal file
View File

@@ -0,0 +1,379 @@
<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>