Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
CivWeb
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
CivWeb
Commits
6a0663b0
Commit
6a0663b0
authored
5 months ago
by
徐乐
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:增加五粮液登录页
parent
5e688ed5
Pipeline
#94327
passed with stages
Changes
6
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
530 additions
and
0 deletions
+530
-0
web5Config.json
public/web5Config.json
+3
-0
index.js
src/pages/user/login/index.js
+2
-0
2.png
src/pages/user/login/template/project/wuliangye/images/2.png
+0
-0
五粮液背景.png
...es/user/login/template/project/wuliangye/images/五粮液背景.png
+0
-0
index.js
src/pages/user/login/template/project/wuliangye/index.js
+264
-0
index.less
src/pages/user/login/template/project/wuliangye/index.less
+261
-0
No files found.
public/web5Config.json
View file @
6a0663b0
...
...
@@ -53,6 +53,9 @@
},
{
"title"
:
"项目 - 乐山"
},
{
"title"
:
"项目 - 五粮液"
}
]
}
This diff is collapsed.
Click to expand it.
src/pages/user/login/index.js
View file @
6a0663b0
...
...
@@ -61,6 +61,7 @@ import DeqingLogin from './template/project/deqing';
import
RuiyunLogin
from
'./template/project/ruiyun'
;
import
DawuLogin
from
'./template/project/dawu'
;
import
LeshanLogin
from
'./template/project/leshan'
;
import
WuliangyeLogin
from
'./template/project/wuliangye'
;
import
{
AppInitState
}
from
'../../../render'
;
const
LoginTemplate
=
{
'新春.html'
:
baseLoginNewYear
,
...
...
@@ -119,6 +120,7 @@ const LoginTemplate = {
'项目 - 瑞云.html'
:
RuiyunLogin
,
'项目 - 大悟.html'
:
DawuLogin
,
'项目 - 乐山.html'
:
LeshanLogin
,
'项目 - 五粮液.html'
:
WuliangyeLogin
,
default
:
BaseLogin
,
};
/* eslint-disable */
...
...
This diff is collapsed.
Click to expand it.
src/pages/user/login/template/project/wuliangye/images/2.png
0 → 100644
View file @
6a0663b0
This diff was suppressed by a .gitattributes entry.
This diff is collapsed.
Click to expand it.
src/pages/user/login/template/project/wuliangye/images/五粮液背景.png
0 → 100644
View file @
6a0663b0
This diff was suppressed by a .gitattributes entry.
This diff is collapsed.
Click to expand it.
src/pages/user/login/template/project/wuliangye/index.js
0 → 100644
View file @
6a0663b0
/*
* 功能名称: 五粮液登录页
* 功能路径:
* 功能参数:
*/
import
React
,
{
forwardRef
,
useEffect
,
useRef
,
useState
}
from
'react'
;
import
$
from
'jquery'
;
import
{
Modal
,
Popover
}
from
'antd'
;
import
QRCode
from
'qrcode.react'
;
import
{
Helmet
,
HelmetProvider
}
from
'react-helmet-async'
;
import
{
connect
}
from
'react-redux'
;
import
{
useHistory
,
withRouter
}
from
'@wisdom-utils/runtime'
;
import
{
actionCreators
}
from
'@/containers/App/store'
;
import
classnames
from
'classnames'
;
import
moment
from
'moment'
;
import
QueueAnim
from
'rc-queue-anim'
;
import
defaultSetting
from
'../../../../../../../config/defaultSetting'
;
import
LoginAction
from
'../../../login'
;
import
styles
from
'./index.less'
;
import
Account
from
'../../../js/useAccount'
;
import
{
defaultApp
}
from
'../../../../../../micro'
;
import
logo
from
'./images/2.png'
;
import
bg
from
'./images/五粮液背景.png'
;
const
Cripples
=
require
(
'@/assets/js/ripples/jquery.ripples'
);
const
PopOvercontent
=
()
=>
{
const
qrcodes
=
window
.
globalConfig
&&
window
.
globalConfig
.
qrcode
;
if
(
qrcodes
)
{
return
<
QRCode
value
=
{
qrcodes
}
/>
;
}
return
<
span
>
手持
APP
下载未配置
<
/span>
;
};
const
Login
=
forwardRef
((
props
,
_ref
)
=>
{
const
sliVerify
=
useRef
();
const
loginFormRef
=
useRef
();
const
formRef
=
useRef
(
null
);
const
[
status
,
setStatus
]
=
useState
(
'normal'
);
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
autoLogin
,
setAutoLogin
]
=
useState
(
false
);
const
[
submitting
,
setSubmitting
]
=
useState
(
false
);
const
[
type
,
setType
]
=
useState
(
'Account'
);
const
[
visible
,
setVisible
]
=
useState
(
false
);
const
history
=
useHistory
();
const
[
action
,
setAction
]
=
useState
(()
=>
new
LoginAction
(
Object
.
assign
({},
props
,
{
history
}),
setVisible
,
false
));
const
[
dateObj
,
setDateObj
]
=
useState
({});
const
handleSubmit
=
values
=>
{
/* eslint-disable */
action
&&
(
type
===
'Account'
?
action
.
loginHandler
(
values
.
userName
,
values
.
password
,
null
,
autoLogin
,
sliVerify
)
:
type
===
'Mobile'
?
action
.
phoneLoginFormHandler
(
values
.
mobile
,
values
.
captcha
)
:
null
);
setSubmitting
(
true
);
props
.
updateCurrentIndex
&&
props
.
updateCurrentIndex
(
-
1
);
};
useEffect
(()
=>
{
action
&&
action
.
events
.
on
(
'loginSuccess'
,
event
=>
{
setSubmitting
(
false
);
props
.
updateCurrentIndex
&&
props
.
updateCurrentIndex
(
0
);
props
.
history
.
push
(
`/?client=
${
props
.
global
.
client
}
`
);
defaultApp
();
});
action
&&
action
.
events
.
on
(
'loginError'
,
event
=>
{
setVisible
(
false
);
setSubmitting
(
false
);
});
action
&&
action
.
events
.
on
(
'loginVisible'
,
status
=>
{
setVisible
(
status
);
});
return
()
=>
{
action
&&
action
.
events
&&
action
.
events
.
removeAllListeners
(
'loginSuccess'
);
action
&&
action
.
events
&&
action
.
events
.
removeAllListeners
(
'loginError'
);
action
&&
action
.
events
&&
action
.
events
.
removeAllListeners
(
'loginVisible'
);
};
},
[
props
.
loginMode
]);
useEffect
(()
=>
{
setSubmitting
(
false
);
},
[
visible
]);
const
renderPlatform
=
()
=>
{
const
template
=
props
.
global
.
loginTemplate
;
const
params
=
{
fromRef
:
formRef
,
type
,
setType
,
status
,
submitting
,
autoLogin
,
setAutoLogin
,
action
,
onSubmit
:
handleSubmit
,
loginMode
:
props
.
loginMode
,
updateLoginMode
:
props
.
updateLoginMode
,
welcome
:
null
,
};
return
<
Account
{...
params
}
/>
;
};
/* eslint-disable */
const
handleWeek
=
()
=>
{
const
weekOfDay
=
Number
(
moment
().
format
(
'E'
));
let
weekDayName
=
''
;
switch
(
weekOfDay
)
{
case
1
:
weekDayName
=
'周一'
;
break
;
case
2
:
weekDayName
=
'周二'
;
break
;
case
3
:
weekDayName
=
'周三'
;
break
;
case
4
:
weekDayName
=
'周四'
;
break
;
case
5
:
weekDayName
=
'周五'
;
break
;
case
6
:
weekDayName
=
'周六'
;
break
;
case
7
:
weekDayName
=
'周日'
;
break
;
default
:
weekDayName
=
''
;
}
return
weekDayName
;
};
const
onShow
=
()
=>
{
if
(
!
show
)
{
setShow
(
true
);
}
};
useEffect
(()
=>
{
setTimeout
(()
=>
{
onShow
();
},
300
);
setTimeout
(()
=>
{
$
(
'.CarouselRipples'
).
ripples
({
resolution
:
800
,
dropRadius
:
20
,
//px
perturbance
:
2
,
});
},
1000
);
},
[]);
useEffect
(()
=>
{
return
()
=>
{
};
},
[
show
]);
useEffect
(()
=>
{
const
timer
=
setInterval
(()
=>
{
setDateObj
({
curTime
:
moment
().
format
(
'HH:mm:ss'
),
week
:
handleWeek
(),
date
:
moment
().
format
(
'YYYY/MM/DD'
),
});
},
1000
);
return
()
=>
{
clearInterval
(
timer
);
};
},
[]);
return
(
<
HelmetProvider
>
<
Helmet
>
<
title
>
{
props
.
global
.
title
||
defaultSetting
.
title
}
<
/title
>
<
meta
name
=
"description"
content
=
{
props
.
global
.
title
||
defaultSetting
.
title
}
/
>
<
/Helmet
>
<
div
className
=
{
classnames
(
styles
.
dawuLogin
,
'dawuLogin'
)}
onClick
=
{
onShow
}
style
=
{{
background
:
`url(
${
bg
}
) no-repeat center center`
,
backgroundSize
:
'100%'
}}
>
{
show
?
(
<
div
className
=
{
classnames
(
styles
[
'wrapper'
])}
>
<
QueueAnim
type
=
"scale"
duration
=
{
1000
}
>
<
div
key
=
{
'innerwrapper'
}
className
=
{
classnames
(
styles
[
'inner-wrapper'
])}
>
<
div
className
=
{
styles
[
'inner-center'
]}
>
<
div
className
=
{
styles
[
'welcome-title'
]}
>
欢迎登录
<
/div
>
<
div
className
=
{
classnames
(
styles
[
'inner-bg'
],
styles
[
'login-part'
])}
ref
=
{
loginFormRef
}
>
{
renderPlatform
()}
<
/div
>
<
/div
>
{
/* <Popover
content={PopOvercontent}
title="扫码下载APP"
placement="right"
overlayClassName={'popover-style'}
>
<img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
</Popover> */
}
<
/div
>
<
/QueueAnim
>
<
div
key
=
"loginheader"
className
=
{
classnames
(
styles
[
'login-header'
])}
>
<
QueueAnim
type
=
"left"
>
<
div
key
=
"logintitle"
className
=
{
styles
[
'left-title'
]}
>
<
div
>
<
img
src
=
{
logo
}
alt
=
"logo"
/>
<
/div
>
<
div
className
=
{
styles
[
'cn-title'
]}
>
{
props
.
global
.
title
||
defaultSetting
.
title
}
<
/div
>
<
/div
>
<
/QueueAnim
>
<
QueueAnim
type
=
"right"
>
<
div
key
=
"logintime"
className
=
{
styles
[
'right-timebox'
]}
>
<
div
className
=
{
styles
[
'curr-time'
]}
>
{
dateObj
.
curTime
}
<
/div
>
<
div
className
=
{
styles
[
'curr-week-date'
]}
>
<
div
className
=
{
styles
[
'curr-week'
]}
>
{
dateObj
.
week
}
<
/div
>
<
div
className
=
{
styles
[
'curr-date'
]}
>
{
dateObj
.
date
}
<
/div
>
<
/div
>
<
/div
>
<
/QueueAnim
>
<
/div
>
<
/div
>
)
:
null
}
<
div
className
=
{
classnames
(
styles
.
CarouselRipples
,
'CarouselRipples'
)}
data
-
ripple
=
"ripple"
/>
<
Modal
centered
visible
=
{
visible
}
width
=
{
340
}
footer
=
{
null
}
closable
=
{
false
}
bodyStyle
=
{{
padding
:
'15px'
}}
>
<
div
ref
=
{
sliVerify
}
/
>
<
/Modal
>
<
/div
>
<
/HelmetProvider
>
);
});
const
mapStateToProps
=
state
=>
({
global
:
state
.
getIn
([
'global'
,
'globalConfig'
]),
loginMode
:
state
.
getIn
([
'global'
,
'loginMode'
]),
});
const
mapDispatchToProps
=
dispatch
=>
({
updateConfig
(
config
)
{
dispatch
(
actionCreators
.
getConfig
(
config
));
},
createContext
(
data
)
{
dispatch
(
actionCreators
.
createContext
(
data
));
},
updateLoginMode
(
mode
)
{
dispatch
(
actionCreators
.
changeLoginMode
(
mode
));
},
updateCurrentIndex
(
index
)
{
dispatch
(
actionCreators
.
updateCurrentIndex
(
index
));
},
});
export
default
connect
(
mapStateToProps
,
mapDispatchToProps
,
)(
withRouter
(
Login
));
This diff is collapsed.
Click to expand it.
src/pages/user/login/template/project/wuliangye/index.less
0 → 100644
View file @
6a0663b0
.dawuLogin {
width: 100%;
height: 100%;
position: relative;
min-height: 7.0rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.caseHide {
display: none !important;
}
.inner-bg {
width: 100%;
height: 100%;
&>div {
width: 80%;
margin: 0 10% 10%;
}
}
.inner-wrapper {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 250px;
left: calc(50% - 268.5px);
z-index: 50;
}
.inner-bg .title {
font-size: 27px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.inner-center {
position: relative;
width: 537px;
height: 345px;
border: 1px solid #FDFDFD;
box-shadow: 0px 6px 18px 0px rgba(25, 61, 79, 0.35);
border-radius: 15px;
z-index: 2;
backdrop-filter: blur(6px);
}
.welcome-title {
height: 100px;
border-radius: 8px 8px 0px 0px;
text-align: center;
line-height: 100px;
font-size: 31px;
font-weight: bold;
color: #008EFE;
text-shadow: #FFFFFF 1.5px 0 0, #FFFFFF 0 1.5px 0, #FFFFFF -1.5px 0 0, #FFFFFF 0 -1.5px 0;
font-family: 宋体;
img {
height: 48px;
}
}
.formgroup2 {
display: flex;
align-items: center;
display: flex;
margin: 0px 5.5%;
margin-bottom: 10%;
align-items: center;
margin-bottom: 40px;
}
.APPcodeBox {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
position: relative;
}
.APPCtext {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30px;
opacity: 0.75;
}
.login-header {
box-sizing: border-box;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 82px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 22px;
z-index: 50;
// border-bottom: 1px solid rgba(255, 255, 255, 0.12);
.left-title {
display: flex;
justify-content: flex-start;
align-items: center;
img {
height: 54px;
}
.cn-title {
// font-weight: bold;
font-size: 36px;
color: #333333;
// text-shadow: 0px 1px 10px #A3AFC7;
line-height: 1;
margin-left: 10px;
letter-spacing: 1px;
}
}
.right-timebox {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
.curr-time {
width: 140px;
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #333;
text-align: right;
}
.curr-week-date {
margin-left: 10px;
.curr-week {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333;
}
.curr-date {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333;
}
}
}
}
.copyright {
position: absolute;
bottom: 7%;
width: 100%;
margin: 0 auto;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #F1F6FD;
text-align: center;
}
.qrcode-box {
position: absolute;
bottom: 0;
right: -23px;
width: 23px;
height: 23px;
background: #FFFFFF;
opacity: 0.8;
cursor: pointer;
}
}
& :global {
.dawuLogin {
.panda-console-base-btn {
border-radius: 20px;
}
}
.popover-style {
.@{ant-prefix}-popover-inner-content {
display: flex;
justify-content: center;
align-items: center;
}
.@{ant-prefix}-popover-title {
display: flex;
justify-content: center;
align-items: center;
}
}
}
:global {
.popover-style {
.@{ant-prefix}-popover-inner-content {
display: flex;
justify-content: center;
align-items: center;
}
.@{ant-prefix}-popover-title {
display: flex;
justify-content: center;
align-items: center;
}
}
}
.CarouselRipples {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
& :global {
.CarouselRipples:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment