You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.4 KiB
105 lines
3.4 KiB
import {Image, Progress, View} from "@tarojs/components";
|
|
import Taro from "@tarojs/taro";
|
|
import styles from './curHistory.module.scss'
|
|
import {useState} from "react";
|
|
import {userApi} from "@/api";
|
|
import {formatDateTime, formatMinute} from "@/utils/time";
|
|
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
|
|
|
|
const CurHistory = () => {
|
|
const [show, setShow] = useState(false)
|
|
const {course_id, name} = Taro.getCurrentInstance().preloadData as { course_id: number, name: string }
|
|
const [data, setData] = useState<userRecord[]>([])
|
|
const [course, setCourse] = useState<Curriculum | null>(null)
|
|
const [hours, setHours] = useState<Hour[] | null>(null)
|
|
const [durations, setDuration] = useState<Record<number, number> | null>(null)
|
|
const [time, setTime] = useState<Record<number, { start: number, end: number }> | null>(null)
|
|
|
|
Taro.useLoad(() => {
|
|
Taro.setNavigationBarTitle({title: name})
|
|
userApi.courseRecord(course_id).then(res => {
|
|
setData(Object.values(res.data))
|
|
setCourse(res.course)
|
|
})
|
|
})
|
|
|
|
async function setHour(unique_ident: number) {
|
|
const res = await userApi.hourCourse(course_id, unique_ident)
|
|
setHours(Object.values(res.courseHour))
|
|
setDuration(res.duration)
|
|
setTime(res.date)
|
|
setShow(true)
|
|
}
|
|
|
|
function percent(duration: number): number {
|
|
if (!course?.course_duration) return 0
|
|
return Number((duration / course.course_duration * 100).toFixed(2))
|
|
}
|
|
|
|
function getTime(id: number): string {
|
|
const start = formatDateTime(new Date(time?.[id].start || 0), 'MM/dd HH:mm')
|
|
const end = formatDateTime(new Date(time?.[id].end || 0), 'MM/dd HH:mm')
|
|
return `${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>
|
|
<View className={styles.cur}>
|
|
<Image src={course?.thumb || ''} mode='widthFix'/>
|
|
<View>{name}</View>
|
|
</View>
|
|
|
|
|
|
<View className={styles.record}>
|
|
{data.map(d => <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>观看视频：{formatMinute(d.duration)}</View>
|
|
<Progress
|
|
percent={percent(d.duration)}
|
|
showInfo
|
|
borderRadius={10}
|
|
active
|
|
duration={10}
|
|
strokeWidth={10}
|
|
color={'#45D4A8'}
|
|
/>
|
|
</View>)}
|
|
</View>
|
|
|
|
<CustomPageContainer
|
|
show={show}
|
|
round
|
|
onAfterLeave={() => setShow(false)}>
|
|
{show && <View className={styles.hourRecord}>
|
|
|
|
{
|
|
hours?.map(d => <View>
|
|
<View className={styles.recordItem}>
|
|
<View>{d.title}</View>
|
|
<View>{getTime(d.id)}</View>
|
|
<Progress
|
|
percent={hourPercent(d.id, d.duration)}
|
|
showInfo
|
|
duration={10}
|
|
borderRadius={10}
|
|
active
|
|
strokeWidth={10}
|
|
color={'#45D4A8'}
|
|
/>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
</View>}
|
|
</CustomPageContainer>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default CurHistory
|
|
|