xing
/
video
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改历史记录样式

Browse Source
main
king 1 year ago
parent 4b05f2d2a8
commit 1caed4d11e
7 changed files with 118 additions and 88 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/user.ts
  2. 1
      src/components/button/myButton.module.scss
  3. 55
      src/pages/business/curHistory/curHistory.module.scss
  4. 69
      src/pages/business/curHistory/curHistory.tsx
  5. 44
      src/pages/business/history/history.module.scss
  6. 31
      src/pages/business/history/history.tsx
  7. 2
      types/curriculum.d.ts

4
src/api/user.ts
Unescape View File

@ -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) {

1
src/components/button/myButton.module.scss
Unescape View File

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

55
src/pages/business/curHistory/curHistory.module.scss
Unescape View File

@ -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;
}
.classHour {
background: rgba(#000, .6);
position: absolute;
top: 250rpx;
width: 100%;
font-size: 25rpx;
line-height: 50rpx;
text-align: center;
color: #fff;
font-weight: 100;
left: 0;
}
//View {
// color: #323635;
// padding: 24px;
//}
.title {
padding: 10rpx;
height: 100rpx;
}
.image {
width: 100%;
height: 288rpx;
display: block;
background: #ddd;
}
.image {
width: 100%;
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 {
margin-top: 16px;
color: #45D4A8;
}
.progress {
color: #45D4A8;
}
.hourRecord {
padding: 30px;
padding: 30rpx;
max-height: 70vh;
overflow: auto;
& > View {
padding-bottom: env(safe-area-inset-bottom);
}
}

69
src/pages/business/curHistory/curHistory.tsx
Unescape View File

@ -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 end = formatDateTime(new Date(time?.[id].end || 0), 'MM/dd HH:mm')
return `${start} - ${end}`
const day = formatDateTime(new Date(time?.[id].start || 0), 'MM-dd')
const start = formatDateTime(new Date(time?.[id].start || 0), 'HH:mm:ss')
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'/>
<View className='px-3'>{name}</View>
<Image className={styles.image} src={course?.thumb || ''} mode='center'/>
<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}>
<View>{formatDateTime(new Date(d.start_at), "MM/dd HH:ss")} - {formatDateTime(new Date(d.end_at), "MM/dd HH:ss")}</View>
{data.map((d, index) => <View key={d.id} onClick={() => setHour(d.unique_ident)} className={styles.recordItem}>
<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,27 +86,27 @@ const CurHistory = () => {
<CustomPageContainer
show={show}
round
onAfterLeave={() => setShow(false)}>
position='bottom'
onClickOverlay={() => 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>
{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'}
activeColor={'#45D4A8'}
/>
</View>
)
}
</View>
)}
</View>}
</CustomPageContainer>
</View>

44
src/pages/business/history/history.module.scss
Unescape View File

@ -6,6 +6,12 @@
background: #fff;
}
.image {
width: 100%;
height: 100%;
display: block;
}
.thumb {
background: #ddd;
width: 300rpx;
@ -13,23 +19,18 @@
border-radius: 8px;
position: relative;
overflow: hidden;
}
Image {
width: 100%;
height: 100%;
display: block;
}
View {
width: 100%;
text-align: center;
height: 48rpx;
background: rgba(#000, .5);
color: #fff;
position: absolute;
left: 0;
bottom: 0;
}
.count {
width: 100%;
text-align: center;
height: 48rpx;
background: rgba(#000, .5);
color: #fff;
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 {
font-weight: 100;
color: #909795;
}
.describe {
font-weight: 100;
color: #909795;
font-size: 24rpx;
}

31
src/pages/business/history/history.tsx
Unescape View File

@ -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) {
Taro.preload({course_id, name})
Taro.navigateTo({url: `/pages/business/curHistory/curHistory`})
function jump(course_id: number) {
Taro.navigateTo({url: `/pages/business/curHistory/curHistory?course_id=${course_id}`})
}
return (
@ -25,16 +24,20 @@ 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)}>
<View className={styles.thumb}>
<Image src={d.course.thumb}/>
<View>共{d.total_hour_count}节/已学{d.finished_count}节</View>
</View>
<View className={styles.text}>
<View>{d.course.title}</View>
<View>观看{formatMinute(d.duration)}</View>
</View>
</View>) : <Empty name='无观看记录'/>}
{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} className={styles.image}/>
<View className={styles.count}>共{d.total_hour_count}节/已学{d.finished_count}节</View>
</View>
<View className={styles.text}>
<View>{d.course.title}</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>
</View>
)

2
types/curriculum.d.ts vendored
Unescape View File

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

Write Preview
Loading…
Cancel
Save