单元测验UI改版

src/views/lessonCourseware/component/CourseItem/index.module.less

@@ -51,6 +51,7 @@
         border-radius: 4px 8px 8px 4px;
         overflow: hidden;
         margin-bottom: 8px;
+        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
     }
 
     .model {
@@ -91,7 +92,6 @@
     .coverImg {
         display: block;
         width: 100%;
-        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
         max-height: 140px;
         :global{
             .van-image__loading{

src/views/lessonCourseware/index.module.less

@@ -4,70 +4,3 @@
   padding: 10px 0;
   box-sizing: border-box;
 }
-.grid {
-  :global {
-    .van-grid-item {
-      .van-grid-item__content {
-        padding: 0;
-        background: transparent;
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-  .gridItem {
-    position: relative;
-    width: 100%;
-    height: 130px;
-    border-radius: 8px;
-    overflow: hidden;
-    background: rgba(247,203,143,1);
-    .cover {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    .title {
-      position: relative;
-      text-align: center;
-      padding: 14px;
-      color:#742C00;
-      font-size: 14px;
-    }
-    .num {
-      position: absolute;
-      left: 50%;
-      bottom: 12px;
-      transform: translateX(-50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      width: 50%;
-      height: 20px;
-      border-radius: 20px;
-      background-color: #fff;
-      color: #742c00;
-    }
-    .look {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.6);
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-    }
-  }
-}

src/views/unit-test/unit-create/uni-test.module.less

@@ -1,79 +1,152 @@
-.grid {
-  :global {
-    .van-grid-item {
-      .van-grid-item__content {
-        padding: 0;
-        background: transparent;
-        &::after {
-          display: none;
-        }
+.uniTest{
+  min-height: 100vh;
+  background-color: #fff;
+  background-image: linear-gradient(180deg, #FFE8CE 0%, rgba(251, 233, 213, 0) 198px);
+  padding: 20px 0;
+}
+
+.periodContent {
+  display: flex;
+  padding: 20px;
+
+  .cover {
+    width: 107px;
+    margin-right: 30px;
+    border-radius: 4px 8px 8px 4px;
+    box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
+    overflow: hidden;
+    :global{
+      .van-image__loading{
+        position: relative;
+        min-height: 130px;
+        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
       }
     }
   }
-  .gridItem {
-    position: relative;
-    width: 100%;
-    height: 107px;
-    border-radius: 8px;
-    overflow: hidden;
-    .cover {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      z-index: -1;
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+
+  .contentTitle {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    line-height: 22px;
+    padding-bottom: 8px;
+  }
+
+  .contentLabel {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(96, 96, 96);
+    line-height: 20px;
+  }
+}
+
+
+.periodTitle {
+  display: flex;
+  align-items: center;
+  padding: 20px 20px 0;
+
+  .pIcon {
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+
+  .pTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(124, 61, 18, 1);
+    margin-right: 8px;
+  }
+
+  .pNum {
+    font-size: 12px;
+    font-weight: 400;
+    color: #000;
+  }
+}
+
+.periodList {
+  :global {
+    .van-cell-group--inset {
+      margin: 0;
     }
-    .title {
-      text-align: center;
-      padding: 10px;
-      color: #742c00;
-
-      .coreTitle {
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 22px;
-        margin-bottom: 4px;
-      }
+
+    .van-cell-group,
+    .van-cell {
+      background: transparent;
     }
-    .num {
-      position: absolute;
-      left: 50%;
-      bottom: 12px;
-      transform: translateX(-50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      width: 70%;
-      line-height: 20px;
-      border-radius: 20px;
-      background: linear-gradient(180deg, #ff9c7c 0%, #ff5757 100%);
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      color: #fff;
-      .playIcon {
-        font-size: 12px;
-        margin-left: 2px;
+
+    .van-cell {
+      padding: 18px 20px;
+      &::after{
+        left: 20px;
+        right: 20px;
+        border-color: rgba(242, 242, 242, 1);
+        transform: none;
+      }
+      .van-cell__title {
+        padding-right: 8px;
+
+        span {
+          font-size: 15px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 21px;
+          word-break: break-all;
+        }
+
+        .van-cell__label {
+          font-size: 12px;
+          font-weight: 400;
+          color: #AAAAAA;
+          line-height: 17px;
+          margin: 0;
+        }
+      }
+
+      .van-cell__value {
+        flex: inherit;
+        flex-shrink: 0;
       }
     }
-    .look {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.6);
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
+  }
+
+  .baseBtn {
+    width: 73px;
+    height: 26px;
+    line-height: 26px;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 500;
+    border: 0;
+    border-radius: 13px;
+    flex-shrink: 0;
+
+    &.look {
+      background: linear-gradient(180deg, #FFAB71 0%, #FF6E45 100%);
+    }
+
+    &.down {
+      background: linear-gradient(180deg, #80C6FF 0%, #4296FF 100%);
+    }
+
+    &.disable {
+      opacity: 1;
+      background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
     }
   }
 }
+
+.periodItem {
+  width: 36px;
+  height: 40px;
+  margin-right: 8px;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}

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

@@ -1,6 +1,6 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Button, Empty, Grid, GridItem, Icon, showConfirmDialog, showToast } from 'vant'
+import { Button, Cell, CellGroup, Empty, Grid, GridItem, Icon, Image, Loading, showConfirmDialog, showToast } from 'vant'
 import { defineComponent, onMounted, reactive, onUnmounted, ref } from 'vue'
 import styles from './uni-test.module.less'
 import { useRoute, useRouter } from 'vue-router'
@@ -13,7 +13,11 @@ import {
 import OEmpty from '@/components/o-empty'
 import iconLook from './image/look.svg'
 import iconCourse from '@/views/courseList/image/icon-course.png'
+import iconCourseLock from '@/views/courseList/image/icon-course-lock.png'
 import { browser } from '@/helpers/utils'
+import OSticky from '@/components/o-sticky'
+import OHeader from '@/components/o-header'
+import iconList from '@/views/courseList/image/icon-list.png'
 export default defineComponent({
   name: 'uni-test',
   setup() {
@@ -24,8 +28,23 @@ export default defineComponent({
     const forms = ref({} as any)
     const data = reactive({
       loading: true,
+      detail: {
+        cover: '',
+        name: '',
+        des: ''
+      },
       list: [] as any
     })
+
+    /** 获取课件详情 */
+    const getDetail = async () => {
+      const res: any = await request.get(`${state.platformApi}/lessonCourseware/detail/${route.query.lessonCoursewareId}`)
+      if (res?.data){
+        data.detail.cover = res.data.coverImg
+        data.detail.name = res.data.name
+        data.detail.des = res.data.lessonTargetDesc
+      }
+    }
     const getList = async () => {
       data.loading = true
       try {
@@ -47,6 +66,7 @@ export default defineComponent({
       data.loading = false
     }
     onMounted(() => {
+      getDetail()
       forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
       getList()
     })
@@ -65,37 +85,72 @@ export default defineComponent({
     }
 
     return () => (
-      <div style={{ paddingTop: '14px' }}>
-        {data.list.length > 0 ? (
-          <Grid gutter={14} columnNum={3} class={styles.grid}>
-            {data.list.map((item: any) => {
-              return (
-                <GridItem>
-                  <div class={styles.gridItem} onClick={() => handleClick(item)}>
-                    <img src={iconCourse} class={styles.cover} />
-                    <div class={styles.title}>
-                      <div class={styles.coreTitle}>{item.name}</div>
-                      {<div>已使用 {item.useNum} 次</div>}
-                    </div>
+      <div class={styles.uniTest}>
+        <OSticky
+          onGetHeight={(height: number) => {
+            document.documentElement.style.setProperty('--header-height', height + 'px')
+          }}
+        >
+          <OHeader
+            border={false}
+            background="transparent"
+            color="rgba(124, 61, 18, 1)"
+            title="选择教材"
+          />
+        </OSticky>
+        <div class={styles.periodContent}>
+          <Image class={styles.cover} src={data.detail.cover}>
+            {{
+              loading: () => <Loading />, 
+            }}
+          </Image>
+          {/* <img class={styles.cover} src={data.detail.cover} /> */}
+          <div>
+            <div class={styles.contentTitle}>{data.detail.name}</div>
+            <div class={styles.contentLabel}>
+              教学目标：{data.detail.des}
+            </div>
+          </div>
+        </div>
 
-                    {/* <div class={styles.num}>
-                      查看
-                      <Icon name="play-circle-o" class={styles.playIcon} />
-                    </div> */}
+        <div class={styles.periodTitle}>
+          <img class={styles.pIcon} src={iconList} />
+          <div class={styles.pTitle}>课程列表</div>
+          <div class={styles.pNum}>共{data.list.length}课</div>
+        </div>
 
-                    {!item.unLockFlag && (
-                      <div class={styles.look} onClick={(e: Event) => e.stopPropagation()}>
-                        <Icon name={iconLook} /> 未解锁
+        <div class={styles.periodList}>
+          <CellGroup inset>
+            {data.list.map((item: any) => {
+              const isLock = !item.unLockFlag
+              return (
+                <Cell
+                  border
+                  center
+                  title={item.name}
+                  label={`已使用${item.useNum}次`}
+                  onClick={() => !isLock && handleClick(item)}
+                >
+                  {{
+                    icon: () => (
+                      <div class={styles.periodItem}>
+                        <div class={styles.periodItemModel}>
+                          <img src={isLock ? iconCourseLock : iconCourse} />
+                        </div>
                       </div>
-                    )}
-                  </div>
-                </GridItem>
+                    ),
+                    value: () => (
+                      <>
+                        <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>选择</Button>
+                      </>
+                    )
+                  }}
+                </Cell>
               )
             })}
-          </Grid>
-        ) : (
-          <OEmpty></OEmpty>
-        )}
+          </CellGroup>
+        </div>
+        {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
       </div>
     )
   }

src/views/unit-test/unit-create/unit-Lesson.tsx

@@ -6,6 +6,9 @@ import styles from './unit-lesson.module.less'
 import iconLook from './image/look.svg'
 import { useRoute, useRouter } from 'vue-router'
 import OEmpty from '@/components/o-empty'
+import CourseItem from '@/views/lessonCourseware/component/CourseItem'
+import OSticky from '@/components/o-sticky'
+import OHeader from '@/components/o-header'
 export default defineComponent({
   name: 'unit-Lesson',
   setup() {
@@ -16,6 +19,18 @@ export default defineComponent({
       loading: true,
       list: [] as any
     })
+    
+    const filterData = (list: any[]) => {
+      const schoolTerm = {}
+      for(let i = 0; i < list.length; i++){
+        if (schoolTerm[list[i].sortNo]){
+          schoolTerm[list[i].sortNo].push(list[i])
+        } else {
+          schoolTerm[list[i].sortNo] = [list[i]]
+        }
+      }
+      return schoolTerm
+    }
 
     const getList = async () => {
       data.loading = true
@@ -30,12 +45,15 @@ export default defineComponent({
           }
         )
         if (Array.isArray(res?.data)) {
-          data.list = []
-          res.data.map((item: any) => {
-            if (item.unitTestNum) {
-              data.list.push(item)
+          const list = res.data.filter((item: any) => item.unitTestNum).map((n: any) => {
+            return {
+              coverImg: n.coverImg,
+              name: n.coursewareName,
+              id: n.lessonCoursewareId,
+              courseNum: n.coursewareNum
             }
           })
+          data.list = filterData(list)
         }
       } catch (error) {
         console.log(error)
@@ -61,40 +79,24 @@ export default defineComponent({
 
     return () => (
       <div
-        style={{ paddingTop: '14px' }}
-        class={[data.list.length > 0 ? '' : 'emptyRootContainer']}
+        class={[styles.unitLesson, Object.values(data.list).length ? '' : 'emptyRootContainer']}
       >
-        {data.list.length > 0 ? (
-          <Grid gutter={14} columnNum={3} class={styles.grid}>
-            {data.list.map((item: any) => {
-              return (
-                <GridItem>
-                  <div
-                    class={styles.gridItem}
-                    style={{
-                      background: item.coverImg
-                        ? ''
-                        : `hsla(${Math.floor(Math.random() * 360)},50%,50%,.8)`
-                    }}
-                    onClick={() => handleClick(item)}
-                  >
-                    <img src={item.coverImg} class={styles.cover} />
-                    <div class={styles.title}>{item.name}</div>
-                    <div class={styles.num}>共{item.unitTestNum || 0}次测验</div>
-
-                    {/* {!item.enableFlag && (
-                    <div class={styles.look}>
-                      <Icon name={iconLook} /> 未解锁
-                    </div>
-                  )} */}
-                  </div>
-                </GridItem>
-              )
-            })}
-          </Grid>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无教材"></OEmpty>
-        )}
+        <OSticky
+          onGetHeight={(height: number) => {
+            document.documentElement.style.setProperty('--header-height', height + 'px')
+          }}
+        >
+          <OHeader
+            border={false}
+            background="rgba(255, 232, 206, 1)"
+            color="rgba(124, 61, 18, 1)"
+            title="选择教材"
+          />
+        </OSticky>
+        {Object.keys(data.list).map((key: any) => {
+          return <CourseItem term={key} list={data.list[key]} onItemClick={(row) => handleClick(row)} />
+        })}
+        {!data.loading && !Object.values(data.list).length && <OEmpty btnStatus={false} tips="暂无教材"></OEmpty>}
 
         {/* <Button onClick={() => {
           location.href = 'http://192.168.3.114:1000/teacher.html#/courseList?id=1610595624868495362'

src/views/unit-test/unit-create/unit-lesson.module.less

@@ -1,66 +1,6 @@
-.grid {
-  :global {
-    .van-grid-item {
-      .van-grid-item__content {
-        padding: 0;
-        background: transparent;
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-  .gridItem {
-    position: relative;
-    width: 100%;
-    height: 130px;
-    border-radius: 8px;
-    overflow: hidden;
-    background: rgba(247, 203, 143, 1);
-    .cover {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    .title {
-      position: relative;
-      text-align: center;
-      padding: 10px;
-      color: #742c00;
-    }
-    .num {
-      position: absolute;
-      left: 50%;
-      bottom: 12px;
-      transform: translateX(-50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      width: 75%;
-      height: 20px;
-      border-radius: 20px;
-      background-color: #fff;
-      color: #742c00;
-    }
-    .look {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.6);
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-    }
-  }
+.unitLesson{
+  min-height: 100vh;
+  background-color: rgba(255, 232, 206, 1);
+  padding: 10px 0;
+  box-sizing: border-box;
 }