完成登录功能

src/api/axios.ts

@@ -3,7 +3,7 @@
 import { concatParam } from '../constants/utils'
 // import $config, { message, requestCode, tokens } from '@/config'
 import axios, { CancelTokenStatic, AxiosInstance } from 'axios'
-import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from 'src/constants/counter'
+import { BASE_URL, FETCH_TIME_OUT, INTERFACE_REPEAT } from '../constants/counter'
 
 const concatParamMethod = new Set(['post', 'put'])
 // let refreshTokenState = false // 刷新 token的状态
@@ -62,6 +62,7 @@ $axios.interceptors.response.use(
     const { code } = data
     if (code === '0') {
       // 正确请求
+      console.log({ config })
       return data
       // } else if (code === requestCode.TOKNE_EXPIRED) {
       //   // token失效重新请求

src/api/client.ts

@@ -4,11 +4,11 @@ import { AxiosRequestConfig, AxiosPromise, Method } from 'axios'
 interface IRequest {
   data?: any
   url: string
-  method: Method
+  method?: Method
   config?: AxiosRequestConfig
 }
 export class ApiClient {
-  request({ url, config, method = 'POST', data = {} }: IRequest): AxiosPromise<any> {
+  protected request({ url, config, method = 'POST', data = {} }: IRequest): AxiosPromise<any> {
     return axios({
       url,
       data,

src/api/users.ts

@@ -3,7 +3,14 @@ import { ApiClient } from './client'
 class UsersApi extends ApiClient {
   /** 获取验证码 */
   getCheckCode(phone: string | number) {
-    return this.request({ method: 'GET', url: `publics/login/send/code/${phone}` })
+    return this.request({ method: 'GET', url: `/publics/login/send/code/${phone}` })
+  }
+
+  login(userPhone, codeInfo) {
+    return this.request({
+      url: '/publics/login/info',
+      data: { userPhone, codeInfo, userTerminal: 'APP' }
+    })
   }
 }
 

src/constants/counter.ts

 export const ADD = 'ADD'
 export const MINUS = 'MINUS'
-export const BASE_URL = 'http://server.bdideal.com/'
+export const BASE_URL = 'http://server.bdideal.com'
 export const FETCH_TIME_OUT = 5000
 export const INTERFACE_REPEAT = '接口重复，请求已取消'

src/pages/login/index.tsx

+import api from '../../api'
 import { ComponentClass } from 'react'
 import { CheckBox } from 'react-native'
 import { connect } from '@tarojs/redux'
+import { HONE } from '../../constants/router'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View, Text, Input, Button, Checkbox } from '@tarojs/components'
+import { View, Text, Input, Button, Checkbox, Label } from '@tarojs/components'
 
 import './login.less'
 
@@ -58,6 +60,26 @@ class Login extends Component {
     this.setState({ checked: !this.state.checked })
   }
 
+  getCheckCode = async () => {
+    if (this.state.userPhone.length !== 11) return
+    try {
+      await api.user.getCheckCode(this.state.userPhone)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  login = async () => {
+    const { userPhone, checkCode } = this.state
+    try {
+      const res = await api.user.login(userPhone, checkCode)
+      console.log({ res })
+      Taro.navigateTo({ url: HONE })
+    } catch (error) {
+      console.error('用户登录出错~', error)
+    }
+  }
+
   shouldComponentUpdate(nextProps, nextState) {
     const { userPhone, checkCode, checked } = nextState
     const { userPhone: UP, checkCode: CC, checked: CK } = this.state
@@ -76,8 +98,8 @@ class Login extends Component {
               type="number"
               maxLength={11}
               value={userPhone}
-              onInput={this.setUserPhone}
               placeholder="请输入手机号"
+              onInput={this.setUserPhone}
               className="user-phone-input"
             />
           </View>
@@ -85,22 +107,29 @@ class Login extends Component {
             <Input
               type="number"
               maxLength={6}
-              onInput={this.setCheckCode}
               placeholder="请输入验证码"
+              onInput={this.setCheckCode}
               className="check-code-input"
             />
-            <Text className="check-code-btn">获取验证码</Text>
+            <Text className="check-code-btn" onClick={this.getCheckCode}>
+              获取验证码
+            </Text>
           </View>
-          <View className="app-clause">
+          <Label className="app-clause" for="app-clause">
+            {/* taro 的 CheckBox 在 rn 上不能触发点击 */}
             {Taro.getEnv() === Taro.ENV_TYPE.RN ? (
               <CheckBox value={checked} onChange={this.changeCheckBox} />
             ) : (
-              <Checkbox value="选中" checked={checked} onClick={this.changeCheckBox} />
+              <Checkbox
+                value="选中"
+                id="app-clause"
+                checked={checked}
+                onClick={this.changeCheckBox}
+              />
             )}
-
             <Text className="clause-text">我已阅读并同意《可视化平台用户协议》中相关条款</Text>
-          </View>
-          <Button disabled={!loginBtnState} type="primary">
+          </Label>
+          <Button disabled={!loginBtnState} type="primary" onClick={this.login}>
             登录
           </Button>
         </View>