首页数据 & 查看更多 & 视频播放 & 学员管理

src/api/curriculum.ts

@@ -59,5 +59,8 @@ export const curriculum = {
   /** 课程结束 */
   curEnd(courseId: number, id: number, duration: number) {
     return request(`/api/v1/course/${courseId}/hour/${id}/record`, "POST", {duration})
+  },
+  categoryCur(categoryId:number,companyId:number){
+    return request<Curriculum[]>(`/api/v1/category/${categoryId}/${companyId}`,"GET")
   }
 }

src/api/public.ts

@@ -21,9 +21,11 @@ export interface Courses {
   is_not_required: Curriculum[]
   /** 必修 */
   is_required: Curriculum[]
+  /** 总时长 */
+  total_course_duration: number
 }
 
-export type CoursesKey = keyof Courses
+export type CoursesKey = keyof Omit<Courses, 'total_course_duration'>
 
 export type Cur = Category & {
   courses: Courses

src/app.config.ts

@@ -30,9 +30,10 @@ export default defineAppConfig({
     {
       root: 'pages/business',
       pages: [
-        'course/course',
+        // 'course/course',
         'userInfo/userInfo',
-        'videoInfo/videoInfo'
+        'videoInfo/videoInfo',
+        'categoryCur/categoryCur'
       ]
     },
     {

src/components/video/video.tsx

@@ -13,7 +13,7 @@ const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
 
   function onTimeUpdate(event: BaseEventOrig<VideoProps.onTimeUpdateEventDetail>) {
     if (opt.preview) return;
-    if (user?.role_type !== 0) return;
+    if (user?.role_type === 2) return;
     const time = event.detail.currentTime
     /** 前进回退 */
     if (currentTime + deviation < time) {
@@ -34,8 +34,7 @@ const HVideo: FC<HVideoOptions> = (opt: HVideoOptions) => {
   }
 
   function onEnded() {
-    console.log(user)
-    if (user?.role_type !== 0) return;
+    if (user?.role_type === 2) return;
     if (currentTime + 1 > opt.duration) {
       opt.onEnded()
     } else {

src/components/videoCover/videoCover.scss

@@ -32,10 +32,7 @@
 
     .title{
       width: 100%;
-      //word-break: break-word;
-      //white-space: pre-line;
       font-size: 28rpx;
-
       word-break: break-all;
       overflow: hidden;
       display: -webkit-box;

src/components/videoCover/videoCover.tsx

@@ -34,7 +34,7 @@ const VideoCover: FC<VideoCoverProps> = (opt: VideoCoverProps) => {
         <View className='box'>
           <View className='title'>{opt.title}</View>
           <View className='flex justify-between videoButton'>
-            <View>{opt?.time}</View>
+            {opt.time && <View>时长:{opt.time}</View>}
             <View>{opt?.schedule}</View>
           </View>
         </View>

src/pages/business/categoryCur/categoryCur.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '更多课程'
+})

src/pages/business/categoryCur/categoryCur.tsx

@@ -0,0 +1,50 @@
+import {View} from "@tarojs/components";
+import {Profile} from '@/store'
+import {FC, useEffect, useState} from "react";
+import {getCurrentInstance} from "@tarojs/runtime";
+import {curriculum} from "@/api";
+import VideoCover from "@/components/videoCover/videoCover";
+
+const Index: FC = () => {
+  const {company} = Profile.useContainer()
+  const {categoryId} = getCurrentInstance()?.router?.params as { categoryId: number }
+  const [data, setData] = useState<Curriculum[]>([])
+
+  async function getData() {
+    try {
+      const res = await curriculum.categoryCur(categoryId!, company?.id!)
+      setData(res)
+    } catch (e) {
+    }
+  }
+
+
+  useEffect(() => {
+    getData()
+  }, [])
+  return (
+    <>
+      <View className='flex flex-wrap px-1'>
+        {data.map(d => <VideoCover
+          thumb={d.thumb}
+          title={d.title}
+          id={d.id}
+          depId={d.id}
+        />)
+        }
+      </View>
+      <View className='text-center text-muted'>- 暂无更多 -</View>
+    </>
+  )
+}
+
+
+const CategoryCur = () => {
+  return (
+    <Profile.Provider>
+      <Index/>
+    </Profile.Provider>
+  )
+}
+
+export default CategoryCur

src/pages/business/course/course.config.ts

@@ -1,3 +0,0 @@
-export default definePageConfig({
-  navigationBarTitleText: '课程'
-})

src/pages/business/videoInfo/components/catalogue.tsx

@@ -5,13 +5,13 @@ import {Profile} from '@/store'
 import {CourseDepData} from "@/api";
 import Collapse from "@/components/collapse/collapse";
 import Hours from "@/pages/business/videoInfo/components/hours";
-import Taro from "@tarojs/taro";
 
 interface Props {
   data: CourseDepData | null
+  setPlayId: (id: number) => void
 }
 
-const Catalogue: FC<Props> = ({data}: Props) => {
+const Catalogue: FC<Props> = ({data, setPlayId}: Props) => {
   const {user} = Profile.useContainer()
   const [current, setCurrent] = useState(0)
   const [tabList, setTabList] = useState<TabList[]>([
@@ -42,22 +42,15 @@ const Catalogue: FC<Props> = ({data}: Props) => {
     return null
   }
 
-
   function complete(id: number): boolean {
     return !!data?.learn_hour_records?.[id]?.is_finished
   }
 
-
-  function jump(id) {
-    Taro.navigateTo({url: `/pages/business/course/course?courseId=${data?.course.id}&id=${id}`})
-  }
-
-
   return (
     <View className='catalogue'>
       <Tabs tabList={tabList} onChange={tabChange} current={current}/>
       <View className='py-2'>
-        {current === 0 && <View className='short_desc'>{data?.course.short_desc}</View>}
+        {current === 0 && <View className='short_desc'>{data?.course.short_desc || '无'}</View>}
         {current === 1 && <View>
           <View className='font-weight mb-2'>课程目录</View>
           {data?.chapters.length ? Object.values(data?.chapters || {}).map((d, index) => <View>
@@ -69,7 +62,7 @@ const Catalogue: FC<Props> = ({data}: Props) => {
                       title={hor.title}
                       duration={hor.duration}
                       complete={complete}
-                      click={jump}
+                      click={() => setPlayId(d.id)}
                     />
                   )}
                 </>
@@ -81,7 +74,7 @@ const Catalogue: FC<Props> = ({data}: Props) => {
                 title={hor.title}
                 duration={hor.duration}
                 complete={complete}
-                click={jump}
+                click={() => setPlayId(hor.id)}
               />
             )}
         </View>}

src/pages/business/videoInfo/components/course.tsx

@@ -1,25 +1,31 @@
 import {CustomWrapper, PageContainer, ScrollView} from "@tarojs/components";
-import {useEffect, useState} from "react";
+import {FC, useEffect, useState} from "react";
 import HVideo from "@/components/video/video";
-import {getCurrentInstance} from "@tarojs/runtime";
 import {curriculum, HourPlayData} from "@/api";
 import {Profile} from '@/store'
 import Taro from "@tarojs/taro";
 
-const Course = () => {
-  const {courseId, id, preview} = getCurrentInstance()?.router?.params as {
-    courseId: number,
-    id: number,
-    preview: string | null
-  }
+interface Props {
+  id: number,
+  courseId: number
+  preview?: boolean
+  curEnd: () => void
+}
+
+const Course: FC<Props> = ({id, courseId, preview, curEnd}: Props) => {
   const [breakpoint, setBreakpoint] = useState<any[]>([])
   const [show, setShow] = useState(false)
   const [data, setData] = useState<HourPlayData | null>(null)
 
   async function onEnded() {
     try {
-      await curriculum.curEnd(courseId, id, data?.duration || 0)
-      Taro.showModal({title: "学习完成"})
+      await curriculum.curEnd(courseId, id, data?.duration!)
+      Taro.showModal({
+        title: "学习完成",
+        success() {
+          curEnd()
+        }
+      })
     } catch (e) {
     }
   }
@@ -38,7 +44,7 @@ const Course = () => {
 
   useEffect(() => {
     getData()
-  }, [])
+  }, [id])
 
   return (
     <CustomWrapper>
@@ -52,7 +58,6 @@ const Course = () => {
           onBreakpoint={onBreakpoint}
         />}
 
-
         <view>
           <PageContainer
             show={show}

src/pages/business/videoInfo/components/hours.tsx

@@ -17,9 +17,9 @@ interface Props {
 const Hours: FC<Props> = (opt: Props) => {
   return (
     <>
-      <View className={'hor' + ` ${opt.complete(opt.id) ? 'complete' : null}`}
-            onClick={() => opt.click(opt.id)}
-      >
+      <View
+        className={'hor' + ` ${opt.complete(opt.id) ? 'complete' : null}`}
+        onClick={() => opt.click(opt.id)}>
         <Image src={opt.complete(opt.id) ? playOk : play} mode='aspectFit'/>
         <View>
           <View>{opt.index + 1}.{opt.title}</View>

src/pages/business/videoInfo/videoInfo.scss

@@ -1,4 +1,9 @@
 .content {
+
+  &-video{
+    height: 480rpx;
+  }
+
   .image {
     width: 100%;
     display: block;
@@ -41,7 +46,9 @@
     border-bottom: 1px solid #ddd;
 
     View {
+      width: 630rpx;
       margin-bottom: 20px;
+      word-wrap:break-word;
     }
   }
 }

src/pages/business/videoInfo/videoInfo.tsx

@@ -1,15 +1,16 @@
 import {Image, Text, View} from "@tarojs/components";
-import {FC, useState} from "react";
+import {FC, useEffect, useState} from "react";
 import {getCurrentInstance} from "@tarojs/runtime";
 import {CourseDepData, curriculum} from "@/api";
 import './videoInfo.scss'
-import Taro from "@tarojs/taro";
 import {Profile} from '@/store'
-import Catalogue from "@/pages/business/videoInfo/components/catalogue";
+import Catalogue from "./components/catalogue";
+import Course from "./components/course";
 
 const VideoInfo: FC = () => {
   const {id, depId} = getCurrentInstance()?.router?.params as { id: number, depId: number | null }
   const [data, setData] = useState<CourseDepData | null>(null)
+  const [playId, setPlayId] = useState<number | null>(null)
 
   async function getData() {
     const res = await curriculum.courseDep(id, depId)
@@ -18,13 +19,20 @@ const VideoInfo: FC = () => {
     }
   }
 
-  Taro.useDidShow(getData)
-
+  useEffect(() => {
+    getData()
+  }, [])
 
   return (
     <Profile.Provider>
       <View className='content'>
-        <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>
+        <View className='content-video'>
+          {
+            playId ?
+              <Course id={playId} courseId={id} curEnd={getData}/>
+              : <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>
+          }
+        </View>
 
         <View className='header'>
           <View className='flex justify-between text-muted'>
@@ -34,11 +42,11 @@ const VideoInfo: FC = () => {
           <View className='font-weight font-40 my-4'>{data?.course.title}</View>
           <View className='text-muted font-26'>
             {/*<Text className='mr-3'>时长：32:10</Text>*/}
-            <Text>学习进度{data?.learn_record?.finished_count || 0}/{data?.learn_record?.hour_count || Object.keys(data?.hours || {}).length}</Text>
+            <Text>学习进度{data?.learn_record?.finished_count || 0}/{data?.course.class_hour}</Text>
           </View>
         </View>
 
-        <Catalogue data={data}/>
+        <Catalogue data={data} setPlayId={(id) => setPlayId(id)}/>
       </View>
     </Profile.Provider>
   )

src/pages/index/components/videoList.tsx

@@ -1,9 +1,10 @@
 import {FC, useState} from "react";
-import Taro from "@tarojs/taro";
-import {View} from "@tarojs/components";
+import Taro, {useReachBottom} from "@tarojs/taro";
+import {Text, View} from "@tarojs/components";
 import {CoursesKey, Cur, publicApi} from "@/api/public";
 import VideoCover from "@/components/videoCover/videoCover";
 import styles from '../index.module.scss'
+import {formatMinute} from "@/utils/time";
 
 interface Props {
   categoryId: CoursesKey
@@ -11,36 +12,64 @@ interface Props {
 
 export const VideoList: FC<Props> = ({categoryId}: Props) => {
   const [data, setDta] = useState<Cur[] | null>(null)
+  const [index, setIndex] = useState(3)
 
   async function getData() {
-    const res = await publicApi.curs()
-    setDta(res)
-  }
+    try {
+      Taro.showLoading()
+      const res = await publicApi.curs()
+      const flatData = res.reduce((put, cur) => {
+        put.push(cur)
+        if (cur.resourceCategory?.length) {
+          put.push(...cur.resourceCategory.map(d => {
+            d.name = cur.name + '/' + d.name
+            return d
+          }))
+        }
+        return put
+      }, [] as Cur[])
 
+      setDta(flatData)
+    } catch (e) {
+    }
+    Taro.hideLoading()
+  }
 
-  Taro.useDidShow(() => {
-    getData()
-  })
 
   function rateOfLearning(id: number, class_hour: number): JSX.Element {
     console.log(id)
     return (<View>{`共${class_hour}节/已学${0}节`}</View>)
   }
 
+  function jumpCategoryCur(id: number) {
+    Taro.navigateTo({url: '/pages/business/categoryCur/categoryCur?categoryId=' + id})
+  }
+
+  useReachBottom(() => {
+    if (data && data?.length > index) {
+      setIndex(index + 1)
+    }
+  })
+
+  Taro.useDidShow(getData)
   return (
     <>
-      {data?.map(d => (
+      {data?.slice(0, index).map(d => (
         <>{
           d.courses?.[categoryId].length ? <View>
-            <View className='font-weight'>{d.name}</View>
+            <View className='flex justify-between align-center my-1' onClick={() => jumpCategoryCur(d.id)}>
+              <Text className='font-weight'>{d.name}</Text>
+              <Text className='font-20'>查看更多</Text>
+            </View>
             <View className={'py-2 flex justify-between flex-wrap ' + styles.videoListBox}>
-              {d.courses[categoryId].map(d => (
+              {d.courses[categoryId].map(c => (
                 <VideoCover
-                  thumb={d.thumb}
-                  title={d.title}
-                  id={d.id}
-                  depId={d.id}
-                  content={rateOfLearning(d.id, d.class_hour)}
+                  thumb={c.thumb}
+                  title={c.title}
+                  id={c.id}
+                  depId={c.id}
+                  time={formatMinute(d.courses.total_course_duration)}
+                  content={rateOfLearning(c.id, c.class_hour)}
                 />
               ))}
             </View>

src/pages/index/index.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
-  navigationStyle: 'custom'
+  navigationStyle: 'custom',
+  onReachBottomDistance: 30
 })

src/pages/index/index.module.scss

@@ -1,7 +1,10 @@
 .content {
   position: relative;
-  min-height: 100vh;
   padding: 0 20px;
+  min-height: 90vh;
+  box-sizing: border-box;
+  width: 750rpx;
+  overflow: hidden;
 
   &:after {
     min-height: 100vh;

src/pages/index/index.tsx

@@ -23,12 +23,6 @@ const Index: FC = () => {
     setCategoryId(data.tab?.value as CoursesKey)
   }
 
-  // Taro.showActionSheet({
-  //   alertText: '212',
-  //   itemColor:'red',
-  //   itemList:['删除']
-  // })
-
   return (
     <Profile.Provider>
       <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>

src/pages/manage/depAdmin/depAdmin.tsx

@@ -118,7 +118,7 @@ const DepAdmin: FC = () => {
 
   function managesSheet(item: Manage) {
     Taro.showActionSheet({
-      itemList: ['查看部门课程', '修改', '删除'],
+      itemList: ['查看部门课程', '修改', '详情', '删除'],
       success({tapIndex}) {
         switch (tapIndex) {
           case 0:
@@ -128,6 +128,9 @@ const DepAdmin: FC = () => {
             showPop(item)
             break
           case 2:
+            Taro.navigateTo({url: `/pages/manage/depAdmin/depAdmin?id=${item.id}&name=${item.name}`})
+            break
+          case 3:
             del(item.name, item.id)
             break
         }

src/pages/manage/studentAdmin/studentAdmin.tsx

@@ -114,10 +114,6 @@ const studentAdmin = () => {
                     <View style='width:60px' className='text-muted'>手机号</View>
                     <View>{d.phone_number}</View>
                   </View>
-                  <View className='flex mb-3'>
-                    <View style='width:60px' className='text-muted'>邮箱</View>
-                    <View>{d.email}</View>
-                  </View>
                 </View>
                 <Image src={d.avatar} mode='widthFix'/>
               </View>

src/pages/my/components/header/service.tsx

@@ -4,7 +4,7 @@ import Taro from "@tarojs/taro";
 import {Profile} from '@/store/profile'
 import styles from '../../my.module.scss'
 import dep from '@/static/img/dep.png'
-import cur from '@/static/img/cur.png'
+// import cur from '@/static/img/cur.png'
 import student from '@/static/img/student.png'
 import buy from '@/static/img/buy.png'
 
@@ -27,7 +27,7 @@ const Service = () => {
       oldList.unshift(...[
         {title: '部门管理', src: dep, router: '/pages/manage/depAdmin/depAdmin'},
         {title: '学员管理', src: student, router: '/pages/manage/studentAdmin/studentAdmin'},
-        {title: '课程管理', src: cur, router: ''},
+        // {title: '课程管理', src: cur, router: ''},
         {title: '课程购买', src: buy, router: '/pages/manage/curriculum/curriculum'},
       ])
       setList(oldList)