109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import {useEffect, useState} from "react";
|
||
import Taro from '@tarojs/taro'
|
||
import {Radio, Button} from '@nutui/nutui-react-taro'
|
||
import {createWxLoginHandler} from '@/utils/wxLogin'
|
||
import {TenantId} from "@/utils/config";
|
||
|
||
const Login = () => {
|
||
const [isAgree, setIsAgree] = useState(false)
|
||
|
||
const reload = () => {
|
||
Taro.hideTabBar()
|
||
};
|
||
|
||
const showAuthModal = () => {
|
||
Taro.showModal({
|
||
title: '授权提示',
|
||
content: '需要获取您的用户信息',
|
||
confirmText: '去授权',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 用户点击确认，打开授权设置页面
|
||
openSetting();
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const openSetting = () => {
|
||
// Taro.openSetting：调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
|
||
Taro.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userInfo']) {
|
||
// 用户授权成功，可以获取用户信息
|
||
reload();
|
||
} else {
|
||
// 用户拒绝授权，提示授权失败
|
||
Taro.showToast({
|
||
title: '授权失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 创建微信登录处理函数
|
||
const handleGetPhoneNumber = createWxLoginHandler({
|
||
onSuccess: (user) => {
|
||
console.log('登录成功:', user);
|
||
// 可以在这里添加额外的成功处理逻辑
|
||
},
|
||
onError: (error) => {
|
||
console.error('登录失败:', error);
|
||
},
|
||
showToast: true,
|
||
navigateBack: true,
|
||
tenantId: TenantId
|
||
});
|
||
|
||
|
||
useEffect(() => {
|
||
reload()
|
||
// Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
|
||
Taro.getSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userInfo']) {
|
||
// 用户已经授权过，可以直接获取用户信息
|
||
console.log('用户已经授权过，可以直接获取用户信息')
|
||
reload();
|
||
} else {
|
||
// 用户未授权，需要弹出授权窗口
|
||
console.log('用户未授权，需要弹出授权窗口')
|
||
showAuthModal();
|
||
}
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
<div className={'flex flex-col justify-center px-5 pt-5'}>
|
||
<div className={'text-3xl text-center py-5 font-normal my-10'}>快捷登录</div>
|
||
|
||
<>
|
||
<div className={'flex justify-center my-5 rounded-lg'} style={{
|
||
backgroundColor: isAgree ? '#9a23d4' : '#c0c4cc',
|
||
}}>
|
||
<Button
|
||
type="info" size={'large'}
|
||
className={'w-full rounded-lg p-2'}
|
||
disabled={!isAgree}
|
||
open-type="getPhoneNumber"
|
||
onGetPhoneNumber={handleGetPhoneNumber}>手机号一键登录</Button>
|
||
</div>
|
||
</>
|
||
|
||
<div className={'my-2 flex 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-purple-700'}>《服务协议及隐私政策》</a>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
export default Login
|