machinery-miniapp-worker/src/components/LoginModel/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 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 (props) => {
  const { tab } = props
  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(res.person)
        Taro.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 1000
        })
        if (tab) {
          setTimeout(() => {
            Taro.redirectTo({ url: `/pages/index/index?tab=${tab}` });
          }, 1000)
        }
      }).catch((e) => {
        Taro.showToast({
          title: '手机号或者验证码不正确',
          icon: 'none',
        })
      })
    } else {
      Taro.showToast({
        title: '请输入正确的手机号和验证码',
        icon: 'none',
        duration: 2000
      })
    }
  }
  return (
    <View className='page-index' style={{ position: 'absolute', zIndex: 9999 }}>
      <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
              onClick={
                (e) => {
                  e.stopPropagation();
                  Taro.navigateTo({ url: '/pages/versionUpdate/index' });
                }}
            >文本协议/隐私政策</Text>，确认之后选择此项！
          </View>
        </View>
      </View>
    </View>
  )
}