优化 登录提示

src/app.tsx

 import '@tarojs/async-await'
 import configStore from './store'
+import Index from './pages/index'
 import { Provider } from '@tarojs/redux'
-import { pages, INDEX, LOGIN } from './constants/router'
 import Taro, { Component, Config } from '@tarojs/taro'
-import Index from './pages/index'
 // import Login from './pages/login'
 
 // import './app.less'
-import token from './constants/token'
+// import token from './constants/token'
 // import api from './api';
 
 // 如果需要在 h5 环境中开启 React Devtools

src/constants/token.ts

@@ -25,7 +25,7 @@ class Token {
       const { data } = await MyStorage.getItem({ key: 'token' })
       if (!!data) this.token = data
     } catch (error) {
-      console.error('获取本地 token 失败~', error)
+      console.warn('获取本地 token 失败~', error)
     }
   }
 }

src/constants/utils.ts

@@ -26,3 +26,12 @@ export const MyStorage = {
     }
   }
 }
+
+export function checkPhone(phone) {
+  return /^1[3456789]\d{9}$/.test(phone.toString())
+}
+
+export function showErrorToast({ error, tips }: { error?: any; tips?: string }) {
+  if (!error && !tips) return
+  Taro.showToast({ icon: 'none', title: error && error.msg ? error.msg : tips })
+}

src/pages/index/index.tsx

+import Home from '../home/'
+import Login from '../login'
 import { ComponentClass } from 'react'
 import { View } from '@tarojs/components'
 import token from '../../constants/token'
-import { LOGIN, HONE } from '../../constants/router'
+// import { LOGIN, HONE } from '../../constants/router'
 import Taro, { Component, Config } from '@tarojs/taro'
 
 class Index extends Component {
@@ -9,13 +11,17 @@ class Index extends Component {
     navigationStyle: 'custom'
   }
 
-  componentDidMount() {
-    !token.isLogon() ? Taro.redirectTo({ url: LOGIN }) : Taro.redirectTo({ url: HONE })
-    // Taro.redirectTo({ url: HONE })
-  }
+  // componentDidMount() {
+  //   // !token.isLogon() ? Taro.redirectTo({ url: LOGIN }) : Taro.redirectTo({ url: HONE })
+  //   // Taro.redirectTo({ url: HONE })
+  // }
 
   render() {
-    return <View />
+    return (
+      <View style={{ height: '100%', width: '100%' }}>
+        {token.isLogon() ? <Home /> : <Login />}
+      </View>
+    )
   }
 }
 

src/pages/login/index.tsx

@@ -3,6 +3,7 @@ import { ComponentClass } from 'react'
 import { CheckBox } from 'react-native'
 import { connect } from '@tarojs/redux'
 import { HONE } from '../../constants/router'
+import { checkPhone, showErrorToast } from '../../constants/utils'
 import Taro, { Component, Config } from '@tarojs/taro'
 import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
 
@@ -22,6 +23,7 @@ type PageState = {
   checked: boolean
   userPhone: string
   checkCode: string
+  getCodeTime: number
 }
 
 type IProps = PageStateProps & PageDispatchProps & PageOwnProps
@@ -44,7 +46,8 @@ class Login extends Component {
     this.state = {
       userPhone: '',
       checkCode: '',
-      checked: false
+      checked: false,
+      getCodeTime: 0
     }
   }
 
@@ -61,34 +64,52 @@ class Login extends Component {
   }
 
   getCheckCode = async () => {
-    if (this.state.userPhone.length !== 11) return
-    try {
-      await api.user.getCheckCode(this.state.userPhone)
-    } catch (error) {
-      console.error(error)
+    const { userPhone, getCodeTime } = this.state
+    if (!checkPhone(userPhone)) {
+      Taro.showToast({ title: '手机号码有误~', icon: 'none' })
+    } else if (getCodeTime === 0) {
+      try {
+        Taro.showLoading({ title: '获取中...' })
+        await api.user.getCheckCode(userPhone)
+        this.setState({ getCodeTime: 60 })
+        const timer = setInterval(() => {
+          if (this.state.getCodeTime === 0) {
+            clearInterval(timer)
+          } else {
+            this.setState({ getCodeTime: this.state.getCodeTime - 1 })
+          }
+        }, 1000)
+      } catch (error) {
+        // console.warn('获取验证码失败~', error)
+        showErrorToast({ error, tips: '获取验证码失败~' })
+      }
+      // Taro.hideLoading()
     }
   }
 
   login = async () => {
     const { userPhone, checkCode } = this.state
     try {
-      const res = await api.user.login(userPhone, checkCode)
-      console.log({ res })
+      Taro.showLoading({ title: '登录中...' })
+      await api.user.login(userPhone, checkCode)
       Taro.navigateTo({ url: HONE })
     } catch (error) {
-      console.error('用户登录出错~', error)
+      // console.warn('用户登录出错~', error)
+      showErrorToast({ error, tips: '用户登录出错~' })
     }
+    // Taro.hideLoading()
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    const { userPhone, checkCode, checked } = nextState
-    const { userPhone: UP, checkCode: CC, checked: CK } = this.state
-    return userPhone !== UP || checkCode !== CC || checked !== CK
+  shouldComponentUpdate(_nextProps, _nextState) {
+    const { userPhone, checkCode, checked, getCodeTime } = _nextState
+    const { userPhone: UP, checkCode: CC, checked: CK, getCodeTime: GT } = this.state
+    return userPhone !== UP || checkCode !== CC || checked !== CK || getCodeTime !== GT
   }
 
   render() {
-    const { checked, userPhone, checkCode } = this.state
-    const loginBtnState = userPhone.length === 11 && checked && checkCode.length === 6
+    const { checked, userPhone, checkCode, getCodeTime } = this.state
+    const loginBtnState = checkPhone(userPhone) && checked && checkCode.length === 6
+    const getCodeing = getCodeTime > 0
     return (
       <View className="login">
         <Text className="text">Vmatrix</Text>
@@ -111,12 +132,15 @@ class Login extends Component {
               onInput={this.setCheckCode}
               className="check-code-input"
             />
-            <Text className="check-code-btn" onClick={this.getCheckCode}>
-              获取验证码
+            <Text
+              className={`check-code-btn ${getCodeing && 'check-code-btn-disabled'}`}
+              onClick={this.getCheckCode}
+            >
+              {getCodeing ? `${getCodeTime}秒后再获取` : '获取验证码'}
             </Text>
           </View>
           <Label className="app-clause" for="app-clause">
-            {/* taro 的 CheckBox 在 rn 上不能触发点击 */}
+            {/* Taro 的 CheckBox 在 RN 上不能触发点击事件 */}
             {Taro.getEnv() === Taro.ENV_TYPE.RN ? (
               <CheckBox value={checked} onChange={this.changeCheckBox} />
             ) : (

src/pages/login/login.less

@@ -46,6 +46,10 @@
   color: #6a92f9;
 }
 
+.check-code-btn-disabled {
+  color: #ccc;
+}
+
 .app-clause {
   width: 100%;
   margin-top: 10;