add

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification, Tabs, Select} from 'antd';
-import lo from '../../../images/lo.png'
+import {Layout, Butt, Spin, Row, Col, Tabs} from 'antd';
 import './index.css'
 import {graphqlUrl} from "../../../config";
 import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
@@ -13,15 +12,13 @@ import {getCookie} from "../../../cookie";
 
 const TabPane = Tabs.TabPane;
 const {Content} = Layout;
-const {Meta} = Card;
 
 class CaseShow extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            examplesMP: [],
-            examplesPublic: [],
-            examplesH5: [],
+            examplesFirst: [],
+            examplesSecond: [],
             showCustom: false,
             chosenSchemaID: '',
             activeKey: '1',
@@ -41,14 +38,12 @@ class CaseShow extends Component {
 
         request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                 let cases = data.case_by_props;
-                let examplesMP = cases.filter(case1 => case1.description === '小程序');
-                let examplesPublic = cases.filter(case2 => case2.description === '公众号');
-                let examplesH5 = cases.filter(case2 => case2.description === 'H5');
+                let examplesFirst = cases.filter(case1 => case1.title.includes('预约'));
+                let examplesSecond = cases.filter(case2 => case2.title.includes('服装店'));
                 if (this._isMounted) {
                     this.setState({
-                        examplesMP,
-                        examplesPublic,
-                        examplesH5
+                        examplesFirst,
+                        examplesSecond,
                     })
                 }
             }
@@ -81,9 +76,8 @@ class CaseShow extends Component {
     };
 
     render() {
-        let {userID, showCustom, chosenSchemaID, activeKey, showCaseID} = this.state;
+        let {userID, showCustom, chosenSchemaID, examplesFirst, examplesSecond} = this.state;
         const tabStyle = {
-            paddingTop: '50px',
             paddingBottom: '50px',
             height: '550px',
             display: 'inline-block',
@@ -95,177 +89,30 @@ class CaseShow extends Component {
                         {
                             !showCustom ?
                                 <div>
-                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage
-                                        id='scan and use'/></div>
-                                    <div>
-                                        <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
-                                            <TabPane tab="公众号" key="1">
-                                                <div>
-                                                    <Row>
-                                                        <Col span={12}>
-                                                            <Row>
-                                                                <Query query={gql(SHOW_CASE)} variables={{id: showCaseID}}>
-                                                                    {
-                                                                        ({loading, error, data}) => {
-                                                                            if (loading) {
-                                                                                return <Spin/>
-                                                                            }
-                                                                            if (error) {
-                                                                                return 'error!';
-                                                                            }
-                                                                            let thisCase = data.case_by_id;
-
-                                                                            return (
-                                                                                <div>
-                                                                                    <div>{thisCase.title}</div>
-                                                                                    <div className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
-                                                                                </div>
-                                                                            )
-                                                                        }
-                                                                    }
-                                                                </Query>
-                                                            </Row>
-                                                            <Row>
-                                                                {
-                                                                    this.state.examplesMP.map((item, index) => (
-                                                                        <div
-                                                                            className='cover-div'
-                                                                            onMouseEnter={() => {
-                                                                                this.setState({
-                                                                                    showCaseID: item.id
-                                                                                })
-                                                                            }}
-                                                                        >
-                                                                            <img
-                                                                                className='cover-img'
-                                                                                src={item.img}
-                                                                                alt={item.title + '' + item.description}
-                                                                            />
-                                                                            <div>{item.title}</div>
-                                                                        </div>
-                                                                    ))
-                                                                }
-                                                            </Row>
-                                                        </Col>
-                                                        <Col span={6}>
-                                                            这个地方是截图，可以放在 detailImage 里面
-                                                        </Col>
-                                                    </Row>
-
-                                                    {/*下面这串代码仅供参考，可以整体删除*/}
-                                                    {
-                                                        this.state.examplesMP.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>
-                                                                                    </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 : '该作者未留下代码仓库地址'
-                                                                                }
-                                                                            </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>
-                                            </TabPane>
-                                            <TabPane onMouseEnter={() => {
-                                                this.setState({activeKey: '2'})
-                                            }} tab="小程序" key="2">Content of Tab 2</TabPane>
-                                            <TabPane onMouseEnter={() => {
-                                                this.setState({activeKey: '3'})
-                                            }} tab="H5 网页" key="3">Content of Tab 3</TabPane>
-                                        </Tabs>
-                                    </div>
+                                    <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                        <TabPane tab="预约" key="1">
+                                            <div style={{marginLeft: 100}}>
+                                                {
+                                                    examplesFirst.length === 0 ?
+                                                        <Spin/> :
+                                                        <BaiduShow
+                                                            examples={examplesFirst}
+                                                        />
+                                                }
+                                            </div>
+                                        </TabPane>
+                                        <TabPane tab="电商" key="2">
+                                            <div style={{marginLeft: 100}}>
+                                                {
+                                                    examplesSecond.length === 0 ?
+                                                        <Spin/> :
+                                                        <BaiduShow
+                                                            examples={examplesSecond}
+                                                        />
+                                                }
+                                            </div>
+                                        </TabPane>
+                                    </Tabs>
                                 </div>
                                 :
                                 <UserCustom
@@ -275,7 +122,6 @@ class CaseShow extends Component {
                                     backToMe={this.backToMe}
                                 />
                         }
-
                     </Content>
                 </Layout>
             </div>
@@ -285,3 +131,90 @@ class CaseShow extends Component {
 
 export default CaseShow;
 
+
+class BaiduShow extends Component {
+    constructor(props) {
+        super(props);
+        console.log(props);
+        this.state = {
+            showCaseID: props.examples[0].id
+        }
+    }
+
+    render() {
+        let {examples} = this.props;
+        let {showCaseID} = this.state;
+        return (
+            <Query query={gql(SHOW_CASE)} variables={{id: showCaseID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let thisCase = data.case_by_id;
+
+                        return (
+                            <Row>
+                                <Col span={12}>
+                                    <Row>
+                                        <div>
+                                            <div className={'case-detail-title'}>{thisCase.title}</div>
+                                            <div
+                                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                                            <div className='cover-div'>
+                                                <img
+                                                    className='cover-img'
+                                                    src={thisCase.img}
+                                                    alt={thisCase.title + '' + thisCase.description}
+                                                />
+                                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
+                                            </div>
+
+                                        </div>
+                                    </Row>
+                                    <Row>
+                                        {
+                                            examples.map((item, index) => (
+                                                <div
+                                                    className='logo-cover-div'
+                                                    onMouseEnter={() => {
+                                                        this.setState({
+                                                            showCaseID: item.id
+                                                        })
+                                                    }}
+                                                    key={index}
+                                                >
+                                                    <img
+                                                        className='logo-cover-img'
+                                                        src={item.img}
+                                                        alt={item.title + '' + item.description}
+                                                    />
+                                                    <div>{item.description}</div>
+                                                </div>
+                                            ))
+                                        }
+                                    </Row>
+                                </Col>
+                                <Col span={6}>
+                                    <div className={'detail-images'}>
+                                        <img
+                                            key={thisCase.detailImages[0]}
+                                            src={thisCase.detailImages[0]}
+                                            alt=""
+                                            height="500"/>
+                                    </div>
+                                </Col>
+                            </Row>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+
+

src/app/basicVersion/caseShow/index.css

@@ -10,13 +10,23 @@
 }
 
 .cover-div {
+
+}
+
+.cover-img {
+    width: 170px;
+    height: 170px;
+    margin-top: 50px;
+    border: 5px solid #ebebeb;
+}
+
+.logo-cover-div {
     display: inline-block;
-    height: 200px;
+    margin: 50px 50px 20px 0;
     text-align: center;
-    margin: 20px;
 }
 
-.cover-img {
+.logo-cover-img {
     width: 100px;
     height: 100px;
 }
@@ -62,13 +72,20 @@
     padding: 20px 40px 20px 0;
 }
 
+.case-detail-title {
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 40px;
+}
+
 .case-detail-attention {
     color: red;
 }
 
 .case-detail-description {
-    color: #3f536e;
-    font-size: 16px;
+    font-size: 22px;
+    line-height: 30px;
+    margin-top: 20px;
 }
 
 .column-menu span{