machinery-miniapp-worker/src/pages/Login/index.jsx

import Taro from "@tarojs/taro"
import { useState } from "react"
import { useModel } from '@/store'
import { View, Image, Input, Text, Button } from "@tarojs/components"
import CustomNav from "@/components/CustomNav"
import MyButton from "@/components/MyButton"
import {updatePhone, setQcode } from '@/services/login'
import withLayout from '@/layouts'
import bgi from '@/assets/login/loginImg.png'
import vCode from '@/assets/login/VerificationCode.png'
import checkedImg from '@/assets/login/checkedImg.png'
import unChecked from '@/assets/login/unChecked.png'

import './style.less'

export default withLayout((props) => {
  const { router } = props
  let { tab } = router.params
  const { person,setPerson } = useModel('person')
  const [agreement,setAgreement]=useState(false)
  const [phone,setPhone]=useState()
  const [qCode,setqCode]=useState()
  const [qCodeBtn,setqCodeBtn]=useState('获取验证码')
  const [dsb,setDsb]=useState(false)
  const handlePhone=(e)=>{
    if (e.detail.value) {
      setPhone(e.detail.value)
    }
  }
  const changeqCode=()=>{
    if (rulePhone(phone)) {
      setQcode({phone:phone}).then((res)=>{
        Taro.showToast({
          title: '发送成功，请注意查收',
          icon: 'none',
          duration: 2000
        })
      }).catch(() => {
        Taro.showToast({
          title: '网络异常, 请刷新小程序重试',
          icon: 'none',
        })
      })

      let time=60
      setDsb(true)
      // 调接口
      let timer = setInterval(() => {
        time-- //倒计时递减
        setqCodeBtn(`${time}s后重新发送`)
        if (time === 0) {
          setDsb(false)
          setqCodeBtn('重新发送')
          time=60
          clearInterval(timer)
        }
      }, 1000)

    }
  }
  const rulePhone=(val)=>{
    if (!/^1[0-9]{10}$/.test(val)) {
      Taro.showToast({
        title: '请输入正确的11位手机号',
        icon: 'none',
        duration: 2000
      })
      return false
    } else return true
  }
  const handleqCode=(e)=>{
    if (e.detail.value) {
      setqCode(e.detail.value)
    }
  }
  const onLogin = () => { 
    if (rulePhone(phone)&&qCode) {
      if (!agreement) {
        Taro.showToast({
          title: '请确认下方协议',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      // 登录
      updatePhone(person.personId,{phone:phone,captcha:qCode}).then((res)=>{
        setPerson({...person,phone:phone})
        Taro.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 1000
        })
        if (tab) {
          setTimeout(()=>{
            Taro.redirectTo({ url: `/pages/index/index?tab=${tab}` });
          },1000)
        }
      }).catch((e) => {
        console.log(e.message)
        Taro.showToast({
          title: '手机号或者验证码不正确',
          icon: 'none',
        })
      })
    } else {
      Taro.showToast({
        title: '请输入正确的手机号和验证码',
        icon: 'none',
        duration: 2000
      })
    }
  }
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav home title='登录' />
      </View>
      <Image src={bgi} className='loginBgi' />
      <View className='index-container loginContent'>
        <View className='title1'>您好！</View>
        <View className='title2'>欢迎进入农机手端小程序！</View>
        <View className='loginCell'>
          <View className='loginHeader'>+86</View>
          <Input type='number' maxlength='11' placeholder='请输入手机号' value={phone} onInput={handlePhone} />
          <Button  className={['loginAction',dsb?'qCodeActive':'']} disabled={dsb} onClick={dsb?'':changeqCode}>{qCodeBtn}</Button>
        </View>
        <View className='loginCell'>
          <View className='loginHeader'>
            <Image src={vCode} className='headerImg' />
          </View>
          <Input type='text' value={qCode} onInput={handleqCode} placeholder='请输入验证码' />
        </View>
        <View className='footer'>
          <MyButton value='登录' onClick={onLogin} />
          <View className='agreement' onClick={()=>setAgreement(!agreement)}>
              <Image src={agreement?checkedImg:unChecked} className='footerCheckbox' />
              请认真查看<Text>文本协议/隐私政策</Text>，确认之后选择此项！
          </View>
        </View>
      </View>
    </View>
  )
})