Merge pull request #25 from HXTIA/merge-feat-initial-and-feat-mp-clip…

…-page

fix: authorization component and update system info

src/app.tsx

@@ -15,17 +15,9 @@ function App(props) {
 
   useLaunch(async () => {
     /** 1. 校验登陆态 */
-    let sessionRes
-    try {
-      sessionRes = (await Taro.checkSession()).errMsg
-    } catch (error) {
-      sessionRes = 'fail'
-    }
-    const isExpired = /fail/.test(sessionRes)
-
-    /** 2. 校验获取用户信息 */
     const token = getStorage<IUserInfo>('userInfo')?.token
 
+    /** 2. 校验获取用户信息 */
     /** TODO: 需和后端确定响应体 */
     let userinfo: any
     if (token) {
@@ -52,7 +44,7 @@ function App(props) {
     // store.dispatch.common.update_UserInfo({ ...userinfo })
     // TODO: 需要更新为实际的userinfo参数
     store.dispatch.common.update_SystemInfo({
-      sessionStatus: isExpired ? 'fail' : 'ok',
+      sessionStatus: !token ? 'fail' : 'ok',
       coolStartSuccess: true,
       hasAccountCompleted: !!(userinfo || false),
     })

src/common-model.ts

@@ -12,6 +12,8 @@ export interface IUserInfo {
   /** 所属组织 */
   orgId?: number
   orgName?: string
+  gradeId?: number
+  gradeName?: string
 }
 
 /** 系统运行所需全局缓存 */

src/components/common/Mask/index.module.scss

@@ -1,13 +1,13 @@
-@import "../../../app.scss";
+@import '../../../app.scss';
 
-.mask{
-    position: absolute;
-    width: 100vw;
-    min-height: 100vh;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: $bg-color-gary5;
-    opacity: .1;
-    z-index: 100;
+.mask {
+  position: absolute;
+  width: 100vw;
+  min-height: 100vh;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: $bg-color-gary5;
+  opacity: 0.1;
+  z-index: 100;
 }

src/components/common/VirtualList/index.module.scss

@@ -1 +0,0 @@
-@import '../../../app.scss';

src/hooks/useAnimation.ts

@@ -1,5 +1,11 @@
 import { useEffect, useState, useCallback } from 'react'
-import { preloadResource, loadAnimation, TLoadAnimationReturnType, showToast } from 'src/utils'
+import {
+  preloadResource,
+  loadAnimation,
+  TLoadAnimationReturnType,
+  showToast,
+  TLoadAnimationParameter,
+} from 'src/utils'
 
 /**
  * 动画引用hooks
@@ -10,10 +16,12 @@ const useAnimation = ({
   node,
   template,
   isAutoRun = true,
+  _options = {},
 }: {
   node: Taro.SelectorQuery
   template: string
   isAutoRun?: boolean
+  _options?: TLoadAnimationParameter
 }) => {
   const [instance, setInstance] = useState<TLoadAnimationReturnType>()
 
@@ -27,7 +35,7 @@ const useAnimation = ({
       .then((res) => {
         setTimeout(async () => {
           /* __PURE__ */ console.log(' === lottie执行，当前模版为 === ', template)
-          const ins = await loadAnimation(node, { animationData: res.data })
+          const ins = await loadAnimation(node, { animationData: res.data, ..._options })
           setInstance(ins)
         }, 0)
       })

src/pages/Initial/components/gradeInit.tsx

@@ -44,17 +44,18 @@ const Index = () => {
       isAuthorizeSubscribePop: true,
       hasAccountCompleted: true,
     })
+    dispatch.update_UserInfo({ ...state.userInfo, gradeId: 1, gradeName: '1' })
     console.log('state', store.getState().common.system)
-    goTo({
-      url: URL.Index,
-      methodType: 'switchTab',
-      extraParams: {
-        ...query(),
-      },
-      options: {
-        authorize: false,
-      },
-    })
+    // goTo({
+    //   url: URL.Index,
+    //   methodType: 'switchTab',
+    //   extraParams: {
+    //     ...query(),
+    //   },
+    //   options: {
+    //     authorize: false,
+    //   },
+    // })
   }, [])
 
   return (

src/pages/Initial/components/initAccomplish.module.scss

@@ -0,0 +1,20 @@
+@import '../../../app.scss';
+.InitAccomplish {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  // justify-content: center;
+  width: 100%;
+  height: 100vh;
+  padding-top: 200rpx;
+  &__bgContainer__canvas {
+    width: 1400rpx;
+    height: 700rpx;
+  }
+  &__button {
+    background-color: $primary-color;
+    width: 548rpx;
+    margin-top: 35rpx;
+    color: #000;
+  }
+}

src/pages/Initial/components/initAccomplish.tsx

@@ -0,0 +1,49 @@
+import { Canvas, View } from '@tarojs/components'
+import React, { useCallback } from 'react'
+import { Button } from '@taroify/core'
+import { $, goTo, query, URL } from 'src/utils'
+import useAnimation from 'src/hooks/useAnimation'
+import { JSON_MAP } from 'src/static/SVG/lottie-map'
+import './initAccomplish.module.scss'
+
+const Index = () => {
+  useAnimation({
+    node: $('#InitAccomplish__bgContainer__canvas'),
+    template: JSON_MAP['initial_success'],
+    _options: { loop: false },
+  })
+  const goToPage = useCallback(() => {
+    goTo({
+      url: URL.SettingCourse,
+      methodType: 'reLaunch',
+      extraParams: {
+        ...query(),
+      },
+      options: {
+        authorize: false,
+      },
+    })
+  }, [])
+
+  return (
+    <View className='InitAccomplish'>
+      {/* <View>完成</View> */}
+      <Canvas
+        className='InitAccomplish__bgContainer__canvas'
+        id='InitAccomplish__bgContainer__canvas'
+        type='2d'
+      ></Canvas>
+      <Button
+        variant='contained'
+        color='success'
+        shape='round'
+        className='InitAccomplish__button'
+        onClick={goToPage}
+      >
+        开启你的专属作业板~
+      </Button>
+    </View>
+  )
+}
+
+export default React.memo(Index)

src/pages/Initial/index.tsx

@@ -19,6 +19,7 @@ import request from 'src/utils/request'
 import OrgInit from './components/orgInit'
 import { loginInterUrl } from './common'
 import GradeInit from './components/gradeInit'
+import InitAccomplish from './components/initAccomplish'
 
 const Index = () => {
   console.log(' === 到达 === ', query())
@@ -63,8 +64,9 @@ const Index = () => {
   }
 
   /** 用户信息 拿到token 组织 年级 班级 */
-  const { orgId, orgName } = store.getState().common.userInfo
+  const { orgId, orgName, gradeId, gradeName } = store.getState().common.userInfo
   let hasOrg = useCallback(() => !!(orgId && orgName), [orgId, orgName])
+  let hasGrade = useCallback(() => !!(gradeId && gradeName), [gradeId, gradeName])
 
   // 检查本地存储有无token
   if (!!getStorage<IUserInfo>('userInfo').token) {
@@ -106,7 +108,8 @@ const Index = () => {
   return (
     <View>
       {!hasOrg() && <OrgInit></OrgInit>}
-      {hasOrg() && <GradeInit></GradeInit>}
+      {hasOrg() && !hasGrade() && <GradeInit></GradeInit>}
+      {hasOrg() && hasGrade() && <InitAccomplish></InitAccomplish>}
       {/* <Button onClick={back}>点击我</Button> */}
     </View>
   )

src/pages/Setting/Course/common.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react'
+import { requestUrlCreator } from 'src/utils'
+import { TPropsThrough } from './types'
+
+/** context props透传 https://zh-hans.react.dev/learn/passing-data-deeply-with-context#  */
+export const IndexContextProvider = createContext<TPropsThrough>({
+  page: 0,
+})
+
+/** 课程数据的基础路径 */
+export const getCourseInterUrl = requestUrlCreator({
+  absolutePath: '/course' /** TODO: 需要替换,mock路径 */,
+})

src/pages/Setting/Course/components/course-search.tsx

@@ -0,0 +1,75 @@
+import { View } from '@tarojs/components'
+import { Input } from '@taroify/core'
+import React, { FC, useCallback, useContext, useState } from 'react'
+import useUpdateEffect from 'src/hooks/useUpdateEffect'
+import { TStateHookUpdateFn } from '../types'
+import { IndexContextProvider } from '../common'
+import './search.module.scss'
+
+const Index: FC<{
+  setSearchText: TStateHookUpdateFn<string>
+  setPage: TStateHookUpdateFn<number>
+}> = ({ setSearchText, setPage }) => {
+  const { requestFn, updateList, searchText, filterType } = useContext(IndexContextProvider)
+  /** 搜索文案 */
+  const [text, setText] = useState('')
+  /** 搜索逻辑 */
+  const searchBtn = useCallback(() => {
+    /** TODO: 或许可以优化下这个逻辑 + 从未输入时的空数据不发请求 */
+    setPage(0)
+    requestFn!({ page: 0, searchText: text }).then((res) => {
+      res && updateList!([...(res || [])])
+    })
+    setSearchText(text)
+  }, [requestFn, setPage, setSearchText, text, updateList])
+
+  useUpdateEffect(() => {
+    setText('')
+    setSearchText('')
+  }, [filterType])
+
+  /** 更新搜索框文字 */
+  const updateText = useCallback(
+    (e) => {
+      const currentText = e.detail.value as string
+      setText(currentText)
+      /** 如果搜索框的值和index的不一样进行更新 */
+      if (currentText !== searchText) {
+        setSearchText(currentText)
+      }
+    },
+    [searchText, setSearchText],
+  )
+
+  return (
+    <View className='search_wrapper'>
+      <Input
+        placeholder='输入点什么...'
+        className='input'
+        value={text}
+        /** 每200ms合并一次 */
+        onChange={debounce(updateText, 200)}
+      />
+      <View className='button' onClick={searchBtn}>
+        搜索
+      </View>
+    </View>
+  )
+}
+
+export default React.memo<{
+  setSearchText: TStateHookUpdateFn<string>
+  setPage: TStateHookUpdateFn<number>
+}>(Index)
+
+function debounce(func, delay) {
+  let timer
+  return function () {
+    const context = this
+    const args = arguments
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(context, args)
+    }, delay)
+  }
+}

src/pages/Setting/Course/components/search.module.scss

@@ -0,0 +1,30 @@
+/** 搜索框 */
+.search_wrapper {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .input {
+    box-sizing: border-box;
+    width: 500rpx;
+    height: 68rpx;
+    border-radius: 215rpx;
+    background: rgba(241, 245, 249, 1);
+    padding: 0 30rpx 0 30rpx;
+  }
+
+  .button {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120rpx;
+    height: 60rpx;
+    font-size: 25rpx;
+    border-radius: 215rpx;
+    background: rgba(61, 235, 165, 1);
+    padding: 0;
+  }
+}

src/pages/Setting/Course/index.config.ts

@@ -4,7 +4,8 @@ export default definePageConfig({
   /** 是否开启下拉刷新 */
   enablePullDownRefresh: false,
   /** 自定义导航栏 */
-  navigationStyle: 'custom',
+  navigationStyle: 'default',
   /** 自定义背景颜色 */
   backgroundColor: '#ffffff',
+  disableScroll: true,
 })

src/pages/Setting/Course/index.module.scss

@@ -0,0 +1,16 @@
+@import '../../../app.scss';
+
+.course_wrapper {
+  &__bottom {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 10px;
+  }
+  &__button {
+    background-color: $primary-color;
+    height: 75rpx;
+    width: 500rpx;
+    color: #000;
+  }
+}