Skip to content

肖康 / Europa-web

Go to a project
Commit 485ca146 by 孙志鹏
Options

feat: hooks-test

parent c68323ca
Inline Side-by-side
Showing with 508 additions and 76 deletions
components/Header/components/NavBig/index.tsx
......@@ -23,6 +23,9 @@ const NavBig = (props: ResponseTypeCateList) => {
}, {
url: '/contact.html',
name: '联系我们'
}, {
url: '/memberCenter.html',
name: '会员中心'
}]
const classLists = props.data?.nav_list || []
......
components/Header/components/TopH/index.tsx
......@@ -16,9 +16,9 @@ const TopH=()=>{
<div className={`${styles.con} row bothSide verCenter`}>
<div ></div>
<div className='row verCenter'>
<Link href='/login.html'>立即登录</Link>
<Link href='/login.html?type=1'>立即登录</Link>
<span className={styles.line}></span>
<Link href='/register.html'>立即注册</Link>
<Link href='/login.html?type=2'>立即注册</Link>
<span className={styles.line}></span>
<Link href='/about.html'>关于我们</Link>
<span className={styles.line}></span>
......
components/Header/index.tsx
......@@ -5,9 +5,34 @@ import { useSeoTitle } from "@/hooks/useSeoTitle"
import type {ResponseTypeCateList} from '@/components/Header/components/NavBig/types'
import useRequest from "@/hooks/useRequest"
import { useAuth } from "@/hooks/useAuth"
const handleUserInfo = () => {
if (!localStorage.getItem("userKey")) return
const {user, login} = useAuth()
const { request: brandListRequest } = useRequest<any>({ manual: false })
const userData = JSON.parse(localStorage.getItem("userKey") || '')
console.log(userData)
brandListRequest({
url: '/api/userInfo/userInfo',
method: 'get',
headers: userData
}).then(res => {
if (res?.code === 0) {
login(res.data)
console.log(user)
}
})
}
const Header = (props:ResponseTypeCateList) => {
const seoTitle=useSeoTitle()
setTimeout(() => {
handleUserInfo()
})
return (
<>
{seoTitle}
......
hooks/useAuth.tsx
import { useState, useEffect } from 'react';
import useRequest from "./useRequest"
import type { authResponseType } from '@/types/authTypes'
import { useState } from 'react';
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));
localStorage.setItem('userKey', JSON.stringify({token: userData.token, webUserId: userData.user.web_user_id}));
setUser(userData);
};
const logout = () => {
// localStorage.removeItem('user');
localStorage.removeItem('userKey');
setUser(null);
};
const getUserInfo = () => {
}
return { user, login, logout };
};
hooks/useRequest.tsx
......@@ -23,13 +23,14 @@ function useRequest<T>(options: AxiosRequestConfig & { manual?: boolean,loading?
if(options.loading!==false){
loadingRef.current()
}
const headers = requestOption?.headers
return axios.request<T>({
baseURL:API_URL,
...requestOption,
headers: localStorage.getItem("token") ? {
token: localStorage.getItem("token")
} : {}
Authorization: localStorage.getItem("token"),
...headers
} : headers
}).then((response) => {
setData(response.data)
return response.data
......
pages/login.html/index.module.scss
......@@ -18,8 +18,11 @@
display: flex;
justify-content: space-between;
.typeButton {
// padding: 10px 40px 50px;
color: #808080;
&:hover {
color: #FF9A00;
}
}
.typeButtonChoosen {
......@@ -162,6 +165,15 @@
cursor: pointer;
font-weight: bold;
}
.showMsg {
position: absolute;
left: 0;
color: #D0121B;
font-size: 12px;
line-height: 16px;
margin-top: 10px;
}
}
.ruleDialog {
......@@ -196,6 +208,10 @@
left: 50%;
transform: translate(-50%);
cursor: pointer;
&:hover {
color: #FF9A00;
}
}
}
......
pages/login.html/index.tsx
import React, { use, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import useRequest from "@/hooks/useRequest"
import style from './index.module.scss'
......@@ -6,64 +6,112 @@ 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'
import Link from 'next/link'
import { useRouter } from 'next/router';
import { useToast } from '@/hooks/useToast';
import { useAuth } from "@/hooks/useAuth"
const Page = () => {
const [loginType, setLoginType] = useState('1');
const [count, setCount] = useState('testtesttes');
const router = useRouter()
const { query } = router
const { login } = useAuth()
const [loginType, setLoginType] = useState(query.type);
const [count, setCount] = useState('');
const [password, setPassword] = useState('');
const [area, setArea] = useState('0086');
const [code, setCode] = useState('');
const [showRule, setShowRule] = useState(false);
const [showMsg, setShowMsg] = useState(false);
const [msg, setMsg] = useState('');
const {message}=useToast()
const messageRef = useRef(message);
const handleCountChange = (e:any) => setCount(e.target.value);
const handlePasswordChange = (e:any) => setPassword(e.target.value);
const handleAreaChange = (e:any) => setArea(e.target.value);
const handleCodeChange = (e:any) => setCode(e.target.value);
const handleTypeChange = (type:string) => {
setLoginType(type)
setCount('')
setShowMsg(false)
setPassword('')
setCode('')
}
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 })
useEffect(() => {
setLoginType(query.type)
}, [query])
const regex = /^1[3-9]\d{9}$/;
//发送验证码
const handleCodeSend = async(e:any) => {
if(!count) return
if(!count) return false
e.preventDefault()
setShowMsg(false)
if (!regex.test(count)) {
setMsg('手机格式不正确，请重新输入！')
setShowMsg(true)
return false
}
const param = {
send_type: '1',
send_user: count,
send_fun: 'login'
}
const response = await api.post('/auth/login', param)
console.log(response)
loginRequest({
url: '/sendMsgCode',
method: 'post',
data: param,
}).then(res => {
messageRef.current(res.msg)
})
return false
}
// 登录
const handleSubmit = async (e) => {
const handleSubmit = async (e:any) => {
e.preventDefault()
setShowMsg(false)
const param = {
contacts_tel: count,
type: loginType,
password: password,
code: code
code: code
}
const response = await loginRequest({
url: '/login',
method: 'post',
data: param,
})
if (response.code === 0) {
login(response.data)
messageRef.current(response.msg)
router.push('memberCenter.html')
}
else {
setMsg(response.msg)
setShowMsg(true)
}
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)
let doClose = true
switch (type) {
case 'Privacy':
break;
case 'user':
break;
case 'close':
doClose = false
}
setShowRule(doClose)
}
return (
<>
<TopH />
......@@ -91,8 +139,15 @@ const Page = () => {
<div>
<input type="password" value={password} className={style.loginInput} placeholder='请输入登录密码' onChange={handlePasswordChange} required />
</div>
{ showMsg && (
<>
<p className={style.showMsg}>{msg}</p>
</>
)}
<div className={style.forgetButton}>
<span className={style.cursorPointer}>忘记密码？</span>
<Link href="/passwordRecover.html">
<span className={style.cursorPointer}>忘记密码？</span>
</Link>
</div>
<button type="submit" className={style.loginButton} >登录</button>
<div className={style.registerButton}>
......@@ -102,19 +157,24 @@ const Page = () => {
) : (
<>
<div>
<select className={style.areaChoose} value={area} onChange={handleAreaChange} >
<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 />
<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>
{ showMsg && (
<>
<p className={style.showMsg}>{msg}</p>
</>
)}
<div className={style.registerRule}>
<input type='checkbox' name="ruleCheck" className={style.registerCheck} required></input>
<span className={style.ruleText}>我已阅读并同意</span>
......@@ -130,24 +190,6 @@ const Page = () => {
<>
<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>
......
pages/memberCenter.html/index.tsx 0 → 100644
const Page = () => {
return (
<>
<div>会员中心</div>
</>
)
}
export default Page
\ No newline at end of file
pages/passwordRecover.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/passwordRecover.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: center;
}
.loginInput{
width: 378px;
height: 43px;
background: #F8F8F8;
border-radius: 1px;
border: 1px solid #E2E2E2;
margin-bottom: 25px;
padding-left: 20px;
}
.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;
}
.registerLoginButton {
width: 400px;
height: 43px;
background: #FF9A00;
border-radius: 1px;
font-size: 20px;
color: #FFFFFF;
margin-top: 15px;
cursor: pointer;
}
.showMsg {
position: absolute;
left: 0;
color: #D0121B;
font-size: 12px;
line-height: 16px;
margin-top: -15px;
}
.completeBox {
display: flex;
align-items: flex-start;
justify-content: center;
height: 140px;
&::after {
display: flex;
content: "✔";
width: 75px;
height: 75px;
background: #11AA66;
color: #fff;
font-size: 60px;
border-radius: 50%;
align-items: self-end;
justify-content: center;
}
}
}
}
\ No newline at end of file
pages/passwordRecover.html/index.tsx 0 → 100644
import React, { use, useState, useRef } 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 { useRouter } from 'next/router';
import { useToast } from '@/hooks/useToast';
const Page = () => {
const [user, setUser] = useState<any>({});
const [count, setCount] = useState('');
const [password, setPassword] = useState('');
const [rePassword, setRePassword] = useState('');
const [area, setArea] = useState('0086');
const [code, setCode] = useState('');
const [step, setStep] = useState(1);
const [second, setSecond] = useState(5);
const [showMsg, setShowMsg] = useState(false);
const [msg, setMsg] = useState('');
const {message} = useToast()
const messageRef = useRef(message);
const handleCountChange = (e:any) => setCount(e.target.value);
const handlePasswordChange = (e:any) => setPassword(e.target.value);
const handleRePasswordChange = (e:any) => setRePassword(e.target.value);
const handleAreaChange = (e:any) => setArea(e.target.value);
const handleCodeChange = (e:any) => setCode(e.target.value);
const { request: loginRequest } = useRequest<any>({ manual: true })
const router = useRouter()
const regex = /^1[3-9]\d{9}$/;
//发送验证码
const handleCodeSend = async(e:any) => {
if(!count) return
e.preventDefault()
if (!regex.test(count)) {
setMsg('手机格式不正确，请重新输入！')
setShowMsg(true)
return false
}
const param = {
send_type: '1',
send_user: count,
send_fun: 'login'
}
const response = await loginRequest({
url: '/sendMsgCode',
method: 'post',
data: param,
})
messageRef.current(response.msg)
}
const handleGoLogin = () => {
router.push('login.html?type=1')
}
// 登录
const handleSubmit = async (e:any) => {
e.preventDefault()
setShowMsg(false)
switch (step) {
case 1:
const param = {
contacts_tel: count,
type: 2,
password: '',
code: code
}
const response = await loginRequest({
url: '/login',
method: 'post',
data: param,
})
if (response.code === 0) {
setUser(response.data.user)
localStorage.setItem("token", response.data.token)
messageRef.current(response.msg)
setStep(2);
} else {
setMsg(response.msg)
setShowMsg(true)
}
break;
case 2:
if (password !== rePassword) {
setMsg('两次输入密码不一致，请重新输入！')
setShowMsg(true)
return
}
const result = await handleChangePassword()
if (result?.code === 0) {
messageRef.current(result?.msg)
setStep(3);
let disSecond = second
let secondeInter = setInterval(() => {
setSecond(disSecond--)
if (disSecond < 0) {
clearInterval(secondeInter)
handleGoLogin()
return
}
}, 1000)
} else {
setMsg(result.msg)
setShowMsg(true)
}
break;
}
return false
};
const handleChangePassword = async () => {
const param = {
send_type: 1,
chang_type: 5,
new_value: password,
send_user: user?.web_user_id
}
const response = await loginRequest({
url: '/api/userInfo/changeUserInfo',
method: 'post',
data: param,
headers: {
'webUserId': user?.web_user_id
}
})
return response
}
return (
<>
<TopH />
<SearchH />
<div className={style.loginPage}>
<div className={style.loginBox}>
<div className={style.typeBox}>
<img src={`/images/step${step}.png`} alt="" />
</div>
<form onSubmit={handleSubmit}>
{ step === 1 && (
<>
<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>
{ showMsg && (
<>
<p className={style.showMsg}>{msg}</p>
</>
)}
<button type="submit" className={style.registerLoginButton}>提交</button>
</>
)}
{step === 2 && (
<>
<div>
<input type="password" value={password} className={style.loginInput} placeholder='请设置登录密码（6-20个字符）' onChange={handlePasswordChange} required />
</div>
<div>
<input type="password" value={rePassword} className={style.loginInput} placeholder='再次输入登录密码' onChange={handleRePasswordChange} required />
</div>
{ showMsg && (
<>
<p className={style.showMsg}>{msg}</p>
</>
)}
<button type="submit" className={style.registerLoginButton} >保存</button>
</>
)}
{step === 3 && (
<>
<div className={style.completeBox}></div>
<button className={style.registerLoginButton} onClick={() => handleGoLogin()}>立即登录（{second}）</button>
</>
)}
</form>
</div>
</div>
<Footer />
</>
);
};
export default Page;
types/authTypes.tsx 0 → 100644
export type authResponseType = {
web_user_id?:number;
contacts_name?:string;
contacts_tel?:string;
contacts_email?:string;
contacts_qq?:string;
sale_id?:number;
customer_id?:number;
status?:number;
create_time?:number;
wechat_union_id?:string;
password?:string;
source?:number;
web_user_account?:string;
create_time_cn?:string;
company_name?:string;
tax_no?:string;
company_address?:string;
head_img?:string;
}
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