Skip to content

肖康 / Europa-web

Go to a project
Commit c68323ca by 孙志鹏
Options

feat: 登录test

parent 164dab99
Inline Side-by-side
Showing with 460 additions and 2 deletions
axios/index.js 0 → 100644
import axios from 'axios';
import {API_URL} from '@/configReact'
// 创建 Axios 实例
const api = axios.create({
// baseURL: API_URL, // 替换为你的 API 基础 URL
baseURL: 'http://erpweb.liexindev.net', // 替换为你的 API 基础 URL
timeout: 10000, // 请求超时时间
});
// 请求拦截器
api.interceptors.request.use(
(config) => {
// 可以添加请求头或其他配置
const token = localStorage.getItem('token'); // 示例：从 localStorage 获取 token
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
api.interceptors.response.use(
(response) => {
// 处理响应数据
return response.data;
},
(error) => {
// 处理错误
const { response } = error;
if (response) {
// 根据不同的状态码处理错误
switch (response.status) {
case 401:
console.error('未授权，请登录');
break;
case 404:
console.error('请求的资源未找到');
break;
default:
console.error('请求失败:', response.data.message);
}
} else {
console.error('请求超时或网络错误');
}
return Promise.reject(error);
}
);
export default api;
components/Header/components/SearchH/index.module.scss
......@@ -6,8 +6,8 @@
margin:0 auto;
padding-top: 22px;
img{
width: 126px;
height: 126px;
width: 118px;
height: 118px;
margin-left: 54px;
margin-top: -5px;
}
......
hooks/useAuth.tsx 0 → 100644
import { useState, useEffect } from 'react';
import useRequest from "./useRequest"
import type { authResponseType } from '@/types/authTypes'
export const useAuth = () => {
const [user, setUser] = useState(null);
// 模拟从 localStorage 获取用户数据 ///api/userInfo/userInfo
// useEffect(() => {
// if (!user) {
// const { request: brandListRequest } = useRequest<authResponseType>({ manual: true })
// brandListRequest({
// url: '/api/search/searchByClass',
// method: 'get',
// }).then(res => {
// if (res?.code === 0) {
// console.log(res, 'userInfo')
// } else {
// }
// })
// }
// }, []);
const login = (userData: any) => {
// localStorage.setItem('user', JSON.stringify(userData));
setUser(userData);
};
const logout = () => {
// localStorage.removeItem('user');
setUser(null);
};
return { user, login, logout };
};
pages/login.html/index.module.min.css 0 → 100644
.mvAboutPage .banner{height:231px;background:url(../../public/images/aboutUsBanner.png) no-repeat top center}.mvAboutPage .section{background:#fff}.mvAboutPage .section .cons{padding:0 143px;padding-top:111px;padding-bottom:119px}.mvAboutPage .section .cons .left{width:267px}.mvAboutPage .section .cons .left .title{border-bottom:1px solid #E7E7E7;font-weight:bold;font-size:20px;color:#313131}.mvAboutPage .section .cons .left .title span{display:inline-block;position:relative;border-bottom:3px solid #00C69F;padding-bottom:22px;top:2px}.mvAboutPage .section .cons .left p{padding-top:22px;font-weight:400;font-size:14px;color:#000000;line-height:30px}.mvAboutPage .section .cons img{width:245px;height:245px;position:relative;top:58px}
pages/login.html/index.module.scss 0 → 100644
.loginPage{
background: #fff;
padding:80px 0;
height: 740px;
width: 100%;
border-top: 1px solid #FF9A00;
position: relative;
.loginBox {
width: 400px;
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%);
text-align: center;
.typeBox {
padding: 10px 40px 50px;
display: flex;
justify-content: space-between;
.typeButton {
// padding: 10px 40px 50px;
color: #808080;
}
.typeButtonChoosen {
color: #FF9A00;
font-weight: bold;
}
}
.loginInput{
width: 378px;
height: 43px;
background: #F8F8F8;
border-radius: 1px;
border: 1px solid #E2E2E2;
margin-bottom: 25px;
padding-left: 20px;
}
.forgetButton {
text-align: right;
width: 100%;
margin-top: -10px;
padding-right: 50px;
color: #808080;
}
.loginButton {
width: 400px;
height: 43px;
background: #FF9A00;
border-radius: 1px;
font-size: 20px;
color: #FFFFFF;
margin-top: 100px;
cursor: pointer;
}
.registerButton {
font-size: 14px;
margin-top: 15px;
}
.cursorPointer{
cursor: pointer;
}
.areaChoose {
display: inline-block;
width: 145px;
background: #F8F8F8;
border-radius: 1px;
border: 1px solid #E2E2E2;
margin-bottom: 25px;
padding-left: 10px;
height: 45px;
vertical-align: bottom;
cursor: pointer;
}
.areaInput {
display: inline-block;
width: 238px;
background: #F8F8F8;
border-radius: 1px;
border: 1px solid #E2E2E2;
margin-bottom: 25px;
padding-left: 15px;
height: 43px;
}
.codeButton {
display: inline-block;
width: 100px;
height: 45px;
background: #FF9A00;
border-radius: 1px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
vertical-align: center;
}
.registerInput{
width: 278px;
height: 43px;
background: #F8F8F8;
border-radius: 1px;
border: 1px solid #E2E2E2;
margin-bottom: 25px;
padding-left: 20px;
vertical-align: top;
}
.registerTips {
text-align: left;
width: 100%;
margin-top: -10px;
color: #808080;
}
.registerRule {
height: 20px;
width: 100%;
display: flex;
align-items: center;
justify-content: left;
margin-top: 80px;
}
.registerLoginButton {
width: 400px;
height: 43px;
background: #FF9A00;
border-radius: 1px;
font-size: 20px;
color: #FFFFFF;
margin-top: 15px;
cursor: pointer;
}
.registerCheck {
width: 20px;
height: 20px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #E0E0E0;
cursor: pointer;
margin-right: 10px;
}
.ruleText {
font-size: 12px;
color: #808080;
}
.ruleButton {
font-size: 12px;
color: #000000;
cursor: pointer;
font-weight: bold;
}
}
.ruleDialog {
position: absolute;
z-index: 9999;
width: 1120px;
height: 666px;
top: 25px;
left: 50%;
transform: translate(-50%);
box-shadow: 0px 2px 15px 0px rgba(206,206,206,0.5);
border: 1px solid #E0E0E0;
overflow: auto;
background-color: #fff;
padding: 25px 0 0 25px;
box-sizing: border-box;
.ruleContext {
width: calc(100% - 25px);
height: 576px;
overflow: auto;
padding-right: 25px;
font-size: 14px;
}
.ruleCloseButton {
width: 290px;
height: 45px;
border-radius: 1px;
border: 1px solid #E0E0E0;
position: absolute;
bottom: 25px;
left: 50%;
transform: translate(-50%);
cursor: pointer;
}
}
}
\ No newline at end of file
pages/login.html/index.tsx 0 → 100644
import React, { use, useState } from 'react';
import useRequest from "@/hooks/useRequest"
import style from './index.module.scss'
import Footer from "@/components/Footer";
import TopH from "@/components/Header/components/TopH"
import SearchH from "@/components/Header/components/SearchH"
import api from '@/axios/index'
const Page = () => {
const [loginType, setLoginType] = useState('1');
const [count, setCount] = useState('testtesttes');
const [password, setPassword] = useState('');
const [area, setArea] = useState('0086');
const [code, setCode] = useState('');
const [showRule, setShowRule] = useState(false);
const handleCountChange = (e) => setCount(e.target.value);
const handlePasswordChange = (e) => setPassword(e.target.value);
const handleAreaChange = (e) => setArea(e.target.value);
const handleCodeChange = (e) => setCode(e.target.value);
const { request: loginRequest } = useRequest<any>({ manual: true })
//发送验证码
const handleCodeSend = async(e:any) => {
if(!count) return
const param = {
send_type: '1',
send_user: count,
send_fun: 'login'
}
const response = await api.post('/auth/login', param)
console.log(response)
}
// 登录
const handleSubmit = async (e) => {
e.preventDefault()
const param = {
contacts_tel: count,
type: loginType,
password: password,
code: code
}
const response = await api.post('/login', param)
console.log(response)
return false
};
const handleTypeChange = (type:string) => {
setLoginType(type)
}
const handleRuleShow = (type:string) => {
if (type === 'Privacy') {
// 隐私 Privacy
} else {
// 用户
}
// close
setShowRule(true)
}
return (
<>
<TopH />
<SearchH />
<div className={style.loginPage}>
<div className={style.loginBox}>
<div className={style.typeBox}>
<span
className={`${style.typeButton} ${style.cursorPointer} ${(loginType === "1") && style.typeButtonChoosen}`}
onClick={() => handleTypeChange('1')}>
账号登录
</span>
<span
className={`${style.typeButton} ${style.cursorPointer} ${(loginType === '2') && style.typeButtonChoosen}`}
onClick={() => handleTypeChange('2')}>
免密登录/注册
</span>
</div>
<form onSubmit={handleSubmit}>
{loginType === "1" ? (
<>
<div>
<input type="contacts_tel" value={count} className={style.loginInput} placeholder='请输入账号' onChange={handleCountChange} required />
</div>
<div>
<input type="password" value={password} className={style.loginInput} placeholder='请输入登录密码' onChange={handlePasswordChange} required />
</div>
<div className={style.forgetButton}>
<span className={style.cursorPointer}>忘记密码？</span>
</div>
<button type="submit" className={style.loginButton} >登录</button>
<div className={style.registerButton}>
<span className={style.cursorPointer} onClick={() => handleTypeChange('2')}>立即注册</span>
</div>
</>
) : (
<>
<div>
<select className={style.areaChoose} value={area} onChange={handleAreaChange} >
<option value="0086">0086（中国大陆）</option>
<option value="00852">00852（中国香港）</option>
<option value="00853">00853（中国澳门）</option>
<option value="00886">00886（中国台湾）</option>
</select>
<input type="contacts_tel" value={count} className={style.areaInput} placeholder='请输入账号' onChange={handleCountChange} required />
</div>
<div>
<input type="password" value={code} className={style.registerInput} placeholder='请输入短信验证码' onChange={handleCodeChange} required />
<button className={style.codeButton} onClick={handleCodeSend}>发送验证码</button>
</div>
<div className={style.registerTips}>未注册的手机号将自动完成注册</div>
<div className={style.registerRule}>
<input type='checkbox' name="ruleCheck" className={style.registerCheck} required></input>
<span className={style.ruleText}>我已阅读并同意</span>
<span className={style.ruleButton} onClick={() => handleRuleShow('user')}>《用户注册协议》</span>
<span className={style.ruleButton} onClick={() => handleRuleShow('Privacy')}>《隐私保护协议》</span>
</div>
<button type="submit" className={style.registerLoginButton}>登录</button>
</>
)}
</form>
</div>
{showRule && (
<>
<div className={style.ruleDialog}>
<div className={style.ruleContext}>
本协议是您与猎芯网（简称"本站"，网址：http://www.ichunt.com, 含有“ichunt.com”域名及其子域名的网站等）服务提供者（以下简称为"猎芯网"）之间就猎芯网服务等相关事宜所订立的契约，您在使用猎芯网服务前，请您务必仔细阅读、充分理解本用户协议和隐私政策，特别是免除或限制责任的条款、法律适用和争议解决条款。一旦您使用猎芯网服务即表示您已经充分阅读、同意并接受本用户协议和隐私政策中所含的所有条款和条件。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。
第1条 本站服务条款的确认和接纳
1.1本站的各项在线服务的所有权和运作权归猎芯网所有。用户同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。用户确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有强制性规定或双方另有特别约定的，依其规定。
1.2用户点击同意本协议，即视为用户确认自己具有享受在线购买电子元器件及享受服务等相应的权利和行为能力，能够独立承担法律责任。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。
1.3本站保留在中华人民共和国大陆地区施行之法律允许的范围内独自决定拒绝服务、关闭用户账户、清除或编辑内容或取消订单的权利。
第2条 本站服务
2.1猎芯网通过互联网依法为用户提供电子元件产品信息等服务，用户在完全同意本协议及本站规定的情况下，方有权使用本站的相关服务。
第3条 用户信息
3.1用户应本着个人诚信向本站提供注册资料，用户同意其提供的注册资料真实、准确、完整、合法有效。如果用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果，并且猎芯网保留终止用户使用猎芯网各项服务的权利。
3.2用户在本站进行浏览、委托交易等活动时，涉及用户及企业真实姓名/名称、通信地址、联系方式、营业执照等隐私信息的，本站将予以严格保密，除非得到用户授权或法律另有规定，本站不会向外界披露用户及企业隐私信息。
3.3用户注册成功后，将产生用户名和密码等账户信息，您可以根据本站规定修改您的密码。用户应谨慎合理的保存、使用其用户名和密码。用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知本站。
3.4用户若将在本站注册获得的账户因用户主动泄露或因用户遭受他人攻击、诈骗等行为导致的损失及后果，本站并不承担责任，用户应通过司法、行政等救济途径向侵权行为
</div>
<button className={style.ruleCloseButton} onClick={() => handleRuleShow('close')}>关闭本页</button>
</div>
</>
)}
</div>
<Footer />
</>
);
};
export default Page;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment