mo 2 år sedan
förälder
incheckning
e3e83cb5f0

+ 3 - 0
src/views/unit-test/unit-list/index.module.less

@@ -65,4 +65,7 @@
       }
     }
   }
+  .liveList {
+    padding: 12px 13px 0;
+  }
 }

+ 68 - 84
src/views/unit-test/unit-list/index.tsx

@@ -2,12 +2,14 @@ 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, Icon, Image, List } from 'vant'
-import { defineComponent, reactive } from 'vue'
+import { ActionSheet, Button, Cell, CellGroup, Icon, Image, List, showToast } from 'vant'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
 import styles from './index.module.less'
 import iconEdit from '../images/icon-edit.png'
 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: 'unit-list',
   setup() {
@@ -29,35 +31,52 @@ export default defineComponent({
       },
       isClick: false
     })
-
+    const refreshing = ref(false)
+    const loading = ref(false)
     const getList = async () => {
+      loading.value = true
       try {
-        if (form.isClick) return
-        form.isClick = true
-        // const res = await request.post('/api-school/schoolStaff/page', {
-        //   data: {
-        //     ...form.params,
-        //     schoolId: state.user.data.school.id
-        //   }
-        // })
-        // form.listState.loading = false
-        // const result = res.data || {}
-        // // 处理重复请求数据
-        // if (form.list.length > 0 && result.current === 1) {
-        //   return
-        // }
-        // form.list = form.list.concat(result.rows || [])
-        // form.listState.finished = result.current >= result.pages
-        // form.params.page = result.current + 1
-        // form.listState.dataShow = form.list.length > 0
-        form.isClick = false
-      } catch {
+        if (refreshing.value) {
+          form.params.page = 1
+          form.list = []
+          refreshing.value = false
+        }
+
+        const res = await request.post('/api-teacher/studentUnitExamination/queryPageByTeacher', {
+          data: { ...form.params }
+        })
+
+        if (form.list.length > 0 && res.data.pages === 1) {
+          return
+        }
+
+        form.params.page = res.data.current + 1
+        //form.list  =form.list .concat(res.data.rows || [])
+        form.list = res.data.rows
+        form.listState.dataShow = form.list.length > 0
+        console.log(
+          '🚀 ~ file: index.tsx:57 ~ getList ~  form.listState.dataShow',
+          form.listState.dataShow
+        )
+        loading.value = false
+        form.listState.finished = true
+
+        // finished.value = res.data.current >= res.data.pages
+      } catch (e: any) {
+        // console.log(e, 'e')
+        const message = e.message
+        showToast(message)
         form.listState.dataShow = false
         form.listState.finished = true
-        form.isClick = false
       }
     }
-
+    const onRefresh = () => {
+      form.listState.finished = true
+      // 重新加载数据
+      // 将 loading 设置为 true,表示处于加载状态
+      loading.value = true
+      getList()
+    }
     const onSearch = () => {
       form.params.page = 1
       form.list = []
@@ -66,6 +85,9 @@ export default defineComponent({
       form.listState.finished = false
       getList()
     }
+    onMounted(() => {
+      getList()
+    })
     return () => (
       <div class={styles.unitTest}>
         <OSticky position="top">
@@ -93,62 +115,24 @@ export default defineComponent({
         </OSticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={refreshing.value}
+            onRefresh={onRefresh}
+            style="min-height: 100vh;"
           >
-            {[1, 2, 3, 4].map((item: any) => (
-              <CellGroup inset class={styles.cellGroup} border={false}>
-                <Cell center isLink clickable={false}>
-                  {{
-                    icon: () => <Image src={iconEdit} class={styles.img} />,
-                    title: () => (
-                      <span class={[styles.unitTitle, 'van-ellipsis']}>长笛班-第一次单元测验</span>
-                    ),
-                    value: () => <span class={styles['no-start']}>未完成</span>
-                  }}
-                </Cell>
-                <Cell center class={styles.unitSection}>
-                  {{
-                    title: () => (
-                      <div class={styles.unitInformation}>
-                        <div class={styles.name}>武汉小学2022标准团</div>
-                        <div class={styles.endTime}>截止时间:2022-10-24 21:00</div>
-
-                        <div class={styles.unitBtnGroup}>
-                          <Button
-                            color="#FFF0E6"
-                            round
-                            block
-                            style={{ color: '#F67146' }}
-                            onClick={() => {
-                              router.push('/test-exercise')
-                            }}
-                          >
-                            练习模式
-                          </Button>
-                          <Button
-                            type="primary"
-                            round
-                            block
-                            onClick={() => {
-                              router.push('/unit-detail')
-                            }}
-                          >
-                            开始测验
-                          </Button>
-                        </div>
-                      </div>
-                    )
-                  }}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <UnitListItem item={item}></UnitListItem>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty tips="暂无单元测验" />
         )}
@@ -159,9 +143,9 @@ export default defineComponent({
           actions={
             [
               { name: '班级类型', id: 'ALL' },
-              { name: '未完成', id: 'ING' },
-              { name: '不合格', id: 'LOCKED' },
-              { name: '合格', id: 'ACTIVATION' }
+              { name: '单技班', id: 'SINGLE' },
+              { name: '乐理班', id: 'MUSIC_THEORY' },
+              { name: '合奏班', id: 'INSTRUMENTAL_ENSEMBLE' }
             ] as any
           }
           onSelect={(val: any) => {

+ 0 - 1
src/views/unit-test/unit-list/models/unit-list-item.less

@@ -1 +0,0 @@
-  0

+ 101 - 0
src/views/unit-test/unit-list/models/unit-list-item.module.less

@@ -0,0 +1,101 @@
+.unitItem {
+  background-color: #fff;
+  padding-top: 12px;
+  margin-bottom: 14px;
+  border-radius: 10px;
+  .unitItemTop {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    .unitItemLeft {
+      p {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        margin-bottom: 3px;
+        .editImg {
+          width: 18px;
+          height: 18px;
+          margin-right: 6px;
+        }
+      }
+      span {
+        font-size: 13px;
+        font-weight: 400;
+        color: #777777;
+        line-height: 18px;
+      }
+    }
+    .unitItemICon {
+      .msgImg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  .unitItemInfo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 15px 0;
+    .unitItemInfoMain {
+      font-size: 26px;
+      font-family: 'DINA';
+      font-weight: bold;
+      color: #333333;
+      line-height: 30px;
+      text-align: center;
+    }
+    .unitItemInfosub {
+      font-size: 14px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+      text-align: center;
+    }
+    .orange {
+      color: #f67146;
+    }
+    .unitItemInfoWrap {
+      width: 50%;
+    }
+    .unitItemInfoWrapLine {
+      position: relative;
+
+      &:after {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        margin-top: -10px;
+        width: 1px;
+        height: 20px;
+        background: #eaeaea;
+        border-radius: 1px;
+      }
+    }
+  }
+  .unitItemOrchestra {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid #f2f2f2;
+    padding: 12px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #333333;
+    .arrow {
+      color: #f2f2f2;
+      font-size: 12px;
+    }
+  }
+}

+ 26 - 8
src/views/unit-test/unit-list/models/unit-list-item.tsx

@@ -1,9 +1,10 @@
 import { ActionSheet, Button, Cell, CellGroup, Icon, Image, List } from 'vant'
 import { defineComponent, reactive } from 'vue'
 import styles from './unit-list-item.module.less'
-import iconEdit from '../images/icon-edit.png'
+import iconEdit from '../../images/icon-edit.png'
+import iconMessage from '@common/images/icon-muit-message.png'
 import { useRouter } from 'vue-router'
-
+import dayjs from 'dayjs'
 export default defineComponent({
   name: 'unit-list-item',
   props: {
@@ -14,20 +15,37 @@ export default defineComponent({
   },
   setup(props) {
     const router = useRouter()
-    const form = reactive({})
-
     return () => (
       <div class={styles.unitItem}>
         <div class={styles.unitItemTop}>
           <div class={styles.unitItemLeft}>
             <p>
               {' '}
-              <Image src={iconEdit} class={styles.img} />
-              长笛班-第一次单元测验
+              <Image src={iconEdit} class={styles.editImg} />
+              {props.item.classGroupName}
             </p>
-            <span>布置时间 2022-10-24 14:00</span>
+            <span>
+              布置时间 {dayjs(props.item.createTime).format('YYYY-MM-DD HH:mm')} -
+              {dayjs(props.item.expiryDate).format('HH:mm')}
+            </span>
           </div>
-          <div class={styles.unitItemICon}></div>
+          <div class={styles.unitItemICon} onClick={}>
+            <Image src={iconMessage} class={styles.msgImg}></Image>
+          </div>
+        </div>
+        <div class={[styles.unitItemInfo]}>
+          <div class={[styles.unitItemInfoWrap, styles.unitItemInfoWrapLine]}>
+            <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.unitItemInfosub}>达标人数</p>
+          </div>
+        </div>
+        <div class={styles.unitItemOrchestra}>
+          <p>{props.item.orchestraName || '--'}</p>
+          <Icon class={styles.arrow} name="arrow"></Icon>
         </div>
       </div>
     )