machinery-miniapp/src/components/LoginModel/index.jsx

import { useState } from 'react'
import Taro from '@tarojs/taro'
import { getUserQcode, setUserPhone } from '@/services/login'

import { View, Image, Input, Text, Form } from '@tarojs/components'
import CustomNav from '@/components/CustomNav'
import ButtontWX from '@/components/ButtontWX'
import checkedImg from '@/assets/lolginImages/checkedImg.png'
import unselectedImg from '@/assets/lolginImages/unselectedImg.png'
import { useModel } from '@/store'


import './style.less'


export default (props) => {

  const { isLoginVisible } = props

  const { person, setPerson } = useModel('userData')


  const [countCenter, setCountCenter] = useState({
    count: 60,
    toast: false,
    show_btn: false,
    code_ts: '获取验证码'
  })

  const [checkImage, setCheckImage] = useState(false)

  const [InputPhoneValue, setInputPhoneValue] = useState('18082043755')
  const [InputCodeValue, setInputCodeValue] = useState('375501')

  const onInputPhone = (r) => {
    setInputPhoneValue(r?.detail?.value)
    console.log("🚀 ~ file: index.jsx ~ line 26 ~ InputCodeValue", InputPhoneValue)

  }
  const onInputCode = (r) => {
    setInputCodeValue(r?.detail?.value)

  }
  //获取验证码
  const getCode = (r) => {
    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
      console.log('提示')
      Taro.showToast({
        title: '手机号码有误',
        icon: 'none',
        duration: 2000
      })

    } else {
      getUserQcode({ phone: InputPhoneValue }).then(() => {
        Taro.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
      })
      let count = countCenter.count
      const timer = setInterval(() => {
        setCountCenter({
          count: (count--),
          show_btn: true,
          code_ts: count + '秒后重发'
        })
        if (count == 0) {
          setCountCenter({
            show_btn: false,
            count: 60,
            code_ts: '获取验证码'
          })
          clearInterval(timer)

        }

      }, 1000)
    }
  }



  const getUserLogin = () => {
    if (InputPhoneValue === '' || !(/^1[3456789]\d{9}$/.test(InputPhoneValue))) {
      console.log('提示')
      Taro.showToast({
        title: '手机号或验证码有误',
        icon: 'none',
        duration: 2000
      })
    } else {
      if (!checkImage) {
        Taro.showToast({
          title: '下方协议未勾选',
          icon: 'none',
          duration: 2000
        })
      } else {
        setUserPhone(person.personId, { captcha: InputCodeValue, phone: InputPhoneValue }).then((e) => {
          console.log('e', e);
          setPerson({ ...person, phone: InputPhoneValue })
          Taro.reLaunch({ url: '/pages/index/index' });
        })
        // console.log('person', person);
      }

    }

  }



  return (
    <>
      {
        isLoginVisible ? <View className='page-index  ' style={{ position: 'absolute', zIndex: '29999' }
        } >
          <View className='index-navbar'>
            <CustomNav title='登陆' home />
          </View>
          <View className='loginBackImg-box' >
            <Image src={require("@/assets/lolginImages/backLogin.png")} />

            <View className='loginhallo-text'>
              <View>您好！</View>
              <View>欢迎进入农户端小程序！</View>
            </View>
            <View>
              <View className='loginPhone-box' >
                <View className='loginPhone-box-loginPhoneView'>+86</View>
                <Input maxlength={11} placeholder='请输入手机号码' type={Number} value={InputPhoneValue} onInput={onInputPhone} />

                <ButtontWX opacity={countCenter.show_btn ? '0.7' : '11'} disabled={countCenter.show_btn} onClick={getCode} butText={countCenter.code_ts} butWidth={94} butHeight={34} butFontSize={15} butBorderRadius={10} />
              </View>
              <View className='loginPhone-box'>
                <View className='loginPhone-box-loginPhoneView'>
                  <Image style={{ width: '16px', height: '20px', margin: 'auto 2.8vw auto 2.8vw' }} src={require("@/assets/lolginImages/phoneCode.png")} />
                </View>
                <Input maxlength={10} placeholder='请输入验证码' value={InputCodeValue} onInput={onInputCode} />
              </View>
            </View>
          </View>
          <View className='BottomtButrelative'  >
            <ButtontWX onClick={getUserLogin} butText='登陆' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
          </View>
          <View className='bottom-agreement'>
            <Image src={!checkImage ? checkedImg : unselectedImg} onClick={() => { setCheckImage(!checkImage) }} />
            <View>
              请认真查看<Text style={{ color: '#CE3800' }}>文本协议/隐私政策</Text>，确认之后选择此项！
            </View>
          </View>

        </View >
          : <></>
      }
    </>
  )
}