Merge branch 'master' of http://gogs.ioobot.com:6680/ioobot/online

src/app/App.jsx

@@ -30,7 +30,7 @@ class App extends Component {
                 let cases = data.case_by_props;
                 let examplesFirst = cases.filter(cases => cases.title.includes('预约'));
                 let examplesSecond = cases.filter(cases => cases.title.includes('服装'));
-                let examplesThird = cases.filter(cases => cases.title.includes('少年博览'));
+                let examplesThird = cases.filter(cases => cases.title.includes('小小杂志'));
                 if (this._isMounted) {
                     this.setState({
                         examplesFirst,

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -1,6 +1,6 @@
 
 import React, {Component} from 'react';
-import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification} from 'antd';
+import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification,Tag } from 'antd';
 import lo from '../../../images/lo.png'
 import './index.css'
 import {graphqlUrl} from "../../../config";
@@ -38,19 +38,39 @@ class CaseShow extends Component {
 
         request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                 let cases = data.case_by_props;
-                console.log(cases);
+                // console.log(cases);
                 let examplesIoobot = cases.filter(case1 => case1.user_id.id === 'ioobot');
+                let IooList = this.examplesFilter(examplesIoobot);
+
                 let examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
+                let UserList = this.examplesFilter(examplesOthers);
+
                 if (this._isMounted) {
                     this.setState({
-                        examplesIoobot,
-                        examplesOthers
+                        examplesIoobot:IooList,
+                        examplesOthers:UserList
                     })
                 }
             }
         )
     }
 
+    examplesFilter(example) {
+        // console.log('examples',example);
+        let hash = {},i = 0,list = [];
+
+        example.forEach(function(item) {
+            let {title} = item;
+            hash[title] ? list[hash[title] - 1].content.push(item) : hash[title] = ++i && list.push({
+                title,
+                content: [item],
+            });
+        });
+
+        // console.log('list',list);
+        return list;
+    }
+
     componentWillUnmount() {
         this._isMounted = false;
     }
@@ -76,137 +96,200 @@ class CaseShow extends Component {
         })
     };
 
+    showCustom = (item) => {
+        this.setState({
+            showCustom: true,
+            chosenSchemaID: item
+        })
+    };
+
     render() {
         let {userID, showCustom, chosenSchemaID} = this.state;
+
         return (
             <div id="example-show">
-                <Layout style={{padding: '24px', minHeight: '300px'}}>
-                    <Content className="content">
-                        {
-                            !showCustom ?
+                <Layout style={{padding: '24px 48px', minHeight: '300px'}}>
+                    {
+                        !showCustom ?
+                            <div>
+                                <div className={'card card-head'}>
+                                    <Card.Grid className={'card-head-item orange-change'} >
+                                        <p>我们永久无年费 &nbsp;&nbsp;&nbsp;&nbsp; 告别高成本</p>
+                                        <p>省钱、更省心</p>
+                                    </Card.Grid>
+                                    <Card.Grid className={'card-head-item pink-change'} >
+                                        <p>数据完全私有 &nbsp;&nbsp;&nbsp;&nbsp; 安全更可靠</p>
+                                        <p>数据分析图表为您提供更细致的服务</p>
+                                    </Card.Grid>
+                                    <Card.Grid className={'card-head-item blue-change'} >
+                                        <p>模板不满意 &nbsp;&nbsp;&nbsp;&nbsp; 快来定制化吧！</p>
+                                        <p>上手有困难，联系我们即可</p>
+                                        <Button
+                                            onClick={() => {
+                                                this.props.history.push({
+                                                    pathname: `/common/communication`
+                                                })}}>立即定制</Button>
+                                    </Card.Grid>
+                                </div>
+                                <div className={'schema-name'}>
+                                    <FormattedMessage id='ioobot case'/>
+                                </div>
                                 <div>
-                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/></div>
-                                    <div>
-                                        <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
-                                        <div>
-                                            {
-                                                this.state.examplesIoobot.length === 0 ?
-                                                    <Spin/>
-                                                    :
-                                                    this.state.examplesIoobot.map((item, index) => (
-                                                        <Row key={index} className='case-item'>
-                                                            <Col span={12} style={{padding:'20px'}}>
-                                                                <Query query={gql(SHOW_CASE)} variables={{id: item.id}}>
-                                                                    {
-                                                                        ({loading, error, data}) => {
-                                                                            if (loading) {
-                                                                                return <Spin/>
-                                                                            }
-                                                                            if (error) {
-                                                                                return 'error!';
-                                                                            }
-                                                                            let thisCase = data.case_by_id;
-
-                                                                            return (
-                                                                                <div>
-                                                                                    <div className={'case-detail-attention'}> {thisCase.detailAttention ?
-                                                                                        <div>
-                                                                                            <Icon type="alert"/>{thisCase.detailAttention}
-                                                                                        </div>
-                                                                                        :
-                                                                                        ''
-                                                                                    }
-                                                                                    </div>
-                                                                                    <div
-                                                                                        className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
-                                                                                    <div className={'detail-images'}>
-                                                                                        <img
-                                                                                            key={thisCase.detailImages[0]}
-                                                                                            src={thisCase.detailImages[0]}
-                                                                                            alt=""
-                                                                                            height="500"/>
-                                                                                    </div>
+                                    {
+                                        this.state.examplesIoobot.length === 0 ?
+                                            <Spin/>
+                                            :
+                                            this.state.examplesIoobot.map((item, index) => {
+                                                let exampleList = item.content;
+                                                let gzh = exampleList.filter(case1 => case1.description === '微信公众号');
+                                                let xcx = exampleList.filter(case1 => case1.description === '微信小程序');
+                                                let value = exampleList[0];
+                                                return(
+                                                    <Row key={index} className='card card-case' type="flex" justify="space-around" align="middle">
+                                                        <Col span={6} style={{padding:'20px'}}>
+                                                            <div className="wrap">
+                                                                <div className="case-name">{value.title}</div>
+                                                                <div className="wrapper">
+                                                                    <div >
+                                                                        <div >
+                                                                            <div >模板简介:</div>
+                                                                            <div >{value.detailDescription ? value.detailDescription : '暂无简介' }</div>
+                                                                        </div>
+                                                                        <br/>
+                                                                        <div >
+                                                                            {value.detailAttention ?
+                                                                                <div>适用行业: &nbsp;&nbsp;
+                                                                                    <Tag color="blue">{value.detailAttention}</Tag>
                                                                                 </div>
-                                                                            )
-                                                                        }
-                                                                    }
-                                                                </Query>
-                                                            </Col>
-                                                            <Col span={4}>
-                                                                <div>
-                                                                    <div
-                                                                        className={'schema-name'}>想要定制化该案例
-                                                                    </div>
-                                                                    <div>
-                                                                        <div>联系作者</div>
-                                                                        <div>
-                                                                            <Icon type="mail"/>
-                                                                            {
-                                                                                item.user_id.email ? item.user_id.email : '该作者未留下联系方式'
+                                                                                :
+                                                                                ''
                                                                             }
                                                                         </div>
-                                                                    </div>
-                                                                    <div>
-                                                                        <div>自行修改代码</div>
-                                                                        <div>
-                                                                            <Icon type="github"/>
-                                                                            {
-                                                                                item.codeAddress ? item.codeAddress : '该作者未留下代码仓库地址'
-                                                                            }
+                                                                        <br/>
+                                                                        <div className="left-end">
+                                                                            <div>
+                                                                                <Icon type="mail"/>&nbsp;&nbsp;
+                                                                                {
+                                                                                    value.user_id.email ? value.user_id.email : '该作者未留下联系方式'
+                                                                                }
+                                                                            </div>
+                                                                            <div>
+                                                                                <Icon type="github"/>&nbsp;&nbsp;
+                                                                                {
+                                                                                    value.codeAddress ?
+                                                                                        <a href={value.codeAddress}>查看源码 可自行修改使用</a>
+                                                                                        :
+                                                                                        '该作者未留下代码仓库地址'
+                                                                                }
+                                                                            </div>
                                                                         </div>
                                                                     </div>
                                                                 </div>
-                                                            </Col>
-                                                            <Col span={8}>
-                                                                <div style={{padding: '10px 0'}}>
-                                                                    <Card
-                                                                        key={index}
-                                                                        style={{width: 300}}
-                                                                        cover={<div className='cover-div'><img
-                                                                            className='cover-img'
-                                                                            src={item.img}
-                                                                            alt={item.title + '' + item.description}/>
-                                                                        </div>}
-                                                                        actions={[
-                                                                            <span>已部署: {item.deployedNum}</span>,
-                                                                            <span><Icon
-                                                                                type="like"/>: {item.like}</span>,
-                                                                            <Button type="primary" onClick={() => {
-                                                                                this.setState({
-                                                                                    showCustom: true,
-                                                                                    chosenSchemaID: item.schema_id.id
-                                                                                })
-                                                                            }}><FormattedMessage id='one more step'/></Button>
-                                                                        ]}
-                                                                    >
-                                                                        <Meta
-                                                                            avatar={<Avatar src={lo}/>}
-                                                                            title={item.title}
-                                                                            description={item.description}
-                                                                        />
-                                                                    </Card>
-                                                                </div>
-                                                            </Col>
-                                                        </Row>
-                                                    ))
-                                            }
+                                                            </div>
+                                                        </Col>
+                                                        <Col span={9} style={{padding:'20px'}}>
+                                                            {gzh.length ?
+                                                                <CaseShowDetail caseContent={gzh} showCustom={this.showCustom}/>
+                                                                :
+                                                                <div>敬请期待</div>
+                                                            }
+
+                                                        </Col>
+                                                        <Col span={9} style={{padding:'20px'}}>
+                                                            {xcx.length ?
+                                                                <CaseShowDetail caseContent={xcx} showCustom={this.showCustom}/>
+                                                                :
+                                                                <div>敬请期待</div>
+                                                            }
+                                                        </Col>
+                                                    </Row>
+                                                )
+                                            })
+                                    }
+                                </div>
+                            </div>
+                            :
+                            <UserCustom
+                                userID={userID}
+                                bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
+                                history={this.props.history}
+                                backToMe={this.backToMe}
+                            />
+                    }
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default CaseShow;
+
+class CaseShowDetail extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let caseDetail = this.props.caseContent[0];
+        // console.log('caseDetail',caseDetail);
+
+        return(
+            <div key={caseDetail.id}>
+                <Query query={gql(SHOW_CASE)} variables={{id: caseDetail.id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return <Spin/>
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+                            let thisCase = data.case_by_id;
+
+                            return (
+                                <div>
+                                    <div className={'case-show-head'}>{caseDetail.description}</div>
+                                    <div className={'wrapper'}>
+                                        <div >
+                                            <img
+                                                key={thisCase.detailImages[0]}
+                                                src={thisCase.detailImages[0]}
+                                                alt=""
+                                                height="500"
+                                            />
+                                        </div>
+                                        <div className={'right'}>
+                                            <div className="cl-center" >
+                                                <div className='cover-div'>
+                                                    <img
+                                                        className='cover-img'
+                                                        src={caseDetail.img}
+                                                        alt={caseDetail.title + '' + caseDetail.description}/>
+                                                </div>
+                                            </div>
+                                            <div className="cl-center">
+                                                微信扫一扫立即体验
+                                            </div>
+                                            <div className="cl-center">
+                                                <Button type="primary"
+                                                        style={{borderRadius:30}}
+                                                        onClick={() => {
+                                                            this.props.showCustom(caseDetail.schema_id.id);
+                                                        }}><FormattedMessage id='Publish immediately'/></Button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                                :
-                                <UserCustom
-                                    userID={userID}
-                                    bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
-                                    history={this.props.history}
-                                    backToMe={this.backToMe}
-                                />
-                        }
 
-                    </Content>
-                </Layout>
+                            )
+                        }
+                    }
+                </Query>
             </div>
         )
     }
 }
 
-export default CaseShow;

src/app/basicVersion/caseShow/UserCustom.js

@@ -3,13 +3,14 @@ import {Link} from 'react-router-dom';
 import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
 import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
 import {CloudConfig} from "../../../login/CloudConfig";
-import {Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
+import {Layout,Button, message, Modal, Icon, Steps, Row, Col} from 'antd';
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
 import {idGen} from "../../../func";
 import axios from 'axios';
 import './index.css';
 
+const {Content} = Layout;
 const Step = Steps.Step;
 axios.defaults.withCredentials = true;
 
@@ -219,38 +220,41 @@ class UserCustom extends Component {
         let {cloudName, customName, disableDeployButton, userID, check, dbKind, bucketName, deployFailed} = this.state;
         let {appId, secretID, secretKey} = this.cloudState;
         return (
-            <div>
-                <div className="column-menu" onClick={() => {
-                    this.props.backToMe()
-                }}>
-                    <Icon type="left" style={{color: '#3187FA'}}/>
-                    <FormattedMessage id="back to case show"/>
+            <Content className="content">
+                <div>
+                    <div className="column-menu" onClick={() => {
+                        this.props.backToMe()
+                    }}>
+                        <Icon type="left" style={{color: '#3187FA'}}/>
+                        <FormattedMessage id="back to case show"/>
+                    </div>
+
+                    <Row>
+                        <Col span={9} offset={2}>
+                            <div className='step-kind'>
+                                发布体验
+                            </div>
+                            <Steps direction="vertical" current={2}>
+                                <Step title=<Step00/> />
+                                <Step title=<Step01/> />
+                            </Steps>
+                        </Col>
+                        <Col span={9} offset={2}>
+                            <div className='step-kind'>
+                                发布上线
+                            </div>
+                            <Steps direction="vertical" current={5}>
+                                <Step title=<Step10/> />
+                                <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
+                                <Step title=<Step12/> />
+                                <Step title=<Step13/> />
+                                <Step title=<Step14/> />
+                            </Steps>
+                        </Col>
+                    </Row>
                 </div>
+            </Content>
 
-                <Row>
-                    <Col span={9} offset={2}>
-                        <div className='step-kind'>
-                            发布体验
-                        </div>
-                        <Steps direction="vertical" current={2}>
-                            <Step title=<Step00/> />
-                            <Step title=<Step01/> />
-                        </Steps>
-                    </Col>
-                    <Col span={9} offset={2}>
-                        <div className='step-kind'>
-                            发布上线
-                        </div>
-                        <Steps direction="vertical" current={5}>
-                            <Step title=<Step10/> />
-                            <Step title=<Step11 getCloudDetail={this.getCloudDetail} userID={userID}/> />
-                            <Step title=<Step12/> />
-                            <Step title=<Step13/> />
-                            <Step title=<Step14/> />
-                        </Steps>
-                    </Col>
-                </Row>
-            </div>
         )
     }
 }

src/app/basicVersion/caseShow/index.css

@@ -55,11 +55,106 @@
     padding-left: 10px;
 }
 
-.case-item {
-    margin-bottom: 50px;
+.card {
+    background: white;
+    min-height: 150px;
     box-shadow: 3px 8px 16px 3px rgba(0,0,0,0.2);
 }
 
+.card-head {
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.card-head-item {
+    margin: 20px 30px;
+    border-radius: 5px;
+    padding: 12px;
+    box-shadow: none;
+}
+
+.card-head-item p {
+    color: white;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.card-head-item .ant-btn{
+    color: #608fff;
+    border-radius: 30px;
+    float: right;
+}
+
+.orange-change{
+    background-image: linear-gradient(to top, #ff884e 0%, #f9d8b8 100%);
+}
+
+.pink-change{
+    background-image: linear-gradient(to top, #f95755 0%, #fbaeab 100%);
+}
+
+.blue-change{
+    background-image: linear-gradient(to top, #5d8eff 0%, #b6d9ff 100%);
+}
+
+.card-case {
+    margin-bottom: 50px;
+}
+
+.case-name {
+    color: #101010;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 50px;
+}
+
+.case-show-head {
+    text-align: center;
+    font-size: 16px;
+    color: black;
+    padding-top: 20px;
+}
+
+.wrap {
+    height: 100%;
+    min-height: 540px;
+    flex-flow: column;
+    display:flex;
+}
+
+.wrapper {
+    flex: 1;
+    display:flex;
+}
+
+.left, .middle, .right {
+    flex: 1;
+    display:flex;
+    flex-flow: column;
+    padding: 5px 0;
+}
+.cl {
+    flex: 1;
+    margin: 5px;
+}
+
+.left-end {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.cl-center {
+    flex: 1;
+    margin: 5px;
+    text-align: center;
+}
+
+.center {
+    text-align: center;
+}
+
 .step-kind {
     text-align: center;
     margin: 60px 0;
@@ -69,4 +164,5 @@
 .step-block {
     height: 120px;
     font-size: 20px;
-}
+}
+

src/language/en_US.js

@@ -184,7 +184,7 @@ const en_US = {
     'showIDE': 'showIDE',
     'closeIDE': 'closeIDE',
     'step more': 'step more',
-    'one more step': 'immediate use',
+    'Publish immediately': 'Publish immediately',
     'ioobot case': 'ioobot case',
     'other developer case': 'other developer case'
 };

src/language/zh_CN.js

@@ -185,7 +185,7 @@ const zh_CN = {
     'showIDE': '开始数据操作',
     'closeIDE': '关闭它',
     'step more': '进一步',
-    'one more step': '立即使用',
+    'Publish immediately': '立即发布',
     'ioobot case': '模板案例',
     'other developer case': '其他开发者提交的案例'
 };