refactor(车辆表单): 统一字段命名规范并优化表单逻辑

- 将表单字段从驼峰命名改为下划线命名以保持一致性 - 移除电池损耗度字段及相关逻辑 - 简化新旧程度选项 - 将年份选择器从普通选择器改为日期选择器 - 添加实际API调用逻辑替代模拟请求

refactor(车辆表单): 统一字段命名规范并优化表单逻辑
- 将表单字段从驼峰命名改为下划线命名以保持一致性 - 移除电池损耗度字段及相关逻辑 - 简化新旧程度选项 - 将年份选择器从普通选择器改为日期选择器 - 添加实际API调用逻辑替代模拟请求
hookehuyr
Commit 6b82f3aa303a3c8bea5ea2eb02a3308990f8d792 6b82f3aa 1 parent 39b27b07
Showing 2 changed files with 107 additions and 104 deletions
src/api/car.js
src/pages/sell/index.vue
--- a/src/api/car.js
View file @6b82f3a
+++ b/src/api/car.js
View file @6b82f3a
 /*
  * @Date: 2025-07-09 14:58:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-09 15:55:25
+ * @LastEditTime: 2025-07-09 16:07:38
  * @FilePath: /jgdl/src/api/car.js
  * @Description: 车辆相关API接口
  */
--- a/src/pages/sell/index.vue
View file @6b82f3a
+++ b/src/pages/sell/index.vue
View file @6b82f3a
@@ -132,26 +132,25 @@
                     </nut-form-item>
                     <!-- 车辆出厂年份 -->
-                    <nut-form-item label-position="top" label="车辆出厂年份" prop="year">
+                    <nut-form-item label-position="top" label="车辆出厂年份" prop="manufacture_year">
                         <view class="form-item-content" @click="showYearPicker">
-                            <text class="form-value">{{ formData.year || '请选择' }}</text>
+                            <text class="form-value">{{ formData.manufacture_year || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
                     </nut-form-item>
                     <!-- 新旧程度 -->
-                    <nut-form-item label-position="top" label="新旧程度" prop="condition" required
+                    <nut-form-item label-position="top" label="新旧程度" prop="new_level">
-                        :rules="[{ required: true, message: '请选择新旧程度' }]">
                         <view class="form-item-content" @click="showConditionPicker">
-                            <text class="form-value">{{ formData.condition || '请选择' }}</text>
+                            <text class="form-value">{{ formData.new_level || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
                     </nut-form-item>
                     <!-- 行驶里程 -->
-                    <nut-form-item label="行驶里程" prop="mileage" required
+                    <nut-form-item label="行驶里程" prop="total_mileage_km" required
                         :rules="[{ required: true, message: '请输入行驶里程' }]">
-                        <nut-input v-model="formData.mileage" placeholder="1200" type="number" input-align="right">
+                        <nut-input v-model="formData.total_mileage_km" placeholder="1200" type="number" input-align="right">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -159,8 +158,8 @@
                     </nut-form-item>
                     <!-- 续航里程 -->
-                    <nut-form-item label="续航里程" prop="range">
+                    <nut-form-item label="续航里程" prop="range_km">
-                        <nut-input v-model="formData.range" placeholder="60" type="number" input-align="right">
+                        <nut-input v-model="formData.range_km" placeholder="60" type="number" input-align="right">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -177,8 +176,8 @@
                     </nut-form-item>
                     <!-- 电池容量 -->
-                    <nut-form-item label="电池容量" prop="batteryCapacity">
+                    <nut-form-item label="电池容量" prop="battery_capacity_ah">
-                        <nut-input v-model="formData.batteryCapacity" placeholder="20" type="number"
+                        <nut-input v-model="formData.battery_capacity_ah" placeholder="20" type="number"
                             input-align="right">
                             <template #right>
                                 <text class="unit">Ah</text>
@@ -187,25 +186,25 @@
                     </nut-form-item>
                     <!-- 电池损耗度 -->
-                    <nut-form-item label-position="top" label="电池损耗度" prop="batteryWear">
+                    <!-- <nut-form-item label-position="top" label="电池损耗度" prop="batteryWear">
                         <view class="form-item-content" @click="showBatteryWearPicker">
                             <text class="form-value">{{ formData.batteryWear || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
-                    </nut-form-item>
+                    </nut-form-item> -->
                     <!-- 刹车磨损度 -->
-                    <nut-form-item label-position="top" label="刹车磨损度" prop="brakeWear">
+                    <nut-form-item label-position="top" label="刹车磨损度" prop="brake_wear_level">
                         <view class="form-item-content" @click="showBrakeWearPicker">
-                            <text class="form-value">{{ formData.brakeWear || '请选择' }}</text>
+                            <text class="form-value">{{ formData.brake_wear_level || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
                     </nut-form-item>
                     <!-- 轮胎磨损度 -->
-                    <nut-form-item label-position="top" label="轮胎磨损度" prop="tireWear">
+                    <nut-form-item label-position="top" label="轮胎磨损度" prop="tire_wear_level">
                         <view class="form-item-content" @click="showTireWearPicker">
-                            <text class="form-value">{{ formData.tireWear || '请选择' }}</text>
+                            <text class="form-value">{{ formData.tire_wear_level || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
                     </nut-form-item>
@@ -221,7 +220,7 @@
                     </view>
                     <view class="form-item-right">
                         <text class="price-symbol">¥</text>
-                        <input v-model="formData.sellingPrice" placeholder="3200" type="text" class="price-input" />
+                        <input v-model="formData.price" placeholder="3200" type="text" class="price-input" />
                     </view>
                 </view>
@@ -232,7 +231,7 @@
                     </view>
                     <view class="form-item-right">
                         <text class="market-price-symbol">¥</text>
-                        <input v-model="formData.marketPrice" placeholder="6500" type="text"
+                        <input v-model="formData.market_price" placeholder="6500" type="text"
                             class="market-price-input" />
                     </view>
                 </view>
@@ -240,7 +239,7 @@
             <!-- 车辆描述 -->
             <view class="form-section">
-                <nut-textarea v-model="formData.description" placeholder="请描述车辆详情，如使用感受、车况特点等" />
+                <nut-textarea v-model="formData.note" placeholder="请描述车辆详情，如使用感受、车况特点等" />
             </view>
         </view>
@@ -280,8 +279,13 @@
         <!-- 年份选择 -->
         <nut-popup v-model:visible="yearPickerVisible" position="bottom">
-            <nut-picker v-model="yearValue" :columns="yearOptions" title="选择出厂年份" @confirm="onYearConfirm"
+            <nut-date-picker
-                @cancel="yearPickerVisible = false" />
+                v-model="yearValue"
+                title="选择出厂年份"
+                type="year-month"
+                @confirm="onYearConfirm"
+                @cancel="yearPickerVisible = false"
+            />
         </nut-popup>
         <!-- 新旧程度选择 -->
@@ -319,6 +323,9 @@ import BrandModelPicker from '@/components/BrandModelPicker.vue'
 import { checkPermission, PERMISSION_TYPES } from '@/utils/permission'
 import './index.less'
+// 导入接口
+import { addVehicleAPI, editVehicleAPI, getVehicleDetailAPI } from '@/api/car';
+
 const themeVars = ref({
     navbarBackground: '#fb923c',
     navbarColor: '#ffffff',
@@ -341,12 +348,6 @@ const isAuthMode = ref(type === 'auth' && id)
 const isMyCarMode = ref(type === 'myCar' && id)
 const carId = ref(id || '')
-// 文件上传相关
-// const frontFileList = ref([])  // 正面照（保留用于兼容旧代码）
-// const leftFileList = ref([])   // 左侧照（保留用于兼容旧代码）
-// const rightFileList = ref([])  // 右侧照（保留用于兼容旧代码）
-// const otherFileList = ref([])  // 其他照片（保留用于兼容旧代码）
-
 // 已上传图片的URL
 const uploadedImages = reactive({
     front: '',
@@ -370,18 +371,18 @@ const formData = reactive({
     brand: '',
     model: '',
     brandModel: '', // 品牌型号组合字段，用于表单验证
-    year: '',
+    manufacture_year: '',
-    condition: '',
+    new_level: '',
-    mileage: '1200',
+    total_mileage_km: '1200',
-    range: '60',
+    range_km: '60',
     maxSpeed: '25',
-    batteryCapacity: '20',
+    battery_capacity_ah: '20',
     batteryWear: '',
-    brakeWear: '',
+    brake_wear_level: '',
-    tireWear: '',
+    tire_wear_level: '',
-    sellingPrice: '3200',
+    price: '3200',
-    marketPrice: '6500',
+    market_price: '6500',
-    description: ''
+    note: ''
 })
 // 选择器显示状态
@@ -402,7 +403,7 @@ const brandModelPickerRef = ref(null)
 const schoolValue = ref([])
 const brandValue = ref([])
 const modelValue = ref([])
-const yearValue = ref([])
+const yearValue = ref(new Date())
 const conditionValue = ref([])
 const batteryWearValue = ref([])
 const brakeWearValue = ref([])
@@ -441,19 +442,10 @@ const modelOptions = ref([
     { text: '其他型号', value: '其他型号' }
 ])
-const yearOptions = ref([
+
-    { text: '2024年', value: '2024年' },
-    { text: '2023年', value: '2023年' },
-    { text: '2022年', value: '2022年' },
-    { text: '2021年', value: '2021年' },
-    { text: '2020年', value: '2020年' },
-    { text: '2019年', value: '2019年' },
-    { text: '2018年及以前', value: '2018年及以前' }
-])
 const conditionOptions = ref([
     { text: '全新', value: '全新' },
-    { text: '9成新', value: '9成新' },
     { text: '8成新', value: '8成新' },
     { text: '7成新', value: '7成新' },
     { text: '6成新', value: '6成新' },
@@ -468,10 +460,6 @@ const wearLevelOptions = ref([
     { text: '需要更换', value: '需要更换' }
 ])
-// 品牌型号数据已移至 BrandModelPicker 组件中
-
-
-
 /**
  * 触发图片上传
  * @param {String} type - 图片类型 (front/left/right/other)
@@ -570,15 +558,6 @@ const deleteImage = (type) => {
     })
 }
-// 保留旧的上传逻辑作为备用（已注释）
-// const afterRead = (event, type) => { ... }
-
-// 保留旧的删除逻辑作为备用（已注释）
-// const onDeleteFront = (file, index) => { frontFileList.value.splice(index, 1) }
-// const onDeleteLeft = (file, index) => { leftFileList.value.splice(index, 1) }
-// const onDeleteRight = (file, index) => { rightFileList.value.splice(index, 1) }
-// const onDeleteOther = (file, index) => { otherFileList.value.splice(index, 1) }
-
 /**
  * 显示学校选择器
  */
@@ -624,9 +603,9 @@ const showConditionPicker = () => {
 /**
  * 显示电池损耗度选择器
  */
-const showBatteryWearPicker = () => {
+// const showBatteryWearPicker = () => {
-    batteryWearPickerVisible.value = true
+//     batteryWearPickerVisible.value = true
-}
+// }
 /**
  * 显示刹车磨损度选择器
@@ -671,7 +650,7 @@ const onModelConfirm = ({ selectedValue }) => {
  * 年份选择确认
  */
 const onYearConfirm = ({ selectedValue }) => {
-    formData.year = selectedValue[0]
+    formData.manufacture_year = `${selectedValue[0]}年`
     yearPickerVisible.value = false
 }
@@ -679,7 +658,7 @@ const onYearConfirm = ({ selectedValue }) => {
  * 新旧程度选择确认
  */
 const onConditionConfirm = ({ selectedValue }) => {
-    formData.condition = selectedValue[0]
+    formData.new_level = selectedValue[0]
     conditionPickerVisible.value = false
 }
@@ -695,7 +674,7 @@ const onBatteryWearConfirm = ({ selectedValue }) => {
  * 刹车磨损度选择确认
  */
 const onBrakeWearConfirm = ({ selectedValue }) => {
-    formData.brakeWear = selectedValue[0]
+    formData.brake_wear_level = selectedValue[0]
     brakeWearPickerVisible.value = false
 }
@@ -703,7 +682,7 @@ const onBrakeWearConfirm = ({ selectedValue }) => {
  * 轮胎磨损度选择确认
  */
 const onTireWearConfirm = ({ selectedValue }) => {
-    formData.tireWear = selectedValue[0]
+    formData.tire_wear_level = selectedValue[0]
     tireWearPickerVisible.value = false
 }
@@ -737,10 +716,32 @@ const onBrandModelCancel = () => {
     // 可以在这里处理取消逻辑
 }
+const createCar = async (data) => {
+    const { code } = await addVehicleAPI({ ...data })
+    if (code) {
+        Taro.showToast({
+            title: '发布成功',
+            icon: 'success'
+        })
+        Taro.navigateBack()
+    }
+}
+
+const updateCar = async (id, data) => {
+    const { code } = await updateVehicleAPI({ id, ...data })
+    if (code) {
+        Taro.showToast({
+            title: '保存成功',
+            icon: 'success'
+        })
+        Taro.navigateBack()
+    }
+}
+
 /**
  * 发布/保存车辆
  */
-const onPublish = () => {
+const onPublish = async () => {
     if (!validateForm()) return
     const loadingTitle = isEditMode.value ? '保存中...' : '发布中...'
@@ -758,19 +759,21 @@ const onPublish = () => {
     const submitData = {
         ...formData,
         images: images,
-        imageUrls: Object.values(images).filter(url => url) // 过滤空URL
+        photo_meta_ids: Object.values(images).filter(url => url) // 过滤空URL
     }
+    console.warn(submitData);
+
     if (isEditMode.value) {
         submitData.id = carId.value
     }
-    // TODO: 在此处调用实际的API接口提交数据
+    // 在此处调用实际的API接口提交数据
-    // if (isEditMode.value) {
+    if (isEditMode.value) {
-    //   updateCar(carId.value, submitData)
+        await updateCar(carId.value, submitData)
-    // } else {
+    } else {
-    //   createCar(submitData)
+        await createCar(submitData)
-    // }
+    }
     // 模拟请求
     setTimeout(() => {
@@ -809,17 +812,17 @@ const validateForm = () => {
         return false
     }
-    if (!formData.condition) {
+    // if (!formData.new_level) {
-        Taro.showToast({ title: '请选择新旧程度', icon: 'none' })
+    //     Taro.showToast({ title: '请选择新旧程度', icon: 'none' })
-        return false
+    //     return false
-    }
+    // }
-    if (!formData.mileage || formData.mileage <= 0) {
+    if (!formData.total_mileage_km || formData.total_mileage_km <= 0) {
         Taro.showToast({ title: '请输入正确的行驶里程', icon: 'none' })
         return false
     }
-    if (!formData.sellingPrice) {
+    if (!formData.price) {
         Taro.showToast({ title: '请输入出让价格', icon: 'none' })
         return false
     }
@@ -844,18 +847,18 @@ const loadCarData = async () => {
             school: '上海理工大学',
             brand: '小牛电动',
             model: 'NGT',
-            year: '2023年',
+            manufacture_year: '2023年',
-            condition: '9成新',
+            new_level: '9成新',
-            mileage: '1200',
+            total_mileage_km: '1200',
-            range: '60',
+            range_km: '60',
             maxSpeed: '25',
-            batteryCapacity: '20',
+            battery_capacity_ah: '20',
             batteryWear: '轻微磨损',
-            brakeWear: '轻微磨损',
+            brake_wear_level: '轻微磨损',
-            tireWear: '轻微磨损',
+            tire_wear_level: '轻微磨损',
-            sellingPrice: '3200',
+            price: '3200',
-            marketPrice: '6500',
+            market_price: '6500',
-            description: '车况良好，电池续航正常，无重大事故，平时保养得当。',
+            note: '车况良好，电池续航正常，无重大事故，平时保养得当。',
             images: {
                 front: 'https://picsum.photos/300/200?random=1',
                 left: 'https://picsum.photos/300/200?random=2',
@@ -869,18 +872,18 @@ const loadCarData = async () => {
             school: mockCarData.school,
             brand: mockCarData.brand,
             model: mockCarData.model,
-            year: mockCarData.year,
+            manufacture_year: mockCarData.manufacture_year,
-            condition: mockCarData.condition,
+            new_level: mockCarData.new_level,
-            mileage: mockCarData.mileage,
+            total_mileage_km: mockCarData.total_mileage_km,
-            range: mockCarData.range,
+            range_km: mockCarData.range_km,
             maxSpeed: mockCarData.maxSpeed,
-            batteryCapacity: mockCarData.batteryCapacity,
+            battery_capacity_ah: mockCarData.battery_capacity_ah,
             batteryWear: mockCarData.batteryWear,
-            brakeWear: mockCarData.brakeWear,
+            brake_wear_level: mockCarData.brake_wear_level,
-            tireWear: mockCarData.tireWear,
+            tire_wear_level: mockCarData.tire_wear_level,
-            sellingPrice: mockCarData.sellingPrice,
+            price: mockCarData.price,
-            marketPrice: mockCarData.marketPrice,
+            market_price: mockCarData.market_price,
-            description: mockCarData.description
+            note: mockCarData.note
         })
         // 填充图片数据