template-10579/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 "@/config/app";
import './login.scss';
import {saveStorageByLoginUser} from "@/utils/server";
import {handleInviteRelation} from "@/utils/invite";

// 微信获取手机号回调参数类型
interface GetPhoneNumberDetail {
  code?: string;
  encryptedData?: string;
  iv?: string;
  errMsg: string;
}

interface GetPhoneNumberEvent {
  detail: GetPhoneNumberDetail;
}

interface LoginProps {
  done?: (user: any) => void;
  [key: string]: any;
}

// 登录接口返回数据类型
interface LoginResponse {
  data: {
    data: {
      access_token: string;
      user: any;
    };
  };
}

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

  /* 获取用户手机号 */
  const handleGetPhoneNumber = ({detail}: GetPhoneNumberEvent) => {
    const {code, encryptedData, iv} = detail
    Taro.login({
      success: function (loginRes) {
        if (code) {
          Taro.request({
            url: 'https://server.websoft.top/api/wx-login/loginByMpWxPhone',
            method: 'POST',
            data: {
              authCode: loginRes.code,
              code,
              encryptedData,
              iv,
              notVerifyPhone: true,
              refereeId: 0,
              sceneType: 'save_referee',
              tenantId: TenantId
            },
            header: {
              'content-type': 'application/json',
              TenantId
            },
            success: async function (res: LoginResponse) {
              saveStorageByLoginUser(res.data.data.access_token, res.data.data.user)

              // 处理邀请关系
              if (res.data.data.user?.userId) {
                try {
                  const inviteSuccess = await handleInviteRelation(res.data.data.user.userId)
                  if (inviteSuccess) {
                    Taro.showToast({
                      title: '邀请关系建立成功',
                      icon: 'success',
                      duration: 2000
                    })
                  }
                } catch (error) {
                  console.error('处理邀请关系失败:', error)
                }
              }

              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