|
|
@@ -1,5 +1,5 @@
|
|
|
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, Tabs, Select} from 'antd';
|
|
|
import lo from '../../../images/lo.png'
|
|
|
import './index.css'
|
|
|
import {graphqlUrl} from "../../../config";
|
|
|
@@ -11,6 +11,7 @@ import {Query} from "react-apollo";
|
|
|
import gql from "graphql-tag";
|
|
|
import {getCookie} from "../../../cookie";
|
|
|
|
|
|
+const TabPane = Tabs.TabPane;
|
|
|
const {Content} = Layout;
|
|
|
const {Meta} = Card;
|
|
|
|
|
|
@@ -18,10 +19,13 @@ class CaseShow extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
- examplesIoobot: [],
|
|
|
- examplesOthers: [],
|
|
|
+ examplesMP: [],
|
|
|
+ examplesPublic: [],
|
|
|
+ examplesH5: [],
|
|
|
showCustom: false,
|
|
|
- chosenSchemaID: ''
|
|
|
+ chosenSchemaID: '',
|
|
|
+ activeKey: '1',
|
|
|
+ showCaseID: 'order-react-CaseID'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -37,13 +41,14 @@ class CaseShow extends Component {
|
|
|
|
|
|
request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
|
|
|
let cases = data.case_by_props;
|
|
|
- console.log(cases);
|
|
|
- let examplesIoobot = cases.filter(case1 => case1.user_id.id === 'ioobot');
|
|
|
- let examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
|
|
|
+ let examplesMP = cases.filter(case1 => case1.description === '小程序');
|
|
|
+ let examplesPublic = cases.filter(case2 => case2.description === '公众号');
|
|
|
+ let examplesH5 = cases.filter(case2 => case2.description === 'H5');
|
|
|
if (this._isMounted) {
|
|
|
this.setState({
|
|
|
- examplesIoobot,
|
|
|
- examplesOthers
|
|
|
+ examplesMP,
|
|
|
+ examplesPublic,
|
|
|
+ examplesH5
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -76,7 +81,13 @@ class CaseShow extends Component {
|
|
|
};
|
|
|
|
|
|
render() {
|
|
|
- let {userID, showCustom, chosenSchemaID} = this.state;
|
|
|
+ let {userID, showCustom, chosenSchemaID, activeKey, showCaseID} = this.state;
|
|
|
+ const tabStyle = {
|
|
|
+ paddingTop: '50px',
|
|
|
+ paddingBottom: '50px',
|
|
|
+ height: '550px',
|
|
|
+ display: 'inline-block',
|
|
|
+ };
|
|
|
return (
|
|
|
<div id="example-show">
|
|
|
<Layout style={{padding: '24px', minHeight: '300px'}}>
|
|
|
@@ -84,18 +95,16 @@ class CaseShow extends Component {
|
|
|
{
|
|
|
!showCustom ?
|
|
|
<div>
|
|
|
- <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/></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}}>
|
|
|
+ <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) {
|
|
|
@@ -108,88 +117,154 @@ class CaseShow extends Component {
|
|
|
|
|
|
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>{thisCase.title}</div>
|
|
|
+ <div className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
</Query>
|
|
|
- </Col>
|
|
|
- <Col span={4}>
|
|
|
- <div>
|
|
|
- <div
|
|
|
- className={'schema-name'}>想要定制化该案例
|
|
|
- </div>
|
|
|
+ </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}>
|
|
|
+
|
|
|
+ </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>联系作者</div>
|
|
|
+ <div
|
|
|
+ className={'schema-name'}>想要定制化该案例
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <Icon type="mail"/>
|
|
|
- {
|
|
|
- item.user_id.email ? item.user_id.email : '该作者未留下联系方式'
|
|
|
- }
|
|
|
+ <div>联系作者</div>
|
|
|
+ <div>
|
|
|
+ <Icon type="mail"/>
|
|
|
+ {
|
|
|
+ item.user_id.email ? item.user_id.email : '该作者未留下联系方式'
|
|
|
+ }
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div>自行修改代码</div>
|
|
|
<div>
|
|
|
- <Icon type="github"/>
|
|
|
- {
|
|
|
- item.codeAddress ? item.codeAddress : '该作者未留下代码仓库地址'
|
|
|
- }
|
|
|
+ <div>自行修改代码</div>
|
|
|
+ <div>
|
|
|
+ <Icon type="github"/>
|
|
|
+ {
|
|
|
+ item.codeAddress ? item.codeAddress : '该作者未留下代码仓库地址'
|
|
|
+ }
|
|
|
+ </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={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>
|
|
|
</div>
|
|
|
:
|
xy