소스 검색

UI 调整,增加分享到会话

harry 1 년 전
부모
커밋
8fec9f3d93

+ 10 - 1
src/components/VideoSwiper/index.less

@@ -201,7 +201,7 @@
                 display: flex;
                 align-items: center;
                 font-size: 36px;
-                font-weight: 500;
+                font-weight: 600;
                 width: calc(100% - 120px);
 
                 .avatar {
@@ -225,12 +225,17 @@
 
                 text-align: center;
                 font-size: 38px;
+                font-weight: 500;
+
                 line-height: 80px;
                 color: #fff;
                 text-shadow: none;
                 margin-left: 0;
                 margin-right: auto;
             }
+            .redShareBtn::after {
+                border: none;
+            }
         }
 
 
@@ -275,6 +280,10 @@
 
             }
 
+            .friend::after {
+                border: none;
+            }
+
             .pyq {
                 display: flex;
                 flex-direction: column;

+ 12 - 1
src/components/VideoSwiper/index.tsx

@@ -9,6 +9,7 @@ import { DETAIL_PAGESOURCE, CATEGORY_PAGESOURCE, VIEW_AUTO_TYPE } from '@/const'
 import { videoViewReport, videoPlayReport, videoActionReport } from '@/logger'
 import { once, formatSecondsAsTime } from '@/utils'
 import { VideoInfo, PlayState } from '@/constants/commentTypes'
+import { shareTimeline } from '@/shareHelper'
 import './index.less'
 
 
@@ -412,14 +413,18 @@ function VideoIntroduce({ detail, showRedShareBtn, index}) {
 function VideoBar({ video }) {
     const [showTips, setShowTips] = useState(false)
 
+    const sessionMsg = shareTimeline({video})
+
     function clickOperationBar(e) {
         e.stopPropagation()
         setShowTips(!showTips)
     }
 
+
     function shareToPyq() {
         /// TODO: 
         console.log('share to pyq')
+        console.log(sessionMsg)
     }
 
     function shareToFriend() {
@@ -452,7 +457,13 @@ 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} 
+                sendMessageImg={sessionMsg.send_msg_img}
+                sendMessagePath={sessionMsg.send_msg_path}>
                 <Image src="http://weapppiccdn.yishihui.com/wxicon/common/icon_point_share_pyq.png" />
                 <View className='text'>朋友圈</View>
 

+ 8 - 1
src/components/VideoSwiper/index.wxss

@@ -177,7 +177,7 @@
   display: flex;
   align-items: center;
   font-size: 36px;
-  font-weight: 500;
+  font-weight: 600;
   width: calc(100% - 120px);
 }
 .video-swiper .video-swiper-item .video-introduce .video-user-info .avatar {
@@ -197,12 +197,16 @@
   border-radius: 8px;
   text-align: center;
   font-size: 38px;
+  font-weight: 500;
   line-height: 80px;
   color: #fff;
   text-shadow: none;
   margin-left: 0;
   margin-right: auto;
 }
+.video-swiper .video-swiper-item .video-introduce .redShareBtn::after {
+  border: none;
+}
 .video-swiper .video-swiper-item .video-bar {
   display: flex;
   flex-direction: column;
@@ -240,6 +244,9 @@
   line-height: 44px;
   font-weight: 400;
 }
+.video-swiper .video-swiper-item .video-bar .friend::after {
+  border: none;
+}
 .video-swiper .video-swiper-item .video-bar .pyq {
   display: flex;
   flex-direction: column;

+ 1 - 0
src/constants/commentTypes.ts

@@ -9,6 +9,7 @@ export type VideoInfo = {
     id: number;
     title: string;
     coverImgPath: string;
+    shareImageUrl: string;
     shareTitle: string;
     videoPath: string;
     recomTraceId: string;

+ 10 - 1
src/pages/category/index.tsx

@@ -1,4 +1,4 @@
-import Taro, { useLoad, useDidShow, useReady, useDidHide, usePullDownRefresh, useShareAppMessage, useRouter } from '@tarojs/taro'
+import Taro, { useLoad, useDidShow, useReady, useDidHide, usePullDownRefresh, useShareAppMessage, useRouter, useShareTimeline } from '@tarojs/taro'
 import { useMemo, useState } from 'react'
 import type CustomTabBar from '@/custom-tab-bar'
 import { View } from '@tarojs/components'
@@ -85,6 +85,15 @@ export default function Index() {
         })
     })
 
+    // useShareTimeline( () =>{
+    //     let video = videoList[activeIndex]
+    //     return {
+    //         title: video.title,
+    //         query: '',
+    //         imageUrl: video.coverImgPath
+    //     }
+    // })
+
     // const fecthVideoList = throttle(fecthVideoListV2)
     function fecthVideoListV2(cleanOldCardList = false) {
         if (refresherTriggered) {

+ 40 - 8
src/shareHelper/index.ts

@@ -4,6 +4,7 @@ import useHotLaunch from '@/hooks/useHotLaunch'
 import { RECOMMEND_PAGESOURCE, USER_SHARE_PAGESOURCE, CATEGORY_PAGESOURCE, DETAIL_PAGESOURCE, DETAIL_RECOMMEND } from '@/const'
 import { shareReport, weixinFriend, shareClickReport } from '@/logger'
 import { USER_SENCE } from '@/const/index'
+import { APP_ID, APP_TYPE, APP_VERSION_CODE, VERSION_CODE } from '@/config'
 
 export function sharePageAppMessage({ video, activeIndex, router, shareRes }) {
     useHotLaunch.valid = false
@@ -31,7 +32,6 @@ export function sharePageAppMessage({ video, activeIndex, router, shareRes }) {
         scene: launchOption.scene,
         shareButtonType: dataset?.buttonType || 0,
         prePageSource: '',
-        userSence: params.userSence
     })
 }
 
@@ -41,15 +41,12 @@ export function shareVideoToWechat(params) {
     const shareId = mid + '-' + S4() + new Date().getTime()
 
     // TODO: 处理 pagesource
-    let pageSource = video.head ? USER_SHARE_PAGESOURCE : RECOMMEND_PAGESOURCE
+    let pageSource = video.pageSource
 
-    if (params.userSence !== USER_SENCE.share)
-        pageSource = video.head ? DETAIL_PAGESOURCE : DETAIL_RECOMMEND
 
     const userInfo = Taro.$global.get('userInfo')
 
     const query = {
-        userSence: USER_SENCE.share,
         mid: mid,
         rootMid: params.rootMid || mid,
         shareId,
@@ -63,7 +60,6 @@ export function shareVideoToWechat(params) {
         rootShareId: params.rootShareId || shareId,
 
         shareDepth: +params.shareDepth + 1 || 0,
-        isRecommendShare: video.isRecommendShare,
         recommendSource: video.recommendSource,
         recommendLogVO: video.recommendLogVO || '{}',
         shareImageId: video.shareImgId,
@@ -97,10 +93,46 @@ function videoPlayParams(video) {
     }
 }
 
+export function shareTimeline({ video, messageActionType = 'videoShareH5', rootPageSource = null }) {
+    const userInfo = Taro.$global.get('userInfo') || {}
+    const systemInfo = Taro.$global.get('systemInfo') || {}
+    const mid = Taro.$global.get('mid')
+    let { flowPool = '', pageSource, id = 0, isRecommendShare = false } = video
+    let session_from = {
+        platform: systemInfo.system,
+        appType: APP_TYPE,
+        token: userInfo ? userInfo.accessToken : '',
+        versionCode: VERSION_CODE,
+        pageSource,
+        machineCode: mid,
+        rootPageSource: rootPageSource || pageSource,
+        videoId: id,
+        flowPool: flowPool.replace(/#/g, '_'),
+        messageActionType,
+        isRecommendShare,
+        h5ShareIconClickTimeType: '0',
+    }
+    let fomr = {
+        "h5ShareIconClickTimeType": "0", 
+        "kitPosition": "",
+        "kitType": "", 
+        "kitId": "", 
+        "entranceType": "weapp_shareH5Button", 
+        "xcxAbinfo": "eyJhYl90ZXN0MDAxIjp7ImciOiJhYjkiLCJpZCI6IjIyMywzNDEifSwiYWJfdGVzdDAwMiI6eyJnIjoiYWI5IiwiaWQiOiIzODYsNTA3LDU1NiJ9LCJhYl90ZXN0MDAzIjp7ImciOiJhYjgiLCJpZCI6IjQ5OSw1NzIifSwiYWJfdGVzdDAwNCI6eyJnIjoiYWI5IiwiaWQiOiIyMTEsMTI2In0sImFiX3Rlc3QwMDUiOnsiZyI6ImFiMTYiLCJpZCI6IiJ9LCJhYl90ZXN0MDA2Ijp7ImciOiJhYjE5IiwiaWQiOiIyNTMsMzEwLDMxNCwzMTEsMzIxLDM1OSwzNTYsMzcxLDMzMSw0MzQsNTExLDUxMiw1MTMsNTgyIn0sImFiX3Rlc3QwMDciOnsiZyI6ImFiMTAwIiwiaWQiOiIifX01" 
+    }
+
+    let obj = shareVideoToWechat({ video })
+    var msgPath = obj.path.replace(/%23/g, '_')
+    return {
+        session_from: JSON.stringify(session_from),
+        send_msg_title: video.shareTitle,
+        send_msg_img: 'https://weapppiccdn.yishihui.com/wxicon/wxOther/image/contact-share-h5-background-image.png',
+        send_msg_path: '/'.concat(msgPath)
+    }
+}
+
 // 分享回流上报
 export function returnedCrowdClickReport(params) {
-    if (params.userSence !== USER_SENCE.share)
-        return
 
     shareClickReport({
         shareId: params.shareId,

+ 2 - 1
src/utils/index.ts

@@ -222,7 +222,7 @@ export function filterCardProps(list, pageSource) {
     return list.map((item: RoughCardType) => {
         const {
             title, coverImg, user, id, videoPath,
-            recomTraceId, flowPool, shareTitle = ''
+            recomTraceId, flowPool, shareTitle = '', shareImgPath
         } = item || {}
         const { coverImgPath = '' } = coverImg || {}
         const { avatarUrl = '', nickName = '', uid = 0 } = user || {}
@@ -231,6 +231,7 @@ export function filterCardProps(list, pageSource) {
             id,
             title,
             coverImgPath,
+            shareImgPath,
             shareTitle,
             videoPath,
             recomTraceId,