|
@@ -1,4 +1,15 @@
|
|
|
-import { Button, Cell, Icon, Image, Popup, Swipe, SwipeItem, Tag } from 'vant'
|
|
|
+import {
|
|
|
+ ActionSheet,
|
|
|
+ Button,
|
|
|
+ Cell,
|
|
|
+ CountDown,
|
|
|
+ Icon,
|
|
|
+ Image,
|
|
|
+ Popup,
|
|
|
+ Swipe,
|
|
|
+ SwipeItem,
|
|
|
+ Tag
|
|
|
+} from 'vant'
|
|
|
import { defineComponent, reactive, ref } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import NoticeStart from '../model/notice-start'
|
|
@@ -8,17 +19,27 @@ import iconCountDown from '../images/icon-count-down.png'
|
|
|
import iconButtonList from '../images/icon-button-list.png'
|
|
|
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',
|
|
|
setup() {
|
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
|
+ const countDownRef = ref()
|
|
|
const swipeRef = ref()
|
|
|
const state = reactive({
|
|
|
visiableNotice: false,
|
|
|
- answerList: {}
|
|
|
+ visiableAnswer: false,
|
|
|
+ currentIndex: 0,
|
|
|
+ questionList: [1, 2, 3, 4, 5],
|
|
|
+ answerList: {},
|
|
|
+ time: 30 * 60 * 1000,
|
|
|
+ visiableSure: false
|
|
|
})
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles.unitDetail}>
|
|
|
<Cell center class={styles.unitSection}>
|
|
@@ -32,7 +53,13 @@ export default defineComponent({
|
|
|
</div>
|
|
|
<div class={styles.qNums}>
|
|
|
<Icon class={styles.icon} name={iconCountDown} />
|
|
|
- 剩余时长:39:30
|
|
|
+ 剩余时长:
|
|
|
+ <CountDown
|
|
|
+ ref={countDownRef}
|
|
|
+ time={state.time}
|
|
|
+ format={'mm:ss'}
|
|
|
+ autoStart={false}
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
@@ -46,31 +73,68 @@ 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>
|
|
|
+ {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} class={[styles.wapList, 'van-haptics-feedback']} />
|
|
|
+ <Image
|
|
|
+ src={iconButtonList}
|
|
|
+ class={[styles.wapList, 'van-haptics-feedback']}
|
|
|
+ onClick={() => (state.visiableAnswer = true)}
|
|
|
+ />
|
|
|
</div>
|
|
|
</OSticky>
|
|
|
|
|
|
+ {/* 题目集合 */}
|
|
|
+ <ActionSheet v-model:show={state.visiableAnswer} title="题目列表" safeAreaInsetBottom>
|
|
|
+ <AnswerList
|
|
|
+ value={[1, 3, 4]}
|
|
|
+ onSelect={(item: any) => {
|
|
|
+ // 跳转,并且跳过动画
|
|
|
+ swipeRef.value?.swipeTo(item, {
|
|
|
+ immediate: true
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </ActionSheet>
|
|
|
+
|
|
|
{/* 测验须知 */}
|
|
|
<Popup
|
|
|
v-model:show={state.visiableNotice}
|
|
@@ -85,9 +149,21 @@ export default defineComponent({
|
|
|
}}
|
|
|
onConfirm={() => {
|
|
|
console.log('start')
|
|
|
+ countDownRef.value.start()
|
|
|
+ state.visiableNotice = false
|
|
|
}}
|
|
|
/>
|
|
|
</Popup>
|
|
|
+
|
|
|
+ <ODialog
|
|
|
+ v-model:show={state.visiableSure}
|
|
|
+ title="测验完成"
|
|
|
+ message="确认本次测验的题目都完成了吗?\n提交后不可修改哦"
|
|
|
+ messageAlign="left"
|
|
|
+ showCancelButton
|
|
|
+ cancelButtonText="再等等"
|
|
|
+ confirmButtonText="确认完成"
|
|
|
+ />
|
|
|
</div>
|
|
|
)
|
|
|
}
|