From c6b9fa180fae18454888e83b6491128c2e354b06 Mon Sep 17 00:00:00 2001 From: dongrui Date: Tue, 25 Dec 2018 14:48:41 +0800 Subject: [PATCH] feat: Service provider detail and create static pages (#615) --- src/components/Layout/SideNav/index.jsx | 5 +- src/components/Layout/SideNav/navMap.js | 4 +- src/components/Layout/Stepper/index.jsx | 8 +- src/components/Status/index.scss | 2 +- src/locales/zh/translation.json | 8 +- .../Providers/Applications/Detail/index.jsx | 82 +++++++--- .../Providers/Applications/Detail/index.scss | 84 +++++----- .../Providers/Applications/index.jsx | 10 +- .../Providers/CertificateInfo/index.jsx | 107 ++++++------ .../Dashboard/Providers/Create/index.jsx | 153 ++++++++++++++++++ .../Dashboard/Providers/Create/index.scss | 81 ++++++++++ .../Dashboard/Providers/Detail/index.jsx | 2 +- src/pages/Dashboard/index.js | 1 + src/routes/index.js | 2 + src/stores/RootStore.js | 5 + src/stores/provider/create.js | 25 +++ src/stores/provider/index.js | 7 + 17 files changed, 464 insertions(+), 122 deletions(-) create mode 100644 src/pages/Dashboard/Providers/Create/index.jsx create mode 100644 src/pages/Dashboard/Providers/Create/index.scss create mode 100644 src/stores/provider/create.js create mode 100644 src/stores/provider/index.js diff --git a/src/components/Layout/SideNav/index.jsx b/src/components/Layout/SideNav/index.jsx index f01f120f..32d95e48 100644 --- a/src/components/Layout/SideNav/index.jsx +++ b/src/components/Layout/SideNav/index.jsx @@ -27,6 +27,7 @@ const keys = [ 'category', 'user', 'create', + 'provider-detail', 'provider' ]; const changeKey = { @@ -91,6 +92,7 @@ class SideNav extends React.Component { isLinkActive = activeName => { const key = this.getMatchKey(); + return activeName === key; }; @@ -99,7 +101,8 @@ class SideNav extends React.Component { const { isISV } = user; const role = isISV ? 'isv' : user.role; const key = this.getMatchKey(); - return (_.isObject(subNavMap[role]) && subNavMap[role][key]) || {}; + + return _.get(subNavMap, `${role}.${key}`, {}); }; renderSubsDev() { diff --git a/src/components/Layout/SideNav/navMap.js b/src/components/Layout/SideNav/navMap.js index b248cc23..52a14b1e 100644 --- a/src/components/Layout/SideNav/navMap.js +++ b/src/components/Layout/SideNav/navMap.js @@ -88,9 +88,9 @@ export const getNavs = { title: 'Team Members' }, { - link: '#', + link: '/dashboard/provider-detail', iconName: 'shield', - active: '', + active: 'provider-detail', title: '服务商详情' } ], diff --git a/src/components/Layout/Stepper/index.jsx b/src/components/Layout/Stepper/index.jsx index ffe4f0a9..e4af7871 100644 --- a/src/components/Layout/Stepper/index.jsx +++ b/src/components/Layout/Stepper/index.jsx @@ -111,7 +111,11 @@ class LayoutStepper extends Component { renderFooter() { const { t, stepOption, name } = this.props; const { - activeStep, steps, nextStep, disableNextStep + activeStep, + steps, + nextStep, + disableNextStep, + btnText } = stepOption; if (activeStep > steps) { @@ -139,8 +143,8 @@ class LayoutStepper extends Component { type="primary" onClick={nextStep} > - {buttonText} + {t(btnText || buttonText)} ); diff --git a/src/components/Status/index.scss b/src/components/Status/index.scss index 435a53a5..9328c7a5 100644 --- a/src/components/Status/index.scss +++ b/src/components/Status/index.scss @@ -2,7 +2,7 @@ .status { text-transform: capitalize; - display: flex; + display: inline-flex; flex-direction: row; height: 100%; align-items: center; diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 5543d9a9..3d997748 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -264,7 +264,7 @@ "Store": "商店", "Platform": "平台", - "All Apps": "所有应用", + "All Apps": "全部应用", "App Reviews": "应用审核", "All Clusters": "所有集群", "Categroies": "分类", @@ -498,5 +498,9 @@ "Delete runtime credential successfully": "删除授权信息成功", "invalid kebeconfig": "错误的kubeconfig", "Update cluster env successfully": "修改集群环境成功", - "Helm runtime namespace is empty": "命名空间为空" + "Helm runtime namespace is empty": "命名空间为空", + + "STEPPER_NAME_CREATE_PROVIDER_HEADER": "成为认证服务商", + "STEPPER_TITLE_CREATE_PROVIDER_1": "提交认证信息", + "STEPPER_FOOTER_CREATE_PROVIDER_1": "以上是平台审核的重要信息，请准确填写。" } diff --git a/src/pages/Dashboard/Providers/Applications/Detail/index.jsx b/src/pages/Dashboard/Providers/Applications/Detail/index.jsx index ca696379..6d8a8284 100644 --- a/src/pages/Dashboard/Providers/Applications/Detail/index.jsx +++ b/src/pages/Dashboard/Providers/Applications/Detail/index.jsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; import { observer, inject } from 'mobx-react'; import { translate } from 'react-i18next'; @@ -11,40 +12,77 @@ import styles from './index.scss'; @translate() @inject(({ rootStore }) => ({ - rootStore + rootStore, + providerStore: rootStore.providerStore, + user: rootStore.user })) @observer export default class Applications extends Component { // todo async componentDidMount() {} - renderBaseInfo() { - const { t } = this.props; + renderStatusInfo() { + const { user, t } = this.props; + const { isISV } = user; - return ( - -
{t('申请编号')}：3920204948
-
杭州映云科技有限公司
-
+ if (isISV) { + return ( +
{t('申请状态')}: 
- + + {t('立即提交')}
-
{t('拒绝时间')}: 
+
{t('保证金')}: 
+
+ 未缴纳{t('查看缴纳方式')} +
+
+
+
{t('创建时间：')}: 
2018年10月29日
- {/*
+
+ ); + } + + return ( +
+
+
{t('申请状态')}: 
+
+ +
+
+
+
{t('拒绝时间')}: 
+
2018年10月29日
+
+ {/*
{t('审核人员')}: 
grace@yunify.com
*/} -
- - -
-
+
+ + +
+
+ ); + } + + renderBaseInfo() { + const { user, t } = this.props; + const { isISV } = user; + const numberTitle = isISV ? t('服务商编号') : t('申请编号'); + + return ( + +
{numberTitle}：3920204948
+
杭州映云科技有限公司
+ {this.renderStatusInfo()} 
介绍内容与官网地址不一致
@@ -54,10 +92,18 @@ export default class Applications extends Component { } render() { - const { t } = this.props; + const { user, t } = this.props; + const { isISV } = user; + const pagetTitle = isISV ? t('服务商详情') : t('入驻申请详情'); return ( - + {this.renderBaseInfo()} diff --git a/src/pages/Dashboard/Providers/Applications/Detail/index.scss b/src/pages/Dashboard/Providers/Applications/Detail/index.scss index ae0aa459..1d25d274 100644 --- a/src/pages/Dashboard/Providers/Applications/Detail/index.scss +++ b/src/pages/Dashboard/Providers/Applications/Detail/index.scss @@ -10,60 +10,66 @@ margin-bottom: 24px; } - .info { - display: flex; - - dl, - dt, - dd { - display: inline-block; - } - - dl { - flex: 1; - margin-bottom: 12px; - line-height: 20px; - font-size: 12px; - - >button { - float: right; - margin-top: -12px; - margin-left: 12px; - } - } + .reason { + line-height: 20px; + font-size: 12px; + color: $N300; - dt { + >label { + float: left; color: $N75; } - dd { - color: $N300; - >label { - color: $N500; - font-weight: 500; - } + >pre { + margin-left: 40px; } + } +} - .status { - font-size: 12px; - dt { - float: left; - } - } +.statusInfo { + display: flex; + + dl, + dt, + dd { + display: inline-block; } - .reason { + dl { + flex: 1; + margin-bottom: 12px; line-height: 20px; font-size: 12px; + + >button { + float: right; + margin-top: -12px; + margin-left: 12px; + } + } + + dt { + color: $N75; + } + + dd { color: $N300; >label { - float: left; - color: $N75; + color: $N500; + font-weight: 500; } - >pre { - margin-left: 40px; + >a { + display: inline-block; + margin-left: 8px; + } + } + + .status { + font-size: 12px; + dt { + float: left; } } } diff --git a/src/pages/Dashboard/Providers/Applications/index.jsx b/src/pages/Dashboard/Providers/Applications/index.jsx index 92acb359..44c8c802 100644 --- a/src/pages/Dashboard/Providers/Applications/index.jsx +++ b/src/pages/Dashboard/Providers/Applications/index.jsx @@ -23,13 +23,9 @@ const types = [ })) @observer export default class Applications extends Component { - constructor(props) { - super(props); - - this.state = { - activeType: 'processed' - }; - } + state = { + activeType: 'processed' + }; async componentDidMount() {} diff --git a/src/pages/Dashboard/Providers/CertificateInfo/index.jsx b/src/pages/Dashboard/Providers/CertificateInfo/index.jsx index 0517d8d8..b6608f7c 100644 --- a/src/pages/Dashboard/Providers/CertificateInfo/index.jsx +++ b/src/pages/Dashboard/Providers/CertificateInfo/index.jsx @@ -1,66 +1,75 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { observer, inject } from 'mobx-react'; import { translate } from 'react-i18next'; import { Card } from 'components/Layout'; - +import DetailTabs from 'components/DetailTabs'; import styles from './index.scss'; +const tags = [ + { name: '认证信息', value: 'certificate' }, + { name: '合约', value: 'contract', isDisabled: true } +]; @translate() @inject(({ rootStore }) => ({ - rootStore + rootStore, + user: rootStore.user })) @observer export default class CertificateInfo extends Component { render() { - const { t } = this.props; + const { user, t } = this.props; + const { isISV } = user; return ( - -
{t('认证信息')}
-
-
-
{t('公司名称')}
-
杭州映云科技有限公司
-
-
-
{t('公司官网')}
-
http://www.crancloud.com/
-
-
-
{t('业务简介')}
-
- 
-                云基众智—成就边缘加速新价值，提供部署在企业侧的物端边缘计算产品众智云基站和部署在云端的边缘加速服务众智云。
-
-
-
-
-
{t('姓名')}
-
李明界/
-
-
-
{t('办公邮箱')}
-
info@crancloud.com
-
-
-
{t('手机号')}
-
18910298984
-
-
-
{t('开户银行')}
-
北京市 朝阳区 建国路 支行
-
-
-
{t('开户名')}
-
王磊
-
-
-
{t('账号')}
-
6334 **** **** 2030
-
-
- + + {isISV && } + + {!isISV &&
{t('认证信息')}
} +
+
+
{t('公司名称')}
+
杭州映云科技有限公司
+
+
+
{t('公司官网')}
+
http://www.crancloud.com/
+
+
+
{t('业务简介')}
+
+ 
+                  云基众智—成就边缘加速新价值，提供部署在企业侧的物端边缘计算产品众智云基站和部署在云端的边缘加速服务众智云。
+
+
+
+
+
{t('姓名')}
+
李明界/
+
+
+
{t('办公邮箱')}
+
info@crancloud.com
+
+
+
{t('手机号')}
+
18910298984
+
+
+
{t('开户银行')}
+
北京市 朝阳区 建国路 支行
+
+
+
{t('开户名')}
+
王磊
+
+
+
{t('账号')}
+
6334 **** **** 2030
+
+
+ + ); } } diff --git a/src/pages/Dashboard/Providers/Create/index.jsx b/src/pages/Dashboard/Providers/Create/index.jsx new file mode 100644 index 00000000..1dc02372 --- /dev/null +++ b/src/pages/Dashboard/Providers/Create/index.jsx @@ -0,0 +1,153 @@ +import React, { Component } from 'react'; +import { observer, inject } from 'mobx-react'; +import { Link } from 'react-router-dom'; +import { translate } from 'react-i18next'; + +import { + Button, Input, Checkbox, Icon +} from 'components/Base'; +import { Stepper } from 'components/Layout'; +import CertificateInfo from '../CertificateInfo'; + +import styles from './index.scss'; + +@translate() +@inject(({ rootStore }) => ({ + rootStore, + providerStore: rootStore.providerStore, + createStore: rootStore.providerCreateStore, + user: rootStore.user +})) +@observer +export default class ApplicationCreate extends Component { + // todo + async componentDidMount() {} + + renderSuccessMessage() { + const { createStore, t } = this.props; + + return ( +
+ +
{t('提交成功')}
+
+ {t('你的认证信息我们已经收到，会尽快完成审核。')} +
+
{t('请留意审核结果通知。')}
+ + + +
+ +
+
+ ); + } + + renderCreateFrom() { + const { createStore, t } = this.props; + const { checkedProtocol, changeProtocol } = createStore; + + return ( +
+
+
{t('基本信息')}
+
{t('以下信息对于平台审核服务商资质非常重要，请准确填写')}:
+
+
+
{t('公司名称')}
+
+ +
+
+
+
{t('公司官网')}
+
+ +
+
+
+
{t('业务简介')}
+
+