1.修改弹窗居中动画

2.修改收藏多次触发

.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/collect/collect.tsx

@@ -18,6 +18,17 @@ interface Props {
   onUpdate?: (v: boolean) => void
 }
 
+const versions = new Map()
+
+const collect = async (scope: string, params: Create, setSelect: (v: boolean) => void, value: boolean) => {
+  const localVersion = (versions.get(scope)  || 0) + 1
+  versions.set(scope, localVersion)
+  await userApi.create(params)
+  if (localVersion === versions.get(scope)) {
+    setSelect(value)
+  }
+}
+
 /** 收藏 */
 const Collect: FC<Props> = (props) => {
   const {token} = Profile.useContainer()
@@ -33,12 +44,16 @@ const Collect: FC<Props> = (props) => {
       Taro.navigateTo({url: '/pages/login/login'})
       return
     }
-    if (loading) return;
     props.onClick?.()
-    await userApi.create({owner_id: props.owner_id, owner_type: props.owner_type})
     setSelect(!select)
     setLoading(true)
-    props.onUpdate?.(!select)
+    collect(`${props.owner_id}#${props.owner_type}`, {
+      owner_id: props.owner_id,
+      owner_type: props.owner_type,
+    }, (v) => {
+      setSelect(v)
+      props.onUpdate?.(v)
+    }, !select)
     setTimeout(() => {
       setLoading(false)
     }, 300)

src/components/custom-page-container/custom-page-container.module.scss

@@ -84,11 +84,11 @@
 
 @keyframes childrenCenter {
   from {
-    transform: scale(0);
+    transform: scale(0) translateY(calc(-50% - 100px));
     padding: 0;
   }
   to {
-    transform: scale(1);
+    transform: scale(1) translateY(calc(-50% - 100px));
     padding: 0 30px;
   }
 }

src/components/custom-page-container/custom-page-container.tsx

@@ -49,7 +49,9 @@ export const PageContainerInner: FC<PageContainerProps> = (props) => {
       case 'center':
         style.width = '90%'
         style.borderRadius = '10px'
-        style.padding = '0'
+        style.padding = '0 !important'
+        style.top = '50%'
+        // style.transform = 'translateY(-100px) !important'
         break
     }
 
@@ -89,14 +91,14 @@ export const PageContainerInner: FC<PageContainerProps> = (props) => {
 
 const CustomPageContainer: FC<PageContainerProps> = (props) => {
   if (props.position === 'center') {
-    return <PageContainerInner {...props} />
+    return <PageContainerInner {...props} onAfterLeave={props.onClickOverlay}/>
   }
   if (process.env.TARO_ENV !== 'h5') {
-    return (<PageContainer {...props} round>
+    return (<PageContainer {...props} round onAfterLeave={props.onClickOverlay}>
       <View className={styles.content} style={{position: 'relative'}}>{props.children}</View>
     </PageContainer>)
   }
-  return (<PageContainerInner {...props} />);
+  return (<PageContainerInner {...props} onAfterLeave={props.onClickOverlay}/>);
 }
 
 export default CustomPageContainer

src/components/textCollapse/collapse.module.scss

@@ -1,4 +1,4 @@
-.expansion{
+.expansion {
   display: inline-block;
   padding: 0 10rpx;
   color: #00d6ac;

src/components/textCollapse/collapse.tsx

@@ -8,44 +8,43 @@ interface Props {
   text: string
 }
 
-const LineEllipsis:FC<Props> = ({text}:Props) => {
+const LineEllipsis: FC<Props> = ({text}: Props) => {
   const [disabled, setDisabled] = useState(false)
   const [isExpansioned, setIsExpansioned] = useState(false)
   const [overflow, setOverflow] = useState(false)
 
-  useEffect(()=>{
+  useEffect(() => {
     init()
-  },[text])
+  }, [text])
 
-  function init () {
+  function init() {
     Taro.nextTick(() => {
       const query = Taro.createSelectorQuery()
       query.select('#Text').boundingClientRect()
       query.exec((res) => {
-        console.log({res})
         const height = res[0].height
-        if(height <= 30) {
+        if (height <= 105) {
           setDisabled(true)
-        }else{
+        } else {
           setOverflow(true)
         }
       })
     })
   }
 
-  function handleExpend (e?: ITouchEvent) {
+  function handleExpend(e?: ITouchEvent) {
     e && e.stopPropagation();
     setOverflow(false)
     setIsExpansioned(true)
   }
 
-  function handleHide (e?: ITouchEvent) {
+  function handleHide(e?: ITouchEvent) {
     e && e.stopPropagation();
     setOverflow(true)
     setIsExpansioned(false)
-  };
+  }
 
-  function toggle () {
+  function toggle() {
     if (disabled) return;
     if (isExpansioned) {
       handleHide();
@@ -62,9 +61,9 @@ const LineEllipsis:FC<Props> = ({text}:Props) => {
         color: '#999795',
         fontSize: '25rpx',
         overflow: overflow ? 'hidden' : 'unset',
-          height: overflow ? '35rpx' : 'unset',
+        height: overflow ? '105rpx' : 'unset',
         lineHeight: overflow ? '35rpx' : '35rpx',
-          marginTop:'24rpx',
+        marginTop: '24rpx',
       }}>
       <View id='Text' onClick={toggle}>
         {text}
@@ -76,15 +75,14 @@ const LineEllipsis:FC<Props> = ({text}:Props) => {
       </View>
       {overflow && (
         <Text
+          style={{position: "absolute", top: "70rpx", right: "0", background: "#fff"}}
           className={styles.expansion}
-            onClick={handleExpend}
-            style={{position: 'absolute', top: '0', right: '0', background: '#fff'}}>
-            ...展开
+          onClick={handleExpend}>
+          . . . 展开
         </Text>
       )}
     </View>
-    );
-  // }
+  )
 }
 
 export default LineEllipsis;

src/components/videoList/videoList.tsx

@@ -2,9 +2,10 @@ import {FC, useEffect, useState} from "react";
 import styles from "@/pages/preview/health/health.module.scss";
 import {Image, Text, View} from "@tarojs/components";
 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";
+import palyWhite from '@/static/img/palyWhite.png'
+import starWhite from '@/static/img/starWhite.png'
 
 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}`})
@@ -26,13 +40,24 @@ const VideoList: FC<Props> = (props) => {
   return (
     <View key={data.id} className={styles.health} onClick={jump}>
       <Img src={data.url_path} mode='widthFix' errorType={props.errorType} height={346}/>
-      <Image src={play} className={styles.play} mode='aspectFit'/>
-      <View className='p-1'>
-        <View className='text-ellipsis-2  text-dark'>{data.title}</View>
-        <View className='text-ellipsis-2 mt-1 font-26 text-secondary'>{data.introduction}</View>
-        <View className='font-24 text-muted my-2  flex justify-between'>
-          <Text>{formatDate(new Date(data.publish_time), "YY-MM-dd")}</Text>
-          <Text>{(data.video_view || 0)}观看</Text>
+      <View className='p-2 relative'>
+        <View className='text-ellipsis-1 font-28 text-dark'>{data.title}</View>
+        <View className='text-ellipsis-2 mt-2 font-24 text-secondary'>{data.introduction}</View>
+
+        <View className={styles.info}>
+          <View className='flex'>
+            <View className='flex align-center mr-3'>
+              <Image src={palyWhite}/>
+              <Text>{(data.video_view || 0)}</Text>
+            </View>
+
+            <View className='flex align-center'>
+              <Image src={starWhite}/>
+              <Text>{(data.video_view || 0)}</Text>
+            </View>
+          </View>
+
+          <View>1:00</View>
         </View>
       </View>
     </View>)

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.module.scss

@@ -46,9 +46,9 @@ page{
   z-index: 99;
   position: fixed;
   bottom: 0;
-  width: 690rpx;
+  width: 650rpx;
   height: 100rpx;
-  padding: 0 30rpx env(safe-area-inset-bottom);
+  padding: 0 50rpx env(safe-area-inset-bottom);
   display: flex;
   justify-content: flex-end;
   align-items: center;

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/brand/info/info.tsx

@@ -1,6 +1,6 @@
 import {FC, useCallback, useEffect, useState} from "react";
 import {Swiper, SwiperItem, Text, Video, View} from "@tarojs/components";
-import { brandApi, BrandRecord} from "@/api";
+import {brandApi, BrandRecord} from "@/api";
 import styles from './info.module.scss'
 import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
 import LineEllipsis from "@/components/textCollapse/collapse";
@@ -112,7 +112,7 @@ const BrandInfo: FC = () => {
         <View className={styles['top']}>
           <View className='flex justify-between'>
             <Text className={`${styles['title']} flex-1`}>{brandInfo?.name}</Text>
-            <Collect owner_type={4} owner_id={id} select={brandInfo?.collect}/>
+            <Collect owner_type={4} owner_id={id} select={brandInfo?.collect} styles={{width: 'auto'}}/>
           </View>
           <LineEllipsis text={brandInfo?.graphic_introduction || '暂无简介'}/>
         </View>

src/pages/preview/health/health.module.scss

@@ -25,3 +25,27 @@
   right: 20rpx;
   background: transparent !important;
 }
+
+.info {
+  font-size: 24rpx;
+  padding: 0 20rpx;
+  height: 52rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(-100%);
+  box-sizing: border-box;
+  color: #fff;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
+
+  Image {
+    width: 24rpx;
+    height: 24rpx;
+    margin-right: 10rpx;
+    vertical-align: inherit;
+  }
+}

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/>
       }