更新判断

src/views/unit-test/examination-mode/index.tsx

@@ -131,7 +131,7 @@ export default defineComponent({
         })
 
         // 判断是否是最后一题
-        console.log(state.questionList.length, state.currentIndex, userAnswerList, '-----')
+        // console.log(state.questionList.length, state.currentIndex, userAnswerList, '-----')
         if (state.questionList.length === state.currentIndex + 1) {
           state.visiableSure = true
           return
@@ -253,9 +253,15 @@ export default defineComponent({
           }}
         >
           {state.questionList.map((item: any, index: number) => (
-            // item.questionTypeCode === QuestionType.LINK && (
+            // item.questionTypeCode === QuestionType.PLAY && (
             //   <SwipeItem>
             //     <KeepLookQuestion v-model:value={item.userAnswer} data={item} index={index + 1} />
+            //     <PlayQuestion
+            //       v-model:value={item.userAnswer}
+            //       data={item}
+            //       index={index + 1}
+            //       unitId={state.id as any}
+            //     />
             //   </SwipeItem>
             // )
             <SwipeItem>

src/views/unit-test/index.tsx

@@ -241,7 +241,13 @@ export default defineComponent({
                             block
                             style={{ color: '#F67146' }}
                             onClick={() => {
-                              router.push('/test-exercise')
+                              router.push({
+                                path: '/test-exercise',
+                                query: {
+                                  id: item.unitExaminationId,
+                                  name: item.name
+                                }
+                              })
                             }}
                           >
                             练习模式

src/views/unit-test/model/choice-question/index.module.less

@@ -51,6 +51,7 @@
       margin-right: 10px;
     }
     .value {
+      word-break: break-all;
       :global {
         .van-image {
           height: 38px;

src/views/unit-test/model/choice-question/index.tsx

@@ -63,6 +63,7 @@ export default defineComponent({
         )
         item.checked = tempIndex !== -1 ? true : false
       })
+      console.log(list)
       return list
     })
     const mediaUrls = computed(() => (props.data.mediaUrls ? props.data.mediaUrls.split(',') : ''))

src/views/unit-test/model/error-mode/index.tsx

@@ -5,6 +5,12 @@ import styles from './index.module.less'
 
 export default defineComponent({
   name: 'result-mode',
+  props: {
+    confirmButtonText: {
+      type: String,
+      default: '我知道了'
+    }
+  },
   emits: ['close', 'conform'],
   setup(props, { emit }) {
     return () => (
@@ -34,7 +40,7 @@ export default defineComponent({
             emit('close')
           }}
         >
-          我知道啦
+          {props.confirmButtonText}
         </Button>
       </div>
     )

src/views/unit-test/model/keep-look-question/index.module.less

@@ -24,7 +24,14 @@
     }
   }
 }
-
+.unitDetail {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  font-size: 14px;
+  img {
+    width: 100%;
+  }
+}
 .unitTitleImg {
   width: 100%;
   padding-top: 20px;

src/views/unit-test/model/play-question/index.module.less

@@ -30,6 +30,14 @@
   border: 1px solid #d5d5d5;
   padding: 25px 5px;
 }
+.unitDetail {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  font-size: 14px;
+  img {
+    width: 100%;
+  }
+}
 .unitTitleImg {
   width: 100%;
 }

src/views/unit-test/model/play-question/index.tsx

@@ -1,6 +1,12 @@
 import { Tag, Image, Button, Cell, Icon } from 'vant'
-import { defineComponent, nextTick, onMounted, PropType, reactive } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, PropType, reactive } from 'vue'
 import styles from './index.module.less'
+import {
+  listenerMessage,
+  postMessage,
+  promisefiyPostMessage,
+  removeListenerMessage
+} from '@/helpers/native-message'
 import deepClone from '@/helpers/deep-clone'
 import iconSong from '../../images/icon-song.png'
 
@@ -9,12 +15,22 @@ export default defineComponent({
   name: 'choice-question',
   props: {
     value: {
-      type: [String, Number, Array],
-      default: ''
+      type: Array,
+      default: []
+    },
+    index: {
+      // 题目是第几道
+      type: Number,
+      default: 1
     },
-    answers: {
+    data: {
       type: Object,
-      default: {}
+      default: () => ({})
+    },
+    // 测试编号
+    unitId: {
+      type: String,
+      default: ''
     },
     /* 只读 */
     readOnly: {
@@ -25,7 +41,8 @@ export default defineComponent({
   emits: ['update:value'],
   setup(props, { emit }) {
     const state = reactive({
-      list: [] as any
+      list: [] as any,
+      score: 0
     })
 
     // const onSelect = (item: any) => {
@@ -43,35 +60,86 @@ export default defineComponent({
     //     emit('update:value', item.index)
     //   }
     // }
+
+    // const mediaUrls = computed(() => (props.data.mediaUrls ? props.data.mediaUrls.split(',') : ''))
+
+    const questionExtendsInfo = computed(() =>
+      props.data.questionExtendsInfo ? JSON.parse(props.data.questionExtendsInfo) : ''
+    )
+
+    /**
+     * @description 进行评测
+     */
+    const onEvaluation = () => {
+      const info = questionExtendsInfo.value
+      if (!info) return
+      console.log(props.unitId)
+      postMessage({
+        api: 'openAccompanyWebView',
+        content: {
+          // url: `https://ponline.colexiu.com/orchestra-music-score/?id=${info.musicSheetId}&modelType=evaluation&unitId=${props.unitId}`,
+          url: `${location.origin}/orchestra-music-score/?id=${info.musicSheetId}&modelType=evaluation&unitId=${props.unitId}`,
+          orientation: 0,
+          isHideTitle: true,
+          statusBarTextColor: false,
+          isOpenLight: true
+        }
+      })
+
+      // 打开页面监听
+      listenerMessage('webViewOnResume', () => {
+        promisefiyPostMessage({ api: 'getCache', content: { key: 'h5-orchestra-unit' } }).then(
+          (res: any) => {
+            const content = res.content
+            if (content.value) {
+              state.score = content.value.score
+            }
+
+            // 关闭页面监听
+            removeListenerMessage('webViewOnResume', () => {
+              //
+            })
+          }
+        )
+      })
+    }
+
     return () => (
       <div class={styles.unitSubject}>
         <div class={styles.unitSubjectTitle}>
-          4、请点击以下曲目进行评测，评测分数达到80分合格
-          <span class={styles.unitScore}>（5分）</span>
+          {props.index}、{props.data.name}{' '}
+          <span class={styles.unitScore}>（{props.data.totalScore || 0}分）</span>
           <Tag type="primary">演奏题</Tag>
         </div>
-        <div class={styles.unitTitleSection}>
-          <Image
-            class={styles.unitTitleImg}
-            src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png"
-          />
-        </div>
+
+        {props.data.questionDetail ? (
+          <div class={styles.unitDetail}>
+            <div v-html={props.data.questionDetail}></div>
+            {/* {mediaUrls.value &&
+              mediaUrls.value.map((url: any) => <Image class={styles.unitTitleImg} src={url} />)} */}
+          </div>
+        ) : (
+          ''
+        )}
 
         <div class={[styles.unitAnswers]}>
-          <Cell class={styles.playSection} center titleClass={['van-ellipsis', styles.playTitle]}>
-            {{
-              icon: () => <Image class={styles.img} src={iconSong} />,
-              title: () => <>没开机三江源没开机三江源</>,
-              value: () => (
-                <Button round class={styles.playBtn} type="primary">
-                  点击评测
-                  <Icon name="play" />
-                </Button>
-              )
-            }}
-          </Cell>
+          {questionExtendsInfo.value && (
+            <Cell class={styles.playSection} center titleClass={['van-ellipsis', styles.playTitle]}>
+              {{
+                icon: () => <Image class={styles.img} src={iconSong} />,
+                title: () => <>{questionExtendsInfo.value.musicName}</>,
+                value: () => (
+                  <Button round class={styles.playBtn} type="primary" onClick={onEvaluation}>
+                    点击评测
+                    <Icon name="play" />
+                  </Button>
+                )
+              }}
+            </Cell>
+          )}
+
           <div class={['van-hairline--top', styles.unitScoreNum]}>
-            <div class={styles.score}>89</div>
+            <div class={styles.score}>{state.score}</div>
             <div class={styles.scoreTitle}>评测分数</div>
             <div class={styles.scoreTips}>多次评测取完整评测的最高分数</div>
           </div>

src/views/unit-test/practice-mode/index.tsx

@@ -26,6 +26,8 @@ import KeepLookQuestion from '../model/keep-look-question'
 import PlayQuestion from '../model/play-question'
 import ErrorMode from '../model/error-mode'
 import ResultFinish from '../model/result-finish'
+import { QuestionType } from '../unit'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'unit-detail',
@@ -38,35 +40,96 @@ export default defineComponent({
       visiableError: false,
       visiableAnswer: false,
       visiableResult: false,
+      id: route.query.id,
+      examDetail: {} as any,
       currentIndex: 0,
-      questionList: [1, 2, 3, 4, 5],
-      answerList: {},
-      time: 30 * 60 * 1000,
+      questionList: [],
+      time: 0,
       visiableSure: false,
-      childs: [
-        { name: 'John', id: 0 },
-        { name: 'Joao', id: 1 },
-        { name: 'Jean', id: 2 }
-      ]
+      resultInfo: {} as any,
+      resultStatusType: 'SUCCESS', // 'SUCCESS' | 'FAIL'
+      visiableExam: false, // 考试已结束
+      nextStatus: false
     })
 
+    const getExamDetails = async () => {
+      try {
+        const { data } = await request.post(
+          '/api-student/studentUnitExamination/startExamination',
+          {
+            requestType: 'form',
+            data: {
+              studentUnitExaminationId: state.id
+            }
+          }
+        )
+        const { questionJson, studentAnswerJson, ...res } = data
+        const temp = questionJson || []
+        temp.forEach((item: any) => {
+          item.userAnswer = []
+        })
+        state.questionList = temp
+
+        state.examDetail = { ...res } || {}
+      } catch {
+        //
+      }
+    }
+
+    /**
+     * @description 下一题 | 测试完成
+     */
+    const onNextQuestion = async () => {
+      try {
+        const questionList = state.questionList || []
+        const userAnswerList: any = [] // 所有题目的答案
+        // let currentResult = false // 当前题目是否已经答题
+        questionList.forEach((question: any) => {
+          // 格式化所有题目的答案
+          if (question.userAnswer && question.userAnswer.length > 0) {
+            userAnswerList.push({
+              questionId: question.id,
+              details: question.userAnswer
+            })
+          }
+        })
+
+        // 判断是否是最后一题
+        if (state.questionList.length === state.currentIndex + 1) {
+          state.visiableSure = true
+          return
+        }
+
+        swipeRef.value?.next()
+      } catch {
+        //
+      }
+    }
+
+    onMounted(() => {
+      getExamDetails()
+    })
     return () => (
       <div class={styles.unitDetail}>
         <Cell center class={styles.unitSection}>
           {{
-            title: () => <div class={styles.unitTitle}>长笛level1上册测验一</div>,
+            title: () => <div class={styles.unitTitle}>{state.examDetail.unitExaminationName}</div>,
             label: () => (
               <div class={styles.unitCount}>
                 <div class={styles.qNums}>
                   <Icon class={styles.icon} name={iconQuestionNums} />
-                  题目数量 <span class={styles.num}>1</span>/4
+                  题目数量{' '}
+                  <span class={styles.num} style={{ paddingLeft: '6px' }}>
+                    {state.currentIndex + 1}
+                  </span>
+                  /{state.examDetail.questionNum}
                 </div>
                 <div class={styles.qNums}>
                   <Icon class={styles.icon} name={iconCountDown} />
                   剩余时长：
                   <CountDown
                     ref={countDownRef}
-                    time={state.time}
+                    v-model:time={state.time}
                     format={'mm:ss'}
                     autoStart={false}
                   />
@@ -88,21 +151,44 @@ export default defineComponent({
             state.currentIndex = index
           }}
         >
-          <SwipeItem>
-            <ChoiceQuestion v-model:value={state.answerList[0]} type="checkbox" />
-          </SwipeItem>
-          <SwipeItem>
-            <ChoiceQuestion v-model:value={state.answerList[1]} type="radio" />
-          </SwipeItem>
-          <SwipeItem>
-            <DragQuestion />
-          </SwipeItem>
-          <SwipeItem>
-            <KeepLookQuestion />
-          </SwipeItem>
-          <SwipeItem>
-            <PlayQuestion />
-          </SwipeItem>
+          {state.questionList.map((item: any, index: number) => (
+            // item.questionTypeCode === QuestionType.PLAY && (
+            //   <SwipeItem>
+            //     <KeepLookQuestion v-model:value={item.userAnswer} data={item} index={index + 1} />
+            //     <PlayQuestion
+            //       v-model:value={item.userAnswer}
+            //       data={item}
+            //       index={index + 1}
+            //       unitId={state.id as any}
+            //     />
+            //   </SwipeItem>
+            // )
+            <SwipeItem>
+              {item.questionTypeCode === QuestionType.RADIO && (
+                <ChoiceQuestion
+                  v-model:value={item.userAnswer}
+                  index={index + 1}
+                  data={item}
+                  type="radio"
+                />
+              )}
+              {item.questionTypeCode === QuestionType.CHECKBOX && (
+                <ChoiceQuestion
+                  v-model:value={item.userAnswer}
+                  index={index + 1}
+                  data={item}
+                  type="checkbox"
+                />
+              )}
+              {item.questionTypeCode === QuestionType.SORT && (
+                <DragQuestion v-model:value={item.userAnswer} data={item} index={index + 1} />
+              )}
+              {item.questionTypeCode === QuestionType.LINK && (
+                <KeepLookQuestion v-model:value={item.userAnswer} data={item} index={index + 1} />
+              )}
+              {item.questionTypeCode === QuestionType.PLAY && <PlayQuestion />}
+            </SwipeItem>
+          ))}
         </Swipe>
 
         <OSticky position="bottom" background="white">
@@ -124,16 +210,12 @@ export default defineComponent({
               block
               round
               type="primary"
-              onClick={() => {
-                if (state.questionList.length - 1 === state.currentIndex) {
-                  state.visiableSure = true
-                } else {
-                  // swipeRef.value?.next()
-                  state.visiableError = true
-                }
-              }}
+              onClick={onNextQuestion}
+              loading={state.nextStatus}
+              disabled={state.nextStatus}
             >
-              {state.questionList.length - 1 === state.currentIndex ? '测验完成' : '下一题'}
+              提交
+              {/* {state.questionList.length === state.currentIndex + 1 ? '提交' : '提交'} */}
             </Button>
             <Image
               src={iconButtonList}

src/views/unit-test/test-exercise/index.tsx

@@ -3,6 +3,7 @@ import { defineComponent, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import styles from './index.module.less'
 import iconTag from '../images/icon-tag.png'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'unit-detail',
@@ -10,23 +11,47 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const state = reactive({
-      visiableNotice: false
+      id: route.query.id,
+      name: route.query.name,
+      visiableNotice: false,
+      list: [] as any
     })
 
+    const getDetails = async () => {
+      try {
+        const { data } = await request.post('/api-student/unitExamination/queryKnowledgePoint', {
+          requestType: 'form',
+          data: {
+            unitExaminationId: state.id
+          }
+        })
+        state.list = data || []
+        console.log(data)
+      } catch {
+        //
+      }
+    }
+
     const onDetail = (item: any) => {
       router.push({
-        path: '/practice-mode'
+        path: '/practice-mode',
+        query: {
+          id: item.id
+        }
       })
     }
 
+    onMounted(() => {
+      getDetails()
+    })
     return () => (
       <div class={styles.unitDetail}>
         <Cell center class={styles.unitSection}>
           {{
             title: () => (
               <div class={styles.unitTitle}>
-                长笛level1上册测验一长笛level1上册测验一册测验一
-                <Tag type="primary">长笛单技课</Tag>
+                {state.name}
+                {/* <Tag type="primary">长笛单技课</Tag> */}
               </div>
             ),
             label: () => (
@@ -42,11 +67,11 @@ export default defineComponent({
           <div class={styles.cellTitle}>
             <i></i>考点
           </div>
-          {[1, 2, 3, 44, 5, 6, 7, 8].map((item: any) => (
+          {state.list.map((item: any) => (
             <Cell center isLink titleClass={['van-ellipsis']} onClick={() => onDetail(item)}>
               {{
                 icon: () => <Image src={iconTag} class={styles.img} />,
-                title: () => <>乐理知识乐理知识乐理知识乐理知识乐理知识乐理知识-音符</>,
+                title: () => <>{item.name}</>,
                 value: () => <span>去练习</span>
               }}
             </Cell>