增加选择页面

src/app/basicVersion/BasicVersion.jsx

@@ -7,6 +7,7 @@ import '../developVersion/index.css';
 import ExampleShow from "./exampleShow/ExampleShow";
 import MyDeploy from "./myDeploy/MyDeploy";
 import Communication from "./communication/Communication";
+import DeployCloudChoose from "./exampleShow/DeployCloudChoose";
 import {logoutUrl} from "../../config";
 import {getCookie, setCookie} from "../../cookie";
 import {GET_USER} from "../../gql";
@@ -139,6 +140,7 @@ class BasicVersion extends Component {
                         <Route path="/common/example" exact component={ExampleShow}/>
                         <Route path="/common/deploy" component={MyDeploy}/>
                         <Route path="/common/communication" component={Communication}/>
+                        <Route path="/common/deploy-cloud-choose" component={DeployCloudChoose}/>
                     </Switch>
                 </Layout>
 

src/app/basicVersion/exampleShow/DeployCloudChoose.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+
+import {Layout, Button} from 'antd';
+
+const {Content} = Layout;
+
+class DeployCloudChoose extends Component{
+    constructor(){
+        super();
+        this.state={
+
+        }
+    }
+
+    render(){
+        return(
+            <div className={'deploy-choose-cloud'}>
+                <Layout style={{ padding: '24px',minHeight:'300px' }}>
+                    <Content style={{ padding: '20px 50px', background: '#fff' }}>
+                        <div className={'choose-cloud'}>
+                            <span className={'choose-cloud-title'}>系统默认设置</span><span className={'choose-cloud-content'}>部署在系统云服务商，部署成功后返回结果</span>
+                        </div>
+                        <div className={'choose-cloud'}>
+                            <span className={'choose-cloud-title'}>自定义设置</span><span className={'choose-cloud-content'}>部署在自有云服务商，部署成功后返回结果，可登陆云服务商后台查看部署结果</span>
+                        </div>
+                        <div className={'choose-cloud-button-group'}>
+                            <Button className={'choose-cloud-button'} type='primary'>系统默认部署</Button>
+                            <Button className={'choose-cloud-button'} type='primary'>自定义参数设置</Button>
+                        </div>
+                    </Content>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default DeployCloudChoose

src/app/basicVersion/exampleShow/ExampleShow.jsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
-import {Layout, Card, Icon, Button, Avatar} from 'antd';
+import {Layout, Card, notification, Button, Avatar} from 'antd';
 import lo from '../../../images/lo.png'
 import './index.css'
+import {getCookie} from "../../../cookie";
 
 const {Content} = Layout;
 const {Meta} = Card;
@@ -9,17 +10,30 @@ const {Meta} = Card;
 class ExampleShow extends Component {
     constructor(props) {
         super(props);
-        this.state = {}
+        this.state = {
+            userID: ''
+        }
+    }
+
+    componentWillMount() {
+        let userID = getCookie('user_id');
+        if (userID !== undefined && userID !== '') {
+            this.setState({
+                userID
+            })
+        }
     }
 
     renderCard = () => {
         let examples = [
-            {title: '预约', description: '小程序', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/gh_09a69a242b5a_258.jpg', deployedNum: 100},
-            {title: '预约', description: '公众号', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/qrcode_for_gh_abcdd8e08f94_258.jpg', deployedNum: 90},
-            {title: '电商', description: '小程序', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',  deployedNum: 120},
-            {title: '电商', description: '公众号', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', deployedNum: 105}
+            {schemaID: '', title: '预约', description: '小程序', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/gh_09a69a242b5a_258.jpg', deployedNum: 100},
+            {schemaID: '', title: '预约', description: '公众号', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/qrcode_for_gh_abcdd8e08f94_258.jpg', deployedNum: 90},
+            {schemaID: '', title: '电商', description: '小程序', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',  deployedNum: 120},
+            {schemaID: '', title: '电商', description: '公众号', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', deployedNum: 105}
         ];
 
+        let {userID} = this.state;
+
         return examples.map((item, index) => (
             <span key={index} style={{padding: '10px 0'}}>
                     <Card
@@ -29,7 +43,20 @@ class ExampleShow extends Component {
                         actions={[
                             <span>已部署: {item.deployedNum}</span>,
                             <Button type="primary" onClick={() => {
-                                console.log('部署')
+                                if(userID) {
+                                    this.props.history.push({
+                                        pathname: `/common/deploy-cloud-choose`
+                                    })
+                                } else {
+                                    notification['warning']({
+                                        message: '需要登录',
+                                        description: '后续使用，需要先登录',
+                                    });
+
+                                    this.props.history.push({
+                                        pathname: `/login`
+                                    })
+                                }
                             }}>部署</Button>
                         ]}
                     >

src/app/basicVersion/exampleShow/index.css

@@ -19,3 +19,35 @@
     max-width: 100%;
     max-height: 100%;
 }
+
+.deploy-choose-cloud {
+    position: relative;
+}
+
+.choose-cloud {
+    margin-top: 20px;
+}
+
+.choose-cloud-title {
+    color: rgba(49, 135, 250, 1);
+    font-weight: 400;
+    font-size: 16px;
+    width: 150px;
+    display: inline-block;
+}
+
+.choose-cloud-content {
+    padding-left: 50px;
+    font-weight: 400;
+    font-size: 16px;
+}
+
+.choose-cloud-button-group {
+    position: absolute;
+    right: 100px;
+    bottom: 50px;
+}
+
+.choose-cloud-button {
+    margin-left: 20px;
+}

src/app/developVersion/DevelopVersion.jsx

@@ -356,6 +356,10 @@ class GraphqlSidebar extends Component {
                                     position: 'fixed'
                                 }}
                             >
+                                <Menu.Item >
+                                    <Icon type="loading" />
+                                    <span><FormattedMessage id="loading"/></span>
+                                </Menu.Item>
                             </Menu>
                         );
                         if (error) return 'error!';
@@ -487,6 +491,10 @@ class WxConfigSiderbar extends Component {
                                     position: 'fixed'
                                 }}
                             >
+                                <Menu.Item >
+                                    <Icon type="loading" />
+                                    <span><FormattedMessage id="loading"/></span>
+                                </Menu.Item>
                             </Menu>
                         );
                         if (error) return 'error!';

src/language/en_US.js

@@ -160,6 +160,7 @@ const en_US = {
 
     'Example': 'Example',
     'My deploy': 'My deploy',
-    'Communication': 'Communication'
+    'Communication': 'Communication',
+    'loading': 'loading...'
 };
 export default en_US;

src/language/zh_CN.js

@@ -161,6 +161,7 @@ const zh_CN = {
 
     'Example': '例子',
     'My deploy': '我的部署',
-    'Communication': '交流'
+    'Communication': '交流',
+    'loading': '加载中...'
 };
 export default zh_CN;