feat(表单): 添加品牌型号选择器组件并集成到销售表单

- 新增 BrandModelPicker 组件用于统一选择品牌和型号 - 替换原表单中分开的品牌和型号选择字段 - 添加表单验证逻辑和组合字段显示

feat(表单): 添加品牌型号选择器组件并集成到销售表单
- 新增 BrandModelPicker 组件用于统一选择品牌和型号 - 替换原表单中分开的品牌和型号选择字段 - 添加表单验证逻辑和组合字段显示
hookehuyr
Commit de40f69258f668537b95af0691d509fc24b1f893 de40f692 1 parent e65de0ec
Showing 3 changed files with 61 additions and 5 deletions
components.d.ts
src/components/BrandModelPicker.vue
src/pages/sell/index.vue
--- a/components.d.ts
View file @de40f69
+++ b/components.d.ts
View file @de40f69
@@ -7,6 +7,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
+    BrandModelPicker: typeof import('./src/components/BrandModelPicker.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
--- a/src/components/BrandModelPicker.vue 0 → 100644
View file @de40f69
+++ b/src/components/BrandModelPicker.vue 0 → 100644
View file @de40f69
--- a/src/pages/sell/index.vue
View file @de40f69
+++ b/src/pages/sell/index.vue
View file @de40f69
@@ -103,20 +103,32 @@
             <!-- 车辆详情表单 -->
             <nut-form ref="formRef" :model-value="formData">
                 <view class="form-section">
-                    <!-- 车型品牌 -->
+                    <!--<!~~ 车型品牌 ~~>
-                    <nut-form-item label-position="top" label="车型品牌" prop="brand" required :rules="[{ required: true, message: '请选择车型品牌' }]">
+                    <nut-form-item label-position="top" label="车型品牌" prop="brand" required
+                        :rules="[{ required: true, message: '请选择车型品牌' }]">
                         <view class="form-item-content" @click="showBrandPicker">
                             <text class="form-value">{{ formData.brand || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
                     </nut-form-item>
-                    <!-- 车辆型号 -->
+                    <!~~ 车辆型号 ~~>
                     <nut-form-item label-position="top" label="车辆型号" prop="model">
                         <view class="form-item-content" @click="showModelPicker">
                             <text class="form-value">{{ formData.model || '请选择' }}</text>
                             <Right class="arrow-icon" />
                         </view>
+                    </nut-form-item>-->
+
+                    <!-- 品牌型号选择（新版） -->
+                    <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel" required
+                        :rules="[{ required: true, message: '请选择品牌型号' }]">
+                        <view class="form-item-content" @click="showBrandModelPicker">
+                            <text class="form-value">
+                                {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }}
+                            </text>
+                            <Right class="arrow-icon" />
+                        </view>
                     </nut-form-item>
                     <!-- 车辆出厂年份 -->
@@ -243,12 +255,14 @@
         </view>
         <!-- 选择器弹窗 -->
-        <!-- 学校选择 -->
+        <!-- 学校选择器 -->
         <nut-popup v-model:visible="schoolPickerVisible" position="bottom">
             <nut-picker v-model="schoolValue" :columns="schoolOptions" title="选择学校" @confirm="onSchoolConfirm"
                 @cancel="schoolPickerVisible = false" />
         </nut-popup>
+        <!-- TODO: 如果车型品牌选择其他,车辆型号选择其他型号,允许用户自己填写自定义的内容, 需要等待真实数据后再考虑  -->
+
         <!-- 品牌选择 -->
         <nut-popup v-model:visible="brandPickerVisible" position="bottom">
             <nut-picker v-model="brandValue" :columns="brandOptions" title="选择车型品牌" @confirm="onBrandConfirm"
@@ -261,6 +275,9 @@
                 @cancel="modelPickerVisible = false" />
         </nut-popup>
+        <!-- 品牌型号选择器组件 -->
+        <BrandModelPicker ref="brandModelPickerRef" @confirm="onBrandModelConfirm" @cancel="onBrandModelCancel" />
+
         <!-- 年份选择 -->
         <nut-popup v-model:visible="yearPickerVisible" position="bottom">
             <nut-picker v-model="yearValue" :columns="yearOptions" title="选择出厂年份" @confirm="onYearConfirm"
@@ -298,6 +315,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { Plus, Right, Location, Close, RectLeft } from '@nutui/icons-vue-taro'
 import Taro from '@tarojs/taro'
 import BASE_URL from '@/utils/config';
+import BrandModelPicker from '@/components/BrandModelPicker.vue'
 import './index.less'
 const themeVars = ref({
@@ -350,6 +368,7 @@ const formData = reactive({
     school: '',
     brand: '',
     model: '',
+    brandModel: '', // 品牌型号组合字段，用于表单验证
     year: '',
     condition: '',
     mileage: '1200',
@@ -374,6 +393,10 @@ const batteryWearPickerVisible = ref(false)
 const brakeWearPickerVisible = ref(false)
 const tireWearPickerVisible = ref(false)
+// 新的品牌型号选择器状态
+// 品牌型号选择器组件引用
+const brandModelPickerRef = ref(null)
+
 // 选择器值
 const schoolValue = ref([])
 const brandValue = ref([])
@@ -444,6 +467,8 @@ const wearLevelOptions = ref([
     { text: '需要更换', value: '需要更换' }
 ])
+// 品牌型号数据已移至 BrandModelPicker 组件中
+
 /**
@@ -508,7 +533,7 @@ const uploadImage = (filePath, type) => {
                 }
             });
         },
-        fail: function (res) {
+        fail: function () {
             Taro.hideLoading({
                 success: () => {
                     Taro.showToast({
@@ -682,6 +707,36 @@ const onTireWearConfirm = ({ selectedValue }) => {
 }
 /**
+ * 显示品牌型号选择器
+ */
+const showBrandModelPicker = () => {
+    brandModelPickerRef.value?.show()
+}
+
+/**
+ * 品牌型号选择确认回调
+ */
+const onBrandModelConfirm = (result) => {
+    formData.brand = result.brand
+    formData.model = result.model
+    // 设置组合字段用于表单验证
+    formData.brandModel = `${result.brand} ${result.model}`
+
+    Taro.showToast({
+        title: `已选择 ${result.brand} ${result.model}`,
+        icon: 'success',
+        duration: 2000
+    })
+}
+
+/**
+ * 品牌型号选择取消回调
+ */
+const onBrandModelCancel = () => {
+    // 可以在这里处理取消逻辑
+}
+
+/**
  * 发布/保存车辆
  */
 const onPublish = () => {