文章浏览量加1

src/api/home.ts

@@ -42,46 +42,28 @@ export interface HomeData {
 }
 
 interface Course {
-  articles:any[]
+  articles: any[]
-  audit_mode:boolean
+  audit_mode: boolean
-  course:{ data: Curriculum[], total: number }
+  course: { data: Curriculum[], total: number }
 }
 
 export const HomeApi = {
-  advert(only_flag: string) {
-    return request<AdwareType[]>("/home/v1/advert/unique?only_flag=" + only_flag, "GET")
-  },
   course(page: number, page_size: number) {
     return request<Course>('/home/v1/course/course', "GET", {page, page_size})
   },
-  /** 健康管理 */
-  healthTop(count: number) {
-    return request<VideList[]>('/home/v1/health/top', "GET", {count})
-  },
   health(page: number, page_size: number) {
     return request<{ data: VideList[], total: number }>('/home/v1/health/index', "GET", {page, page_size})
   },
-  /** 增加播放量 */
-  healthSetPlay(id) {
-    return request(`/home/v1/health/set_play/${id}`, "PUT")
-  },
   /** 品牌 */
   brand(page: number, page_size: number) {
     return request<{ list: Brand[], total: number }>('/home/v1/brand/list', "GET", {page, page_size})
   },
-  /** 技能 */
-  skillTop(count: number) {
-    return request<VideList[]>('/home/v1/skill/top', "GET", {count})
-  },
   skillCategory() {
     return request<Category[]>('/home/v1/skill/category', "GET")
   },
   skillList(categoryId: number, page: number, page_size: number) {
     return request<{ data: VideList[], total: number }>('/home/v1/skill/index', "GET", {categoryId, page, page_size})
   },
-  skillSetPlay(id: number) {
-    return request(`/home/v1/skill/set_play/${id}`, "PUT")
-  },
   /** 疾病知识 */
   illness(page: number, page_size: number) {
     return request<{ list: Illness[], total: number }>('/home/v1/article/illness_list', "GET", {page, page_size})
@@ -91,5 +73,9 @@ export const HomeApi = {
   },
   home() {
     return request<HomeData>('/home/v1/home/home_page', "GET", {count: 3})
+  },
+  /** 文章播放量 + 1 */
+  articleViews(id: string | number) {
+    return request(`/home/v1/article/views/${id}`, "POST")
   }
 }

src/components/articlesBox/articlesBox.tsx

@@ -4,6 +4,7 @@ import Taro from "@tarojs/taro";
 import styles from './articlesBox.module.scss'
 import Img from "@/components/image/image";
 import {beforeTime} from "@/utils/time";
+import articlesEvent from "@/hooks/articlesEvent";
 
 interface Props {
   data: Articles
@@ -16,6 +17,19 @@ const ArticlesBox: FC<Props> = (props) => {
     setData(props.data)
   }, [props.data])
 
+  useEffect(() => {
+    articlesEvent.recordsOn(data.id, ({view}) => {
+      setData({
+        ...data,
+        page_view: view
+      })
+    })
+  }, [])
+
+  Taro.useUnload(() => {
+    articlesEvent.off(data.id)
+  })
+
   const toArticlePage = () => {
     Taro.navigateTo({
       url: `/pages/preview/brand/article/article?id=${data.id}`

src/hooks/articlesEvent.ts

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

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

@@ -1,7 +1,7 @@
 import {FC, useCallback, useEffect, useMemo, useState} from "react";
 import {Image, PageContainer, Text, View} from "@tarojs/components";
 import Taro, {useRouter} from "@tarojs/taro";
-import {ArticleRecord, brandApi} from "@/api";
+import {ArticleRecord, brandApi, HomeApi} from "@/api";
 import styles from "./article.module.scss";
 import down from "@/static/img/doubleDown.png";
 import {Profile} from "@/store";
@@ -13,6 +13,7 @@ import Img from "@/components/image/image";
 import Collect from "@/components/collect/collect";
 import catalogue from "@/static/img/catalogue-inactive.png";
 import Icon from "@/components/icon";
+import articlesEvent from "@/hooks/articlesEvent";
 
 const article: FC = () => {
   const {token} = Profile.useContainer()
@@ -25,6 +26,8 @@ const article: FC = () => {
   const {children, headings} = useMemo(() => parse(articleInfo?.content || ''), [articleInfo])
   const query = Taro.createSelectorQuery()
   const [maoId, setMaoId] = useState('')
+  const [timing, setTiming] = useState<NodeJS.Timeout | undefined>(undefined)
+
 
   useEffect(() => {
     setTimeout(() => {
@@ -69,9 +72,24 @@ const article: FC = () => {
     getData().then()
   })
 
+  Taro.useUnload(() => {
+    clearTimeout(timing)
+  })
+
   const getData = useCallback(async () => {
     try {
       const data = await brandApi.articleInfo(id)
+
+      setTiming(setTimeout(() => {
+        HomeApi.articleViews(id).then(() => {
+          setArticleInfo({
+            ...data,
+            page_view: data.page_view + 1
+          })
+          articlesEvent.recordsAdd({id: Number(id), view: (data?.page_view || 0) + 1})
+        })
+      }, 10000))
+
       Taro.setNavigationBarTitle({title: data.title})
       if (data.content.length < 200) {
         setUltra(false)
@@ -124,7 +142,7 @@ const article: FC = () => {
                       <View>{d?.name}</View>
                       <View className='flex mt-1 text-muted font-24'>
                         <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
-                        <View>阅读 {articleInfo.page_view || 1}</View>
+                        <View>阅读 {articleInfo.page_view || 0}</View>
                       </View>
                     </View>
                   </View>
@@ -152,7 +170,7 @@ const article: FC = () => {
                       <View>{d?.name}</View>
                       <View className='flex mt-1 text-muted font-24'>
                         <View className='mr-2'>{beforeTime(articleInfo?.created_at)} . </View>
-                        <View>阅读 {articleInfo.page_view || 1}</View>
+                        <View>阅读 {articleInfo.page_view || 0}</View>
                       </View>
                     </View>
                   </View>