Merge pull request #26 from HXTIA/feat-mp-clip-page

feat: 新增详情页、海报保存分享 & 修改storage类型推断

src/app.tsx

@@ -4,7 +4,6 @@ import Error from 'src/components/baseBuiltComp/Error'
 import { store } from './store'
 import './app.scss'
 import { Get, getStorage, preloadResource, requestUrlCreator } from './utils'
-import { IUserInfo } from './common-model'
 import { JSON_MAP } from './static/SVG/lottie-map'
 
 function App(props) {
@@ -15,7 +14,7 @@ function App(props) {
 
   useLaunch(async () => {
     /** 1. 校验登陆态 */
-    const token = getStorage<IUserInfo>('userInfo')?.token
+    const token = getStorage('userInfo')?.token
 
     /** 2. 校验获取用户信息 */
     /** TODO: 需和后端确定响应体 */

src/common-model.ts

@@ -35,7 +35,7 @@ export interface ICommonState {
 
 /** 默认store值 从storage中激活 */
 export const defaultValue: ICommonState = {
-  userInfo: getStorage<IUserInfo>('userInfo') || {},
+  userInfo: getStorage('userInfo') || {},
   system: {
     coolStartSuccess: false,
     hasAccountCompleted: false,

src/components/baseBuiltComp/FORBIDDEN/index.module.scss

@@ -5,8 +5,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 
   &__bgContainer {
     position: relative;
@@ -16,8 +16,8 @@
     height: 70%;
     align-items: center;
 
-
-    &__canvas {}
+    &__canvas {
+    }
 
     &__title {
       text-align: center;
@@ -27,5 +27,4 @@
       color: $base-element-color;
     }
   }
-
-}
+}

src/components/baseBuiltComp/FORBIDDEN/index.tsx

@@ -1,22 +1,31 @@
 import { Button, Canvas, CoverView, View } from '@tarojs/components'
-import { $ } from 'src/utils'
+import { $, URL, goTo } from 'src/utils'
 import useAnimation from 'src/hooks/useAnimation'
 import { JSON_MAP } from 'src/static/SVG/lottie-map'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import './index.module.scss'
 
-const Index = () => {
+const Index = (props) => {
   const { run, instance } = useAnimation({
     node: $('#ForbiddenContainer__bgContainer__canvas'),
     template: JSON_MAP['forbidden'],
     isAutoRun: false,
   })
+
+  const goToIndex = useCallback(() => {
+    goTo({
+      url: URL.Index,
+      methodType: 'reLaunch',
+      options: { authorize: false },
+    })
+  }, [])
+
   useEffect(() => {
     run()
     // setTimeout(() => {
     //   instance?.pause()
     // }, 4000);
-  }, [instance])
+  }, [instance, run])
   return (
     <View className='ForbiddenContainer'>
       <View className='ForbiddenContainer__bgContainer'>
@@ -28,7 +37,11 @@ const Index = () => {
         <CoverView className='ForbiddenContainer__bgContainer__title'>
           SRY 你没有权限访问该页面
         </CoverView>
-        <Button>返回主页（退一步海阔天空）</Button>
+        {props.children ? (
+          <props.children />
+        ) : (
+          <Button onClick={goToIndex}>返回主页（退一步海阔天空）</Button>
+        )}
       </View>
     </View>
   )

src/components/baseBuiltComp/HocWrap/index.tsx

@@ -21,14 +21,14 @@ export const Authorize = (Component) => {
 }
 
 /** @HOC 禁止页面要求必须是已授权的 */
-export const Forbidden = (Component) => {
+export const Forbidden = (Component, props?: any) => {
   return React.memo(() => {
     const state = useSelector((root: RootState) => root.common)
     if (!state.system.coolStartSuccess) {
       return <Loading isShow />
     } else {
       if (state.userInfo.isBindManage) return <Component />
-      return <ForbiddenComp />
+      return <ForbiddenComp>{props}</ForbiddenComp>
     }
   })
 }

src/components/baseBuiltComp/Loading/index.module.scss

@@ -14,10 +14,10 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  z-index: 1000;
 
   &__canvas {
     width: 100%;
     // height: 40%;
   }
-
-}
+}

src/config.ts

@@ -6,7 +6,6 @@ export const config: Config = {
     'pages/main/Index/index',
     'pages/main/Calendar/index',
     'pages/main/Manage/index',
-    'pages/main/Manage/Publish/index',
     'pages/main/My/index',
     // 'pages/Detail/index',
     // 'pages/Initial/index',

src/hooks/useRequest.ts

@@ -71,6 +71,8 @@ const useRequest = <T>(requestFn: TRequestFn, options?: TRequestOptions) => {
       /** 请求开始 */
       PerfTackerInstance.requestBegin()
       res = await fn<T>({ url, data: req, silent })
+      console.log(res.extraData?.count)
+
       /* __PURE__ */ console.log(' === 响应返回 === ', res)
 
       /** 校验是否成功 */

src/pages/Detail/components/Poster.tsx

@@ -0,0 +1,107 @@
+import React, { useRef, FC, useCallback, useState } from 'react'
+import { pxTransform } from '@tarojs/taro'
+import { PosterRender, PosterRenderRef } from '@poster-render/taro-react'
+import { View } from '@tarojs/components'
+import Button from '@taroify/core/button/button'
+import { TTaskItem, getStorage, showToast, trackJsError } from 'src/utils'
+import './poster.scss'
+
+const lists = (data: TTaskItem) => [
+  {
+    type: 'image',
+    x: 0,
+    y: 0,
+    width: 540,
+    height: 960,
+    backgroundColor: 'black',
+    src: 'https://hx.404fwf.cn/notifyBoard/img/backposter.png',
+    mode: 'contain',
+  },
+  {
+    type: 'text',
+    textAlign: 'center',
+    x: 270,
+    y: 340,
+    lineNum: 3,
+    width: 350,
+    height: 30,
+    text: data.title,
+    color: 'black',
+    fontSize: 30,
+    baseLine: 'top',
+    fontWeight: 'Bold',
+  },
+  {
+    type: 'text',
+    textAlign: 'left',
+    x: 80,
+    y: 400,
+    lineNum: 15,
+    width: 372,
+    height: 22,
+    text: data.desc,
+    color: 'black',
+    fontSize: 22,
+    lineHeight: 30,
+  },
+]
+
+type TPosterProps = {
+  posterData: TTaskItem
+}
+const Index: FC<TPosterProps> = ({ posterData }) => {
+  const posterRender = useRef<PosterRenderRef>(null)
+  const [posterPath, setPath] = useState<string>()
+
+  // TODO: 加埋点
+  const savePosterToPhoto = useCallback(
+    () =>
+      posterRender.current?.savePosterToPhoto().then((path) => {
+        showToast(`已保存到相册 ${path}`)
+        setPath(path || '')
+      }),
+    [posterRender],
+  )
+  const trackError = useCallback((type, err) => {
+    showToast('保存图片失败了，重新进入尝试一下')
+    trackJsError({
+      token: getStorage('userInfo').token || 'no_login',
+      errMsg: err,
+      errName: type,
+      location: 'detail/poster',
+    })
+  }, [])
+
+  return (
+    <View className='poster_wrapper'>
+      <PosterRender
+        ref={posterRender}
+        canvasId='taro-poster-render'
+        renderType='canvas'
+        canvasWidth={540}
+        canvasHeight={960}
+        debug
+        style={{
+          width: pxTransform(650),
+          height: pxTransform(850),
+        }}
+        onRenderFail={(err) => trackError('poster_render_failed', err)}
+        onSaveFail={(err) => trackError('poster_save_failed', err)}
+        list={lists(posterData)}
+      />
+      <View className='button_groups'>
+        {!posterPath ? (
+          <Button className='save_button' onClick={savePosterToPhoto}>
+            保存海报
+          </Button>
+        ) : (
+          <Button data-poster={{ path: posterPath }} className='share_button' openType='share'>
+            分享给好友
+          </Button>
+        )}
+      </View>
+    </View>
+  )
+}
+
+export default React.memo<TPosterProps>(Index)

src/pages/Detail/components/poster.scss

@@ -0,0 +1,15 @@
+.poster_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .button_groups {
+    display: flex;
+    justify-content: space-around;
+    width: 70%;
+    margin-top: 80rpx;
+  }
+}

src/pages/Detail/index.config.ts

@@ -8,7 +8,7 @@ export default definePageConfig({
   /** 开启朋友分享 */
   enableShareAppMessage: true,
   /** 开启朋友圈分享 */
-  enableShareTimeline: true,
+  enableShareTimeline: false,
   /** 自定义背景颜色 */
   backgroundColor: '#ffffff',
   /** 非首页设置返回Home */