feat(表单): 优化表单选择项样式并添加年份选择限制
- 为表单选择项添加不同状态下的样式区分 - 限制年份选择器最大日期为当前年份 - 将返回逻辑改为navigateBack - 移除TODO注释并使用真实API获取数据
Showing
1 changed file
with
11 additions
and
8 deletions
| ... | @@ -138,7 +138,7 @@ | ... | @@ -138,7 +138,7 @@ |
| 138 | <!-- 车辆出厂年份 --> | 138 | <!-- 车辆出厂年份 --> |
| 139 | <nut-form-item label-position="top" label="车辆出厂年份" prop="manufacture_year"> | 139 | <nut-form-item label-position="top" label="车辆出厂年份" prop="manufacture_year"> |
| 140 | <view class="form-item-content" @click="showYearPicker"> | 140 | <view class="form-item-content" @click="showYearPicker"> |
| 141 | - <text class="form-value">{{ formData.manufacture_year || '请选择' }}</text> | 141 | + <text class="form-value" :class="{ 'form-value-selected': formData.manufacture_year, 'form-value-placeholder': !formData.manufacture_year }">{{ formData.manufacture_year || '请选择' }}</text> |
| 142 | <Right class="arrow-icon" /> | 142 | <Right class="arrow-icon" /> |
| 143 | </view> | 143 | </view> |
| 144 | </nut-form-item> | 144 | </nut-form-item> |
| ... | @@ -146,7 +146,7 @@ | ... | @@ -146,7 +146,7 @@ |
| 146 | <!-- 新旧程度 --> | 146 | <!-- 新旧程度 --> |
| 147 | <nut-form-item label-position="top" label="新旧程度" prop="new_level"> | 147 | <nut-form-item label-position="top" label="新旧程度" prop="new_level"> |
| 148 | <view class="form-item-content" @click="showConditionPicker"> | 148 | <view class="form-item-content" @click="showConditionPicker"> |
| 149 | - <text class="form-value">{{ formData.new_level || '请选择' }}</text> | 149 | + <text class="form-value" :class="{ 'form-value-selected': formData.new_level, 'form-value-placeholder': !formData.new_level }">{{ formData.new_level || '请选择' }}</text> |
| 150 | <Right class="arrow-icon" /> | 150 | <Right class="arrow-icon" /> |
| 151 | </view> | 151 | </view> |
| 152 | </nut-form-item> | 152 | </nut-form-item> |
| ... | @@ -200,7 +200,7 @@ | ... | @@ -200,7 +200,7 @@ |
| 200 | <!-- 刹车磨损度 --> | 200 | <!-- 刹车磨损度 --> |
| 201 | <nut-form-item label-position="top" label="刹车磨损度" prop="brake_wear_level"> | 201 | <nut-form-item label-position="top" label="刹车磨损度" prop="brake_wear_level"> |
| 202 | <view class="form-item-content" @click="showBrakeWearPicker"> | 202 | <view class="form-item-content" @click="showBrakeWearPicker"> |
| 203 | - <text class="form-value">{{ formData.brake_wear_level || '请选择' }}</text> | 203 | + <text class="form-value" :class="{ 'form-value-selected': formData.brake_wear_level, 'form-value-placeholder': !formData.brake_wear_level }">{{ formData.brake_wear_level || '请选择' }}</text> |
| 204 | <Right class="arrow-icon" /> | 204 | <Right class="arrow-icon" /> |
| 205 | </view> | 205 | </view> |
| 206 | </nut-form-item> | 206 | </nut-form-item> |
| ... | @@ -208,7 +208,7 @@ | ... | @@ -208,7 +208,7 @@ |
| 208 | <!-- 轮胎磨损度 --> | 208 | <!-- 轮胎磨损度 --> |
| 209 | <nut-form-item label-position="top" label="轮胎磨损度" prop="tire_wear_level"> | 209 | <nut-form-item label-position="top" label="轮胎磨损度" prop="tire_wear_level"> |
| 210 | <view class="form-item-content" @click="showTireWearPicker"> | 210 | <view class="form-item-content" @click="showTireWearPicker"> |
| 211 | - <text class="form-value">{{ formData.tire_wear_level || '请选择' }}</text> | 211 | + <text class="form-value" :class="{ 'form-value-selected': formData.tire_wear_level, 'form-value-placeholder': !formData.tire_wear_level }">{{ formData.tire_wear_level || '请选择' }}</text> |
| 212 | <Right class="arrow-icon" /> | 212 | <Right class="arrow-icon" /> |
| 213 | </view> | 213 | </view> |
| 214 | </nut-form-item> | 214 | </nut-form-item> |
| ... | @@ -287,6 +287,7 @@ | ... | @@ -287,6 +287,7 @@ |
| 287 | v-model="yearValue" | 287 | v-model="yearValue" |
| 288 | title="选择出厂年份" | 288 | title="选择出厂年份" |
| 289 | type="year-month" | 289 | type="year-month" |
| 290 | + :max-date="maxYearDate" | ||
| 290 | @confirm="onYearConfirm" | 291 | @confirm="onYearConfirm" |
| 291 | @cancel="yearPickerVisible = false" | 292 | @cancel="yearPickerVisible = false" |
| 292 | /> | 293 | /> |
| ... | @@ -334,10 +335,9 @@ import { getSchoolsAPI, getBrandsModelsAPI } from '@/api/other'; | ... | @@ -334,10 +335,9 @@ import { getSchoolsAPI, getBrandsModelsAPI } from '@/api/other'; |
| 334 | /** | 335 | /** |
| 335 | * 返回上一页 | 336 | * 返回上一页 |
| 336 | */ | 337 | */ |
| 338 | +// eslint-disable-next-line no-unused-vars | ||
| 337 | const goBack = () => { | 339 | const goBack = () => { |
| 338 | - Taro.redirectTo({ | 340 | + Taro.navigateBack() |
| 339 | - url: '/pages/index/index' | ||
| 340 | - }) | ||
| 341 | } | 341 | } |
| 342 | 342 | ||
| 343 | // 获取页面参数 | 343 | // 获取页面参数 |
| ... | @@ -416,6 +416,9 @@ const conditionValue = ref([]) | ... | @@ -416,6 +416,9 @@ const conditionValue = ref([]) |
| 416 | const brakeWearValue = ref([]) | 416 | const brakeWearValue = ref([]) |
| 417 | const tireWearValue = ref([]) | 417 | const tireWearValue = ref([]) |
| 418 | 418 | ||
| 419 | +// 年份选择器最大日期限制(当前年份的12月31日) | ||
| 420 | +const maxYearDate = ref(new Date(new Date().getFullYear(), 11, 31)) | ||
| 421 | + | ||
| 419 | // 选择器选项数据 | 422 | // 选择器选项数据 |
| 420 | const schoolOptions = ref([]) | 423 | const schoolOptions = ref([]) |
| 421 | const brandOptions = ref([]) | 424 | const brandOptions = ref([]) |
| ... | @@ -972,7 +975,7 @@ const loadCarData = async () => { | ... | @@ -972,7 +975,7 @@ const loadCarData = async () => { |
| 972 | try { | 975 | try { |
| 973 | Taro.showLoading({ title: '加载中...' }) | 976 | Taro.showLoading({ title: '加载中...' }) |
| 974 | 977 | ||
| 975 | - // TODO: 调用真实API获取车辆数据 | 978 | + // 调用真实API获取车辆数据 |
| 976 | const { code, data } = await getVehicleDetailAPI({ id: carId.value }) | 979 | const { code, data } = await getVehicleDetailAPI({ id: carId.value }) |
| 977 | 980 | ||
| 978 | if (code) { | 981 | if (code) { | ... | ... |
-
Please register or login to post a comment