hookehuyr

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

在打卡详情页新增作业选择器功能,允许用户选择本次打卡对应的作业
......@@ -18,6 +18,25 @@
<div class="section-wrapper">
<div class="section-title">打卡留言</div>
<div class="section-content">
<!-- 作业弹框选择区域 -->
<div class="mb-4">
<van-field
v-model="selectedTaskText"
is-link
readonly
label="选择作业"
placeholder="请选择本次打卡的作业"
@click="showTaskPicker = true"
class="rounded-lg border border-gray-100"
/>
<van-popup v-model:show="showTaskPicker" round position="bottom">
<van-picker
:columns="taskOptions"
@cancel="showTaskPicker = false"
@confirm="onConfirmTask"
/>
</van-popup>
</div>
<!-- 文本输入区域 -->
<div class="text-input-area">
<van-field v-model="message" rows="6" autosize type="textarea"
......@@ -163,6 +182,23 @@ const {
// 任务详情数据
const taskDetail = ref({})
// 作业选择相关
const showTaskPicker = ref(false)
const selectedTaskText = ref('')
const selectedTaskValue = ref('')
const taskOptions = [
{ text: '作业一:基础练习', value: 'task1' },
{ text: '作业二:进阶挑战', value: 'task2' },
{ text: '作业三:综合应用', value: 'task3' },
]
const onConfirmTask = ({ selectedOptions }) => {
const option = selectedOptions[0]
selectedTaskText.value = option.text
selectedTaskValue.value = option.value
showTaskPicker.value = false
}
// 作品类型选项
const attachmentTypeOptions = ref([])
......