template-10550/src/pages/index/Login.tsx

import {useEffect, useState} from "react";
import Taro from '@tarojs/taro'
import {Input, Radio, Button} from '@nutui/nutui-react-taro'
import {TenantId} from "@/utils/config";
import './login.scss';
import {saveStorageByLoginUser} from "@/utils/server";

const Login = (props:any) => {
  const [isAgree, setIsAgree] = useState(false)
  const [env, setEnv] = useState<string>()

  /* 获取用户手机号 */
  const handleGetPhoneNumber = ({detail}) => {
    const {code, encryptedData, iv} = detail
    Taro.login({
      success: function () {
        if (code) {
          Taro.request({
            url: 'https://server.gxwebsoft.com/api/wx-login/loginByMpWxPhone',
            method: 'POST',
            data: {
              code,
              encryptedData,
              iv,
              notVerifyPhone: true,
              refereeId: 0,
              sceneType: 'save_referee',
              tenantId: TenantId
            },
            header: {
              'content-type': 'application/json',
              TenantId
            },
            success: function (res) {
              saveStorageByLoginUser(res.data.data.access_token,res.data.data.user)
              props.done(res.data.data.user);
            }
          })
        } else {
          console.log('登录失败！')
        }
      }
    })
  }

  const reload = () => {
    Taro.hideTabBar()
    setEnv(Taro.getEnv())
  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <>
      <div style={{height: '80vh'}} className={'flex flex-col justify-center px-5'}>
        <div className={'text-3xl text-center py-5 font-normal mb-10 '}>登录</div>
        {
          env === 'WEAPP' && (
            <>
              <div className={'flex flex-col w-full text-white rounded-full justify-between items-center my-2'} style={{ background: 'linear-gradient(to right, #7e22ce, #9333ea)'}}>
                <Button open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                  授权手机号登录
                </Button>
              </div>
            </>
          )
        }
        {
          env === 'WEB' && (
            <>
              <div className={'flex flex-col justify-between items-center my-2'}>
                <Input type="text" placeholder="手机号" maxLength={11}
                       style={{backgroundColor: '#ffffff', borderRadius: '8px'}}/>
              </div>
              <div className={'flex flex-col justify-between items-center my-2'}>
                <Input type="password" placeholder="密码" style={{backgroundColor: '#ffffff', borderRadius: '8px'}}/>
              </div>
              <div className={'flex justify-between my-2 text-left px-1'}>
                <a href={'#'} className={'text-blue-600 text-sm'}
                   onClick={() => Taro.navigateTo({url: '/passport/forget'})}>忘记密码</a>
                <a href={'#'} className={'text-blue-600 text-sm'}
                   onClick={() => Taro.navigateTo({url: '/passport/setting'})}>服务配置</a>
              </div>
              <div className={'flex justify-center my-5'}>
                <Button type="info" size={'large'} className={'w-full rounded-lg p-2'} disabled={!isAgree}>登录</Button>
              </div>
              <div className={'w-full bottom-20 my-2 flex justify-center text-sm items-center text-center'}>
                没有账号？<a href={''} onClick={() => Taro.navigateTo({url: '/passport/register'})}
                            className={'text-blue-600'}>立即注册</a>
              </div>
              <div className={'my-2 flex fixed bottom-20 text-sm items-center px-1'}>
                <Radio style={{color: '#333333'}} checked={isAgree} onClick={() => setIsAgree(!isAgree)}></Radio>
                <span className={'text-gray-400'} onClick={() => setIsAgree(!isAgree)}>登录表示您已阅读并同意</span><a
                onClick={() => Taro.navigateTo({url: '/passport/agreement'})}
                className={'text-blue-600'}>《服务协议及隐私政策》</a>
              </div>
            </>
          )
        }
      </div>
    </>
  )
}
export default Login