Skip to content

ds147000 / react-project-storage

Go to a project
Commit 55039fdd by GGbong
Options

Merge branch 'master' of http://git-b2bwings.lexing360.com/frontend_b2bwings/b2b-wings-web-service

2 parents f8ae9f9e 31f4a48b
Inline Side-by-side
Showing with 372 additions and 7 deletions
package-lock.json
......@@ -8056,6 +8056,11 @@
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
},
"js-sha256": {
"version": "0.9.0",
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-sha256/-/js-sha256-0.9.0.tgz",
"integrity": "sha1-C4msFmWD6R75EjZEvTxTNM6dCWY="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-tokens/-/js-tokens-4.0.0.tgz",
......
package.json
......@@ -10,6 +10,7 @@
"@testing-library/user-event": "^7.2.1",
"antd": "^4.4.2",
"axios": "^0.19.2",
"js-sha256": "^0.9.0",
"loading-bar": "^0.2.7",
"react": "^16.13.1",
"react-dom": "^16.13.1",
......
src/api/login.js 0 → 100644
import http from '@/libs/fetch'
export const login = (data) => {
return http.request({
url: '/user/sysLogin/login',
method: 'post',
data
})
}
export const sendCode = (data) => {
return http.request({
url: '/user/sysLogin/' + data.type + '/captcha?phone=' + data.phone,
data
})
}
\ No newline at end of file
src/config/index.js
......@@ -136,7 +136,11 @@ const APP = {
return types['t'+val]?types['t'+val]:''
},
/**@description 其他菜单的域名*/
othreDomain: getProcessValue('http://seller-dev.b2bwings.com', 'http://seller-dev.b2bwings.com', 'https://seller.b2bwings.com')
othreDomain: getProcessValue('http://seller-dev.b2bwings.com', 'http://seller-dev.b2bwings.com', 'https://seller.b2bwings.com'),
// 注册链接
registerLink: 'http://xbd-dev.b2bwings.com/register?callbackUrl=',
// 找回密码链接
findPasswordLink: 'http://xbd-dev.b2bwings.com/findPassword?callbackUrl='
}
export default { USER_CONFIG, APP }
......
src/libs/http-request.js
......@@ -134,7 +134,7 @@ class HttpRequest {
*/
saveLoginInfo(res) {
store.dispatch.user.SYSTEM_LOGIN(res)
store.dispatch.route.change(res.menu)
    store.dispatch.route.change(res.menu)
}
}
......
src/view/login/index.js
import React from 'react'
import React, { useState, useEffect } from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { UserOutlined, UnlockOutlined, MessageOutlined } from '@ant-design/icons'
import { APP } from '@/config'
import { sha256 } from 'js-sha256'
import { login, sendCode } from '@/api/login'
import './index.scss'
function Login() {
const PassWordLoginItem = ({ checkPhone }) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined />}
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '登录密码不能为空' }]}
>
<Input.Password
placeholder="请输入登录密码"
prefix={<UnlockOutlined />}
/>
</Form.Item>
<p style={{ position: 'relative', height: 22 }}>
<a href={APP.findPasswordLink + window.location.origin + '/login'} className="forget-password">忘记密码?</a>
</p>
</>
)
const CodeLoginItem = ({countDown, btnDisable, getCode, checkPhone, btnLoading}) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined/>}
/>
</Form.Item>
<Form.Item
name="code"
rules={[{ required: true, message: '验证码不能为空' }]}
>
<section style={{display: 'flex'}}>
<Input
placeholder="请输入验证码"
prefix={<MessageOutlined/>}
/>
<Button
loading={btnLoading && countDown <= 0}
disabled={btnDisable || countDown > 0}
onClick={getCode}
className="btn-login-code"
>
{countDown <= 0 ? '获取验证码' : (countDown + 's')}
</Button>
</section>
</Form.Item>
</>
)
function LoginPage({ history }) {
const [tabKey, setTabKey] = useState(0)
// 获取验证码按钮 display
const [btnDisable, setBtnDisable] = useState(true)
// 获取验证码按钮 loading
const [btnLoading, setBtnLoading] = useState(false)
// 获取验证码按钮 倒计时
const [countDown, setCountDown] = useState(0)
// 登录按钮 loading
let [loginbtnLoading, setLoginbtnLoading] = useState(false)
const [form] = Form.useForm()
const onFinish = (data) => {
console.log('登陆',data)
let { phone, password, code } = data
const body = {
code,
loginAccount: phone,
loginPassword: password ? sha256(password) : '',
applyPlatform: [0],
applyCarrier: [0],
operationChannel: 0
}
setLoginbtnLoading(true)
login(body).then(res => {
console.log(res)
setLoginbtnLoading(false)
}).catch(err => {
setLoginbtnLoading(false)
message.error(err)
}).finally(() => {
console.log(111)
})
}
// 切换登陆方式
const changeLoginTabs = (num) => {
setTabKey(num)
}
// 获取验证码返回结果处理函数
function handleGetCode() {
let count = 60
let timer = null
timer = setInterval(() => {
setCountDown(count)
count--;
if (count < 0) {
clearInterval(timer)
}
}, 1000)
}
// 获取验证码
const getCode = () => {
let phone = form.getFieldsValue().phone
setBtnLoading(true)
const body = {
type: 'LOGIN',
phone
}
sendCode(body).then(res => {
setBtnLoading(false)
message.success('发送成功');
handleGetCode()
}).catch(err => {
setBtnLoading(false)
message.error(err)
console.error(err)
})
}
// 校验手机号码
let checkPhone = (rule, value) => {
const regular = /^1[3456789]\d{9}$/
if (!regular.test(value)) {
setBtnDisable(true)
return Promise.reject("手机号码格式错误")
} else {
setBtnDisable(false)
return Promise.resolve();
}
}
return (
<div className="login-box">
这里是登陆
<header className="login-header">
<section className='logo-box'>
<img src={require('./images/xbd_logo.png')} width="102" height="36" alt="信巴迪logo"/>
<span className="platform-name">卖家工作台</span>
</section>
</header>
<div className="content-wrap">
<div className="content">
<section className="login-bg"></section>
<section className="login-controller-box">
<section className="tabs-box">
<span className={`tabs-item ${tabKey===0&&'tab-active'}`} onClick={()=>{changeLoginTabs(0)}}>密码登录</span>
<span className={`tabs-item ${tabKey===1&&'tab-active'}`} onClick={()=>{changeLoginTabs(1)}}>验证码登录</span>
</section>
<Form
form={form}
onFinish={onFinish}
initialValues={{ remember: true }}
className="login-form"
>
{
tabKey===0?<PassWordLoginItem checkPhone={checkPhone} />:(
<CodeLoginItem
countDown={countDown}
btnDisable={btnDisable}
getCode={getCode}
checkPhone={checkPhone}
btnLoading={btnLoading}
/>
)
}
<Form.Item name="btnSubmit" style={{marginBottom:16}}>
<Button
type="primary"
style={{ width: '100%', height: 48, fontSize: 18 }}
htmlType="submit"
loading={loginbtnLoading}
>登录</Button>
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
style={{marginBottom: 20}}
>
<Checkbox style={{ userSelect: 'none' }} noStyle>记住账号</Checkbox>
</Form.Item>
<p style={{ 'textAlign': 'center' }}>
还没有账号？
<a
href={APP.registerLink + window.location.origin + '/login'}
style={{
color: '#1892FF',
cursor: 'pointer',
userSelect: 'none'
}}
>
马上去注册
</a>
</p>
</Form>
</section>
</div>
</div>
<footer>
<section className="footer-info-box">
</section>
</footer>
</div>
)
}
export default Login
\ No newline at end of file
export default LoginPage
\ No newline at end of file
src/view/login/index.scss
.login-box {
min-height: 100vh;;
background-color: #EBEBEB;
}
.login-header {
padding-left: 18.75%;
display: flex;
align-items: center;
height: 60px;
background-color: #1890FF;
.logo-box {
display: flex;
align-items: center;
color: #fff;
}
.platform-name {
margin-left: 16px;
padding-left: 12px;
border-left: 1px solid #fff;
font-size: 20px;
line-height: 28px;
}
}
.content-wrap {
background-color: #F5F6F7;
}
.content {
margin: 0 auto;
padding: 99px 0;
display: flex;
align-items: center;
width: 1024px;
.login-bg {
margin-right: 52px;
width: 581px;
height: 504px;
background-image: url(./images/login-bg.png);
background-position: 0 center;
background-repeat: no-repeat;
background-size: contain;
}
.login-controller-box {
padding: 0 33px;
width: 390px;
height: 414px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 28px -18px
}
.tabs-box {
margin-bottom: 25px;
display: flex;
align-items: center;
font-size: 16px;
line-height: 24px;
border-bottom: 1px solid #D7D7D7;
}
.tabs-item {
position: relative;
padding: 14px 0;
flex: 1;
text-align: center;
color: #C0C5CC;
cursor: pointer;
transition: all .25s ease-in;
&::after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -1px;
width: 2em;
height: 2px;
margin-left: -1em;
transform: scale(0);
transition: transform .25s ease-in;
}
&:hover{
font-size: 20px;
color: #1892FF;
}
}
.tab-active {
font-size: 20px;
color: #1892FF;
&::after {
transform: scale(1);;
background-color: #1892FF;
}
}
// 表单
.login-form {
.ant-input-affix-wrapper {
height: 48px;
}
.anticon {
font-size: 20px;
}
.ant-input {
font-size: 16px;
}
.btn-login-code {
margin-left: 10px;
height: 48px;
min-width: 120px;
}
.forget-password {
position: absolute;
right: 0;
top: -16px;
}
}
}
.footer-info-box {
}
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!