更新优化乐团报名样式

src/school/train-planning/component/course-preview/index.tsx

@@ -178,12 +178,17 @@ export default defineComponent({
             message: res.message,
             confirmButtonColor: '#ff8057'
           }).then(() => {
+            // 原生班级调整伴学老师时
+            // if (state.type === 'native') {
+            //   postMessage({ api: 'back', content: {} })
+            // } else {
             router.back()
+            // }
           })
           return
         }
         setTimeout(() => {
-          showToast(state.type === 'change' ? '调整成功' : '排课成功')
+          showToast(state.type === 'change' || state.type === 'native' ? '调整成功' : '排课成功')
         }, 100)
         setTimeout(() => {
           state.isClick = false
@@ -375,7 +380,7 @@ export default defineComponent({
         <OSticky position="bottom">
           <div class={'btnGroup'}>
             <Button round block type="primary" onClick={onSubmit} disabled={state.isClick}>
-              {state.type === 'change' ? '确认调整' : '确认排课'}
+              {state.type === 'change' || state.type === 'native' ? '确认调整' : '确认排课'}
             </Button>
           </div>
         </OSticky>

src/student/music-group/layout/login.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { CellGroup, Field, Button, CountDown, Row, Col, showToast, Popup } from 'vant'
+import { CellGroup, Field, Button, CountDown, Row, Col, showToast, Popup, showDialog } from 'vant'
 import ImgCode from '@/components/o-img-code'
 import { checkPhone } from '@/helpers/validate'
 import { setLogin, state } from '@/state'
@@ -23,8 +23,10 @@ export default defineComponent({
       // countDownRef: null as any, // 倒计时实例
       imgCodeStatus: false,
       showPopup: false,
+      showPopupMessage: '请使用微信打开',
       wxAppId: '', //
       code: '', // 授权code码
+      orchestraInfo: {} as any,
 
       // 是否开启微信登录（测试使用）默认为false
       testIsWeixin: false
@@ -45,8 +47,27 @@ export default defineComponent({
     if (!browser().weixin && !this.testIsWeixin) {
       this.showPopup = true
     }
+
+    this.getDetails()
   },
   methods: {
+    async getDetails() {
+      try {
+        const id = this.$route.query.id
+        if (!id) return
+        const { data } = await request.get(
+          '/api-student/open/orchestra/detail/' + this.$route.query.id
+        )
+        this.orchestraInfo = data || {}
+
+        if (!data.canSignUp) {
+          this.showPopup = true
+          this.showPopupMessage = '乐团建设中，请稍等'
+        }
+      } catch {
+        //
+      }
+    },
     async getAppIdAndCode(url?: string) {
       try {
         const { data } = await request.get('/api-student/open/paramConfig/wechatAppId')
@@ -101,6 +122,10 @@ export default defineComponent({
     },
     async onLogin() {
       try {
+        if (!this.orchestraInfo.canSignUp) {
+          this.showPopup = true
+          this.showPopupMessage = '乐团建设中，请稍等'
+        }
         // let res: any
         const forms: any = {
           username: this.username,
@@ -236,7 +261,7 @@ export default defineComponent({
         >
           <div class={styles.popupContainer}>
             <p class={styles.title}>温馨提示</p>
-            <p class={styles.popupTips}>请使用微信打开</p>
+            <p class={styles.popupTips}>{this.showPopupMessage}</p>
           </div>
         </Popup>
       </div>

src/student/music-group/pre-apply/component/order.tsx

@@ -187,28 +187,45 @@ export default defineComponent({
                       : ''
                   }
                 ></Cell>
-                <Cell border={false} class={styles.imgGroup}>
+                <Cell border={false} class={styles.imgGroup} center>
                   {{
                     title: () => (
-                      <Grid border={false}>
-                        {item.goodsInfos &&
-                          item.goodsInfos.map((goods: any) => (
-                            <GridItem>
-                              <Image class={styles.img} src={goods.goodsUrl} />
-                            </GridItem>
-                          ))}
-                      </Grid>
+                      <div class={styles.orderPriceInfo}>
+                        <Grid border={false} columnNum={3}>
+                          {item.goodsInfos &&
+                            item.goodsInfos.map(
+                              (goods: any, index: number) =>
+                                index < 3 && (
+                                  <GridItem>
+                                    <Image class={styles.img} src={goods.goodsUrl} />
+                                  </GridItem>
+                                )
+                            )}
+                        </Grid>
+                        <div class={styles.orderPriceNum}>
+                          <div class={styles.opNums}>
+                            <span>¥</span>
+                            {moneyFormat(item.currentPrice)}
+                          </div>
+                          <div class={styles.opBuyLength}>
+                            共{(item.goodsInfos && item.goodsInfos.length) || 0}件
+                          </div>
+                        </div>
+                      </div>
                     )
                   }}
                 </Cell>
-                <Cell class={styles.btnGroup} center>
-                  {{
-                    title: () => (
-                      <span class={styles.btnPrice}>¥{moneyFormat(item.currentPrice)}</span>
-                    ),
-                    value: () => (
-                      <div class={styles.btns}>
-                        {/* {item.status === 'WAIT_PAY' && (
+                {item.refundable && (
+                  <Cell class={styles.btnGroup} center>
+                    {{
+                      title: () => (
+                        <span class={styles.btnPrice}>
+                          {/* ¥{moneyFormat(item.currentPrice)} */}
+                        </span>
+                      ),
+                      value: () => (
+                        <div class={styles.btns}>
+                          {/* {item.status === 'WAIT_PAY' && (
                           <>
                             <Button round plain color="#AAAAAA">
                               修改订单
@@ -218,8 +235,7 @@ export default defineComponent({
                             </Button>
                           </>
                         )} */}
-                        {/* 订单成功 订单金额大于0 */}
-                        {item.refundable && (
+                          {/* 订单成功 订单金额大于0 */}(
                           <Button
                             round
                             plain
@@ -232,11 +248,12 @@ export default defineComponent({
                           >
                             申请退款
                           </Button>
-                        )}
-                      </div>
-                    )
-                  }}
-                </Cell>
+                          )
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                )}
               </CellGroup>
             ))}
           </List>

src/student/music-group/pre-apply/index.module.less

@@ -300,10 +300,10 @@
 }
 
 .imgGroup {
-  padding: 15px 0 18px;
+  padding: 15px 12px 18px 6px !important;
   .img {
-    width: 75px;
-    height: 75px;
+    width: 70px;
+    height: 70px;
     border-radius: 6px;
     overflow: hidden;
   }
@@ -313,11 +313,45 @@
       padding: 0;
     }
   }
+
+  .orderPriceInfo {
+    display: flex;
+    align-content: center;
+
+    & > div {
+      flex: 1 auto;
+    }
+
+    .orderPriceNum {
+      flex: 0 auto;
+      width: 100px;
+      text-align: right;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .opNums {
+        span {
+          font-size: 12px;
+        }
+        font-size: 16px;
+        font-family: DINA;
+        font-weight: bold;
+        color: #333333;
+        line-height: 14px;
+      }
+      .opBuyLength {
+        font-size: 13px;
+        color: #777777;
+        line-height: 18px;
+      }
+    }
+  }
 }
 
 .btnGroup {
   padding-top: 0;
   .btnPrice {
+    font-family: DINA;
     font-size: 22px;
     font-weight: bold;
     color: #ff4e19;

src/student/music-group/pre-apply/index.tsx

@@ -123,6 +123,10 @@ export default defineComponent({
         //     }
         //   }
         // }
+
+        // nextTick(() => {
+        //   state.tabValue = 'order'
+        // })
       } catch {
         //
       }

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

@@ -10,7 +10,7 @@
 }
 
 .unitAnswers {
-  padding-bottom: 30px;
+  // padding-bottom: 30px;
   :global {
     .sortable-ghost {
       opacity: 0.5;

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

@@ -9,6 +9,10 @@ export default defineComponent({
     confirmButtonText: {
       type: String,
       default: '我知道了'
+    },
+    answerAnalysis: {
+      type: String,
+      default: ''
     }
   },
   emits: ['close', 'conform'],
@@ -20,14 +24,14 @@ export default defineComponent({
           回答错误！
         </div>
 
-        <div class={styles.result}>
+        {/* <div class={styles.result}>
           正确答案: <span class={styles.yes}>A</span>
           您选择: <span class={styles.no}>B</span>
-        </div>
+        </div> */}
 
         <div class={styles.resultContent}>
           <span>答案解析：</span>
-          八分音符，从拍号中可以了解这一段乐谱为4/4拍，每小节4拍，红框小节中共有8个音符共同组成4拍，每个音符半拍，所以是八分音符。
+          {props.answerAnalysis}
         </div>
 
         <Button

src/views/unit-test/model/result-finish/index.module.less

@@ -46,6 +46,13 @@
     height: 413px;
   }
 }
+.finishPractice {
+  .finishContainer {
+    background: url('../../images/exam-pass-bg-p.png') no-repeat top center;
+    background-size: contain;
+    height: 513px;
+  }
+}
 
 .finishBtnGroup {
   margin-top: 30px;

src/views/unit-test/model/result-finish/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
       default: '我知道了'
     },
     status: {
-      type: String as PropType<'SUCCESS' | 'FAIL'>,
+      type: String as PropType<'SUCCESS' | 'FAIL' | 'PRACTICE'>,
       default: 'SUCCESS'
     },
     result: {
@@ -28,20 +28,31 @@ export default defineComponent({
     }
   },
   emits: ['close', 'conform'],
-  setup(props, { emit }) {
+  setup(props, { slots, emit }) {
     return () => (
-      <div class={[styles.finishResult, props.status === 'FAIL' && styles.finishFail]}>
+      <div
+        class={[
+          styles.finishResult,
+          props.status === 'FAIL' && styles.finishFail,
+          props.status === 'PRACTICE' && styles.finishPractice
+        ]}
+      >
         <div class={styles.finishContainer}>
           <div class={styles.finishContent}>
-            <div class={styles.scoreNums}>
-              {props.result.score}
-              <span>分</span>
-            </div>
-            <div class={styles.scoreName}>{props.result.examName}</div>
-            <div class={styles.scoreResult}>{props.result.tips}</div>
+            {slots.content ? (
+              slots.content()
+            ) : (
+              <>
+                <div class={styles.scoreNums}>
+                  {props.result.score}
+                  <span>分</span>
+                </div>
+                <div class={styles.scoreName}>{props.result.examName}</div>
+                <div class={styles.scoreResult}>{props.result.tips}</div>
+              </>
+            )}
           </div>
         </div>
-
         <div class={styles.finishBtnGroup}>
           <div class={styles.finishLeft} onClick={() => emit('conform')}>
             {props.confirmButtonText}

src/views/unit-test/practice-mode/index.module.less

@@ -54,3 +54,61 @@
   flex-shrink: 0;
   margin-left: 18px;
 }
+
+.practiceResult {
+  .practiceTitle {
+    font-size: 20px;
+    font-weight: 600;
+    color: #191919;
+    line-height: 28px;
+  }
+  .practiceRate {
+    padding-top: 15px;
+    font-size: 60px;
+    font-family: DINA;
+    font-weight: bold;
+    color: #f67146;
+    line-height: 70px;
+  }
+
+  :global {
+    .van-grid {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      margin-left: 5%;
+      width: 90%;
+    }
+    .van-grid-item__content {
+      background-color: transparent;
+    }
+  }
+
+  .title {
+    font-size: 24px;
+    font-family: DINA;
+    font-weight: bold;
+    color: #333333;
+    line-height: 28px;
+  }
+  .name {
+    padding-top: 3px;
+    font-size: 14px;
+    color: #777777;
+    line-height: 20px;
+  }
+
+  .practiceTips {
+    margin-left: 10%;
+    width: 80%;
+    background: linear-gradient(135deg, #fff4da 0%, #ffe6c4 100%);
+    border-radius: 10px;
+    padding: 14px 0;
+    text-align: center;
+    font-size: 15px;
+
+    font-weight: 500;
+    color: #703a17;
+    line-height: 21px;
+    letter-spacing: 1px;
+  }
+}

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

@@ -3,6 +3,8 @@ import {
   Button,
   Cell,
   CountDown,
+  Grid,
+  GridItem,
   Icon,
   Image,
   Popup,
@@ -10,11 +12,9 @@ import {
   SwipeItem,
   Tag
 } from 'vant'
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import styles from './index.module.less'
-import iconQuestionNums from '../images/icon-question-nums.png'
-import iconCountDown from '../images/icon-count-down.png'
 import iconButtonList from '../images/icon-button-list.png'
 
 import OSticky from '@/components/o-sticky'
@@ -39,33 +39,34 @@ export default defineComponent({
     const countDownRef = ref()
     const swipeRef = ref()
     const state = reactive({
+      name: route.query.id,
       visiableError: false,
       visiableAnswer: false,
       visiableResult: false,
       id: route.query.id,
-      examDetail: {} as any,
       currentIndex: 0,
       questionList: [],
+      questionResultList: [],
       time: 0,
       visiableSure: false,
       resultInfo: {} as any,
       resultStatusType: 'SUCCESS', // 'SUCCESS' | 'FAIL'
       visiableExam: false, // 考试已结束
       nextStatus: false,
-      swipeHeight: 'auto' as any
+      swipeHeight: 'auto' as any,
+      answerAnalysis: ''
     })
 
     const getExamDetails = async () => {
       try {
-        const { data } = await request.post('/api-student/examinationQuestion/page', {
+        const { data } = await request.post('/api-student/examinationQuestion/randomPage', {
           data: {
             page: 1,
             row: 50,
             categoryId: state.id
           }
         })
-        const { questionJson, studentAnswerJson, ...res } = data
-        const temp = data.rows || []
+        const temp = data || []
         temp.forEach((item: any) => {
           item.showAnalysis = false // 默认不显示解析
           item.analysis = {
@@ -76,8 +77,6 @@ export default defineComponent({
           item.userAnswer = [] // 用户答题
         })
         state.questionList = temp
-
-        state.examDetail = { ...res } || {}
       } catch {
         //
       }
@@ -89,15 +88,15 @@ export default defineComponent({
     const onNextQuestion = async () => {
       try {
         const questionList = state.questionList || []
-        const userAnswerList: any = [] // 所有题目的答案
-        // let currentResult = false // 当前题目是否已经答题
-        questionList.forEach((question: any) => {
+
+        let result: any = {}
+        questionList.forEach((question: any, index: number) => {
           // 格式化所有题目的答案
-          if (question.userAnswer && question.userAnswer.length > 0) {
-            userAnswerList.push({
+          if (index === state.currentIndex) {
+            result = {
               questionId: question.id,
-              details: question.userAnswer
-            })
+              details: question.userAnswer || []
+            }
           }
         })
 
@@ -107,12 +106,52 @@ export default defineComponent({
           return
         }
 
-        swipeRef.value?.next()
+        const { data } = await request.post(
+          '/api-school/studentUnitExamination/submitTrainingAnswer',
+          {
+            data: result
+          }
+        )
+        // 初始化是否显示解析
+        questionList.forEach((question: any, index: number) => {
+          // 格式化所有题目的答案
+          if (index === state.currentIndex) {
+            state.answerAnalysis = question.answerAnalysis
+            question.showAnalysis = true
+            question.analysis.userResult = data
+          }
+        })
+        if (data) {
+          swipeRef.value?.next()
+        } else {
+          state.visiableError = true
+        }
       } catch {
         //
       }
     }
 
+    //
+    const getAnswerResult = computed(() => {
+      const questionList = state.questionList || []
+      let passCount = 0
+      let noPassCount = 0
+      questionList.forEach((item: any) => {
+        if (item.showAnalysis) {
+          if (item.analysis.userResult) {
+            passCount += 1
+          } else {
+            noPassCount += 1
+          }
+        }
+      })
+
+      return {
+        passCount: passCount,
+        noPassCount: noPassCount
+      }
+    })
+
     /**
      * @description 重置当前的题目高度
      */
@@ -128,6 +167,10 @@ export default defineComponent({
       })
     }
 
+    const onCloseExam = () => {
+      state.visiableSure = true
+    }
+
     onMounted(() => {
       getExamDetails()
 
@@ -139,12 +182,7 @@ export default defineComponent({
           <OHeader
             v-slots={{
               right: () => (
-                <span
-                  style="color: var(--van-primary-color)"
-                  onClick={() => {
-                    // router.push('/create-message')
-                  }}
-                >
+                <span style="color: var(--van-primary-color)" onClick={onCloseExam}>
                   结束练习
                 </span>
               )
@@ -153,20 +191,16 @@ export default defineComponent({
         </OSticky>
         <Cell center class={styles.unitSection}>
           {{
-            title: () => (
-              <div class={[styles.unitTitle]}>
-                {state.examDetail.unitExaminationName}i门口看门口看看门口看看门口看看门口看看看
-              </div>
-            ),
+            title: () => <div class={[styles.unitTitle]}>{state.name}</div>,
             value: () => (
               <div class={styles.unitCount}>
                 <div class={styles.countSection}>
-                  <span class={styles.nums}>12</span>
+                  <span class={styles.nums}>{getAnswerResult.value.passCount}</span>
                   <span>答对</span>
                 </div>
                 <div class={styles.countSection}>
                   <span class={styles.nums} style={{ color: '#F44541' }}>
-                    12
+                    {getAnswerResult.value.noPassCount}
                   </span>
                   <span>答错</span>
                 </div>
@@ -181,6 +215,7 @@ export default defineComponent({
           ref={swipeRef}
           duration={300}
           touchable={false}
+          style={{ paddingBottom: '12px' }}
           lazyRender
           height={state.swipeHeight}
           onChange={(index: number) => {
@@ -189,17 +224,6 @@ export default defineComponent({
           }}
         >
           {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>
               <div class="swipe-item-question">
                 {item.questionTypeCode === QuestionType.RADIO && (
@@ -321,8 +345,10 @@ export default defineComponent({
         >
           <ErrorMode
             onClose={() => (state.visiableError = false)}
+            answerAnalysis={state.answerAnalysis}
             onConform={() => {
               swipeRef.value?.next()
+              state.answerAnalysis = ''
             }}
           />
         </Popup>
@@ -333,7 +359,7 @@ export default defineComponent({
           style={{ background: 'transparent', width: '96%' }}
         >
           <ResultFinish
-            // status="FAIL"
+            status="PRACTICE"
             confirmButtonText="继续练习本考点"
             cancelButtonText="下一个考点"
             onClose={() => (state.visiableResult = false)}
@@ -341,13 +367,40 @@ export default defineComponent({
               console.log('Success')
               state.visiableResult = false
             }}
+            v-slots={{
+              content: () => (
+                <div class={styles.practiceResult}>
+                  <div class={styles.practiceTitle}>本次练习正确率</div>
+                  <div class={styles.practiceRate}>80%</div>
+                  <Grid border={false} columnNum={3}>
+                    <GridItem>
+                      <p class={styles.title}>12</p>
+                      <p class={styles.name}>练习时长</p>
+                    </GridItem>
+                    <GridItem>
+                      <p class={[styles.title]}>12</p>
+                      <p class={styles.name}>答题数</p>
+                    </GridItem>
+                    <GridItem>
+                      <p class={styles.title}>12</p>
+                      <p class={styles.name}>错题数</p>
+                    </GridItem>
+                  </Grid>
+                  <div class={styles.practiceTips}>
+                    继续努力！
+                    <br />
+                    争取在测验中获得高分！
+                  </div>
+                </div>
+              )
+            }}
           />
         </Popup>
 
         <ODialog
           v-model:show={state.visiableSure}
-          title="测验完成"
-          message="确认本次测验的题目都完成了吗？\n提交后不可修改哦"
+          title="练习完成"
+          message="确认本次练习的题目都完成了吗？"
           messageAlign="left"
           showCancelButton
           cancelButtonText="再等等"

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

@@ -36,7 +36,8 @@ export default defineComponent({
       router.push({
         path: '/practice-mode',
         query: {
-          id: item.id
+          id: item.id,
+          name: state.id
         }
       })
     }