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

src/case/ShopApp/src/App.css

@@ -11,7 +11,6 @@
     width: 300px;
     height: 534px;
     overflow: hidden;
-    padding: 15px 0;
     overflow-x: hidden;
     overflow-y: hidden;
     background:#fff;
@@ -38,7 +37,8 @@ p.p1,p.p2,p.p3{
 .pageWrap{
     margin-top: 45px;
     background: #ffffff;
-    border: 2px solid red;
+    /*border: 2px solid red;*/
+    height: 100%;
 }
 
 

src/case/ShopApp/src/components/ProductDetailPage/Card.css

@@ -0,0 +1,26 @@
+.card {
+    box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    width: 100%;
+    border-radius: 5px;
+}
+
+
+
+.container {
+    position: relative;
+    padding: 2px 16px;
+    padding-top: 10px;
+}
+
+.price{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: red;
+    
+}
+
+.footer{
+    padding: 5px 0;
+}

src/case/ShopApp/src/components/ProductDetailPage/Card.jsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+import './Card.css'
+
+
+export default class Card extends Component{
+    constructor(props){
+        super(props)
+        console.log('1',props)
+        this.state={
+            product:props.product
+        }
+    }
+
+
+    componentWillReceiveProps(props){
+        console.log('5',props)
+        this.setState({
+            product:props.product
+        })
+    }
+
+    render(){
+        const product =this.state.product
+        return (
+            <div className="card">
+                <img src={product.img} alt="Avatar" style={{width:"100%",height:'200px'}}/>
+                <div className="container">
+                    <h4>{product.name}</h4> 
+                    <p>{product.intro}</p>
+                    <span className="price">￥{product.price}</span>
+                    <div className="footer">
+                        <span>剩余:{product.stock}</span>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/case/ShopApp/src/components/ProductDetailPage/ProductDetail.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Card from './Card'
 
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
@@ -20,13 +21,15 @@ export default class ProductDetail extends Component{
         })
     }
 
-    componentDidMount(){
+    componentWillMount(){
         this.getProduct()
     }
+
+    
     render(){
         return(
             <div>
-                商品详情页
+               <Card product={this.state.product}/>
             </div>
         )
     }

src/components/common/generateJs/GenerateJs.jsx

@@ -15,6 +15,7 @@ class GenerateJs extends Component {
         this.state = {
             schemaID:props.schemaID,
             schemaName:props.schemaName,
+            graphqlJs:'',
             queryList:[],
             mutationList:[],
             show: false
@@ -33,7 +34,6 @@ class GenerateJs extends Component {
                 let mutationList = [];
                 let graphqlJs = beautify(res.data, { indent_size: 2, space_in_empty_paren: true });
                 // console.log('beautify graphqlJs',graphqlJs);
-                // console.log('graphqlJs', graphqlJs);
                 graphqlJs.split("}\n}\n").map((item) => {
                     if (item.indexOf('query')>-1) queryList.push(item+"}\n}\n");
                     else mutationList.push(item+"}\n}\n");
@@ -45,6 +45,7 @@ class GenerateJs extends Component {
                 // console.log('mutationList',mutationList);
                 if (res.data !== '') {
                     _this.setState({
+                        graphqlJs,
                         queryList,
                         mutationList,
                         show: true