|
|
@@ -1,11 +1,15 @@
|
|
|
import React, {Component} from 'react';
|
|
|
-import {Layout, Card, Button, Avatar, Spin, Icon} from 'antd';
|
|
|
+import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification} from 'antd';
|
|
|
import lo from '../../../images/lo.png'
|
|
|
import './index.css'
|
|
|
import {graphqlUrl} from "../../../config";
|
|
|
-import {SHOW_ALL_CASE} from "../../../gql";
|
|
|
+import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
|
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
import {request} from 'graphql-request'
|
|
|
+import UserCustom from "./UserCustom";
|
|
|
+import {Query} from "react-apollo";
|
|
|
+import gql from "graphql-tag";
|
|
|
+import {getCookie} from "../../../cookie";
|
|
|
|
|
|
const {Content} = Layout;
|
|
|
const {Meta} = Card;
|
|
|
@@ -15,12 +19,22 @@ class CaseShow extends Component {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
examplesIoobot: [],
|
|
|
- examplesOthers: []
|
|
|
+ examplesOthers: [],
|
|
|
+ showCustom: false,
|
|
|
+ chosenSchemaID: ''
|
|
|
}
|
|
|
}
|
|
|
|
|
|
componentWillMount() {
|
|
|
this._isMounted = true;
|
|
|
+ // 查询是否登录
|
|
|
+ let userID = getCookie('user_id');
|
|
|
+ if (userID !== undefined && userID !== '') {
|
|
|
+ this.setState({
|
|
|
+ userID
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
|
|
|
let cases = data.case_by_props;
|
|
|
console.log(cases);
|
|
|
@@ -40,86 +54,152 @@ class CaseShow extends Component {
|
|
|
this._isMounted = false;
|
|
|
}
|
|
|
|
|
|
+ schemaIDChangeBucket = (schemaID) => {
|
|
|
+ if (this.props.location && this.props.location.state) {
|
|
|
+ switch (schemaID) {
|
|
|
+ case 'order_schemaID':
|
|
|
+ return 'appointment';
|
|
|
+ case 'ecommerce_schemaID':
|
|
|
+ return 'e-commerce';
|
|
|
+ case 'bills_schemaID':
|
|
|
+ return 'bills';
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ backToMe = () => {
|
|
|
+ this.setState({
|
|
|
+ showCustom: false
|
|
|
+ })
|
|
|
+ };
|
|
|
|
|
|
render() {
|
|
|
+ let {userID, showCustom, chosenSchemaID} = this.state;
|
|
|
return (
|
|
|
<div id="example-show">
|
|
|
<Layout style={{padding: '24px', minHeight: '300px'}}>
|
|
|
<Content className="content">
|
|
|
- <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
|
|
|
- <div className="caseAllShow">
|
|
|
- {
|
|
|
- this.state.examplesIoobot.length === 0 ?
|
|
|
- <Spin/>
|
|
|
- :
|
|
|
- this.state.examplesIoobot.map((item, index) => (
|
|
|
- <span key={index} 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.props.history.push({
|
|
|
- pathname: `/common/example/deploy-cloud-choose`,
|
|
|
- state: {caseID: item.id,}
|
|
|
- });
|
|
|
- }}><FormattedMessage id='step more'/></Button>
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Meta
|
|
|
- avatar={<Avatar src={lo}/>}
|
|
|
- title={item.title}
|
|
|
- description={item.description}
|
|
|
- />
|
|
|
- </Card>
|
|
|
- </span>
|
|
|
- ))
|
|
|
- }
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/*<div>*/}
|
|
|
- {/*<div className={'schema-name'}><FormattedMessage id='other developer case'/></div>*/}
|
|
|
- {/*<div className="caseAllShow">*/}
|
|
|
- {/*{*/}
|
|
|
- {/*this.state.examplesOthers.length === 0 ?*/}
|
|
|
- {/*<Spin/>*/}
|
|
|
- {/*:*/}
|
|
|
- {/*this.state.examplesOthers.map((item, index) => (*/}
|
|
|
- {/*<span key={index} 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.props.history.push({*/}
|
|
|
- {/*pathname: `/common/deploy-cloud-choose`,*/}
|
|
|
- {/*state: {caseID: item.id,}*/}
|
|
|
- {/*});*/}
|
|
|
- {/*}}><FormattedMessage id='step more'/></Button>*/}
|
|
|
- {/*]}*/}
|
|
|
- {/*>*/}
|
|
|
- {/*<Meta*/}
|
|
|
- {/*avatar={<Avatar src={item.user_id.avatar}/>}*/}
|
|
|
- {/*title={item.title}*/}
|
|
|
- {/*description={item.description}*/}
|
|
|
- {/*/>*/}
|
|
|
- {/*</Card>*/}
|
|
|
- {/*</span>*/}
|
|
|
- {/*))*/}
|
|
|
- {/*}*/}
|
|
|
- {/*</div>*/}
|
|
|
- {/*</div>*/}
|
|
|
+ {
|
|
|
+ !showCustom ?
|
|
|
+ <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 className="caseAllShow">
|
|
|
+ {
|
|
|
+ this.state.examplesIoobot.length === 0 ?
|
|
|
+ <Spin/>
|
|
|
+ :
|
|
|
+ this.state.examplesIoobot.map((item, index) => (
|
|
|
+ <Row key={index}>
|
|
|
+ <Col span={16}>
|
|
|
+ <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>
|
|
|
+ <div
|
|
|
+ className={'schema-name'}>想要定制化该案例
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>联系作者</div>
|
|
|
+ <div>
|
|
|
+ <Icon type="mail"/>
|
|
|
+ {
|
|
|
+ thisCase.user_id.email ? thisCase.user_id.email : '该作者未留下联系方式'
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>自行修改代码</div>
|
|
|
+ <div>
|
|
|
+ <Icon type="github"/>
|
|
|
+ {
|
|
|
+ thisCase.codeAddress ? thisCase.codeAddress : '该作者未留下代码仓库地址'
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ <UserCustom
|
|
|
+ userID={userID}
|
|
|
+ bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
|
|
|
+ history={this.props.history}
|
|
|
+ backToMe={this.backToMe}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
</Content>
|
|
|
</Layout>
|
|
|
</div>
|
kulley