添加验证码组件

.gitignore

@@ -3,3 +3,4 @@ dist/
 .rn_temp/
 node_modules/
 .DS_Store
+package-lock.json

package.json

@@ -4,12 +4,12 @@
   "private": true,
   "description": "",
   "scripts": {
-    "build:weapp": "npx taro build --type weapp",
-    "build:swan": "npx taro build --type swan",
-    "build:alipay": "npx taro build --type alipay",
-    "build:tt": "npx taro build --type tt",
-    "build:h5": "npx taro build --type h5",
-    "build:rn": "npx taro build --type rn",
+    "build:weapp": "npx @tarojs/cli build --type weapp",
+    "build:swan": "npx @tarojs/cli build --type swan",
+    "build:alipay": "npx @tarojs/cli build --type alipay",
+    "build:tt": "npx @tarojs/cli build --type tt",
+    "build:h5": "npx @tarojs/cli build --type h5",
+    "build:rn": "npx @tarojs/cli build --type rn",
     "dev:weapp": "npm run build:weapp -- --watch",
     "dev:swan": "npm run build:swan -- --watch",
     "dev:alipay": "npm run build:alipay -- --watch",
@@ -31,8 +31,9 @@
     "@tarojs/taro-swan": "1.2.13",
     "@tarojs/taro-tt": "1.2.13",
     "@tarojs/taro-weapp": "1.2.13",
-    "nervjs": "^1.3.9",
     "nerv-devtools": "^1.3.9",
+    "nervjs": "^1.3.9",
+    "npm": "^6.8.0",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"

src/components/Vcode/Vcode.scss

+.Vcode.Counting {
+  color: #999;
+}

src/components/Vcode/Vcode.tsx

+import { ComponentClass } from 'react';
+import Taro, { Component } from '@tarojs/taro';
+import { View, Text, Image } from '@tarojs/components';
+
+import './Vcode.scss';
+
+type PageOwnProps = {
+  text: string;
+};
+type PageState = {
+  defaultText: string;
+  counting: boolean;
+  count: number;
+  timer: number | null;
+};
+
+interface Vcode {
+  props: PageOwnProps;
+  state: PageState;
+}
+
+class Vcode extends Component {
+  static externalClasses = ['vcode-classname'];
+
+  constructor(props: PageOwnProps) {
+    super(props);
+    this.state = {
+      defaultText: props.text ? props.text : '获取验证码',
+      counting: false,
+      count: 10,
+      timer: null,
+    };
+  }
+
+  componentWillUnmount() {
+    const { timer } = this.state;
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }
+
+  countStart() {
+    this.setState({
+      counting: true,
+    });
+    this.countDown();
+  }
+
+  countDown() {
+    const { count } = this.state;
+    if (count == 1) {
+      this.setState({
+        counting: false,
+      });
+    } else {
+      const timer = setTimeout(() => {
+        this.countDown();
+      }, 1000);
+      this.setState({
+        count: count - 1,
+        timer: timer,
+      });
+    }
+  }
+
+  render() {
+    const { defaultText, counting, count } = this.state;
+    return counting ? (
+      <View className='vcode-classname Vcode Counting'>{`${count}S`}</View>
+    ) : (
+      <View className='vcode-classname Vcode' onClick={this.countStart}>
+        {defaultText}
+      </View>
+    );
+  }
+}
+
+export default Vcode as ComponentClass<PageOwnProps, PageState>;

src/pages/Login/Login.scss

@@ -21,6 +21,7 @@
     color: #fff;
     font-size: 40px;
   }
+  .Login-vcodeBox,
   .Login-input {
     height: 96px;
     line-height: 96px;
@@ -31,14 +32,44 @@
     padding-left: 52px;
     margin-bottom: 24px;
   }
+  .Login-input-placeholder {
+    color: #fff;
+  }
+  .Login-vcodeBox {
+    display: flex;
+    padding: 0;
+    .Login-input {
+      flex: 1;
+    }
+    .Login-Vcode {
+      position: relative;
+      width: 268px;
+      color: #456beb;
+      text-align: center;
+    }
+    .Login-Vcode::before {
+      content: '';
+      position: absolute;
+      left: 0px;
+      top: 34px;
+      height: 28px;
+      border-left: 1px solid #eee;
+    }
+  }
   .Login-regist {
     text-align: right;
     color: #c2cef9;
     margin-bottom: 52px;
   }
+  .Login-regist-btn {
+    color: #fff;
+  }
   .Login-btn {
     background-color: #fff;
     color: #456beb;
     border-radius: 24px;
   }
+  .Login-btn.button-hover {
+    background-color: #eee;
+  }
 }

src/pages/Login/Login.tsx

@@ -3,6 +3,7 @@ import Taro, { Component, Config } from '@tarojs/taro';
 import { View, Button, Text, Input } from '@tarojs/components';
 import { connect } from '@tarojs/redux';
 
+import Vcode from '../../components/Vcode/Vcode';
 import './Login.scss';
 
 type PageStateProps = {
@@ -12,7 +13,12 @@ type PageStateProps = {
 type PageOwnProps = {};
 
 type PageState = {
-  loadingText: string;
+  loginWay: string;
+  vcode: string;
+  account: string;
+  pwd: string;
+  tel: string;
+  code: string;
 };
 
 type IProps = PageStateProps & PageOwnProps;
@@ -33,24 +39,83 @@ class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      loadingText: '载入中...',
+      loginWay: 'tel',
+      vcode: '',
+      account: '',
+      pwd: '',
+      tel: '',
+      code: '',
     };
   }
-
-  componentWillMount() {}
+  toggleLoginWay(state: string) {
+    this.setState({
+      loginWay: state,
+    });
+  }
 
   render() {
-    const { loadingText } = this.state;
+    const { loginWay } = this.state;
     return (
       <View className='Login'>
         <View className='Login-title'>欢迎来到多彩校园</View>
         <View className='Login-loginWay-tab'>
-          <Text className='Login-loginWay-item active'>账号登录</Text>
-          <Text className='Login-loginWay-item'>手机号登录</Text>
+          <Text
+            className={`Login-loginWay-item ${
+              loginWay === 'account' ? 'active' : ''
+            }`}
+            onClick={() => this.toggleLoginWay('account')}
+          >
+            账号登录
+          </Text>
+          <Text
+            className={`Login-loginWay-item ${
+              loginWay === 'tel' ? 'active' : ''
+            }`}
+            onClick={() => this.toggleLoginWay('tel')}
+          >
+            手机号登录
+          </Text>
+        </View>
+        {loginWay === 'account' ? (
+          <View>
+            <Input
+              className='Login-input'
+              placeholder-class='Login-input-placeholder'
+              placeholder='请输入账号手机号'
+            />
+            <Input
+              className='Login-input'
+              placeholder-class='Login-input-placeholder'
+              password
+              placeholder='请输入密码'
+            />
+          </View>
+        ) : (
+          <View>
+            <Input
+              className='Login-input'
+              type='number'
+              placeholder-class='Login-input-placeholder'
+              placeholder='请输入手机号'
+              maxLength={11}
+            />
+            <View className='Login-vcodeBox'>
+              <Input
+                className='Login-input'
+                type='number'
+                placeholder-class='Login-input-placeholder'
+                placeholder='请输入验证码'
+                maxLength={6}
+              />
+              <Vcode vcode-classname='Login-Vcode' text='获取验证码' />
+            </View>
+          </View>
+        )}
+
+        <View className='Login-regist'>
+          还没有账号？
+          <Text className='Login-regist-btn'>注册</Text>
         </View>
-        <Input className='Login-input' placeholder='请输入账号手机号' />
-        <Input className='Login-input' password placeholder='请输入密码' />
-        <View className='Login-regist'>还没有账号？注册</View>
         <Button className='Login-btn'>登录</Button>
       </View>
     );