Skip to content

J
jinfa-platform
Commit 007a0e54 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:修改登录注册页样式

parent 19a60cea
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 277 deletions
config/config.ts
View file @ 007a0e54
......@@ -4,9 +4,7 @@ import proxy from './proxy'
import theme from './lingxi.theme.config'
const OPEN_THEME_BUILD = process.env.NODE_ENV === 'production' ? true : false // 是否开启动态主题
const config: any = {
title: '瓴犀开放平台',
// 如需写入环境变量 需在config中先写入
define: {
"process.env.SITE_ID": process.env.SITE_ID,
......
config/routes/channelRoute.ts
View file @ 007a0e54
/*
* 店铺能力路由
* 渠道能力路由
* @Author: ghua
* @Date: 2020-07-10 16:16:37
* @Last Modified by: ghua
* @Last Modified time: 2020-07-10 16:48:50
* @Last Modified time: 2020-09-29 14:35:34
*/
const ShopRoute = {
......@@ -12,18 +12,21 @@ const ShopRoute = {
key: 'channelAbility',
icon: 'smile',
routes: [
// 创建渠道信息
{
path: '/memberCenter/channelAbility/infoManage',
name: 'shopInfoManage',
key: 'shopInfoManage',
component: '@/pages/channel/channelInfo',
},
// 渠道模板列表
{
path: '/memberCenter/channelAbility/template',
name: 'shopTemplate',
key: 'shopTemplate',
component: '@/pages/channel/channelTemplate',
},
// 渠道模板详情
{
path: '/memberCenter/channelAbility/template/detail',
name: 'shopTemplate',
......
config/routes/shopRoute.ts
View file @ 007a0e54
......@@ -3,7 +3,7 @@
* @Author: ghua
* @Date: 2020-07-10 16:16:37
* @Last Modified by: ghua
* @Last Modified time: 2020-07-10 16:48:50
* @Last Modified time: 2020-09-29 14:36:01
*/
const ShopRoute = {
......@@ -12,18 +12,21 @@ const ShopRoute = {
key: 'shopAbility',
icon: 'smile',
routes: [
// 创建店铺信息
{
path: '/memberCenter/shopAbility/infoManage',
name: 'shopInfoManage',
key: 'shopInfoManage',
component: '@/pages/shop/shopInfo',
},
// 店铺模板列表
{
path: '/memberCenter/shopAbility/template',
name: 'shopTemplate',
key: 'shopTemplate',
component: '@/pages/shop/shopTemplate',
},
// 店铺模板详情
{
path: '/memberCenter/shopAbility/template/detail',
name: 'shopTemplate',
......
src/layouts/BasicLayout.tsx
View file @ 007a0e54
......@@ -3,7 +3,8 @@ import ProLayout, {
BasicLayoutProps as ProLayoutProps,
Settings,
DefaultFooter,
getMenuData
getMenuData,
getPageTitle
} from '@ant-design/pro-layout';
import React, { useState, useEffect } from 'react';
import { Link, useIntl } from 'umi';
......@@ -121,9 +122,10 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
setOpenKeys([])
}
}, [currentRouter, location.pathname, collapsed])
console.log(getPageTitle({ pathname: location.pathname }), "getPageTitle({ pathname: location.pathname })")
return (
<ProLayout
title=""
style={{ minHeight: '100vh' }}
logo={logo}
formatMessage={formatMessage}
......
src/layouts/UserLayouts.tsx
View file @ 007a0e54
......@@ -2,21 +2,20 @@ import React from 'react';
import styles from './styles/UserLayouts.less'
import UserHeader from './components/UserHeader';
import BaseFooter from './components/BaseFooter';
import { Row } from 'antd';
import { GlobalConfig } from '@/global/config';
import Logo from '../../mockStatic/logo.png'
/**
* 登录、注册等用户界面布局
* @author xjm
*/
const UserLayouts:React.FC = (props) => {
const UserLayouts: React.FC = (props) => {
console.log(props)
return (
<div className={styles.lingxiBusinessUserLayout}>
<UserHeader logo={GlobalConfig.global.siteInfo.logo}/>
<UserHeader logo={GlobalConfig.global.siteInfo.logo} {...props} />
<div className={styles.lingxiBusinessUserBg}>
{ props.children }
<BaseFooter/>
{props.children}
<BaseFooter />
</div>
</div>
)
......
src/layouts/components/UserHeader.tsx
View file @ 007a0e54
import React from 'react';
import React, { useState, useEffect } from 'react';
import styles from '../styles/UserLayouts.less'
import { Row, Col } from 'antd';
import { isString } from '@/utils/type';
......@@ -7,17 +7,45 @@ import HeaderDropdown from './HeaderDropdown';
export interface UserHeaderProps {
logo?: React.ReactNode,
countryList?: { key: string, name: string, icon: string }[]
countryList?: { key: string, name: string, icon: string }[],
location?: any
}
/**
* 登录、注册等用户头部
*/
const UserHeader: React.FC<UserHeaderProps> = (props) => {
const { pathname } = props.location
const [title, setTitle] = useState<string>()
useEffect(() => {
getRouteName()
}, [])
const getRouteName = () => {
switch (pathname) {
case '/user/login':
setTitle("欢迎登陆")
break
case '/user/register':
setTitle("欢迎注册")
break
case '/user/getBack':
setTitle("找回密码")
break
}
}
return (
<div className={styles.lingxiBusinessUserHeader}>
<Row className={styles.lingxiBusinessMarginContent} justify='space-between' align='middle' style={{ height: '100%' }}>
<Col>
{isString(props.logo) ? <a href="/"><img src={props.logo} className={styles.lingxiBusinessLogo} /> </a> : props.logo}
<div className={styles.lingxiBusinessLogoWrap}>
{isString(props.logo) ? <a href="/"><img src={props.logo} className={styles.lingxiBusinessLogo} /> </a> : props.logo}
{
title && <div className={styles.lingxiBusinessUserHeaderSplit}></div>
}
<div className={styles.lingxiBusinessUserHeaderTitle}>{title}</div>
</div>
</Col>
<Col>
<HeaderDropdown />
......
src/layouts/styles/UserLayouts.less
View file @ 007a0e54
......@@ -8,12 +8,13 @@
.@{prefix}-user-bg {
width: 100%;
min-height: @layout-min-content-height;
// display: flex;
// align-items: center;
// justify-content: center;
background: url('../../../mockStatic/login_bg.jpg') no-repeat center;
background-size: cover;
min-height: calc(100vh - 64px);
background: #F7F8FA;
}
.@{prefix}-logo-wrap {
display: flex;
align-items: center;
}
// header
......@@ -24,6 +25,21 @@
// position: fixed;
top: 0;
left: 0;
&-split {
width: 2px;
height: 24px;
background: #F5F5F5;
margin-left: 21px;
margin-right: 19px;
}
&-title {
font-size: 24px;
color: #333333;
line-height: 24px;
font-weight: bold;
}
}
// footer
......@@ -32,6 +48,7 @@
font-size: 12px;
color: #C0C4CC;
text-align: center;
&.fixed {
padding: 0;
position: fixed;
......
src/pages/document.ejs
View file @ 007a0e54
......@@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瓴犀开放平台</title>
<!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> -->
</head>
......
src/pages/lxMall/layouts/LXChannelLayout.tsx
View file @ 007a0e54
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState, Fragment } from 'react'
import {
BasicLayoutProps as ProLayoutProps,
getMenuData
} from '@ant-design/pro-layout'
import SelectLang from '@/layouts/components/SelectLang'
import { useIntl } from 'umi'
import { useIntl, Helmet } from 'umi'
import { LAYOUT_TYPE } from "@/constants"
import { inject, observer } from 'mobx-react'
import TopBar from '../components/TopBar'
......@@ -73,34 +73,41 @@ const LXChannelLayout: React.FC<LXChannelLayoutPropsType> = (props) => {
}, [shopInfo])
return (
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={shopInfo?.company} type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
<div className={styles.content}>
<Fragment>
<Helmet>
{
!menuRouter?.hideHeader && (
<>
<ChannelHeader id={query.shopId} shopUrlParam={channelId} shopInfo={shopInfo} type={LAYOUT_TYPE.channel} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.channel} memberId={query.memberId} shopId={query.shopId} shopUrlParam={channelId} />
</>
)
}
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.channel,
shopId: query.shopId,
memberId: query.memberId,
shopUrlParam: channelId,
shopInfo
},
);
})
shopInfo ? <title>{shopInfo.company}</title> : null
}
</Helmet>
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={shopInfo?.company} type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
<div className={styles.content}>
{
!menuRouter?.hideHeader && (
<>
<ChannelHeader id={query.shopId} shopUrlParam={channelId} shopInfo={shopInfo} type={LAYOUT_TYPE.channel} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.channel} memberId={query.memberId} shopId={query.shopId} shopUrlParam={channelId} />
</>
)
}
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.channel,
shopId: query.shopId,
memberId: query.memberId,
shopUrlParam: channelId,
shopInfo
},
);
})
}
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.channel} shopUrlParam={channelId} />
</div>
</Fragment>
)
}
......
src/pages/lxMall/layouts/LXMallLayout.tsx
View file @ 007a0e54
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState, Fragment } from 'react'
import {
BasicLayoutProps as ProLayoutProps,
getMenuData
} from '@ant-design/pro-layout'
import SelectLang from '@/layouts/components/SelectLang'
import { useIntl } from 'umi'
import { useIntl, Helmet } from 'umi'
import { inject, observer } from 'mobx-react'
import { LAYOUT_TYPE } from '@/constants'
import { GlobalConfig } from '@/global/config'
......@@ -62,31 +62,38 @@ const LXMallLayout: React.FC<LXMallLayoutPropsType> = (props) => {
}, [mallTemplateInfo])
return (
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={mallInfo.name} type={LAYOUT_TYPE.mall} />
<div className={styles.content}>
<Fragment>
<Helmet>
{
!menuRouter?.hideHeader && (
<>
<Header logo={mallInfo.logoUrl} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.mall} />
</>
)
}
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.mall,
mallInfo: mallInfo
},
);
})
mallInfo ? <title>{mallInfo.name}</title> : null
}
</Helmet>
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={mallInfo.name} type={LAYOUT_TYPE.mall} />
<div className={styles.content}>
{
!menuRouter?.hideHeader && (
<>
<Header logo={mallInfo.logoUrl} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.mall} />
</>
)
}
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.mall,
mallInfo: mallInfo
},
);
})
}
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.mall} />
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.mall} />
</div>
</Fragment>
)
}
......
src/pages/lxMall/layouts/LXShopLayout.tsx
View file @ 007a0e54
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState, Fragment } from 'react'
import {
BasicLayoutProps as ProLayoutProps,
getMenuData
} from '@ant-design/pro-layout';
import { useIntl, history } from 'umi';
import { useIntl, Helmet } from 'umi';
import TopBar from '../components/TopBar'
import SelectLang from '@/layouts/components/SelectLang'
import { inject, observer } from 'mobx-react'
......@@ -81,28 +81,35 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
return (
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={mallInfo.name} type={LAYOUT_TYPE.shop} />
<div className={styles.content}>
<ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
<Fragment>
<Helmet>
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.shop,
shopId: query.shopId,
memberId: query.memberId,
shopUrlParam: shopId,
shopInfo
},
);
})
mallInfo ? <title>{mallInfo.name}</title> : null
}
</Helmet>
<div className={styles.lxmall_page}>
<TopBar langComponent={<SelectLang />} name={mallInfo.name} type={LAYOUT_TYPE.shop} />
<div className={styles.content}>
<ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} />
<MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
{
children && React.Children.map(children, (child: any) => {
return React.cloneElement(child,
{
layoutType: LAYOUT_TYPE.shop,
shopId: query.shopId,
memberId: query.memberId,
shopUrlParam: shopId,
shopInfo
},
);
})
}
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.shop} />
</div>
<Footer />
<SideNav type={LAYOUT_TYPE.shop} />
</div>
</Fragment>
)
}
......
src/pages/user/agreement/index.tsx
View file @ 007a0e54
......@@ -45,20 +45,6 @@ const Agreement: React.FC<AgreementPropsType> = (props) => {
<h1>{agreementInfo.title}</h1>
<div className={styles.policyBox_container}>
<article dangerouslySetInnerHTML={{ __html: agreementInfo.content }}></article>
{/* <article>
<h4>一、权利归属</h4>
<main>
<p>1.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
<p>1.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
<p>1.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
</main>
<h4>二、责任限制</h4>
<main>
<p>2.1. 涂鸦网站的Logo、“涂鸦”、“涂鸦智能”、“tuya”等文字、图形及其组合，以及涂鸦网站的其他标识、徽记、涂鸦服务的名称等为涂鸦及其关联公司在中国和其他国家的注册商标。未经涂鸦书面授权，任何人不得以任何方式展示、使用或做其他处理（包括但不限于复制、传播、展示、镜像、上传、下载），也不得向他人表明您有权展示、使用或做其他处理。</p>
<p>2.2. 涂鸦网站所有的产品、服务、技术与所有程序（以下或简称“技术服务”）的知识产权均归属于涂鸦或归其权利人所有。</p>
<p>2.3. 除非涂鸦另行声明，涂鸦拥有涂鸦在网站内发布文档等信息（包括但不限于文字、图形、图片、照片、音频、视频、图标、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密和其他所有相关权利）。未经涂鸦许可，任何人不得擅自使用如上内容（包括但不限于通过程序或设备监视、复制、转播、展示、镜像、上传、下载涂鸦网站内的任何内容）。被授权浏览、复制、打印和传播属于涂鸦网站内信息内容的，该等内容都不得用于商业目的且所有信息内容及其任何部分的使用都必须包括此权利声明。</p>
</main>
</article> */}
</div>
</div>
) : <Loading />
......
src/pages/user/getBack.tsx
View file @ 007a0e54
import React, { useState } from 'react';
import styles from './index.less'
import globalStyles from '@/global/styles/global.less';
import React, { useState, Fragment } from 'react';
import cx from 'classnames';
import { Row, Col, Form, Input, Button } from 'antd';
import TextLink from '@/components/TextLink';
import {
ExclamationCircleFilled,
} from '@ant-design/icons';
import { Link, history } from 'umi'
import { Row } from 'antd';
import { Link, Helmet } from 'umi'
import { FormPage, RiskCheck } from 'god'
import { IFormControllers, IFormButtonTypes } from 'god/dist/src/form-page'
import './index.less'
const GetBack: React.FC = () => {
const [validButton, setValidButton] = useState(true)
......@@ -35,17 +30,17 @@ const GetBack: React.FC = () => {
{ required: true, message: '邮箱/手机为必填项！' }
]
},
{
span: 24,
// @ts-ignore
custom: () => <RiskCheck />
},
// {
// span: 24,
// // @ts-ignore
// custom: () => <RiskCheck />
// },
{
type: 'Verification',
name: 'smsCode',
span: 24,
inputProps: {
}
},
{
......@@ -58,7 +53,7 @@ const GetBack: React.FC = () => {
},
rules: [
{ required: true, message: '密码为必填项！' },
{ pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/, message: '密码长度8-20个字符，必须包含大小写字母和数字！' }
{ pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/, message: '密码长度8-20个字符，必须包含大小写字母和数字！' }
],
},
{
......@@ -94,22 +89,27 @@ const GetBack: React.FC = () => {
]
return (
<Row className={styles.getBackBox}>
<h2>找回密码</h2>
<div className={cx(styles.getBackForm, globalStyles.lingxiBusinessMarginContent)}>
<div className={styles.formBox}>
<FormPage
renderFormLists={getBcakForm}
renderButtonLists={getBackButtons}
onSubmit={handleSubmit}
>
<Row justify='center' align='middle'>
<Link to='/user/login' className={styles.back}>返回登录页</Link>
</Row>
</FormPage>
<Fragment>
<Helmet>
<title>找回密码</title>
</Helmet>
<Row className={'getBackBox'}>
<div className={cx('getBackForm')}>
<div className={'formBox'}>
<FormPage
renderFormLists={getBcakForm}
renderButtonLists={getBackButtons}
onSubmit={handleSubmit}
>
<Row justify='center' align='middle'>
<Link to='/user/login' className={'back'}>返回登录页</Link>
</Row>
</FormPage>
</div>
</div>
</div>
</Row>
</Row>
</Fragment>
)
}
......
src/pages/user/index.less
View file @ 007a0e54
......@@ -29,6 +29,8 @@
&>h2 {
font-size: 32px;
margin-bottom: 32px;
color: #606266;
font-weight: 400;
}
.clickUsernameLogin {
......@@ -86,7 +88,7 @@
.thirdLogin {
height: 64px;
background: #FAFBFC;
margin-top: 90px;
margin-top: 100px;
& a {
margin-left: 6px;
......@@ -130,6 +132,7 @@
// register
.register {
padding-top: 60px;
// width: 100%;
&>h3 {
......@@ -153,6 +156,7 @@
background: #fff;
padding-bottom: 40px;
.stepWrap {
height: 72px;
background: #FAFBFC;
......@@ -264,30 +268,6 @@
display: block;
}
// get back password
.getBackBox {
&>h2 {
width: 100%;
.make-center(text);
.font-height-color(24, 120, #303133);
}
.getBackForm {
background-color: @white;
.formBox {
width: 320px;
.make-center-space(margin, 40, 40);
.back {
width: 100%;
.make-center(block);
.make-center(text);
color: #909399;
}
}
}
}
// policy
.policyBox {
......@@ -318,5 +298,36 @@
}
}
// get back password
.getBackBox {
position: relative;
padding-top: 60px;
&>h2 {
width: 100%;
.make-center(text);
.font-height-color(24, 120, #303133);
}
.getBackForm {
background-color: @white;
margin-left: auto;
margin-right: auto;
width: 1190px;
.formBox {
width: 320px;
.make-center-space(margin, 40, 40);
.back {
width: 100%;
.make-center(block);
.make-center(text);
color: #909399;
}
}
}
}
}
\ No newline at end of file
src/pages/user/index.tsx
View file @ 007a0e54
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, Fragment } from 'react';
import globalStyles from '@/global/styles/global.less';
import './index.less'
import cx from 'classnames';
......@@ -6,10 +6,9 @@ import { Row, Col, Space, Carousel } from 'antd';
import ImageBox from '@/components/ImageBox'
import TextLink from '@/components/TextLink';
import {
ExclamationCircleFilled,
ScanOutlined
} from '@ant-design/icons'
import { Link, history } from 'umi'
import { Link, history, Helmet } from 'umi'
import ScanLoginWrap from './components/ScanLoginWrap';
// import leftPicture from '../../../mockStatic/image_ad.png'
import { PublicApi } from '@/services/api'
......@@ -50,53 +49,56 @@ const User: React.FC = () => {
}
return (
<Row className={cx('loginWrap', globalStyles.lingxiBusinessContent1024)}>
<Col className={cx('loginItem', 'loginDesc')}>
<div className={'adBox'}>
<Carousel autoplay>
{
sceneList && sceneList.map(item => <ImageBox direction={"column"} width={512} height={550} imgUrl={item.imageUrl} />)
}
</Carousel>
</div>
</Col>
<Col className={cx('loginItem', 'loginCtl')}>
<div className={'loginMain'}>
{/*<a className={styles.guideLogin} />*/}
{/*{ isScanQrCode ? <></> : <h2>欢迎您</h2>}*/}
{isScanQrCode ? (
<>
<a onClick={() => handleGuideLogin(false)} className={'clickUsernameLogin'}>使用账号密码登录</a>
<ScanLoginWrap />
<div className={'scanTips'}>
<ScanOutlined className={'scanIcon'} />
<span>打开 App<br />扫一扫登录</span>
</div>
</>
) : (
<Fragment>
<Helmet>
<title>用户登录</title>
</Helmet>
<Row className={cx('loginWrap', globalStyles.lingxiBusinessContent1024)}>
<Col className={cx('loginItem', 'loginDesc')}>
<div className={'adBox'}>
<Carousel autoplay>
{
sceneList && sceneList.map(item => <ImageBox key={item.id} direction={"column"} width={512} height={550} imgUrl={item.imageUrl} />)
}
</Carousel>
</div>
</Col>
<Col className={cx('loginItem', 'loginCtl')}>
<div className={'loginMain'}>
{isScanQrCode ? (
<>
<a onClick={() => handleGuideLogin(true)} className={'clickScanLogin'} />
<h2>欢迎您</h2>
<LoginWrap />
<Row justify='end' style={{ marginTop: 16 }}>
<Space size={32}>
<TextLink><Link to='/user/register' style={{ color: '#909399' }}>免费注册</Link></TextLink>
<TextLink><a onClick={forgetPassword} style={{ color: '#909399' }}>忘记密码</a></TextLink>
</Space>
</Row>
<a onClick={() => handleGuideLogin(false)} className={'clickUsernameLogin'}>使用账号密码登录</a>
<ScanLoginWrap />
<div className={'scanTips'}>
<ScanOutlined className={'scanIcon'} />
<span>打开 App<br />扫一扫登录</span>
</div>
</>
)
}
</div>
<Row className={'thirdLogin'} align='middle' justify='center'>
<Col>其他方式登录
) : (
<>
<a onClick={() => handleGuideLogin(true)} className={'clickScanLogin'} />
<h2>欢迎您</h2>
<LoginWrap />
<Row justify='end' style={{ marginTop: 16 }}>
<Space size={32}>
<TextLink><Link to='/user/register' style={{ color: '#909399' }}>免费注册</Link></TextLink>
<TextLink><a onClick={forgetPassword} style={{ color: '#909399' }}>忘记密码</a></TextLink>
</Space>
</Row>
</>
)
}
</div>
<Row className={'thirdLogin'} align='middle' justify='center'>
<Col>其他方式登录
<a title="微信登陆"><img src={wechat} alt="微信登录" /></a>
<a title="QQ登录"><img src={qq} alt="QQ登录" /></a>
<a title="支付宝登录"><img src={alipay} alt="支付宝登录" /></a>
</Col>
</Row>
</Col>
</Row>
<a title="QQ登录"><img src={qq} alt="QQ登录" /></a>
<a title="支付宝登录"><img src={alipay} alt="支付宝登录" /></a>
</Col>
</Row>
</Col>
</Row>
</Fragment>
)
}
......
src/pages/user/register.tsx
View file @ 007a0e54
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, Fragment } from 'react'
import { Form, Steps, Button, Row, Col, Radio, Divider, Tooltip, Upload, message, Input as AntdInput } from 'antd'
import {
UploadOutlined,
QuestionCircleOutlined
} from '@ant-design/icons';
import './index.less'
import globalStyles from '@/global/styles/global.less'
import cx from 'classnames'
import { Link, history } from 'umi'
import { Link, history, Helmet } from 'umi'
import im_success from '../../../mockStatic/im_success.png'
import { FormStep, FormBlock, Input, Password, Checkbox, setup } from '@formily/antd-components'
import SchemaForm, { Field, FormMegaLayout, FormButtonGroup, createFormActions, FormEffectHooks } from '@formily/antd';
import useCountDown from '@/utils/hooks';
import { GlobalConfig } from '@/global/config';
import { omit, transFormSchema, filterUndef } from '@/utils';
import { PATTERN_MAPS } from '@/constants/regExp';
import { PublicApi } from '@/services/api';
import NiceForm from '@/components/NiceForm';
import schemas from './schema';
......@@ -51,7 +48,7 @@ const useLinkageValidateEffects = () => {
PublicApi.getMemberRegisterPhoneCheck({
countryCode: prefixCode,
phone: fieldState.value
}, {ctlType: 'none', useCache: true, ttl: 60 * 1000}).then(({code, data}) => {
}, { ctlType: 'none', useCache: true, ttl: 60 * 1000 }).then(({ code, data }) => {
if (code === 1000) {
} else {
......@@ -240,69 +237,74 @@ const UserRegistry = () => {
}
return (
<div className={cx('register', globalStyles.lingxiBusinessContent1024)}>
<h3>欢迎您注册数商云账号</h3>
<div className={cx('registerBox', globalStyles.lingxiBusinessMarginContent)}>
<Steps current={current} className={'stepWrap'} size='small'>
{stepList.map(v => <Steps.Step title={v.title} key={v.key}></Steps.Step>)}
</Steps>
<NiceForm
id='registerForm'
schema={asyncSchema}
actions={actions}
components={{
CustomInput
}}
effects={() => {
useLinkageValidateEffects()
}}
expressionScope={{
current: false,
phoneBefore: <div className={'formBefore'}>+86</div>,
smsCodeAfter: <Button disabled={isActive} style={{ minWidth: 110, marginLeft: 8 }} size='large' onClick={start}>{text}</Button>,
checkBoxChildren: <span style={{ fontSize: 12 }}>阅读并同意<span className='commonPickColor'>
{
agreementList && agreementList.map(item => (<a key={`aggreem_${item.id}`} href={`/user/agreement?id=${item.id}`} target="_blank">《{item.title}》</a>))
}
</span>
</span>,
memberTypeTitle: <span className={'commonPanelTitle'}>请选择您的身份</span>,
businessTypeTitle: <span className={'commonPanelTitle'}>请选择您要开展的业务</span>,
}}
/>
<div className={cx('registerForm', 'global-block-center')}>
{
current === 0 &&
<Button type='primary' className={'continueButton'} onClick={handleActionBtn}>同意协议并注册</Button>
}
{
current === 1 && !subStep &&
<Button type='primary' className={'continueButton'} onClick={nextStepAction} loading={submitLoading}>下一步：继续完善</Button>
}
<Fragment>
<Helmet>
<title>用户注册</title>
</Helmet>
<div className={cx('register', globalStyles.lingxiBusinessContent1024)}>
{/* <h3>欢迎您注册数商云账号</h3> */}
<div className={cx('registerBox', globalStyles.lingxiBusinessMarginContent)}>
<Steps current={current} className={'stepWrap'} size='small'>
{stepList.map(v => <Steps.Step title={v.title} key={v.key}></Steps.Step>)}
</Steps>
<NiceForm
id='registerForm'
schema={asyncSchema}
actions={actions}
components={{
CustomInput
}}
effects={() => {
useLinkageValidateEffects()
}}
expressionScope={{
current: false,
phoneBefore: <div className={'formBefore'}>+86</div>,
smsCodeAfter: <Button disabled={isActive} style={{ minWidth: 110, marginLeft: 8 }} size='large' onClick={start}>{text}</Button>,
checkBoxChildren: <span style={{ fontSize: 12 }}>阅读并同意<span className='commonPickColor'>
{
agreementList && agreementList.map(item => (<a key={`aggreem_${item.id}`} href={`/user/agreement?id=${item.id}`} target="_blank">《{item.title}》</a>))
}
</span>
</span>,
memberTypeTitle: <span className={'commonPanelTitle'}>请选择您的身份</span>,
businessTypeTitle: <span className={'commonPanelTitle'}>请选择您要开展的业务</span>,
}}
/>
<div className={cx('registerForm', 'global-block-center')}>
{
current === 0 &&
<Button type='primary' className={'continueButton'} onClick={handleActionBtn}>同意协议并注册</Button>
}
{
current === 1 && !subStep &&
<Button type='primary' className={'continueButton'} onClick={nextStepAction} loading={submitLoading}>下一步：继续完善</Button>
}
{
current === 1 && subStep &&
<Button type='primary' className={'continueButton'} onClick={submitForm} loading={submitLoading}>提交注册资料</Button>
}
</div>
{
current === 1 && subStep &&
<Button type='primary' className={'continueButton'} onClick={submitForm} loading={submitLoading}>提交注册资料</Button>
current === 2 &&
<div className={'formBoxStep3'}>
<img src={im_success} alt="待审核" />
<h2>您的注册资料已经提交成功，请等待平台审核</h2>
<div className={'description'}>
<p>审核结果会以短信通知您</p>
<p>您也可以登录平台查看审核结果</p>
</div>
<p className={'guid'}>
<span>{time}s 后自动跳转至登录页</span>
<br />
<span><Link to="/user/login">立即跳转</Link></span>
</p>
</div>
}
<p className={'readyLogin'}>已有平台账号? <Link to="/user/login">去登陆</Link></p>
</div>
{
current === 2 &&
<div className={'formBoxStep3'}>
<img src={im_success} alt="待审核" />
<h2>您的注册资料已经提交成功，请等待平台审核</h2>
<div className={'description'}>
<p>审核结果会以短信通知您</p>
<p>您也可以登录平台查看审核结果</p>
</div>
<p className={'guid'}>
<span>{time}s 后自动跳转至登录页</span>
<br />
<span><Link to="/user/login">立即跳转</Link></span>
</p>
</div>
}
<p className={'readyLogin'}>已有平台账号? <Link to="/user/login">去登陆</Link></p>
</div>
</div>
</Fragment>
)
}
......
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 to comment