283 lines
8.4 KiB
TypeScript
283 lines
8.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, Button, Image } from '@tarojs/components';
|
|
import Taro, { useRouter } from '@tarojs/taro';
|
|
import { wechat_auth_login, save_login_state, check_login_status } from '@/services/loginService';
|
|
import './index.scss';
|
|
|
|
const LoginPage: React.FC = () => {
|
|
const [is_loading, set_is_loading] = useState(false);
|
|
const [agree_terms, set_agree_terms] = useState(false);
|
|
const [show_terms_layer, set_show_terms_layer] = useState(false);
|
|
const [pending_login_type, set_pending_login_type] = useState<'wechat' | 'phone' | null>(null); // 记录待执行的登录类型
|
|
const [pending_phone_event, set_pending_phone_event] = useState<any>(null); // 记录微信登录的事件数据
|
|
const { params: { redirect } } = useRouter();
|
|
|
|
|
|
|
|
|
|
|
|
// 执行微信登录的核心逻辑
|
|
const execute_wechat_login = async (e: any) => {
|
|
// 检查是否获取到手机号
|
|
if (!e.detail || !e.detail.code) {
|
|
Taro.showToast({
|
|
title: '获取手机号失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
set_is_loading(true);
|
|
try {
|
|
// 传递手机号code给登录服务
|
|
const response = await wechat_auth_login(e.detail.code);
|
|
if (response.success) {
|
|
save_login_state(response.token!, response.user_info!);
|
|
|
|
setTimeout(() => {
|
|
if (redirect) {
|
|
Taro.redirectTo({ url: decodeURIComponent(redirect) });
|
|
} else {
|
|
Taro.redirectTo({ url: '/main_pages/index' });
|
|
}
|
|
}, 10);
|
|
} else {
|
|
Taro.showToast({
|
|
title: response.message,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
} catch (error) {
|
|
Taro.showToast({
|
|
title: '登录失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
} finally {
|
|
set_is_loading(false);
|
|
}
|
|
};
|
|
|
|
// 微信授权登录
|
|
const handle_wechat_login = async (e: any) => {
|
|
if (!agree_terms) {
|
|
// 记录待执行的登录类型和事件数据
|
|
set_pending_login_type('wechat');
|
|
set_pending_phone_event(e);
|
|
set_show_terms_layer(true);
|
|
Taro.showToast({
|
|
title: '请先同意用户协议',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 如果已同意条款，直接执行登录
|
|
await execute_wechat_login(e);
|
|
};
|
|
|
|
// 执行手机号登录的核心逻辑
|
|
const execute_phone_login = () => {
|
|
// 跳转到验证码页面
|
|
Taro.navigateTo({
|
|
url: `/login_pages/verification/index?redirect=${redirect}`
|
|
});
|
|
};
|
|
|
|
// 手机号验证码登录
|
|
const handle_phone_login = async () => {
|
|
if (!agree_terms) {
|
|
// 记录待执行的登录类型
|
|
set_pending_login_type('phone');
|
|
set_show_terms_layer(true);
|
|
Taro.showToast({
|
|
title: '请先同意用户协议',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 如果已同意条款，直接执行登录
|
|
execute_phone_login();
|
|
};
|
|
|
|
// 同意协议并关闭浮层，继续执行未完成的登录
|
|
const handle_agree_terms = () => {
|
|
set_agree_terms(true);
|
|
set_show_terms_layer(false);
|
|
|
|
// 根据待执行的登录类型，继续执行登录
|
|
if (pending_login_type === 'wechat' && pending_phone_event) {
|
|
// 继续执行微信登录
|
|
execute_wechat_login(pending_phone_event);
|
|
// 清空待执行状态
|
|
set_pending_login_type(null);
|
|
set_pending_phone_event(null);
|
|
} else if (pending_login_type === 'phone') {
|
|
// 继续执行手机号登录
|
|
execute_phone_login();
|
|
// 清空待执行状态
|
|
set_pending_login_type(null);
|
|
}
|
|
};
|
|
|
|
// 切换协议同意状态（复选框用）
|
|
const handle_toggle_terms = () => {
|
|
set_agree_terms(!agree_terms);
|
|
};
|
|
|
|
// 查看协议
|
|
const handle_view_terms = (type: string = 'terms') => {
|
|
Taro.navigateTo({
|
|
url: `/login_pages/terms/index?type=${type}`
|
|
});
|
|
};
|
|
|
|
// 点击浮层外部关闭浮层
|
|
const handle_overlay_click = () => {
|
|
set_show_terms_layer(false);
|
|
};
|
|
|
|
// 点击浮层内部阻止事件冒泡
|
|
const handle_layer_click = (e: any) => {
|
|
e.stopPropagation();
|
|
};
|
|
|
|
return (
|
|
<View className="login_page">
|
|
<View className="background_image">
|
|
<Image
|
|
className="bg_img"
|
|
src={require('@/static/login/login_bg.jpg')}
|
|
mode="aspectFill"
|
|
/>
|
|
<View className="bg_overlay"></View>
|
|
</View>
|
|
|
|
{/* 主要内容 */}
|
|
<View className="login_main_content">
|
|
{/* 品牌区域 */}
|
|
<View className="brand_section">
|
|
<View className="logo_container" >
|
|
|
|
</View>
|
|
|
|
<View className="slogan_container">
|
|
|
|
</View>
|
|
</View>
|
|
|
|
{/* 登录按钮区域 */}
|
|
<View className="login_section">
|
|
{/* 微信快捷登录 */}
|
|
<Button
|
|
className={`login_button wechat_button ${is_loading ? 'loading' : ''}`}
|
|
openType="getPhoneNumber"
|
|
onGetPhoneNumber={handle_wechat_login}
|
|
disabled={is_loading}
|
|
>
|
|
<View className="wechat_icon">
|
|
<Image className="wechat_logo" src={require('@/static/login/wechat_icon.svg')} />
|
|
</View>
|
|
<Text className="button_text">
|
|
{is_loading ? '登录中...' : '微信快捷登录'}
|
|
</Text>
|
|
</Button>
|
|
|
|
{/* 手机号验证码登录 */}
|
|
<Button
|
|
className="login_button phone_button"
|
|
onClick={handle_phone_login}
|
|
>
|
|
<View className="phone_icon">
|
|
<Image className="phone_logo" src={require('@/static/login/phone_icon.svg')} />
|
|
</View>
|
|
<Text className="button_text">手机号验证码登录</Text>
|
|
</Button>
|
|
|
|
{/* 用户协议复选框 */}
|
|
<View className="terms_checkbox_section">
|
|
<View className="checkbox_container" onClick={handle_toggle_terms}>
|
|
<View className={`checkbox ${agree_terms ? 'checked' : ''}`}>
|
|
{agree_terms && <View className="checkmark"></View>}
|
|
</View>
|
|
</View>
|
|
<View className="terms_text_container">
|
|
<Text className="terms_text">我已阅读、理解并接受以下规定</Text>
|
|
<Text
|
|
className="terms_link"
|
|
onClick={() => handle_view_terms('terms')}
|
|
>
|
|
《开场的条款和条件》
|
|
</Text>
|
|
<Text
|
|
className="terms_link"
|
|
onClick={() => handle_view_terms('binding')}
|
|
>
|
|
《开场与微信号绑定协议》
|
|
</Text>
|
|
<Text
|
|
className="terms_link"
|
|
onClick={() => handle_view_terms('privacy')}
|
|
>
|
|
《隐私权政策》
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 底部条款浮层遮罩 */}
|
|
{show_terms_layer && (
|
|
<View className="terms_overlay" onClick={handle_overlay_click}>
|
|
{/* 底部条款浮层 */}
|
|
<View className="terms_float_layer" onClick={handle_layer_click}>
|
|
{/* 浮层标题 */}
|
|
<View className="float_title">
|
|
<Text className="title_text">请阅读并同意以下条款</Text>
|
|
</View>
|
|
|
|
{/* 条款列表 */}
|
|
<View className="terms_list">
|
|
<Text
|
|
className="terms_item"
|
|
onClick={() => handle_view_terms('terms')}
|
|
>
|
|
《开场的条款和条件》
|
|
</Text>
|
|
<Text
|
|
className="terms_item"
|
|
onClick={() => handle_view_terms('binding')}
|
|
>
|
|
《开场与微信号绑定协议》
|
|
</Text>
|
|
<Text
|
|
className="terms_item"
|
|
onClick={() => handle_view_terms('privacy')}
|
|
>
|
|
《隐私权政策》
|
|
</Text>
|
|
</View>
|
|
|
|
{/* 同意按钮 */}
|
|
<Button
|
|
className={`agree_button ${agree_terms ? 'agreed' : ''}`}
|
|
onClick={handle_agree_terms}
|
|
>
|
|
{agree_terms ? '已同意' : '同意并继续'}
|
|
</Button>
|
|
|
|
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|