From 02546bc3c0ed7a4e471df15b80792008563d1d10 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 29 七月 2022 18:25:57 +0800
Subject: [PATCH] 2022-07-29
---
src/pc/components/login/normal-login/signform.jsx | 118 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 99 insertions(+), 19 deletions(-)
diff --git a/src/pc/components/login/normal-login/signform.jsx b/src/pc/components/login/normal-login/signform.jsx
index 192d1ba..ecfd69b 100644
--- a/src/pc/components/login/normal-login/signform.jsx
+++ b/src/pc/components/login/normal-login/signform.jsx
@@ -2,27 +2,58 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Input, Button, notification, Checkbox } from 'antd'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
+import { UserOutlined, LockOutlined, MobileOutlined, WechatOutlined } from '@ant-design/icons'
import MKEmitter from '@/utils/events.js'
import './index.scss'
class LoginTabForm extends Component {
static propTpyes = {
- wrap: PropTypes.object
+ wrap: PropTypes.object,
+ changeway: PropTypes.func
}
state = {
activeWay: null,
+ appType: sessionStorage.getItem('appType'),
signWays: []
}
UNSAFE_componentWillMount () {
const { wrap } = this.props
+ let signWays = []
+ wrap.signWays.forEach(way => {
+ if (way === 'sms_vcode') {
+ signWays.push({
+ type: 'sms_vcode',
+ label: '鎵嬫満鍙锋敞鍐�',
+ icon: <MobileOutlined />,
+ tempId: wrap.signTempId,
+ sort: 2
+ })
+ } else if (way === 'uname_pwd') {
+ signWays.push({
+ type: 'uname_pwd',
+ label: '璐﹀彿娉ㄥ唽',
+ icon: <LockOutlined />,
+ sort: 1
+ })
+ } else if (way === 'weixin') {
+ signWays.push({
+ type: 'weixin',
+ label: '寰俊鐧诲綍',
+ icon: <WechatOutlined />,
+ sort: 3
+ })
+ }
+ })
+
+ signWays.sort((a, b) => a.sort - b.sort)
+
this.setState({
- signWays: wrap.signWays,
- activeWay: wrap.signWays[0]
+ signWays: signWays,
+ activeWay: signWays[0]
})
}
@@ -30,14 +61,42 @@
const { wrap } = this.props
if (!is(fromJS(wrap), fromJS(nextProps.wrap))) {
+ let signWays = []
+ nextProps.wrap.signWays.forEach(way => {
+ if (way === 'sms_vcode') {
+ signWays.push({
+ type: 'sms_vcode',
+ label: '鎵嬫満鍙锋敞鍐�',
+ tempId: nextProps.wrap.signTempId,
+ sort: 2
+ })
+ } else if (way === 'uname_pwd') {
+ signWays.push({
+ type: 'uname_pwd',
+ label: '璐﹀彿娉ㄥ唽',
+ sort: 1
+ })
+ } else if (way === 'weixin') {
+ signWays.push({
+ type: 'weixin',
+ label: '寰俊鐧诲綍',
+ sort: 3
+ })
+ }
+ })
+
+ signWays.sort((a, b) => a.sort - b.sort)
+
this.setState({
- signWays: nextProps.wrap.signWays,
- activeWay: nextProps.wrap.signWays[0]
+ signWays: signWays,
+ activeWay: signWays[0]
})
}
}
onChangeTab = (activeWay) => {
+ if (activeWay.type === 'weixin') return
+
this.setState({activeWay})
}
@@ -72,11 +131,12 @@
render() {
const { wrap } = this.props
- const { activeWay, signWays } = this.state
+ const { activeWay, signWays, appType } = this.state
return (
<Form className="login-edit-form">
- {activeWay === 'uname_pwd' ? <div className="form-item-wrap">
+ {appType === 'pc' ? <div className="login-way-title">{activeWay.label}</div> : null}
+ {activeWay.type === 'uname_pwd' ? <div className="form-item-wrap">
<Form.Item>
<Input
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
@@ -87,8 +147,8 @@
<Form.Item>
<Input.Password placeholder="瀵嗙爜" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />
</Form.Item>
- {wrap.groups ? <div className={'protocol-wrap '}>
- <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>銆妠item.label}銆�</span>))}
+ {wrap.groups ? <div className="protocol-wrap">
+ <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>銆妠item.label}銆�</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '銆�' : '鍜�') : null}</span>))}
</div> : null}
<Form.Item className="btn-login">
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
@@ -96,14 +156,14 @@
</Button>
</Form.Item>
</div> : null}
- {activeWay === 'sms_vcode' ? <div className="form-item-wrap">
+ {activeWay.type === 'sms_vcode' ? <div className="form-item-wrap">
<Form.Item>
<Input
placeholder="鎵嬫満鍙�"
autoComplete="off"
/>
</Form.Item>
- <Form.Item style={{marginBottom: '35px'}}>
+ <Form.Item style={{marginBottom: wrap.groups ? '15px' : '35px'}}>
<Input
addonAfter={
<Button type="link" className="vercode" size="small">
@@ -114,8 +174,8 @@
autoComplete="off"
/>
</Form.Item>
- {wrap.groups ? <div className={'protocol-wrap '}>
- <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>銆妠item.label}銆�</span>))}
+ {wrap.groups ? <div className="protocol-wrap">
+ <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>銆妠item.label}銆�</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '銆�' : '鍜�') : null}</span>))}
</div> : null}
<Form.Item className="btn-login">
<Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
@@ -123,12 +183,32 @@
</Button>
</Form.Item>
</div> : null}
- <div className={'login-ways '}>
- <div>鍏朵粬鐧诲綍鏂瑰紡</div>
- {signWays.map((item, i) => {
- return (<span key={i} onClick={() => this.onChangeTab(item)}>{item}</span>)
+ {activeWay.type === 'weixin' ? <div className="form-item-wrap">
+ <Form.Item className="btn-login" style={{marginBottom: wrap.groups ? '0px' : '15px'}}>
+ <Button type="primary" onDoubleClick={() => this.changeMenu()} className="sign-form-button">
+ 寰俊涓�閿櫥褰�
+ </Button>
+ </Form.Item>
+ {wrap.groups ? <div className="protocol-wrap">
+ <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span><span className="protocol" key={i}>銆妠item.label}銆�</span>{wrap.groups.length > i + 1 ? (wrap.groups.length > i + 2 ? '銆�' : '鍜�') : null}</span>))}
+ </div> : null}
+ </div> : null}
+ {wrap.classify !== 'signin' ? <span className="mk-jump-way" onClick={() => this.props.changeway()}>宸叉湁璐﹀彿锛屽幓鐧婚檰锛�</span> : null}
+ {appType === 'mob' && signWays.length > 1 ? <div className="sign-ways">
+ <div className="title">鍏朵粬鐧诲綍鏂瑰紡</div>
+ <div className="content">
+ {signWays.map((item, i) => {
+ if (activeWay.type === item.type) return null
+ return (<div key={i} className="item" onClick={() => this.onChangeTab(item)}>{item.icon}<span className="name">{item.label}</span></div>)
+ })}
+ </div>
+ </div> : null}
+ {appType === 'pc' && signWays.length > 1 ? <div className="login-ways">
+ {signWays.map(item => {
+ if (activeWay.type === item.type) return null
+ return (<span key={item.type} onClick={() => this.onChangeTab(item)}>{item.label}</span>)
})}
- </div>
+ </div> : null}
</Form>
)
}
--
Gitblit v1.8.0