修改历史记录样式

src/api/user.ts

@@ -73,10 +73,10 @@ export const userApi = {
   record(category_id: number) {
     return request<Record<number, userRecord>>(`/api/v1/course/${category_id}/record`, "GET")
   },
-  courseRecord(course_id: number) {
+  courseRecord(course_id: string) {
     return request<CourseRecord>(`/api/v1/course/${course_id}/info`, "GET")
   },
-  hourCourse(course_id: number, unique_ident: number) {
+  hourCourse(course_id: string, unique_ident: number) {
     return request<HourCourse>(`/api/v1/course/${course_id}/info/${unique_ident}`, "GET")
   },
   meetingSave(data: any) {

src/components/button/myButton.module.scss

@@ -15,4 +15,5 @@
   position: relative;
   height: 76rpx;
   line-height: 76rpx;
+  flex: 1;
 }

src/pages/business/curHistory/curHistory.module.scss

@@ -1,4 +1,4 @@
-.page{
+.page {
   padding: 30px !important;
   box-sizing: border-box;
 }
@@ -7,26 +7,39 @@
   background: #fff;
   overflow: hidden;
   border-radius: 16px;
-  font-weight: bold;
+  font-weight: 500;
+  position: relative;
+}
 
-  //View {
+.classHour {
-  //  color: #323635;
+  background: rgba(#000, .6);
-  //  padding: 24px;
+  position: absolute;
-  //}
+  top: 250rpx;
+  width: 100%;
+  font-size: 25rpx;
+  line-height: 50rpx;
+  text-align: center;
+  color: #fff;
+  font-weight: 100;
+  left: 0;
+}
 
-  .image {
+.title {
+  padding: 10rpx;
+  height: 100rpx;
+}
+
+.image {
   width: 100%;
-    height: 288rpx;
+  height: 300rpx;
   display: block;
   background: #ddd;
-  }
 }
 
 .record {
   background: #fff;
   overflow: hidden;
   border-radius: 16px;
-  font-weight: bold;
   padding: 0 24px;
   margin-top: 30px;
   font-weight: 400;
@@ -35,21 +48,19 @@
 .recordItem {
   padding: 24px 0 38rpx;
   border-bottom: 1px solid #F5F8F7;
+  font-size: 26rpx;
+  color: #606563;
+  line-height: 1.75;
+}
 
-  Progress {
+.progress {
-    margin-top: 16px;
   color: #45D4A8;
-  }
 }
 
 .hourRecord {
-  padding: 30px;
+  padding: 30rpx;
   max-height: 70vh;
   overflow: auto;
-
-  & > View {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }
 
 

src/pages/business/curHistory/curHistory.tsx

@@ -8,7 +8,7 @@ import CustomPageContainer from "@/components/custom-page-container/custom-page-
 
 const CurHistory = () => {
   const [show, setShow] = useState(false)
-  const {course_id, name} = Taro.getCurrentInstance().preloadData as { course_id: number, name: string }
+  const {course_id} = Taro.getCurrentInstance().router?.params as unknown as { course_id: string }
   const [data, setData] = useState<userRecord[]>([])
   const [course, setCourse] = useState<Curriculum | null>(null)
   const [hours, setHours] = useState<Hour[] | null>(null)
@@ -16,7 +16,7 @@ const CurHistory = () => {
   const [time, setTime] = useState<Record<number, { start: number, end: number }> | null>(null)
 
   Taro.useLoad(() => {
-    Taro.setNavigationBarTitle({title: name})
+    // Taro.setNavigationBarTitle({title: name})
     userApi.courseRecord(course_id).then(res => {
       setData(Object.values(res.data))
       setCourse(res.course)
@@ -37,37 +37,48 @@ const CurHistory = () => {
   }
 
   function getTime(id: number): string {
-    const start = formatDateTime(new Date(time?.[id].start || 0), 'MM/dd HH:mm')
+    const day = formatDateTime(new Date(time?.[id].start || 0), 'MM-dd')
-    const end = formatDateTime(new Date(time?.[id].end || 0), 'MM/dd HH:mm')
+    const start = formatDateTime(new Date(time?.[id].start || 0), 'HH:mm:ss')
-    return `${start} - ${end}`
+    const end = formatDateTime(new Date(time?.[id].end || 0), 'HH:mm:ss')
+    return `${day} ${start} - ${end}`
+  }
+
+  function getCurTime(startNow: string, endNow: string): string {
+    const day = formatDateTime(new Date(startNow), 'MM-dd')
+    const start = formatDateTime(new Date(startNow), 'HH:mm:ss')
+    const end = formatDateTime(new Date(endNow), 'HH:mm:ss')
+    return `${day} ${start} - ${end}`
   }
 
   function hourPercent(id: number, duration: number): number {
     const viewingTime = durations?.[id] || 0
-    console.log(viewingTime,duration)
     return Number((viewingTime / duration * 100).toFixed(2))
   }
 
   return (
     <View className={styles.page}>
       <View className={styles.cur}>
-        <Image className='image' src={course?.thumb || ''} mode='widthFix'/>
+        <Image className={styles.image} src={course?.thumb || ''} mode='center'/>
-        <View className='px-3'>{name}</View>
+        <View className={styles.classHour}>共{course?.class_hour}节/已学{course?.finished_hour_count || 0}节</View>
+        <View className={styles.title}>{course?.title}</View>
       </View>
 
 
       <View className={styles.record}>
-        {data.map(d => <View key={d.id} onClick={() => setHour(d.unique_ident)} className={styles.recordItem}>
+        {data.map((d, index) => <View key={d.id} onClick={() => setHour(d.unique_ident)} className={styles.recordItem}>
-          <View>{formatDateTime(new Date(d.start_at), "MM/dd HH:ss")} - {formatDateTime(new Date(d.end_at), "MM/dd HH:ss")}</View>
+          <View className='text-hover-dark'>第{index + 1}次观看</View>
+          <View>{getCurTime(d.start_at, d.end_at)} </View>
           <View>观看视频：{formatMinute(d.duration)}</View>
           <Progress
+            className={styles.progress}
             percent={percent(d.duration)}
             showInfo
             borderRadius={10}
             active
             duration={10}
             strokeWidth={10}
-            color={'#45D4A8'}
+            color='#45D4A8'
+            activeColor='#45D4A8'
           />
         </View>)}
       </View>
@@ -75,11 +86,11 @@ const CurHistory = () => {
       <CustomPageContainer
         show={show}
         round
-        onAfterLeave={() => setShow(false)}>
+        position='bottom'
+        onClickOverlay={() => setShow(false)}>
         {show && <View className={styles.hourRecord}>
 
-          {
+          {hours?.map(d => <View>
-            hours?.map(d => <View>
               <View className={styles.recordItem}>
                 <View>{d.title}</View>
                 <View>{getTime(d.id)}</View>
@@ -91,11 +102,11 @@ const CurHistory = () => {
                   active
                   strokeWidth={10}
                   color={'#45D4A8'}
+                  activeColor={'#45D4A8'}
                 />
               </View>
             </View>
-            )
+          )}
-          }
         </View>}
       </CustomPageContainer>
     </View>

src/pages/business/history/history.module.scss

@@ -6,6 +6,12 @@
   background: #fff;
 }
 
+.image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .thumb {
   background: #ddd;
   width: 300rpx;
@@ -13,14 +19,9 @@
   border-radius: 8px;
   position: relative;
   overflow: hidden;
+}
 
-  Image {
+.count {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  View {
   width: 100%;
   text-align: center;
   height: 48rpx;
@@ -29,7 +30,7 @@
   position: absolute;
   left: 0;
   bottom: 0;
-  }
+  font-size: 28rpx;
 }
 
 .text {
@@ -39,12 +40,13 @@
   flex-direction: column;
   margin-left: 20px;
   justify-content: space-between;
-  font-weight: bold;
+  font-weight: 500;
   word-break: break-all;
+}
 
-  & > View:last-child {
+.describe {
   font-weight: 100;
   color: #909795;
-  }
+  font-size: 24rpx;
 }
 

src/pages/business/history/history.tsx

@@ -1,4 +1,4 @@
-import {Image, View} from "@tarojs/components";
+import {Image, Text, View} from "@tarojs/components";
 import CategoryTabs from "@/pages/business/history/components/CategoryTabs";
 import styles from './history.module.scss'
 import Taro from "@tarojs/taro";
@@ -15,9 +15,8 @@ const History = () => {
     setData(Object.values(res))
   }
 
-  function jump(course_id: number, name: string) {
+  function jump(course_id: number) {
-    Taro.preload({course_id, name})
+    Taro.navigateTo({url: `/pages/business/curHistory/curHistory?course_id=${course_id}`})
-    Taro.navigateTo({url: `/pages/business/curHistory/curHistory`})
   }
 
   return (
@@ -25,14 +24,18 @@ const History = () => {
       <CategoryTabs changeTabs={getData}/>
 
       <View className='mt-3'>
-        {data.length ? data.map((d, index) => <View key={index} className={styles.category} onClick={() => jump(d.course_id, d.course.title)}>
+        {data.length ? data.map((d, index) =>
+          <View key={index} className={styles.category} onClick={() => jump(d.course_id)}>
             <View className={styles.thumb}>
-            <Image src={d.course.thumb}/>
+              <Image src={d.course.thumb} className={styles.image}/>
-            <View>共{d.total_hour_count}节/已学{d.finished_count}节</View>
+              <View className={styles.count}>共{d.total_hour_count}节/已学{d.finished_count}节</View>
             </View>
             <View className={styles.text}>
               <View>{d.course.title}</View>
-            <View>观看{formatMinute(d.duration)}</View>
+              <View className={styles.describe}>
+                <Text className='mr-4'>观看{formatMinute(d.duration)}</Text>
+                <Text>学习进度：{(d.finished_count / d.total_hour_count * 100).toFixed(0)}%</Text>
+              </View>
             </View>
           </View>) : <Empty name='无观看记录'/>}
       </View>

types/curriculum.d.ts

@@ -13,6 +13,8 @@ interface Curriculum {
   thumb: string;
   /** 时间 */
   course_duration: number
+
+  [key:string]:any
 }
 
 /** 课程信息 */