feats

config/dev.js

@@ -3,7 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"https://xlk.njyz.tech"', //正式
+    HOST: '"https://xlk.njyz.tech"',
+    // HOST: '"http://127.0.0.1:8088"',
     WSS_HOST: '"wss://xlk.njyz.tech"',
     OSS_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',

src/app.jsx

@@ -3,6 +3,7 @@ import { Provider } from 'react-redux'
 import Taro from '@tarojs/taro'
 import { getLocation, getRouterParams } from '@/utils/tools'
 import login from '@/utils/login'
+import im from '@/utils/im'
 import store from './store'
 
 import './app.scss'
@@ -11,7 +12,10 @@ class App extends Component {
 
   componentDidMount () {}
 
-  componentDidShow () {}
+  componentDidShow (options) {
+    // 保留初始场景
+    Taro.setStorage('scene', options.scene)
+  }
 
   componentDidHide () {}
 
@@ -33,12 +37,11 @@ class App extends Component {
 
         // login
         login(payload).then((res) => {
-          // const { person: { personId } } = res
+          const { person: { personId } } = res
+          
+          // 初始化 im
+          im.init(personId)
 
-          // socket.createSocket({ id: personId });
-          // socket.onMessage(data => {
-          //   store.dispatch({ type: INCREASE_UNREADNUM })
-          // })
           // // 埋点
           // trackUserSource(router.params).then(r => this.updateTrack = r)
         })

src/components/Auth/AuthAvatar.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { View, OpenData } from '@tarojs/components'
+import AuthBox from './AuthBox'
+import useAuth from './useAuth'
+import './style.scss'
+
+export default (props) => {
+  const [loading, setLoading] = useState(false)
+  const { updateUserInfo } = useAuth()
+
+  const handleUserProfile = (detail) => {
+    const { errMsg, ...data } = detail || {}
+    if (errMsg === 'getUserProfile:ok') {
+      setLoading(true)
+      updateUserInfo(data).then(() => {
+        setLoading(false)
+      }).catch((err) => {
+        console.error(err)
+        setLoading(false)
+      })
+    } else {
+      console.error(errMsg);
+      Taro.showToast({
+        title: '授权头像失败',
+        icon: 'none',
+        duration: 2000
+      })
+    }
+  }
+
+  return (
+    <AuthBox title='授权头像' openType='getUserInfo' loading={loading} onGetUserInfo={handleUserProfile}>
+      <View className='auth-avatar'>
+        <OpenData type='userAvatarUrl' />
+      </View>
+      <View className='auth-nickname'>
+        <OpenData type='userNickName' />
+      </View>
+    </AuthBox>
+  )
+}

src/components/Auth/AuthBox.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Taro from '@tarojs/taro'
+import { View, Button } from '@tarojs/components'
+import './style.scss'
+
+export default (props) => {
+  const { loading, title, openType, onGetUserInfo, onGetPhoneNumber } = props
+
+  const handleGetUserInfo = () => {
+    Taro.getUserProfile({
+      lang: 'zh_CN',
+      desc: '用于完善个人资料',
+      success: (res) => {
+        onGetUserInfo(res)
+      }
+    })
+  }
+
+  const handlePhoneNumber = (e) => {
+    const { errMsg } = e.detail || {}
+    if (errMsg === 'getPhoneNumber:ok') {
+      onGetPhoneNumber(e.detail || {})
+    }
+  }
+
+  return (
+    <View className='auth-box'>
+      <View className='auth-header'>{title}</View>
+      <View className='auth-body'>
+        {props.children}
+      </View>
+      <View className='auth-footer'>
+        <Button className='auth-btn' type='default' plain>取消</Button>
+        {
+          openType === 'getUserInfo' ? (
+            <Button
+              className='auth-btn'
+              type='default'
+              onClick={handleGetUserInfo}
+              loading={loading}
+            >确定</Button>
+          ) : (
+            <Button
+              className='auth-btn'
+              type='default'
+              openType='getPhoneNumber'
+              lang='zh_CN'
+              onGetPhoneNumber={handlePhoneNumber}
+              loading={loading}
+            >确定</Button>
+          )
+        }
+      </View>
+    </View>
+  )
+}

src/components/Auth/AuthPhone.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import AuthBox from './AuthBox'
+import useAuth from './useAuth'
+import './style.scss'
+
+export default (props) => {
+  const [loading, setLoading] = useState(false)
+  const { updatePhoneNumber } = useAuth()
+
+  const handlePhoneNumber = (detail) => {
+    const { errMsg, ...data } = detail || {}
+    if (errMsg === 'getPhoneNumber:ok') {
+      setLoading(true)
+      updatePhoneNumber(data).then(() => {
+        setLoading(false)
+      }).catch((err) => {
+        console.error(err)
+        setLoading(false)
+      })
+    } else {
+      console.error(errMsg);
+      Taro.showToast({
+        title: '授权手机失败',
+        icon: 'none',
+        duration: 2000
+      })
+    }
+  }
+
+  return (
+    <AuthBox title='授权手机' openType='getPhoneNumber' loading={loading} onGetPhoneNumber={handlePhoneNumber}>
+      <View>请确认授权手机号，以便为您提供更优质的服务内容。</View>
+    </AuthBox>
+  )
+}

src/components/Auth/style.scss

@@ -0,0 +1,45 @@
+.auth-box {
+  width: 100%;
+
+  .auth-header {
+    font-size: 32rpx;
+  }
+
+  .auth-body {
+    margin-top: 43rpx;
+    display: flex;
+    align-items: center;
+  }
+
+  .auth-footer {
+    margin-top: 50rpx;
+    text-align: center;
+  }
+
+  .auth-avatar {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    flex: none;
+  }
+
+  .auth-nickname {
+    margin-left: 1em;
+    flex: auto;
+  }
+
+  .auth-btn {
+    display: inline-block;
+    font-size: 30rpx;
+    background: #193C83;
+    border-radius: 39px;
+    color: #fff;
+    width: 236rpx;
+    height: 78rpx;
+
+    & + .auth-btn {
+      margin-left: 80rpx;
+    }
+  }
+}

src/components/Auth/useAuth.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import Taro from '@tarojs/taro'
+import { dispatchUpdateUserInfo } from '@/actions/user'
+import { queryUserPhone } from '@/services/user'
+import { UPDATE_USER_INFO } from '@/constants/user'
+
+export default function useAuth() {
+  const dispatch = useDispatch()
+
+  const updateUserInfo = useCallback((data) => {
+    return new Promise((resolve, reject) => {
+      const sessionKey = Taro.getStorageSync('sessionKey')
+      Object.assign(data, { sessionKey })
+      dispatchUpdateUserInfo(data)(dispatch).then(() => {
+        resolve()
+      }).catch((err) => {
+        console.error(err)
+        reject(err)
+      })
+    })
+  }, [dispatch])
+
+  const updatePhoneNumber = useCallback((data) => {
+    return new Promise((resolve, reject) => {
+      const sessionKey = Taro.getStorageSync('sessionKey')
+      Object.assign(data, { sessionKey })
+      queryUserPhone(data).then((res) => {
+        dispatch({
+          type: UPDATE_USER_INFO,
+          payload: {
+            phone: res.phoneNumber
+          }
+        })
+        resolve()
+      }).catch((err) => {
+        console.error(err)
+        reject(err)
+      })
+    })
+  }, [dispatch])
+
+  return { updateUserInfo, updatePhoneNumber }
+}

src/components/Overlay/index.jsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default (props) => {
+  const { visible = false, closeOnClick = false, onClose, style = {}, aligin = 'center' } = props
+
+  const handleClick = () => {
+    if (closeOnClick) {
+      onClose && onClose()
+    }
+  }
+
+  const classNames = useMemo(() => `overlay-warpper${visible ? ' visible' : ''}`, [visible])
+  const layStyle = {
+    ...style,
+    alignItems: aligin === 'top' ? 'flex-start' : ( aligin === 'bottom' ? 'flex-end' : 'center' )
+  }
+
+  return visible && (
+    <View className={classNames} style={layStyle} onClick={handleClick}>
+      <View>
+        {props.children}
+      </View>
+    </View>
+  )
+}

src/components/Overlay/style.scss

@@ -0,0 +1,22 @@
+.overlay-warpper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, .8);
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.5s ease;
+  opacity: 0;
+
+  & > view {
+    flex: none;
+  }
+
+  &.visible {
+    opacity: 1;
+  }
+}

src/components/Spin/style.scss

@@ -15,7 +15,7 @@ $width: 160px;
   }
 
   .mask-left, .mask-right {
-    background: #fff;
+    // background: #fff;
     top: 0;
     width: calc(50% + 1px);
     height: 100%;

src/layout/Basic/index.jsx

@@ -1,9 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { View } from '@tarojs/components'
 import Loading from '@/components/Loading'
-
-import './style.scss'
+import Overlay from '@/components/Overlay'
 
 const BasicLayout = (props) => {
   const {person, children, onProps, ...leftProps} = props
@@ -13,13 +11,12 @@ const BasicLayout = (props) => {
     onProps({person, ...leftProps})
   }
 
-  return null
-  // return loading ?
-  // (
-  //   <View className="page-loading-wrapper">
-  //     <Loading />
-  //   </View>
-  // ) : children || null
+  return loading ?
+  (
+    <Overlay visible={loading} style={{ background: 'rgba(255, 255, 255, .9)' }}>
+      <Loading />
+    </Overlay>
+  ) : children || null
 }
 
 export default connect(({ user }) => ({...user.userInfo || {}}))(BasicLayout)

src/layout/Basic/style.scss

@@ -1,5 +0,0 @@
-
-.page-loading-wrapper {
-  margin-top: 30vw;
-  
-}

src/layout/index.js

@@ -1,6 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { useRouter } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import Overlay from '@/components/Overlay'
+import AuthAvatar from '@/components/Auth/AuthAvatar'
+import AuthPhone from '@/components/Auth/AuthPhone'
 import BasicLayout from './Basic'
+import useAuth from './useAuth'
+
+import './style.scss'
 
 export default (Child) => (props) => {
   const [ready, setReady] = useState(false)
@@ -9,17 +16,35 @@ export default (Child) => (props) => {
   // 路由信息
   const router = useRouter()
 
+  const [authPhone, authAvatar] = useAuth(info?.person)
+
+  // 是否完成登录
+  const isLoged = !!info?.person?.personId
+
   useEffect(() => {
-    // const initedPerson = !!info?.person?.personId
-    // const initedRouter = !!router?.path
-    // setReady(initedPerson && initedRouter)
-    setReady(true)
-  })
+    setReady(isLoged)
+  }, [isLoged])
 
   return (
     <>
-      <BasicLayout onProps={setInfo} />    
-      {ready && <Child {...info} {...props} router={router} />}
+      <BasicLayout onProps={setInfo} />
+      {
+        ready && (
+          <>
+            <Overlay visible={authPhone} aligin='bottom'>
+              <View className='auth-wrapper'>
+                <AuthPhone />
+              </View>
+            </Overlay>
+            <Overlay visible={!authPhone && authAvatar} aligin='bottom'>
+              <View className='auth-wrapper'>
+                <AuthAvatar />
+              </View>
+            </Overlay>
+            <Child {...info} {...props} router={router} />
+          </>
+        )
+      }
     </>
   )
 }

src/layout/style.scss

@@ -0,0 +1,8 @@
+.auth-wrapper {
+  width: 100vw;
+  box-sizing: border-box;
+  background: #fff;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  padding: 40rpx;
+}

src/layout/useAuth.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+import { useRouter } from '@tarojs/taro'
+import { routes } from '../routes'
+
+export default function useAuth(person) {
+  const [authPhone, setAuthPhone] = useState(false)
+  const [authAvatar, setAuthAvatar] = useState(false)
+  const { path } = useRouter()
+
+  useEffect(() => {
+    const current = routes.filter((route) => path.indexOf(route.page) > -1)[0]
+    if (current && current.auth && current.auth.length) {
+      // 如果需要授权手机
+      if (current.auth.indexOf('phone') > -1) {
+        if (person && !person.phone) {
+          setAuthPhone(true)
+        } else {
+          setAuthPhone(false)
+        }
+      }
+
+      // 如果需要授权头像
+      if (current.auth.indexOf('avatar') > -1) {
+        if (person && (!person.avatarurl || person.avatarurl.indexOf('default_avatar') > -1)) {
+          setAuthAvatar(true)
+        } else {
+          setAuthAvatar(false)
+        }
+      }
+    } else {
+      setAuthPhone(false)
+      setAuthAvatar(false)
+    }
+  }, [person, path])
+
+  return [authPhone, authAvatar]
+}

src/reducers/user.js

@@ -16,7 +16,7 @@ const INITIAL_STATE = {
     extraInfo: {},
     miniApp: {},
   },
-  unReadNum: 0
+  unRead: true
 }
 
 export default function user(state = INITIAL_STATE, action) {
@@ -91,10 +91,9 @@ export default function user(state = INITIAL_STATE, action) {
       }
     }
     case ASSIGN_UNREADNUM: {
-      let { unReadNum } = action.payload
       return {
         ...state,
-        unReadNum
+        unRead: action.payload
       }
     }
     case INCREASE_UNREADNUM: {

src/routes.js

@@ -10,6 +10,7 @@ const routes = [
     pkg: 'main',
     isTab: true,
     type: 'main',
+    // auth: ['phone', 'avatar']
   },
   {
     name: '视频',

src/utils/im/index.js

@@ -0,0 +1,76 @@
+import IMSDK from './sdk'
+import initListeners from "./listeners"
+
+function IM() {
+  // 消息类型
+  const MESSAGETYPE = {
+    IMAGE: 'image',
+    TEXT: 'text',
+    CARD: 'card',
+  }
+
+  const sdk = IMSDK()
+  const listeners = initListeners()
+
+  let sendPerson;
+  let timer;
+
+  sdk.listen('onMessage', listeners.getListeners)
+
+  return {
+    MESSAGETYPE,
+    init,
+    listen: listeners.append,
+    connect: sdk.connect,
+    send,
+    sendMessage,
+  }
+
+  function bindPerson(person) {
+    sendPerson = person
+  }
+
+  function send(to) {
+    return function(type = MESSAGETYPE.TEXT) {
+      return function(message) {
+        return sendMessage(to, message, type)
+      }
+    }
+  }
+
+  function sendMessage(to, message, type = MESSAGETYPE.TEXT) {
+    return sdk.send(wrapData(to, message, type))
+  }
+
+  function wrapData(to, data, messageType) {
+    return JSON.stringify({
+      sendPerson,
+      receivePerson: to,
+      message: data,
+      messageType,
+      createDate: new Date().valueOf(),
+    })
+  }
+
+  function init(personId) {
+    // eslint-disable-next-line no-undef
+    const url = `${WSS_HOST}/wx/chat/${personId}`  
+
+    bindPerson(personId)
+
+    if (timer) {
+      clearInterval(timer)
+    }
+
+    timer = setInterval(() => {
+      if (sdk.getState() !== sdk.STATE.OPEN) {
+        im.connect({ url })
+      } else {
+        // sdk.send('ping')
+      }
+    }, 2 * 1000)
+  }
+}
+
+const im = IM();
+export default im;

src/utils/im/listeners.js

@@ -0,0 +1,36 @@
+
+export default () => {
+  const listeners = []
+
+  function getIndex(name) {
+    for (let i = 0; i < listeners.length; i += 1) {
+      const fn = listeners[i]
+      if (fn.name === name) {
+        return i
+      }
+    }
+
+    return -1
+  }
+  
+  function remove(name) {
+    listeners = listeners.filter((f) => f.name !== name)
+  }
+
+  function append(name, fun) {
+    const pos = getIndex(name)
+    if (pos === -1) {
+      listeners.push({ name, fun })
+    }
+    return () => remove(name)
+  }
+
+  function getListeners() {
+    return listeners.map((listener) => listener.fun)
+  }
+
+  return {
+    getListeners,
+    append,
+  }
+}

src/utils/im/sdk.js

@@ -0,0 +1,102 @@
+import Taro from '@tarojs/taro'
+
+export default function IMSDK() {
+  const STATE = {
+    CONNECTING: 0,
+    OPEN: 1,
+    CLOSING: 2,
+    CLOSED: 3,
+  }
+
+  const noop = () => []
+
+  const instanceRef = {
+    current: undefined,
+    onOpen: noop,
+    onMessage: noop,
+    onError: noop,
+    onClose: noop
+  }
+
+  const paramsRef = {
+    current: {}
+  }
+
+  return {
+    STATE,
+    getState,
+    connect,
+    listen,
+    send,
+  }
+
+  function getState() {
+    if (instanceRef.current) {
+      return instanceRef.current.readyState
+    }
+
+    return STATE.CLOSED
+  }
+
+  function listen(name, fns) {
+    if (typeof fns === 'function') {
+      instanceRef[name] = fns
+    }
+  }
+
+  function connect(options) {
+    Object.assign(paramsRef.current, options || {})
+    
+    if (instanceRef.current && instanceRef.current.readyState === STATE.OPEN) {
+      return Promise.resolve()
+    }
+
+    return new Promise((resolve, reject) => {
+      Taro.connectSocket({
+        ...paramsRef.current,
+        fail: (err) => reject(err),
+      }).then((task) => {
+        console.log('[WS][connect]', task)
+        instanceRef.current = task
+  
+        task.onOpen(function () {
+          console.log('[WS][onOpen]', paramsRef.current)
+          resolve()
+        })
+
+        task.onMessage(function (msg) {
+          console.info('[WS][onMessage]', msg)
+          instanceRef.onMessage().forEach((f) => f(msg))
+        })
+
+        task.onError(function (error) {
+          console.error('[WS][onError]', error)
+          instanceRef.onError().forEach((f) => f(error))
+        })
+
+        task.onClose(function (res) {
+          console.warn('[WS][onClose]', res)
+          instanceRef.onClose().forEach((f) => f(res))
+        })
+      })
+    })
+  }
+
+  function send(data) {
+    console.log('[WS][SEND]', data)
+    return new Promise((resovle, reject) => {
+      if (instanceRef.current) {
+        instanceRef.current.send({
+          data,
+          success: resovle,
+          fail: (err) => {
+            console.error('[WS][SEND]', err)
+            reject(err)
+          },
+        })
+      } else {
+        reject(STATE.CLOSED)
+      }
+    })
+  }
+}

src/utils/login.js

@@ -38,9 +38,12 @@ export default (payload) => {
           }
 
           // 获取人员详细信息
+          // eslint-disable-next-line no-unused-vars
           queryUserInfo(person.personId).then(info => {
-            const { unReadNum } = info
-            dispatch({ type: ASSIGN_UNREADNUM, payload: { unReadNum } });
+            // const { unReadNum } = info
+
+            // 默认红点开始就有
+            dispatch({ type: ASSIGN_UNREADNUM, payload: true });
             resolve(data)
           }).catch(reject)
         }).catch(reject)