|
@@ -21,6 +21,7 @@ import OSticky from '@/components/o-sticky'
|
|
|
import ChoiceQuestion from '../model/choice-question'
|
|
|
import { useCountDown } from '@vant/use'
|
|
|
import AnswerList from '../model/answer-list'
|
|
|
+import ODialog from '@/components/o-dialog'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'unit-detail',
|
|
@@ -32,8 +33,11 @@ export default defineComponent({
|
|
|
const state = reactive({
|
|
|
visiableNotice: false,
|
|
|
visiableAnswer: false,
|
|
|
+ currentIndex: 0,
|
|
|
+ questionList: [1, 2, 3, 4, 5],
|
|
|
answerList: {},
|
|
|
- time: 30 * 60 * 1000
|
|
|
+ time: 30 * 60 * 1000,
|
|
|
+ visiableSure: false
|
|
|
})
|
|
|
|
|
|
return () => (
|
|
@@ -69,38 +73,46 @@ export default defineComponent({
|
|
|
duration={300}
|
|
|
touchable={false}
|
|
|
lazyRender
|
|
|
+ initialSwipe={state.currentIndex}
|
|
|
>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion v-model:value={state.answerList[0]} type="checkbox" />
|
|
|
- </SwipeItem>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion />
|
|
|
- </SwipeItem>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion />
|
|
|
- </SwipeItem>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion />
|
|
|
- </SwipeItem>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion />
|
|
|
- </SwipeItem>
|
|
|
- <SwipeItem>
|
|
|
- <ChoiceQuestion />
|
|
|
- </SwipeItem>
|
|
|
+ {state.questionList.map((item: any) => (
|
|
|
+ <SwipeItem>
|
|
|
+ <ChoiceQuestion v-model:value={state.answerList[item]} type="checkbox" />
|
|
|
+ </SwipeItem>
|
|
|
+ ))}
|
|
|
</Swipe>
|
|
|
|
|
|
<OSticky position="bottom" background="white">
|
|
|
<div class={['btnGroup btnMore']}>
|
|
|
+ {state.currentIndex > 0 && (
|
|
|
+ <Button
|
|
|
+ round
|
|
|
+ block
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ onClick={() => {
|
|
|
+ state.currentIndex -= 1
|
|
|
+ swipeRef.value?.prev()
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 上一题
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
<Button
|
|
|
block
|
|
|
round
|
|
|
type="primary"
|
|
|
onClick={() => {
|
|
|
- swipeRef.value.next()
|
|
|
+ if (state.questionList.length === state.currentIndex + 1) {
|
|
|
+ state.visiableSure = true
|
|
|
+ } else {
|
|
|
+ state.currentIndex += 1
|
|
|
+ swipeRef.value?.next()
|
|
|
+ }
|
|
|
+ console.log(state.currentIndex)
|
|
|
}}
|
|
|
>
|
|
|
- 下一题
|
|
|
+ {state.questionList.length === state.currentIndex + 1 ? '测试完成' : '下一题'}
|
|
|
</Button>
|
|
|
<Image
|
|
|
src={iconButtonList}
|
|
@@ -116,7 +128,7 @@ export default defineComponent({
|
|
|
value={[1, 3, 4]}
|
|
|
onSelect={(item: any) => {
|
|
|
// 跳转,并且跳过动画
|
|
|
- swipeRef.value.swipeTo(item, {
|
|
|
+ swipeRef.value?.swipeTo(item, {
|
|
|
immediate: true
|
|
|
})
|
|
|
}}
|
|
@@ -142,6 +154,16 @@ export default defineComponent({
|
|
|
}}
|
|
|
/>
|
|
|
</Popup>
|
|
|
+
|
|
|
+ <ODialog
|
|
|
+ v-model:show={state.visiableSure}
|
|
|
+ title="测验完成"
|
|
|
+ message="确认本次测验的题目都完成了吗?\n提交后不可修改哦"
|
|
|
+ messageAlign="left"
|
|
|
+ showCancelButton
|
|
|
+ cancelButtonText="再等等"
|
|
|
+ confirmButtonText="确认完成"
|
|
|
+ />
|
|
|
</div>
|
|
|
)
|
|
|
}
|