video/src/pages/login/login.tsx

import {FC, useEffect, useRef, useState} from "react";
import {Profile} from "@/store";
import {Form, Image, Input, Text, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from './login.module.scss'
import Loading from "@/components/loading";
import Icon from "@/components/icon";
import {LoginData, userApi} from "@/api";
import {regexTel} from "@/utils/regu";
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import {loginApi, LoginParams} from "@/api/login";
import MyButton from "@/components/button/MyButton";

interface BingProps {
  code: string
  catch_key: string
}

const Bing: FC<BingProps> = ({code, catch_key}: BingProps) => {
  const [useCode, setUseCode] = useState<string>(code)
  const form = useRef<HTMLFormElement | null>(null)
  const [loading, setLoading] = useState(false)
  const {setUser, setToken, setCompany} = Profile.useContainer()

  useEffect(() => {
    form.current?.reset?.()
    setUseCode(code)
  }, [code])

  async function refreshCode() {
    try {
      const {code} = await userApi.code(catch_key)
      setUseCode(code.image)
    } catch (e) {
    }
  }

  async function Submit(data) {
    Taro.showLoading()
    setLoading(true)
    const value = data.target.value
    if (!regexTel.exec(value.phone_number)) {
      Taro.showToast({title: '手机号错误', icon: 'error'})
      setLoading(false)
      return
    }
    try {
      const res = await userApi.checkout({...value, catch_key})
      if (res) {
        setCompany(res.company)
        setUser(res.user)
        setToken(res.token)
        Taro.switchTab({url: '/pages/index/index'})
      }
    } catch (e) {
      refreshCode()
    }
    Taro.hideLoading()
    setLoading(false)
  }

  return (
    <View className='h-5 pt-6 px-3'>
      <Form className='form' onSubmit={Submit} ref={form}>
        <View className='item'>
          <View className='label'>手机号</View>
          <Input name='phone_number' placeholder={'请输入手机号'}/>
        </View>

        <View className='item'>
          <View className='label'>验证码</View>
          <View className='flex align-center'>
            <Input name='code' className='flex-1' placeholder={'请输入验证码'}/>
            <Image className='w-2 ml-1' style='height:28px' src={useCode} onClick={refreshCode}/>
          </View>
        </View>

        <MyButton className={styles.submit} formType='submit' disabled={loading}>提交</MyButton>
      </Form>
    </View>
  )
}

// function getMenuButtonBoundingClientRect() {
//   if (process.env.TARO_ENV === 'h5') {
//     return {top: 0, bottom: 44}
//   }
//   return Taro.getMenuButtonBoundingClientRect()
// }

const Login: FC = () => {
  // const {statusBarHeight = 0} = Taro.getSystemInfoSync()
  // const bbc = getMenuButtonBoundingClientRect();
  // const navHeight = bbc.bottom + (bbc.top - statusBarHeight) - statusBarHeight

  const [isLoading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [validateCode, setCode] = useState<string | null>(null)
  const [catch_key, setCatch_key] = useState<string | null>(null)
  const {setUser, setToken, setCompany} = Profile.useContainer()
  const [h5params, setH5Params] = useState<LoginParams | null>(null)

  const params = Taro.getCurrentInstance()?.router?.params as unknown as { data: LoginData }

  useEffect(() => {
    if (params?.data) {
      if (!params.data?.code) {
        setUser(params.data.user)
        setToken(params.data.token)
        setCompany(params.data.company)
        setLoading(false)
        Taro.switchTab({url: '/pages/index/index'})
        return
      }
      setCatch_key(catch_key)
      setCode(params.data.code.image)
      return
    }

    if (process.env.TARO_ENV === 'h5') {
      setLoading(true);
      loginApi.getParams().then((res) => {
        setH5Params(res);
        setError(null);
      }).catch(e => {
        setError(e?.errMsg ?? '系统内部错误')
      }).finally(() => {
        setLoading(false);
      })
    }
  }, [])

  function login() {
    if (isLoading) return;

    if (h5params == null) {
      setError('页面参数错误，请刷新页面！')
      return;
    }

    setLoading(true)

    if (process.env.TARO_ENV === 'h5') {
      location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
        "appid=" + h5params!.appid +
        "&redirect_uri=" + encodeURIComponent(h5params!.route) +
        "&response_type=code" +
        "&scope=snsapi_userinfo" +
        "#wechat_redirect";
    } else {
      Taro.login({
        success: async (res) => {
          try {
            const {code, catch_key, user, token, company} = await userApi.login(res.code)
            if (!code) {
              setUser(user)
              setToken(token)
              setCompany(company)
              setLoading(false)
              Taro.switchTab({url: '/pages/index/index'})
              return
            }
            setCatch_key(catch_key)
            setCode(code.image)
          } catch (e) {
          }
          setLoading(false)
        },
        fail: (res) => {
          setError(res.errMsg)
          setLoading(false)
        },
      })
    }
  }

  async function TESTLOGIN() {
    const res = await loginApi.testLogin()
    Taro.setStorageSync('profile', JSON.stringify(res))
    Taro.reLaunch({url: '/pages/index/index'})
  }


  return (
    <View className={styles.container}>
      <CustomPageContainer show={!!validateCode} position='bottom' onBeforeLeave={() => setCode(null)}>
        {validateCode && <Bing code={validateCode!} catch_key={catch_key!}/>}
      </CustomPageContainer>

      <View className={styles.brand}>
        <Image mode={'scaleToFill'} src="https://playedu.yaojiankang.top/favicon.ico"/>
      </View>
      <View className={styles.loginTips}>
        <Text>请完成微信授权以继续使用！</Text>
      </View>
      <MyButton onClick={login}>
        <View className={styles.submit}>
          {isLoading ? <Loading/> : null}
          <View className={styles.navbar}>
            <Text>微信授权登录</Text>
            {error ? <View className={styles.errorTips}>
              <View style={{flex: 1}}>{error}</View>
              <View>
                <Icon name={'close'} onClick={() => setError(null)}/>
              </View>
            </View> : null}
          </View>
        </View>
      </MyButton>

      {process.env.TARO_APP_LGOIN && <MyButton onClick={TESTLOGIN}>线下登录</MyButton>}
    </View>
  )
}


export default Login