hookehuyr

feat(打卡详情页): 添加作业选择器组件

在打卡详情页新增作业选择器功能,允许用户选择本次打卡对应的作业
...@@ -18,6 +18,25 @@ ...@@ -18,6 +18,25 @@
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 + <!-- 作业弹框选择区域 -->
22 + <div class="mb-4">
23 + <van-field
24 + v-model="selectedTaskText"
25 + is-link
26 + readonly
27 + label="选择作业"
28 + placeholder="请选择本次打卡的作业"
29 + @click="showTaskPicker = true"
30 + class="rounded-lg border border-gray-100"
31 + />
32 + <van-popup v-model:show="showTaskPicker" round position="bottom">
33 + <van-picker
34 + :columns="taskOptions"
35 + @cancel="showTaskPicker = false"
36 + @confirm="onConfirmTask"
37 + />
38 + </van-popup>
39 + </div>
21 <!-- 文本输入区域 --> 40 <!-- 文本输入区域 -->
22 <div class="text-input-area"> 41 <div class="text-input-area">
23 <van-field v-model="message" rows="6" autosize type="textarea" 42 <van-field v-model="message" rows="6" autosize type="textarea"
...@@ -163,6 +182,23 @@ const { ...@@ -163,6 +182,23 @@ const {
163 // 任务详情数据 182 // 任务详情数据
164 const taskDetail = ref({}) 183 const taskDetail = ref({})
165 184
185 +// 作业选择相关
186 +const showTaskPicker = ref(false)
187 +const selectedTaskText = ref('')
188 +const selectedTaskValue = ref('')
189 +const taskOptions = [
190 + { text: '作业一:基础练习', value: 'task1' },
191 + { text: '作业二:进阶挑战', value: 'task2' },
192 + { text: '作业三:综合应用', value: 'task3' },
193 +]
194 +
195 +const onConfirmTask = ({ selectedOptions }) => {
196 + const option = selectedOptions[0]
197 + selectedTaskText.value = option.text
198 + selectedTaskValue.value = option.value
199 + showTaskPicker.value = false
200 +}
201 +
166 // 作品类型选项 202 // 作品类型选项
167 const attachmentTypeOptions = ref([]) 203 const attachmentTypeOptions = ref([])
168 204
......