修复问题

src/school/train-planning/modal/timer/index.tsx

@@ -64,42 +64,74 @@ export default defineComponent({
         })
         return hour
       }
+      //  else if (type === 'minute') {
+      //   console.log(type, option, '121212', state.useTimerFormat)
+      //   const minute: any = []
+      //   option.forEach((o: any) => {
+      //     state.useTimerFormat.forEach((time: any) => {
+      //       if (
+      //         o.value >= time.startMinute &&
+      //         o.value <= (time.endMinute ? time.endMinute : 59) &&
+      //         o.value != minute[minute.length - 1]?.value
+      //       ) {
+      //         minute.push(o)
+      //       }
+      //     })
+      //   })
+      //   return minute
+      // }
       return option
     }
 
     // 时间切换时
     // [6:30, 12:00] [15:00, 18:00]
     const onChange = (val: any) => {
+      // console.log(val, 'val')
       // 判断是否选择小时
-      if (val.columnIndex === 1) return
-
+      // if (val.columnIndex === 1) return
       // 选择时间
-      const selectHour = Number(val.selectedValues[0])
-
-      let minute = 0 // 获取开始的分钟数
-      state.useTimerFormat.forEach((item: any) => {
-        if (selectHour === item.startHour) {
-          minute = item.startMinute
-        } else if (selectHour === item.endHour) {
-          minute = item.endMinute
-        }
-      })
-
-      state.minMinute = minute
-      state.maxMinute = 59
+      // const selectHour = Number(val.selectedValues[0])
+      // let minute = 0 // 获取开始的分钟数
+      // let endMinute = 0
+      // state.useTimerFormat.forEach((item: any) => {
+      //   if (selectHour === item.startHour) {
+      //     // minute = item.startMinute
+      //     minute = minute >= item.startMinute ? minute : item.startMinute
+      //   } else if (selectHour === item.endHour) {
+      //     const tempMin = item.endMinute ? item.endMinute : 59
+      //     endMinute = endMinute >= tempMin ? endMinute : tempMin
+      //   }
+      // })
+      // state.minMinute = minute
+      // state.maxMinute = endMinute
     }
 
     //
     const onFormatTimer = (val: Array<any>) => {
       const format: any = []
+      const temp = {
+        startHour: 0,
+        endHour: 0,
+        startMinute: 0,
+        endMinute: 0
+      }
       val.forEach((item: any) => {
-        format.push({
-          startHour: Number(dayjs(item.startTime).format('HH')),
-          startMinute: Number(dayjs(item.startTime).format('mm')),
-          endHour: Number(dayjs(item.endTime).format('HH')),
-          endMinute: Number(dayjs(item.endTime).format('mm'))
-        })
+        const sh = Number(dayjs(item.startTime).format('HH'))
+        const eh = Number(dayjs(item.endTime).format('HH')) || 23
+        const sm = Number(dayjs(item.startTime).format('mm'))
+        const em = Number(dayjs(item.endTime).format('mm')) || 59
+        temp.startHour = temp.startHour !== 0 && temp.startHour <= sh ? temp.startHour : sh
+        temp.endHour = temp.endHour !== 0 && temp.endHour >= eh ? temp.endHour : eh
+        temp.startMinute = temp.startMinute !== 0 && temp.startMinute <= sm ? temp.startMinute : sm
+        temp.endMinute = temp.endMinute !== 0 && temp.endMinute >= em ? temp.endMinute : em
+        // format.push({
+        //   startHour: Number(dayjs(item.startTime).format('HH')),
+        //   startMinute: Number(dayjs(item.startTime).format('mm')),
+        //   endHour: Number(dayjs(item.endTime).format('HH')),
+        //   endMinute: Number(dayjs(item.endTime).format('mm'))
+        // })
       })
+      format.push(temp)
       return format
     }
 
@@ -111,22 +143,11 @@ export default defineComponent({
         .hour(selectedValues[0])
         .minute(selectedValues[1])
         .second(0)
-      // console.log(dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'), 'first', dayjs(tempDate).minute())
       // 时间加上每节课的时间，
       const lastDate = dayjs(tempDate).minute(props.times + dayjs(tempDate).minute())
-      // console.log(dayjs(lastDate).format('YYYY-MM-DD HH:mm:ss'), 'second')
-      // console.log(
-      //   dayjs(tempDate).format('YYYY-MM-DD HH:mm:ss'),
-      //   tempDate.toDate(),
-      //   'second tempDate',
-      //   state.useTimer
-      // )
 
       let isActive = false
       state.useTimer.forEach((item: any) => {
-        // if (dayjs(lastDate).isBetween(item.startTime, item.endTime, null, '[]')) {
-        //   isActive = true
-        // }
         // 判断课程的时间范围在不在可排课时间范围内
         if (
           dayjs(tempDate).valueOf() >= dayjs(item.startTime).valueOf() &&
@@ -136,7 +157,6 @@ export default defineComponent({
         }
       })
 
-      // console.log(isActive, 'isActive')
       if (!isActive) {
         showToast('您选择的时间超过可排课时间范围')
         return
@@ -154,7 +174,6 @@ export default defineComponent({
     )
 
     const init = () => {
-      console.log(props.timerList, 'timerList')
       state.calendarDate = props.timerList?.calendarDate
       const timeDetailList = props.timerList?.timeDetailList || []
 
@@ -173,15 +192,13 @@ export default defineComponent({
       const useFormat = onFormatTimer(useTimer)
       state.useTimerFormat = useFormat
       state.usedTimer = [...usedTimer]
-      console.log(onFormatTimer(useTimer), 'onFormatTimer')
-      console.log(state.useTimer, state.usedTimer, 'onUseTimer')
 
       // 判断有可排课数据
-      if (useFormat.length > 0) {
-        const temp = useFormat[0]
-        state.minMinute = temp.startMinute
-        state.maxMinute = 59
-      }
+      // if (useFormat.length > 0) {
+      //   const temp = useFormat[0]
+      //   state.minMinute = temp.startMinute
+      //   state.maxMinute = 59
+      // }
     }
 
     onMounted(() => {
@@ -276,8 +293,8 @@ export default defineComponent({
           class={'popupBottomSearch'}
         >
           <TimePicker
-            minMinute={state.minMinute}
-            maxMinute={state.maxMinute}
+            // minMinute={state.minMinute}
+            // maxMinute={state.maxMinute}
             formatter={onFormatter}
             filter={onFilter}
             onChange={onChange}

src/views/courseList/index.module.less

@@ -161,16 +161,16 @@
     }
 
     &.look {
-      background: linear-gradient(180deg, #FFAB71 0%, #FF6E45 100%);
+      background: linear-gradient(180deg, #FF6E45 0%, #FF6E45 100%);
     }
 
     &.down {
-      background: linear-gradient(180deg, #80C6FF 0%, #4296FF 100%);
+      background: linear-gradient(180deg, #4296FF 0%, #4296FF 100%);
     }
 
     &.disable {
       opacity: 1;
-      background: linear-gradient(180deg, #D3D3D3 0%, #8F8F8F 100%);
+      background: linear-gradient(180deg, #8F8F8F 0%, #8F8F8F 100%);
     }
   }
 }
@@ -189,20 +189,54 @@
 }
 
 .courseDialog {
-  :global {
-    .van-dialog__header {
-      // padding-top: 0;
+  padding: 20px;
 
-    }
+  // :global {
+  //   .van-popup__close-icon {
+  //     color: #333;
+  //     top: 24px;
+  //   }
+  // }
+  .iconClose {
+    width: 18px;
+    height: 19px;
+    position: absolute;
+    top: 24px;
+    right: 23px;
+    z-index: 9;
+    background: url('./image/icon-close.png') no-repeat center;
+    background-size: contain;
   }
 
-  .iconCross {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    font-size: 22px;
-    color: #ccc;
-    z-index: 99;
+  .title {
+    position: relative;
+    font-size: 18px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 25px;
+    text-align: center;
+  }
+
+  .content {
+    padding: 20px 0 25px;
+    font-size: 16px;
+    color: #666666;
+    line-height: 24px;
+  }
+
+  .popupBtnGroup {
+    display: flex;
+    align-items: center;
+
+    &>button {
+      flex: 1;
+      font-weight: 400;
+      font-size: 16px !important;
+
+      &:last-child {
+        margin-left: 15px;
+      }
+    }
   }
 }
 
@@ -217,4 +251,29 @@
     display: block;
     object-fit: contain;
   }
+
+  .iconCachePoint {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    object-fit: contain;
+    width: 13px;
+    height: 13px;
+  }
+
+  .downloading {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.4);
+    font-size: 11px;
+    color: #fff;
+    border-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

src/views/courseList/index.tsx

@@ -11,7 +11,9 @@ import {
   Icon,
   Image,
   Loading,
+  Popup,
   showConfirmDialog,
+  showLoadingToast,
   showToast,
   Skeleton,
   SkeletonImage,
@@ -35,6 +37,7 @@ import {
   removeListenerMessage
 } from '@/helpers/native-message'
 import iconLook from './image/look.svg'
+import iconCachePoint from './image/icon-cache-point.png'
 import iconCourse from './image/icon-course.png'
 import iconCourseLock from './image/icon-course-lock.png'
 import iconTip from './image/iconTip.png'
@@ -63,7 +66,8 @@ export default defineComponent({
         name: '',
         des: ''
       },
-      list: [] as any
+      list: [] as any,
+      isDownloading: false // 是否在下载资源
     })
 
     /** 获取课件详情 */
@@ -171,13 +175,26 @@ export default defineComponent({
 
       if (!item.hasCache) {
         const hasFree = String(item.accessScope) === '0'
-        if (!hasFree){
+        if (!hasFree) {
           const hasVip = handleCheckVip()
           if (!hasVip) return
         }
-        
+
         // 下载中不提示
         if (item.downloadStatus == 1) {
+          // 取消下载
+          postMessage({ api: 'cancelDownloadCourseware' })
+          setTimeout(() => {
+            postMessage({ api: 'cancelDownloadCourseware' })
+            item.downloadStatus = 0
+            data.isDownloading = false
+          }, 1000)
+          showLoadingToast({
+            message: '取消中...',
+            forbidClick: false,
+            loadingType: 'spinner',
+            duration: 1000
+          })
           return
         }
         // 重新下载
@@ -187,6 +204,17 @@ export default defineComponent({
         }
         data.catchStatus = true
         data.catchItem = item
+        // 下载中不提示
+        // if (item.downloadStatus == 1) {
+        //   return
+        // }
+        // // 重新下载
+        // if (item.downloadStatus == 3) {
+        //   downCatch(item)
+        //   return
+        // }
+        // data.catchStatus = true
+        // data.catchItem = item
         // try {
         //   await showConfirmDialog({
         //     message: '当前课程没有缓存,是否缓存?',
@@ -202,6 +230,7 @@ export default defineComponent({
     }
     // 去课件播放
     const gotoPlay = (item: any) => {
+      data.catchStatus = false
       postMessage({
         api: 'openWebView',
         content: {
@@ -240,6 +269,8 @@ export default defineComponent({
     // 下载缓存
     const downCatch = async (item: any) => {
       if (browserInfo.isApp) {
+        data.catchStatus = false
+        data.isDownloading = true
         const res = await postMessage({
           api: 'downloadCoursewareToCache',
           content: {
@@ -254,6 +285,9 @@ export default defineComponent({
     // 下载缓存进度
     const getProgress = (res: any) => {
       // console.log('🚀 ~ res', res)
+      if (!data.isDownloading) {
+        return
+      }
       if (res?.content?.lessonCoursewareDetailId) {
         const { lessonCoursewareDetailId, downloadStatus, progress } = res.content
         const course = data.list.find(
@@ -265,6 +299,8 @@ export default defineComponent({
           if (downloadStatus == 2) {
             course.hasCache = 1
             course.progress = 100
+            // 下载完成
+            data.isDownloading = false
           }
         }
       }
@@ -328,7 +364,8 @@ export default defineComponent({
               <div key="list" class={styles.periodList}>
                 <CellGroup inset>
                   {data.list.map((item: any) => {
-                    let isLock = item.lockFlag ||
+                    const isLock =
+                      item.lockFlag ||
                       ((route.query.code == 'select' || state.platformType == 'STUDENT') &&
                         !item.unlock)
                     const isSelect = route.query.code === 'select'
@@ -344,8 +381,19 @@ export default defineComponent({
                           icon: () => (
                             <div class={styles.periodItem}>
                               <div class={styles.periodItemModel}>
-                                <img src={ isLock ? iconCourseLock : iconCourse} />
-                                {!isLock && String(item.accessScope) === '0' && <img class={styles.periodTip} src={iconTip} />}
+                                <img src={isLock ? iconCourseLock : iconCourse} />
+                                {!isLock && String(item.accessScope) === '0' && (
+                                  <img class={styles.periodTip} src={iconTip} />
+                                )}
+
+                                {item.hasCache ? (
+                                  <img class={styles.iconCachePoint} src={iconCachePoint} />
+                                ) : (
+                                  ''
+                                )}
+                                {item.downloadStatus === 1 && (
+                                  <div class={styles.downloading}>{`${item.progress || 0}%`}</div>
+                                )}
                               </div>
                             </div>
                           ),
@@ -362,7 +410,6 @@ export default defineComponent({
                                 <>
                                   {item.hasCache ? (
                                     <Button
-                                      disabled={isLock}
                                       class={[
                                         styles.baseBtn,
                                         isLock ? styles.disable : styles.look
@@ -372,20 +419,13 @@ export default defineComponent({
                                     </Button>
                                   ) : (
                                     <Button
-                                      disabled={isLock}
                                       class={[
                                         styles.baseBtn,
                                         isLock ? styles.disable : styles.down,
                                         item.downloadStatus ? styles.downing : ''
                                       ]}
                                     >
-                                      {item.downloadStatus === 1
-                                        ? `${item.progress || 0}%`
-                                        : item.downloadStatus === 2
-                                        ? '成功'
-                                        : item.downloadStatus === 3
-                                        ? '重试'
-                                        : '下载'}
+                                      {item.downloadStatus === 1 ? `取消下载` : '查看'}
                                     </Button>
                                   )}
                                 </>
@@ -406,29 +446,23 @@ export default defineComponent({
         {data.loading && <OLoading />}
         {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
 
-        <Dialog
-          v-model:show={data.catchStatus}
-          showCancelButton
-          message={'当前课程没有缓存,是否缓存?'}
-          closeOnClickOverlay
-          class={styles.courseDialog}
-          onConfirm={() => {
-            downCatch(data.catchItem)
-          }}
-          onCancel={() => {
-            gotoPlay(data.catchItem)
-          }}
-        >
-          {{
-            title: () => (
-              <Icon
-                name="cross"
-                class={styles.iconCross}
-                onClick={() => (data.catchStatus = false)}
-              />
-            )
-          }}
-        </Dialog>
+        <Popup v-model:show={data.catchStatus} round class={styles.courseDialog}>
+          <i class={styles.iconClose} onClick={() => (data.catchStatus = false)}></i>
+          <div class={styles.title}>下载提醒</div>
+
+          <div class={styles.content}>
+            您尚未下载课件内容，为了更加流畅的学习体验，推荐您下载后观看课件。
+          </div>
+
+          <div class={styles.popupBtnGroup}>
+            <Button round onClick={() => gotoPlay(data.catchItem)}>
+              直接观看
+            </Button>
+            <Button round type="primary" onClick={() => downCatch(data.catchItem)}>
+              下载课件
+            </Button>
+          </div>
+        </Popup>
       </div>
     )
   }