Преглед изворни кода

ios bounce 背景色;调整 UI

harry пре 1 година
родитељ
комит
4137addf3b

+ 7 - 3
src/app.config.ts

@@ -5,10 +5,14 @@ export default defineAppConfig({
         'pages/home/home'
     ],
     window: {
-        backgroundTextStyle: 'dark',
-        navigationBarBackgroundColor: '#fff',
+        backgroundTextStyle: 'light',
+        navigationBarBackgroundColor: '#000',
         navigationBarTitleText: 'WeChat',
-        navigationBarTextStyle: 'black'
+        navigationBarTextStyle: 'white',
+        backgroundColorTop: 'black',
+        backgroundColorBottom:'#000',
+        backgroundColor: '#000',
+        backgroundImageColor:'#000'
     },
     "subpackages": [
         {

+ 27 - 27
src/components/VideoSwiper/index.less

@@ -33,13 +33,13 @@
 
             .progress-bg {
                 position: absolute;
-                bottom: 17px;
+                bottom: 0px;
                 width: 100%;
-                height: 40px;
+                height: 50px;
 
                 .progress-container {
                     position: absolute;
-                    bottom: 0;
+                    bottom: 27px;
                     width: 100%;
                     height: 6px;
                     border-radius: 3px;
@@ -64,7 +64,6 @@
                 justify-content: space-between;
                 align-items: center;
                 background-color: linear-gradient(to right, rgba(0, 0, 0, 0), 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
-                ;
 
                 .showInfo {
                     display: flex;
@@ -135,26 +134,26 @@
                 .container {
                     width: 100%;
                     display: flex;
-                    justify-content: space-around;
+                    justify-content: space-evenly;
                     color: #fff;
-                    margin-top: 150px;
+                    margin-top: 190px;
                     margin-bottom: 300px;
 
                     .item {
                         display: flex;
                         flex-direction: column;
-                        font-size: 30px;
+                        font-size: 36px;
                         align-items: center;
                         margin: 0;
                         padding: 0;
                         background: transparent;
                         color: #fff;
                         line-height: 50px;
-                        font-weight: 500;
+                        font-weight: 600;
 
                         Image {
-                            width: 120px;
-                            height: 120px;
+                            width: 160px;
+                            height: 160px;
                             margin-bottom: 20px;
                         }
                     }
@@ -168,7 +167,7 @@
                     position: relative;
                     width: 100%;
                     color: #fff;
-                    font-size: 26px;
+                    font-size: 32px;
                     display: flex;
                     align-items: center;
                     flex-direction: column;
@@ -190,7 +189,7 @@
             position: absolute;
             width: 100%;
             left: 0;
-            bottom: 40px;
+            bottom: 50px;
             color: #fff;
             font-size: 32px;
             padding: 10px 20px 0;
@@ -215,6 +214,7 @@
             .video-title {
                 margin: 20px 0;
                 width: calc(100% - 120px);
+                font-weight: 500;
             }
 
             .redShareBtn {
@@ -222,10 +222,11 @@
                 height: 80px;
                 background-color: #EE2C4F;
                 border-radius: 8px;
+                z-index: 99;
 
                 text-align: center;
                 font-size: 38px;
-                font-weight: 500;
+                font-weight: bolder;
 
                 line-height: 80px;
                 color: #fff;
@@ -258,16 +259,15 @@
                 flex-direction: column;
                 align-items: center;
                 height: 190px;
-                width: 70px;
+                width: 80px;
                 color: #fff;
-                font-size: 24px;
                 padding-bottom: 16px;
                 border-radius: 40px;
                 background-color: #04740399;
 
                 image {
-                    width: 70px;
-                    height: 70px;
+                    width: 80px;
+                    height: 80px;
                     margin-bottom: 10px;
                 }
 
@@ -275,7 +275,7 @@
                     width: 30px;
                     font-size: 30px;
                     line-height: 44px;
-                    font-weight: 500;
+                    font-weight: bold;
                 }
 
             }
@@ -289,23 +289,23 @@
                 flex-direction: column;
                 align-items: center;
                 background-color: transparent;
-                width: 70px;
-                height: 110px;
+                width: 80px;
+                height: 130px;
                 margin-top: 40px;
-                font-size: 26px;
+
 
                 image {
-                    width: 70px;
-                    height: 70px;
+                    width: 80px;
+                    height: 80px;
                     margin-bottom: 10px;
                 }
 
                 .text {
                     color: white;
-                    width: 90px;
-                    font-size: 22px;
-                    line-height: 30px;
-                    font-weight: 500;
+                    width: 100px;
+                    font-size: 26px;
+                    line-height: 32px;
+                    font-weight: bold;
                 }
             }
 

+ 79 - 34
src/components/VideoSwiper/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react'
-import Taro, { useLoad, useReady } from '@tarojs/taro'
+import Taro, { useDidShow, useLoad, useReady } from '@tarojs/taro'
 import {
     Swiper, SwiperItem, Video,
     View, Image, Button
 } from '@tarojs/components'
 import Route from '@/class/Route'
 import { DETAIL_PAGESOURCE, CATEGORY_PAGESOURCE, VIEW_AUTO_TYPE } from '@/const'
-import { videoViewReport, videoPlayReport, videoActionReport } from '@/logger'
+import { videoViewReport, videoPlayReport, videoActionReport, shareContactReport } from '@/logger'
 import { once, formatSecondsAsTime } from '@/utils'
 import { VideoInfo, PlayState } from '@/constants/commentTypes'
 import { shareTimeline } from '@/shareHelper'
@@ -18,6 +18,7 @@ let lastSwiperItemIndex = 0     // 上个 item 索引
 let currentListIndex = 0 // 大视频列表的索引
 let isUp = false
 let swiperRefreshing = false
+let virualListIndex = 0
 
 const videoViewedMap = new Map()
 
@@ -28,7 +29,7 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
     const [seekProgress, setSeekProgress] = useState(false)
     const [needPlayerResume, setNeedPlayerResume] = useState(false)
 
-    
+
     useReady(() => {
         activeIndex = 0
         videoViewedMap.clear()
@@ -37,6 +38,18 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
     useLoad(() => {
     })
 
+    useDidShow(() => {
+        console.log('show')
+
+        // 从分享页回首页要重置
+        activeIndex = 0
+        lastSwiperItemIndex = 0     // 上个 item 索引
+        currentListIndex = 0 // 大视频列表的索引
+        isUp = false
+        swiperRefreshing = false
+
+    })
+
     /**
      * @description: 进度回调。秒单位
      * @param {*} e
@@ -49,14 +62,13 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
     }
 
     function onTransition(e) {
-        console.log('swo:', e.detail)
-        let {dy = 0} = e.detail
+        let { dy = 0 } = e.detail
         if (!swiperRefreshing && dy < -50 && currentListIndex == 0 && currentIndex == 0) {
             swiperRefreshing = true
             setTimeout(() => {
                 onRefresh()
             }, 250);
-        }else if (swiperRefreshing && dy == 0) {
+        } else if (swiperRefreshing && dy == 0) {
             swiperRefreshing = false
 
         }
@@ -70,8 +82,13 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
 
         if (isUp) {
             currentListIndex += 1
+            virualListIndex = currentListIndex
+            if (currentListIndex >= list.length) {
+                currentListIndex -= 3
+            }
         } else {
             currentListIndex -= 1
+            virualListIndex = currentListIndex
             if (currentListIndex < 0) {
                 currentListIndex += 3
             }
@@ -85,40 +102,54 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
         const { current } = detail || {}
 
         if (activeIndex == current) {
+            onFinish(currentListIndex)
             return
         }
         activeIndex = current
 
-        if (isUp) {
-            if (!circular && currentListIndex > 0) {
-                setCircular(true)
-            }
-        } else {
-            if (circular && currentListIndex < 2) {
-                setCircular(false)
-            }
+        // if (isUp) {
+        //     if (circular && currentListIndex > list.length - 2) {
+        //         setCircular(false)
+        //     } else if (!circular && currentListIndex > 0) {
+        //         setCircular(true)
+        //     }
+        // } else {
+        // }
+        if (circular && (virualListIndex < 1 || virualListIndex > list.length - 2)) {
+            setCircular(false)
+        } else if (!circular && virualListIndex > 1) {
+            setCircular(true)
         }
 
         let changed = false
+        let oldList = videoList
         let nextSwiperItemIndex = (current + 1) % 3
         if (currentListIndex < list.length - 1) {
             let nextVideo = list[currentListIndex + 1]
-            let replaceVideo = videoList[nextSwiperItemIndex]
+            let replaceVideo = oldList[nextSwiperItemIndex]
             if (nextVideo && nextVideo.id != replaceVideo.id) {
-                videoList[nextSwiperItemIndex] = nextVideo
+                oldList[nextSwiperItemIndex] = nextVideo
                 changed = true
             }
         }
+
+        let newCurVideo = list[currentListIndex]
+        let oldCurVido = oldList[current]
+        if (newCurVideo.id != oldCurVido) {
+            oldList[current] = newCurVideo
+            changed = true
+        }
+
         let preSwiperItemIndex = (current - 1 + 3) % 3
         if (currentListIndex > 0) {
             let nextVideo = list[currentListIndex - 1]
-            let replaceVideo = videoList[preSwiperItemIndex]
+            let replaceVideo = oldList[preSwiperItemIndex]
             if (nextVideo && nextVideo.id != replaceVideo.id) {
-                videoList[preSwiperItemIndex] = nextVideo
+                oldList[preSwiperItemIndex] = nextVideo
                 changed = true
             }
         }
-        changed && setVideoList(videoList)
+        changed && setVideoList(oldList)
         onFinish(currentListIndex)
         setCurrentIndex(activeIndex)
     }
@@ -153,7 +184,7 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList,
             className='video-swiper'
             vertical
             circular={circular}
-            duration={200}
+            duration={180}
             current={currentIndex}
             onChange={onSwiperChange}
             onTransition={onTransition}
@@ -196,7 +227,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     const logReportVideoPlaySuccessOnce = once(logReportVideoPlaySuccess)
     const logReportVideoRealPlayOnce = once(logReportVideoRealPlay)
     const logReportVideoPlayEndOnce = once(logReportVideoPlayEnd)
-
+    const route = new Route()
     useEffect(() => {
         logReportVideoView(video, current, index)
         if (current === index) {
@@ -222,10 +253,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     }, [current, needResumePlay])
 
     function playerPlay() {
-        videoContext.play()
-        setPlayerState(PlayState.playing)
 
-        setIsPlaying(true)
+        if ((route.path.indexOf('category') > -1 && video.pageSource.indexOf('category') > -1)
+            || route.path.indexOf('share') > -1 && video.pageSource.indexOf('share') > -1) {
+            videoContext.play()
+            setPlayerState(PlayState.playing)
+            setShowProgressIndicator(false)
+            setIsPlaying(true)
+
+        }
     }
 
     function playerPause() {
@@ -240,7 +276,6 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     }
 
     function onSeekCom(e) {
-        console.log(e)
     }
 
     function didTimeUpdate(evt) {
@@ -271,7 +306,9 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     }
 
     function didPaused() {
-        console.log('didPaused', index)
+    }
+    function didPlayed() {
+        setShowProgressIndicator(false)
     }
     function onEnded() {
         setPlayerState(PlayState.stoped)
@@ -300,7 +337,6 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     }
 
     function onTouchStart(e) {
-        console.log('hhz- start ', e)
         let { clientX = 0 } = (e.changedTouches || [])[0]
         setStartMoveX(clientX)
         onProgressMove(true)
@@ -310,6 +346,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     }
 
     function onTouchMove(e) {
+
         let { clientX = 0 } = (e.changedTouches || [])[0]
         let rate = coculationRate(clientX - startMoveX)
 
@@ -318,14 +355,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
 
     function onTouchEnd(e) {
         let { clientX = 0 } = (e.changedTouches || [])[0]
+        console.log('hhz- onTouchEnd ')
 
         onProgressMove(false)
-        setShowProgressIndicator(false)
 
         let rate = coculationRate(clientX - startMoveX)
         let t = Math.min(Math.max(0, playTimeWhenMove + videoDuraing * rate), videoDuraing)
         videoContext.seek(t)
 
+        playerPlay()
     }
 
     function changeIndicator(rate) {
@@ -357,13 +395,15 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
                 poster={video.videoCoverSnapshotPath}
                 onTimeUpdate={didTimeUpdate}
                 onEnded={onEnded}
+                onPlay={didPlayed}
                 onPause={didPaused}
                 onLoadedMetaData={didLoadedMeta}
                 onSeekComplete={onSeekCom}
                 onTap={onTapVideo}
+
             />
             {(playerState == PlayState.pause) && <View className='playBtn' onClick={onTapVideo}>
-                <Image src='http://weapppiccdn.yishihui.com/wxicon/common/icon_play_btn_dark2.png'/>
+                <Image src='http://weapppiccdn.yishihui.com/wxicon/common/new_player_play_btn.png' />
             </View>}
             <View className='progress-bg'
                 onTouchStart={onTouchStart}
@@ -397,7 +437,7 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
     )
 }
 
-function VideoIntroduce({ detail, showRedShareBtn}) {
+function VideoIntroduce({ detail, showRedShareBtn }) {
     return (
         <View className='video-introduce'>
             <View className='video-user-info'>
@@ -415,7 +455,7 @@ function VideoIntroduce({ detail, showRedShareBtn}) {
 function VideoBar({ video }) {
     const [showTips, setShowTips] = useState(false)
 
-    const sessionMsg = shareTimeline({video})
+    const sessionMsg = shareTimeline({ video })
 
     function clickOperationBar(e) {
         e.stopPropagation()
@@ -427,6 +467,11 @@ function VideoBar({ video }) {
         /// TODO: 
         console.log('share to pyq')
         console.log(sessionMsg)
+        let par = Taro.$global.get('sharePageParams') || {}
+        shareContactReport({
+            shareDepth: (par.shareDepth || 0) + 1,
+            
+        })
     }
 
     function shareToFriend() {
@@ -459,11 +504,11 @@ function VideoBar({ video }) {
                 <Image src="http://weapppiccdn.yishihui.com/wxicon/common/icon_point_share_wechat.png" />
                 <View className='text'>分享</View>
             </Button>
-            <Button className='pyq' onClick={shareToPyq} 
-                openType='contact' 
+            <Button className='pyq' onClick={shareToPyq}
+                openType='contact'
                 sessionFrom={sessionMsg.session_from}
                 show-message-card={true}
-                sendMessageTitle={sessionMsg.send_msg_title} 
+                sendMessageTitle={sessionMsg.send_msg_title}
                 sendMessageImg={sessionMsg.send_msg_img}
                 sendMessagePath={sessionMsg.send_msg_path}>
                 <Image src="http://weapppiccdn.yishihui.com/wxicon/common/icon_point_share_pyq.png" />

+ 26 - 26
src/components/VideoSwiper/index.wxss

@@ -30,13 +30,13 @@
 }
 .video-swiper .video-swiper-item .custom-video .progress-bg {
   position: absolute;
-  bottom: 17px;
+  bottom: 0px;
   width: 100%;
-  height: 40px;
+  height: 50px;
 }
 .video-swiper .video-swiper-item .custom-video .progress-bg .progress-container {
   position: absolute;
-  bottom: 0;
+  bottom: 27px;
   width: 100%;
   height: 6px;
   border-radius: 3px;
@@ -120,26 +120,26 @@
 .video-swiper .video-swiper-item .custom-video .video-play-end-cover .container {
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-evenly;
   color: #fff;
-  margin-top: 150px;
+  margin-top: 190px;
   margin-bottom: 300px;
 }
 .video-swiper .video-swiper-item .custom-video .video-play-end-cover .container .item {
   display: flex;
   flex-direction: column;
-  font-size: 30px;
+  font-size: 36px;
   align-items: center;
   margin: 0;
   padding: 0;
   background: transparent;
   color: #fff;
   line-height: 50px;
-  font-weight: 500;
+  font-weight: 600;
 }
 .video-swiper .video-swiper-item .custom-video .video-play-end-cover .container .item Image {
-  width: 120px;
-  height: 120px;
+  width: 160px;
+  height: 160px;
   margin-bottom: 20px;
 }
 .video-swiper .video-swiper-item .custom-video .video-play-end-cover .container .right::after {
@@ -149,7 +149,7 @@
   position: relative;
   width: 100%;
   color: #fff;
-  font-size: 26px;
+  font-size: 32px;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -166,7 +166,7 @@
   position: absolute;
   width: 100%;
   left: 0;
-  bottom: 40px;
+  bottom: 50px;
   color: #fff;
   font-size: 32px;
   padding: 10px 20px 0;
@@ -189,15 +189,17 @@
 .video-swiper .video-swiper-item .video-introduce .video-title {
   margin: 20px 0;
   width: calc(100% - 120px);
+  font-weight: 500;
 }
 .video-swiper .video-swiper-item .video-introduce .redShareBtn {
   width: calc(90% - 120px);
   height: 80px;
   background-color: #EE2C4F;
   border-radius: 8px;
+  z-index: 99;
   text-align: center;
   font-size: 38px;
-  font-weight: 500;
+  font-weight: bolder;
   line-height: 80px;
   color: #fff;
   text-shadow: none;
@@ -226,23 +228,22 @@
   flex-direction: column;
   align-items: center;
   height: 190px;
-  width: 70px;
+  width: 80px;
   color: #fff;
-  font-size: 24px;
   padding-bottom: 16px;
   border-radius: 40px;
   background-color: #04740399;
 }
 .video-swiper .video-swiper-item .video-bar .friend image {
-  width: 70px;
-  height: 70px;
+  width: 80px;
+  height: 80px;
   margin-bottom: 10px;
 }
 .video-swiper .video-swiper-item .video-bar .friend .text {
   width: 30px;
   font-size: 30px;
   line-height: 44px;
-  font-weight: 500;
+  font-weight: bold;
 }
 .video-swiper .video-swiper-item .video-bar .friend::after {
   border: none;
@@ -252,22 +253,21 @@
   flex-direction: column;
   align-items: center;
   background-color: transparent;
-  width: 70px;
-  height: 110px;
+  width: 80px;
+  height: 130px;
   margin-top: 40px;
-  font-size: 26px;
 }
 .video-swiper .video-swiper-item .video-bar .pyq image {
-  width: 70px;
-  height: 70px;
+  width: 80px;
+  height: 80px;
   margin-bottom: 10px;
 }
 .video-swiper .video-swiper-item .video-bar .pyq .text {
   color: white;
-  width: 90px;
-  font-size: 22px;
-  line-height: 30px;
-  font-weight: 500;
+  width: 100px;
+  font-size: 26px;
+  line-height: 32px;
+  font-weight: bold;
 }
 .video-swiper .video-swiper-item .video-bar .pyq::after {
   border: none;

+ 3 - 2
src/custom-tab-bar/index.less

@@ -29,8 +29,9 @@
     font-weight: 500;
 
     .line {
-        width: 60px;
+        width: 50px;
         height: 8px;
+        border-radius: 4px;
         margin-top: 20px;
         background-color: white;
     }
@@ -42,5 +43,5 @@
 }
 
 .tab-bar-item cover-view {
-    font-size: 20px;
+    font-size: 24px;
 }

+ 1 - 1
src/custom-tab-bar/index.tsx

@@ -10,7 +10,7 @@ export default class Index extends Component {
         color: '#999999',
         selectedColor: '#ffffff',
         backgroundColor: '#222',
-        fontSize: 16,
+        fontSize: 20,
         list: [
             {
                 pagePath: '/pages/category/index',

+ 3 - 2
src/custom-tab-bar/index.wxss

@@ -27,8 +27,9 @@
   font-weight: 500;
 }
 .tab-bar-item .line {
-  width: 60px;
+  width: 50px;
   height: 8px;
+  border-radius: 4px;
   margin-top: 20px;
   background-color: white;
 }
@@ -37,5 +38,5 @@
   height: 54px;
 }
 .tab-bar-item cover-view {
-  font-size: 20px;
+  font-size: 24px;
 }

+ 2 - 0
src/http/api/index.ts

@@ -56,4 +56,6 @@ export const weixinFriendUrl = `${env(BASE_DOMAIN)}/longvideoapi/video/shared/we
 
 export const shareClickUrl = `${env(BASE_DOMAIN)}/longvideoapi/user/share/click`
 
+export const shareContactClickUrl = `${env(BASE_DOMAIN)}/longvideoapi/video/shared/h5`
+
 export const uploadLogFromFrontendUrl = `${env(INVITE_API_DOMAIN)}/log-center/statistics/uploadLogFromFrontend`

+ 6 - 1
src/logger/index.ts

@@ -1,7 +1,7 @@
 import {
     videoActionPreReportUrl, videoViewUrl, playedUrl,
     videoActionReportUrl, shareReportUrl, weixinFriendUrl,
-    shareClickUrl
+    shareClickUrl, shareContactClickUrl
 } from '@/http/api'
 import http from '@/http/index'
 
@@ -38,4 +38,9 @@ export function weixinFriend(params) {
 // 回流 click
 export function shareClickReport(params) {
     return http.post(shareClickUrl, params)
+}
+
+// 分享消息会话
+export function shareContactReport(params) {
+    return http.post(shareContactClickUrl, params)
 }

+ 45 - 36
src/pages/category/index.tsx

@@ -17,6 +17,8 @@ import './index.less'
 
 let pageNo = 1
 let activeIndex = 0
+let swiperRefreshing = false
+let tmpList : VideoInfo[] = []
 
 export default function Index() {
     const page = useMemo(() => Taro.getCurrentInstance().page, []);
@@ -30,8 +32,10 @@ export default function Index() {
     const [flushList, setFlushList] = useState(false)
     const [botHeight, setBotHeight] = useState(0)
     const [showNoView, setShowNoView] = useState(false)
-
+    let { screenHeight = 0 } = Taro.$global.get('systemInfo')
     useLoad(() => {
+        setBotHeight(pageHeight())
+
         const { redirect } = params
         let dur = 0
         if (redirect) {
@@ -45,8 +49,6 @@ export default function Index() {
             fecthVideoListV2()
         }, dur);
 
-        setBotHeight(pageHeight())
-
     })
 
     useDidShow(() => {
@@ -68,12 +70,6 @@ export default function Index() {
 
     usePullDownRefresh(() => {
         console.log('usePullDownRefresh', activeIndex)
-
-        if (activeIndex ==0 ) {
-            fecthVideoListV2(true)
-        }
-
-
     })
 
     useShareAppMessage((shareRes) => {
@@ -94,7 +90,6 @@ export default function Index() {
     //     }
     // })
 
-    // const fecthVideoList = throttle(fecthVideoListV2)
     function fecthVideoListV2(cleanOldCardList = false) {
         if (refresherTriggered) {
             return 
@@ -113,24 +108,21 @@ export default function Index() {
             const { code, data } = res
             if (code != 0)
                 return
+            pageNo++
 
             let oldCardList = videoList
 
             if (cleanOldCardList) {
                 oldCardList = []
-            }
-
-            pageNo++
-
-            setVideoList([
-                ...oldCardList,
-                ...filterCardProps(data, CATEGORY_PAGESOURCE)
-            ])
-            if (cleanOldCardList) {
-                setFlushList(true)
-                setTimeout(() => {
-                    setFlushList(false)
-                }, 300);
+                tmpList = [
+                    ...oldCardList,
+                    ...filterCardProps(data, CATEGORY_PAGESOURCE)
+                ]
+            }else{
+                setVideoList([
+                    ...oldCardList,
+                    ...filterCardProps(data, CATEGORY_PAGESOURCE)
+                ])
             }
 
             setTimeout(() => {
@@ -147,33 +139,50 @@ export default function Index() {
         })
     }
 
+    function updateList() {
+        setVideoList(tmpList)
+                 
+        // 下拉刷新要更新当前视频
+        setFlushList(true)
+        setTimeout(() => {
+            setFlushList(false)
+        }, 200);
+    }
+
     function onSwiperRefresh() {
         showNoView && setShowNoView(false)
 
-        if (activeIndex ==0 ) {
+        if (activeIndex == 0 && !refresherTriggered && !swiperRefreshing ) {
+            swiperRefreshing = true
             fecthVideoListV2(true)
         }
-        // fecthVideoListV2()
-
     }
 
     function onAnimationFinish(current) {
         activeIndex = current
-        if (current >= videoList.length - 4) {
+        if (current > videoList.length - 4) {
             fecthVideoListV2()
+        }else if (swiperRefreshing) {
+            updateList()
+            setTimeout(() => {
+                swiperRefreshing = false
+            }, 800);
         }
     }
 
     return (
-        <View className='category-page' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
-            {showNoView && <View className='noData' onClick={onSwiperRefresh}>请刷新重试</View>}
-            <VideoSwiper
-                list={videoList}
-                flushList={flushList}
-                needResumePlay={needResumePlay}
-                onFinish={onAnimationFinish}
-                onRefresh={onSwiperRefresh}
-            />
+        <View style={{width: '100%;', height:`${screenHeight}px;`, backgroundColor:'#000;'}}>
+            <View className='category-page' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
+                {showNoView && <View className='noData' onClick={onSwiperRefresh}>请刷新重试</View>}
+                <VideoSwiper
+                    list={videoList}
+                    flushList={flushList}
+                    needResumePlay={needResumePlay}
+                    onFinish={onAnimationFinish}
+                    onRefresh={onSwiperRefresh}
+                />
+
+            </View>
 
         </View>
     )

+ 24 - 17
src/pages/share/share.tsx

@@ -18,11 +18,13 @@ export default function Share() {
 
     const router = useRouter()
     const { params } = router || {}
+    let { screenHeight = 0 } = Taro.$global.get('systemInfo')
 
     const [videoList, setVideoList] = useState<VideoInfo[]>([{
         id: +params.id!,
         title: decodeURIComponent(params.title || ''),
         coverImgPath: decodeURIComponent(params.shareImgPath || ''),
+        shareImageUrl: decodeURIComponent(params.shareImageUrl || ''),
         shareTitle: decodeURIComponent(params.title || ''),
         videoPath: decodeURIComponent(params.videoPath || ''),
         recomTraceId: '',
@@ -47,9 +49,10 @@ export default function Share() {
         getVideoDetail()
         setTimeout(() => {
             getRecommendList()
-        }, 300);
+        }, 1300);
 
         returnedCrowdClickReport(params)
+        Taro.$global.set('sharePageParams', params)
     })
 
     useReady(() => {
@@ -75,7 +78,6 @@ export default function Share() {
 
     function getVideoDetail() {
         let { id } = params
-        console.log('share detail: ', Date.now())
 
         Taro.$http.post(videoDetail, {
             videoId: id,
@@ -96,7 +98,10 @@ export default function Share() {
             }
 
             let videos = filterCardProps([data], USER_SHARE_PAGESOURCE)
-            setVideoList(videos)
+            videoList[0] = videos[0]
+            setVideoList(videoList)
+            console.log('share detail: ', videoList)
+
         })
     }
 
@@ -111,7 +116,7 @@ export default function Share() {
                 if (code != 0) {
                     return
                 }
-                const recomList : VideoInfo[] = filterCardProps(data, RECOMMEND_PAGESOURCE)
+                const recomList: VideoInfo[] = filterCardProps(data, RECOMMEND_PAGESOURCE)
                 setVideoList([
                     ...videoList,
                     ...recomList
@@ -131,22 +136,24 @@ export default function Share() {
     }
 
     function onRefresh() {
-        
+
     }
 
     return (
-        <View className='share-page'>
-            <View className='backBtn' onClick={backBtnAction} style={{top: `${pxToRpx(backBtnTop)}px;`}}>
-                <Image src='https://weapppiccdn.yishihui.com/wxicon/common/share_backbtn.png' />
-            </View>
-            <View className='swiper-bg' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
-                <VideoSwiper
-                    list={videoList}
-                    onFinish={onAnimationFinish}
-                    needResumePlay={needResumePlay}
-                    flushList={flushList} 
-                    onRefresh={onRefresh}/>
-
+        <View style={{ width: '100%;', height: `${screenHeight}px;`, backgroundColor: '#000;' }}>
+            <View className='share-page'>
+                <View className='backBtn' onClick={backBtnAction} style={{ top: `${pxToRpx(backBtnTop)}px;` }}>
+                    <Image src='https://weapppiccdn.yishihui.com/wxicon/common/share_backbtn.png' />
+                </View>
+                <View className='swiper-bg' style={{ height: 'calc(100% - ' + `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
+                    <VideoSwiper
+                        list={videoList}
+                        onFinish={onAnimationFinish}
+                        needResumePlay={needResumePlay}
+                        flushList={flushList}
+                        onRefresh={onRefresh} />
+
+                </View>
             </View>
         </View>
     )

+ 4 - 4
src/shareHelper/index.ts

@@ -35,7 +35,7 @@ export function sharePageAppMessage({ video, activeIndex, router, shareRes }) {
     })
 }
 
-export function shareVideoToWechat(params) {
+export function shareVideoToWechat(params, isContact = false) {
     const { video } = params
     const mid = Taro.$global.get('mid')
     const shareId = mid + '-' + S4() + new Date().getTime()
@@ -70,8 +70,8 @@ export function shareVideoToWechat(params) {
 
     const detailPath = `/pages/share/share?${stringify(query)}`
 
-    shareReport(query)
-    weixinFriend(query)
+    !isContact && shareReport(query)
+    !isContact && weixinFriend(query)
 
     return {
         title: video.title || '好友分享给你一个视频,点击查看~',
@@ -121,7 +121,7 @@ export function shareTimeline({ video, messageActionType = 'videoShareH5', rootP
         "xcxAbinfo": "eyJhYl90ZXN0MDAxIjp7ImciOiJhYjkiLCJpZCI6IjIyMywzNDEifSwiYWJfdGVzdDAwMiI6eyJnIjoiYWI5IiwiaWQiOiIzODYsNTA3LDU1NiJ9LCJhYl90ZXN0MDAzIjp7ImciOiJhYjgiLCJpZCI6IjQ5OSw1NzIifSwiYWJfdGVzdDAwNCI6eyJnIjoiYWI5IiwiaWQiOiIyMTEsMTI2In0sImFiX3Rlc3QwMDUiOnsiZyI6ImFiMTYiLCJpZCI6IiJ9LCJhYl90ZXN0MDA2Ijp7ImciOiJhYjE5IiwiaWQiOiIyNTMsMzEwLDMxNCwzMTEsMzIxLDM1OSwzNTYsMzcxLDMzMSw0MzQsNTExLDUxMiw1MTMsNTgyIn0sImFiX3Rlc3QwMDciOnsiZyI6ImFiMTAwIiwiaWQiOiIifX01" 
     }
 
-    let obj = shareVideoToWechat({ video })
+    let obj = shareVideoToWechat({ video }, true)
     var msgPath = obj.path.replace(/%23/g, '_')
     return {
         session_from: JSON.stringify(session_from),