refactor(CheckinDetailPage): 优化作业选择区域的编辑模式显示
在编辑模式下直接显示作业文本而非选择器,提升用户体验
Showing
1 changed file
with
11 additions
and
3 deletions
| ... | @@ -18,15 +18,23 @@ | ... | @@ -18,15 +18,23 @@ |
| 18 | <div class="section-wrapper"> | 18 | <div class="section-wrapper"> |
| 19 | <div class="section-title">提交作业</div> | 19 | <div class="section-title">提交作业</div> |
| 20 | <div class="section-content"> | 20 | <div class="section-content"> |
| 21 | - <!-- 作业弹框选择区域 --> | 21 | + <!-- 作业选择区域 --> |
| 22 | <div class="mb-4"> | 22 | <div class="mb-4"> |
| 23 | + <!-- 编辑模式下直接显示文本 --> | ||
| 24 | + <div v-if="isEditMode" class="bg-gray-50 rounded-lg p-3 border border-gray-100 flex items-center justify-between"> | ||
| 25 | + <span class="text-gray-700 font-medium">当前作业</span> | ||
| 26 | + <span class="text-gray-900 font-bold">{{ selectedTaskText }}</span> | ||
| 27 | + </div> | ||
| 28 | + | ||
| 29 | + <!-- 非编辑模式下显示选择框 --> | ||
| 30 | + <template v-else> | ||
| 23 | <van-field v-model="selectedTaskText" is-link readonly label="选择作业" placeholder="请选择本次打卡的作业" | 31 | <van-field v-model="selectedTaskText" is-link readonly label="选择作业" placeholder="请选择本次打卡的作业" |
| 24 | - :disabled="isEditMode" @click="!isEditMode && (showTaskPicker = true)" | 32 | + @click="showTaskPicker = true" class="rounded-lg border border-gray-100" /> |
| 25 | - class="rounded-lg border border-gray-100" /> | ||
| 26 | <van-popup v-model:show="showTaskPicker" round position="bottom"> | 33 | <van-popup v-model:show="showTaskPicker" round position="bottom"> |
| 27 | <van-picker v-model="selectedTaskValue" :columns="taskOptions" @cancel="showTaskPicker = false" | 34 | <van-picker v-model="selectedTaskValue" :columns="taskOptions" @cancel="showTaskPicker = false" |
| 28 | @confirm="onConfirmTask" /> | 35 | @confirm="onConfirmTask" /> |
| 29 | </van-popup> | 36 | </van-popup> |
| 37 | + </template> | ||
| 30 | </div> | 38 | </div> |
| 31 | <!-- 计数对象 --> | 39 | <!-- 计数对象 --> |
| 32 | <div v-if="taskType === 'count' && selectedTaskValue && selectedTaskValue.length > 0" class="mb-4"> | 40 | <div v-if="taskType === 'count' && selectedTaskValue && selectedTaskValue.length > 0" class="mb-4"> | ... | ... |
-
Please register or login to post a comment