UI走查

src/views/courseList/index.module.less

@@ -2,7 +2,7 @@
   min-height: 100vh;
   background-color: #fff;
   background-image: linear-gradient(180deg, #FFE8CE 0%, rgba(251, 233, 213, 0) 198px);
-  padding: 20px 0;
+  padding:10px 0;
   box-sizing: border-box;
 }
 
@@ -23,6 +23,15 @@
         animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
       }
     }
+    &::before {
+      content: '';
+      position: absolute;
+      left: 5px;
+      width: 5px;
+      height: 100%;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
+      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+  }
   }
 
   .contentTitle {
@@ -63,7 +72,7 @@
   .pNum {
     font-size: 12px;
     font-weight: 400;
-    color: #000;
+    color: rgba(131,131,131,1);
   }
 }
 
@@ -116,7 +125,7 @@
   .baseBtn {
     width: 73px;
     height: 26px;
-    line-height: 26px;
+    line-height: 1;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
@@ -136,6 +145,9 @@
       opacity: 1;
       background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
     }
+    &.downing{
+      width: 100px;
+    }
   }
 }
 

src/views/courseList/index.tsx

@@ -230,7 +230,7 @@ export default defineComponent({
             border={false}
             background="transparent"
             color="rgba(124, 61, 18, 1)"
-            title="我的教材"
+            title="教材详情"
           />
         </OSticky>
 
@@ -290,7 +290,7 @@ export default defineComponent({
                             ) : (
                               <Button
                                 disabled={isLock}
-                                class={[styles.baseBtn, isLock ? styles.disable : styles.down]}
+                                class={[styles.baseBtn, isLock ? styles.disable : styles.down, item.downloadStatus ? styles.downing : '']}
                               >
                                 {item.downloadStatus === 1
                                   ? `下载中 ${item.progress || 0}%`

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

@@ -1,9 +1,10 @@
-.content{
+.content {
     padding: 12px;
 }
+
 .wrap {
     position: relative;
-    background: rgba(253,243,231,1);
+    background: rgba(253, 243, 231, 1);
     border-radius: 10px;
     border: 2px solid #FFFFFF;
     min-height: 220px;
@@ -20,7 +21,7 @@
     .icon {
         position: absolute;
         left: 50%;
-        top: -6px;
+        top: -8px;
         width: 126px;
         padding: 5px 10px;
         transform: translate(-50%, 0);
@@ -33,7 +34,8 @@
         font-size: 16px;
         font-weight: 500;
         line-height: 22px;
-        img{
+
+        img {
             display: block;
             width: 100%;
             height: 100%;
@@ -87,19 +89,34 @@
         line-height: 16px;
         font-size: 12px;
         z-index: 1;
+        white-space: nowrap;
+        word-break: break-all;
+        min-width: 50px;
+        text-align: center;
     }
 
     .coverImg {
         display: block;
         width: 100%;
         max-height: 140px;
-        :global{
-            .van-image__loading{
+
+        :global {
+            .van-image__loading {
                 position: relative;
                 min-height: 130px;
                 animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
             }
         }
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 5px;
+            width: 5px;
+            height: 100%;
+            background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
+            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+        }
     }
 
     .name {

src/views/lessonCourseware/component/CourseItem/index.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
       default: () => []
     },
     term: {
-      type: Number,
+      type: String as PropType<any>,
       defaut: 0
     }
   },
@@ -46,7 +46,7 @@ export default defineComponent({
                     <img src={iconLock} />
                     <div>未解锁</div>
                 </div>} */}
-                  <div class={styles.coverNum}>共{item.courseNum}课</div>
+                  <div class={styles.coverNum}>{item.courseNumName ? item.courseNumName : `共${item.courseNum}课`}</div>
                 </div>
                 <div class={[styles.name, 'van-ellipsis']}>{item.name}</div>
               </div>

src/views/lessonCourseware/index.module.less

@@ -4,3 +4,12 @@
   padding: 10px 0;
   box-sizing: border-box;
 }
+.filter{
+  font-size: 14px;
+  font-weight: 500;
+}
+:global{
+  .van-action-sheet{
+    max-height: 40%;
+  }
+}

src/views/lessonCourseware/index.tsx

@@ -1,7 +1,18 @@
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Button, Empty, Grid, GridItem, Icon, showToast, Toast } from 'vant'
-import { defineComponent, onMounted, reactive } from 'vue'
+import {
+  ActionSheet,
+  ActionSheetAction,
+  Button,
+  Empty,
+  Grid,
+  GridItem,
+  Icon,
+  Popover,
+  showToast,
+  Toast
+} from 'vant'
+import { computed, defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import iconLook from './image/look.svg'
 import { useRoute, useRouter } from 'vue-router'
@@ -9,6 +20,8 @@ import OEmpty from '@/components/o-empty'
 import OSticky from '@/components/o-sticky'
 import OHeader from '@/components/o-header'
 import CourseItem from './component/CourseItem'
+import { courseEmnu } from '@/constant'
+import { browser } from '@/helpers/utils'
 export default defineComponent({
   name: 'lessonCourseware',
   setup() {
@@ -16,12 +29,16 @@ export default defineComponent({
     const router = useRouter()
     const data = reactive({
       loading: true,
-      list: [] as any
+      list: [] as any,
+      actionShow: false,
+      actionName: '课程类型' as string | undefined,
+      actionKey: '',
+      showRight: route.query.code != 'select' && browser().isTeacher
     })
     const filterData = (list: any[]) => {
       const schoolTerm = {}
-      for(let i = 0; i < list.length; i++){
-        if (schoolTerm[list[i].sortNo]){
+      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]]
@@ -52,7 +69,10 @@ export default defineComponent({
         try {
           const res: any = await request.post(state.platformApi + '/courseSchedule/myCourseware')
           if (Array.isArray(res?.data)) {
-            data.list = filterData(res.data)
+            const _data = data.actionKey
+              ? res.data.filter((n: any) => n.courseTypeCode === data.actionKey)
+              : res.data
+            data.list = filterData(_data)
           }
         } catch (error) {}
       }
@@ -80,8 +100,26 @@ export default defineComponent({
       })
     }
 
+    const actions = computed(() => {
+      return Object.entries(courseEmnu).map(([key, value]) => {
+        return {
+          id: key,
+          name: value,
+          color: key === data.actionKey ? 'var(--van-primary)' : ''
+        } as ActionSheetAction
+      })
+    })
+
+    const handleSelect = (action: any) => {
+      data.actionKey = action.id
+      data.actionName = action.name
+      data.actionShow = false
+      getList()
+    }
     return () => (
-      <div class={[styles.lessonCourseware, !Object.values(data.list).length && 'emptyRootContainer']}>
+      <div
+        class={[styles.lessonCourseware, !Object.values(data.list).length && 'emptyRootContainer']}
+      >
         <OSticky
           onGetHeight={(height: number) => {
             document.documentElement.style.setProperty('--header-height', height + 'px')
@@ -92,13 +130,37 @@ export default defineComponent({
             background="rgba(255, 232, 206, 1)"
             color="rgba(124, 61, 18, 1)"
             title="我的教材"
-          />
+          >
+            {{
+              right: () => (
+                <>
+                  {data.showRight && (
+                    <div class={styles.filter} onClick={() => (data.actionShow = true)}>
+                      {data.actionName} <Icon style={{ transform: 'rotate(90deg)' }} name="play" />{' '}
+                    </div>
+                  )}
+                </>
+              )
+            }}
+          </OHeader>
         </OSticky>
         {Object.keys(data.list).map((key: any) => {
-          console.error(key)
-          return <CourseItem term={key} list={data.list[key]} onItemClick={(row) => handleClick(row)} />
+          return (
+            <CourseItem term={key} list={data.list[key]} onItemClick={(row) => handleClick(row)} />
+          )
         })}
         {!data.loading && !Object.values(data.list).length && <OEmpty tips="没有课件" />}
+        <ActionSheet
+          v-model:show={data.actionShow}
+          cancelText="全部课程类型"
+          actions={actions.value}
+          onCancel={() => {
+            data.actionKey = ''
+            data.actionName = '课程类型'
+            getList()
+          }}
+          onSelect={handleSelect}
+        />
       </div>
     )
   }

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

@@ -1,8 +1,8 @@
-.uniTest{
+.uniTest {
   min-height: 100vh;
   background-color: #fff;
   background-image: linear-gradient(180deg, #FFE8CE 0%, rgba(251, 233, 213, 0) 198px);
-  padding: 20px 0;
+  padding:10px 0;
   box-sizing: border-box;
 }
 
@@ -16,13 +16,23 @@
     border-radius: 4px 8px 8px 4px;
     box-shadow: 0px 2px 6px 0px rgba(221, 168, 133, 0.67);
     overflow: hidden;
-    :global{
-      .van-image__loading{
+
+    :global {
+      .van-image__loading {
         position: relative;
         min-height: 130px;
         animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
       }
     }
+    &::before {
+      content: '';
+      position: absolute;
+      left: 5px;
+      width: 5px;
+      height: 100%;
+      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
+      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
+  }
   }
 
   .contentTitle {
@@ -63,7 +73,7 @@
   .pNum {
     font-size: 12px;
     font-weight: 400;
-    color: #000;
+    color: rgba(131,131,131,1);
   }
 }
 
@@ -80,12 +90,14 @@
 
     .van-cell {
       padding: 18px 20px;
-      &::after{
+
+      &::after {
         left: 20px;
         right: 20px;
         border-color: rgba(242, 242, 242, 1);
         transform: none;
       }
+
       .van-cell__title {
         padding-right: 8px;
 
@@ -116,7 +128,7 @@
   .baseBtn {
     width: 73px;
     height: 26px;
-    line-height: 26px;
+    line-height: 1;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
@@ -125,11 +137,7 @@
     flex-shrink: 0;
 
     &.look {
-      background: linear-gradient(180deg, #FFAB71 0%, #FF6E45 100%);
-    }
-
-    &.down {
-      background: linear-gradient(180deg, #80C6FF 0%, #4296FF 100%);
+      background: linear-gradient(180deg, #FF8A7C 0%, #FF5757 100%);
     }
 
     &.disable {
@@ -150,4 +158,4 @@
     height: 100%;
     display: block;
   }
-}
+}

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

@@ -12,8 +12,8 @@ import {
 } from '@/helpers/native-message'
 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 iconCourse from './image/icon-course.png'
+import iconCourseLock from './image/icon-course-lock.png'
 import { browser } from '@/helpers/utils'
 import OSticky from '@/components/o-sticky'
 import OHeader from '@/components/o-header'
@@ -95,7 +95,7 @@ export default defineComponent({
             border={false}
             background="transparent"
             color="rgba(124, 61, 18, 1)"
-            title="选择教材"
+            title="教材详情"
           />
         </OSticky>
         <div class={styles.periodContent}>
@@ -141,7 +141,7 @@ export default defineComponent({
                     ),
                     value: () => (
                       <>
-                        <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>选择</Button>
+                        <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>使用</Button>
                       </>
                     )
                   }}

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

@@ -51,7 +51,8 @@ export default defineComponent({
               coverImg: n.coverImg,
               name: n.coursewareName,
               id: n.lessonCoursewareId,
-              courseNum: n.coursewareNum
+              courseNum: n.coursewareNum,
+              courseNumName: `共${n.coursewareNum}次测验`
             }
           })
           data.list = filterData(list)