feats

src/components/Auth/AuthAvatar.jsx

@@ -6,6 +6,8 @@ import useAuth from './useAuth'
 import './style.scss'
 
 export default (props) => {
+  const { onCancel = (x => x) } = props;
+
   const [loading, setLoading] = useState(false)
   const { updateUserInfo } = useAuth()
 
@@ -30,7 +32,13 @@ export default (props) => {
   }
 
   return (
-    <AuthBox title='授权头像' openType='getUserInfo' loading={loading} onGetUserInfo={handleUserProfile}>
+    <AuthBox
+      title='授权头像'
+      openType='getUserInfo'
+      loading={loading}
+      onGetUserInfo={handleUserProfile}
+      onCancel={onCancel}
+    >
       <View className='auth-avatar'>
         <OpenData type='userAvatarUrl' />
       </View>

src/components/Auth/AuthBox.jsx

@@ -4,7 +4,7 @@ import { View, Button } from '@tarojs/components'
 import './style.scss'
 
 export default (props) => {
-  const { loading, title, openType, onGetUserInfo, onGetPhoneNumber } = props
+  const { loading, title, openType, onGetUserInfo, onGetPhoneNumber, onCancel = (x => x) } = props
 
   const handleGetUserInfo = () => {
     Taro.getUserProfile({
@@ -30,7 +30,7 @@ export default (props) => {
         {props.children}
       </View>
       <View className='auth-footer'>
-        <Button className='auth-btn' type='default' plain>取消</Button>
+        <Button className='auth-btn' type='default' plain onClick={onCancel}>取消</Button>
         {
           openType === 'getUserInfo' ? (
             <Button

src/components/Auth/AuthPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import './style.scss'
+
+export default (props) => {
+  return (
+    <View>
+
+    </View>
+  )
+}

src/components/Auth/AuthPhone.jsx

@@ -6,6 +6,8 @@ import useAuth from './useAuth'
 import './style.scss'
 
 export default (props) => {
+  const { onCancel = (x => x) } = props;
+
   const [loading, setLoading] = useState(false)
   const { updatePhoneNumber } = useAuth()
 
@@ -30,7 +32,13 @@ export default (props) => {
   }
 
   return (
-    <AuthBox title='授权手机' openType='getPhoneNumber' loading={loading} onGetPhoneNumber={handlePhoneNumber}>
+    <AuthBox
+      title='授权手机'
+      openType='getPhoneNumber'
+      loading={loading}
+      onGetPhoneNumber={handlePhoneNumber}
+      onCancel={onCancel}
+    >
       <View>请确认授权手机号，以便为您提供更优质的服务内容。</View>
     </AuthBox>
   )

src/components/Auth/style.scss

@@ -33,7 +33,7 @@
     display: inline-block;
     font-size: 30rpx;
     background: #193C83;
-    border-radius: 39px;
+    border-radius: 39rpx;
     color: #fff;
     width: 236rpx;
     height: 78rpx;
@@ -42,4 +42,48 @@
       margin-left: 80rpx;
     }
   }
-}
+}
+
+.auth-page {
+  width: 100vw;
+  height: 100vw;
+  position: fixed;
+  z-index: 2000;
+  left: 0;
+  top: 0;
+  background: #fff;
+  display: flex;
+  padding: 40rpx 30rpx;
+  box-sizing: border-box;
+
+  .auth-header {
+    flex: none;
+    margin-top: 78rpx;
+
+    .auth-logo {
+      width: 128rpx;
+      margin: 0 auto;
+    }
+  }
+
+  .auth-body {
+    flex: auto;
+    margin-top: 195rpx;
+
+    .auth-btn {
+      width: 100%;
+      height: 92rpx;
+      background: #193C83;
+      border-radius: 44px;
+    }
+  }
+
+  .auth-footer {
+    flex: none;
+    height: 321rpx;
+    background: #F8F8F8;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    padding: 32rpx 40rpx;
+  }
+}

src/utils/im/sdk.js

@@ -56,26 +56,26 @@ export default function IMSDK() {
         ...paramsRef.current,
         fail: (err) => reject(err),
       }).then((task) => {
-        console.log('[WS][connect]', task)
+        console.log(`[${now()}]`, '[WS] [connect]', task)
         instanceRef.current = task
   
         task.onOpen(function () {
-          console.log('[WS][onOpen]', paramsRef.current)
+          console.log(`[${now()}]`, '[WS] [onOpen]', paramsRef.current)
           resolve()
         })
 
         task.onMessage(function (msg) {
-          console.info('[WS][onMessage]', msg)
+          console.info(`[${now()}]`, '[WS] [onMessage]', msg)
           instanceRef.onMessage().forEach((f) => f(msg))
         })
 
         task.onError(function (error) {
-          console.error('[WS][onError]', error)
+          console.error(`[${now()}]`, '[WS] [onError]', error)
           instanceRef.onError().forEach((f) => f(error))
         })
 
         task.onClose(function (res) {
-          console.warn('[WS][onClose]', res)
+          console.warn(`[${now()}]`, '[WS] [onClose]', res)
           instanceRef.onClose().forEach((f) => f(res))
         })
       })
@@ -83,14 +83,14 @@ export default function IMSDK() {
   }
 
   function send(data) {
-    console.log('[WS][SEND]', data)
+    console.log(`[${now()}]`, '[WS] [SEND]', data)
     return new Promise((resovle, reject) => {
       if (instanceRef.current) {
         instanceRef.current.send({
           data,
           success: resovle,
           fail: (err) => {
-            console.error('[WS][SEND]', err)
+            console.error(`[${now()}]`, '[WS] [SEND]', err)
             reject(err)
           },
         })
@@ -99,4 +99,18 @@ export default function IMSDK() {
       }
     })
   }
+
+  function now() {
+    const dt = new Date()
+    const year = dt.getFullYear()
+    const month = dt.getMonth() + 1
+    const day = dt.getDate()
+    const hour = dt.getHours()
+    const minutes = dt.getMinutes()
+    const seconds = dt.getSeconds()
+
+    const formate = n => n >= 10 ? n : `0${n}`
+
+    return `${year}-${formate(month)}-${formate(day)} ${formate(hour)}:${formate(minutes)}:${formate(seconds)}`
+  }
 }