hookehuyr

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

- 新增 BrandModelPicker 组件用于统一选择品牌和型号
- 替换原表单中分开的品牌和型号选择字段
- 添加表单验证逻辑和组合字段显示
......@@ -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']
......
This diff is collapsed. Click to expand it.
......@@ -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 = () => {
......