1

1

src/router/routes-teacher.ts

@@ -118,9 +118,17 @@ export default [
         meta: {
           title: '单元测验'
         }
+      },
+      {
+        path: '/unitDetail',
+        name: 'unitDetail',
+        component: () => import('@/views/unit-test/unit-list/unitDetail'),
+        meta: {
+          title: '测验详情'
+        }
       }
 
-      //uni-last 选择单元测验
+      //unitDetail 选择单元测验
     ]
   },
   ...rootRouter,

src/views/unit-test/unit-create/uni-last.tsx

@@ -20,14 +20,6 @@ import styles from './uni-last.module.less'
 import { useRoute, useRouter } from 'vue-router'
 import NewspaperItem from './modals/newspaper-item'
 import questIcon from '@/school/images/quest-icon.png'
-import {
-  listenerMessage,
-  postMessage,
-  promisefiyPostMessage,
-  removeListenerMessage
-} from '@/helpers/native-message'
-import iconLook from './image/look.svg'
-import iconCourse from '@/views/courseList/image/icon-course.png'
 import { browser } from '@/helpers/utils'
 export default defineComponent({
   name: 'uni-test',
@@ -76,7 +68,6 @@ export default defineComponent({
     }
     onMounted(() => {
       forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
-      console.log('🚀 ~ file: uni-last.tsx:76 ~ onMounted ~ forms.value ', forms.value)
       if (!forms.value.classGroupId) {
         showToast('请选择班级')
         return

src/views/unit-test/unit-list/index.module.less

@@ -69,3 +69,67 @@
     padding: 12px 13px 0;
   }
 }
+
+// 详情
+.unitDetail {
+  padding: 15px 13px;
+  .tabsWrap {
+    position: relative;
+    margin-top: -10px;
+    .tabsWrapIcon {
+      position: absolute;
+      right: 12px;
+      top: 13px;
+      z-index: 2000;
+    }
+  }
+  .DialogTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 20px 25px;
+    span {
+      width: 4px;
+      height: 14px;
+      background: #ff8057;
+      border-radius: 2px;
+      margin-right: 6px;
+    }
+    p {
+      height: 25px;
+      font-size: 18px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 25px;
+    }
+  }
+  .DialogConent {
+    padding: 0 25px 30px;
+    p {
+      font-size: 16px;
+      line-height: 22px;
+      color: #333;
+    }
+  }
+  :global {
+    .van-tab__text {
+      font-size: 16px;
+    }
+    .van-tabs__line {
+      bottom: 20px;
+      width: 20px;
+    }
+    .van-cell__title {
+      margin-bottom: 0 !important;
+    }
+    .exercisDetailDialog {
+      border-radius: 10px;
+      .van-dialog__header {
+        padding-top: 0px !important;
+      }
+    }
+    .van-dialog {
+      top: 47%;
+    }
+  }
+}

src/views/unit-test/unit-list/models/unit-list-item.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
         api: 'joinChatGroup',
         content: {
           type: 'multi', // single 单人 multi 多人
-          id: props.item.imGroupId
+          id: props.item?.imGroupId
         }
       })
     }
@@ -33,11 +33,11 @@ export default defineComponent({
             <p>
               {' '}
               <Image src={iconEdit} class={styles.editImg} />
-              {props.item.classGroupName}
+              {props.item?.classGroupName || '--'}
             </p>
             <span>
-              {dayjs(props.item.createTime).format('YYYY-MM-DD HH:mm')} 至{' '}
-              {dayjs(props.item.expiryDate).format('YYYY-MM-DD HH:mm')}
+              {dayjs(props.item?.createTime).format('YYYY-MM-DD HH:mm')} 至{' '}
+              {dayjs(props.item?.expiryDate).format('YYYY-MM-DD HH:mm')}
             </span>
           </div>
           <div class={styles.unitItemICon} onClick={gotoMsg}>
@@ -46,16 +46,16 @@ export default defineComponent({
         </div>
         <div class={[styles.unitItemInfo]}>
           <div class={[styles.unitItemInfoWrap, styles.unitItemInfoWrapLine]}>
-            <p class={styles.unitItemInfoMain}>{props.item.commitNum || 0}</p>
+            <p class={styles.unitItemInfoMain}>{props.item?.commitNum || 0}</p>
             <p class={styles.unitItemInfosub}>提交人数</p>
           </div>
           <div class={[styles.unitItemInfoWrap]}>
-            <p class={[styles.unitItemInfoMain, styles.orange]}>{props.item.passNum || 0}</p>
+            <p class={[styles.unitItemInfoMain, styles.orange]}>{props.item?.passNum || 0}</p>
             <p class={styles.unitItemInfosub}>达标人数</p>
           </div>
         </div>
         <div class={styles.unitItemOrchestra}>
-          <p>{props.item.orchestraName || '--'}</p>
+          <p>{props.item?.orchestraName || '--'}</p>
           <Icon class={styles.arrow} name="arrow"></Icon>
         </div>
       </div>

src/views/unit-test/unit-list/unitDetail.tsx

@@ -0,0 +1,98 @@
+import OEmpty from '@/components/o-empty'
+import OHeader from '@/components/o-header'
+import OSearch from '@/components/o-search'
+import OSticky from '@/components/o-sticky'
+import {
+  ActionSheet,
+  Button,
+  Cell,
+  CellGroup,
+  Dialog,
+  Icon,
+  Image,
+  List,
+  showToast,
+  Tab,
+  Tabs
+} from 'vant'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import questIcon from '@/school/images/quest-icon.png'
+import styles from './index.module.less'
+import { useRouter } from 'vue-router'
+import UnitListItem from './models/unit-list-item'
+import OFullRefresh from '@/components/o-full-refresh'
+//
+import request from '@/helpers/request'
+export default defineComponent({
+  name: 'unitDetail',
+  setup() {
+    const router = useRouter()
+    const form = reactive({})
+    const refreshing = ref(false)
+    const loading = ref(false)
+    const activeName = ref('one')
+    const showTip = ref(false)
+    onMounted(() => {})
+
+    return () => (
+      <div class={styles.unitDetail}>
+        <UnitListItem></UnitListItem>
+        <div class={styles.tabsWrap}>
+          <Icon
+            class={styles.tabsWrapIcon}
+            name={questIcon}
+            size={18}
+            color="#333"
+            onClick={() => {
+              showTip.value = true
+            }}
+          />
+          <Tabs
+            v-model:active={activeName.value}
+            class={styles.rankTabs}
+            background={'#F8F8F8'}
+            title-active-color={'#333333'}
+            title-inactive-color={'#777'}
+            color={'#FF8057'}
+            shrink
+          >
+            <Tab name="one" title="I类学生">
+              11111
+            </Tab>
+            <Tab name="two" title="II类学生">
+              22222
+            </Tab>
+            <Tab name="three" title="III类学生">
+              3333333
+            </Tab>
+          </Tabs>
+        </div>
+        <Dialog
+          class="exercisDetailDialog"
+          v-model:show={showTip.value}
+          title="提示框"
+          confirmButtonText="我知道了"
+          v-slots={{
+            title: () => (
+              <div class={styles.DialogTitle}>
+                <span></span>
+                <p>学生分类</p>
+              </div>
+            ),
+            default: () => (
+              <div class={styles.DialogConent}>
+                <p>
+                  根据学生入团的批次对不同训练阶段的学生进行分类，不同训练阶段的学生可布置不同标准的课后训练和单元测验内容。
+                </p>
+                <br />
+                <p>&nbsp;&nbsp;&nbsp;I类学生：最新进入本乐团的学员</p>
+                <p>&nbsp;II 类学生：较早进入本乐团的学员</p>
+                <p>III 类学生：最早进入本乐团的学员</p>
+              </div>
+            )
+          }}
+        ></Dialog>
+      </div>
+    )
+  }
+})