视频播放量

.env

@@ -1,5 +1,5 @@
-TARO_APP_API=https://yjx.dev.yaojiankang.top
-#TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://yjx.dev.yaojiankang.top
+TARO_APP_API=https://mooc.yaojiankang.top
 #TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true

src/api/home.ts

@@ -77,5 +77,8 @@ export const HomeApi = {
   /** 文章播放量 + 1 */
   articleViews(id: string | number) {
     return request(`/home/v1/article/views/${id}`, "POST")
+  },
+  voideView(id: number | string) {
+    return request(`/home/v1/health/set_play/${id}`, "PUT")
   }
 }

src/components/videoList/videoList.tsx

@@ -5,6 +5,7 @@ import Img from "@/components/image/image";
 import play from "@/static/img/play-back.png";
 import {formatDate} from "@/utils/time";
 import Taro from "@tarojs/taro";
+import videoEvent from "@/hooks/videoEvent";
 
 interface Props {
   data: VideList
@@ -18,6 +19,19 @@ const VideoList: FC<Props> = (props) => {
     setData(props.data)
   }, [props.data])
 
+  useEffect(() => {
+    videoEvent.videoOn(data.id, ({view}) => {
+      setData({
+        ...data,
+        video_view: view
+      })
+    })
+  }, [])
+
+  Taro.useUnload(() => {
+    videoEvent.off(data.id)
+  })
+
   function jump() {
     Taro.preload(data)
     Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${data.id}`})

src/hooks/articlesEvent.ts

@@ -1,6 +1,6 @@
 import Taro from "@tarojs/taro";
 
-const KEY = 'VIDEO_EVENTS'
+const KEY = 'ARTICLES_EVENTS'
 
 interface Data {
   id: number

src/hooks/videoEvent.ts

@@ -0,0 +1,28 @@
+import Taro from "@tarojs/taro";
+
+const KEY = 'VIDEO_EVENTS'
+
+interface Data {
+  id: number
+  view: number
+}
+
+function videoAdd(data: Data) {
+  Taro.eventCenter.trigger(KEY + data.id, data)
+}
+
+function videoOn(id: number, fn: (data: Data) => void) {
+  Taro.eventCenter.on(KEY + id, fn)
+}
+
+function off(id: number) {
+  Taro.eventCenter.off(KEY + id)
+}
+
+const VideoEvent = {
+  videoAdd,
+  videoOn,
+  off
+}
+
+export default VideoEvent

src/pages/preview/brand/article/article.tsx

@@ -88,7 +88,7 @@ const article: FC = () => {
           })
           articlesEvent.recordsAdd({id: Number(id), view: (data?.page_view || 0) + 1})
         })
-      }, 10000))
+      }, 3000))
 
       Taro.setNavigationBarTitle({title: data.title})
       if (data.content.length < 200) {

src/pages/preview/videoFull/videoFull.tsx

@@ -2,9 +2,10 @@ import {Video, View} from "@tarojs/components";
 import {FC, useState} from "react";
 import Taro from "@tarojs/taro";
 import styles from './videoFull.module.scss'
-import {brandApi} from "@/api";
+import {brandApi, HomeApi} from "@/api";
 import Collect from "@/components/collect/collect";
 import Spin from "@/components/spinner";
+import VideoEvent from "@/hooks/videoEvent";
 
 interface Params {
   id: string
@@ -16,6 +17,8 @@ const VideoFull: FC = () => {
   const [palying, setpalying] = useState(false)
   const [data, setData] = useState<VideList | null>(null)
   const [enable, setEnable] = useState<boolean>(!Taro.getCurrentInstance().preloadData)
+  const [timing, setTiming] = useState<NodeJS.Timeout | undefined>(undefined)
+
 
   Taro.useLoad(() => {
     const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList
@@ -33,6 +36,15 @@ const VideoFull: FC = () => {
           }
         })
       }
+      setTiming(setTimeout(() => {
+        HomeApi.voideView(Number(id)).then(() => {
+          setData({
+            ...res,
+            video_view: res.video_view + 1
+          })
+          VideoEvent.videoAdd({id: Number(id), view: res.video_view + 1})
+        })
+      }, 3000))
       setData(res)
     }).catch(() => {
       if (!preloadData) {
@@ -50,6 +62,10 @@ const VideoFull: FC = () => {
     })
   })
 
+  Taro.useUnload(() => {
+    clearTimeout(timing)
+  })
+
   function click() {
     if (palying) {
       video.pause()
@@ -96,7 +112,8 @@ const VideoFull: FC = () => {
               <View className='font-36 font-weight flex-1 pr-3 text-row1'>{data.title}</View>
               <Collect owner_id={Number(id)} owner_type={2} styles={{color: '#fff'}} select={data.collects}/>
             </View>
-            <View className='font-32 mt-1 text-ellipsis-2'>{data.introduction}</View>
+            <View className='font-32'>播放{data.video_view}</View>
+            <View className='font-32 mt-1 text-ellipsis-1'>{data.introduction}</View>
           </View>
         </> : <Spin enable={enable} overlay/>
       }