Merge remote-tracking branch 'origin/master'

src/app/App.jsx

@@ -364,7 +364,7 @@ class GraphqlSidebar extends Component {
                     ({loading, error, data}) => {
                         if (loading) return <Spin style={{marginLeft: 3}}/>;
                         if (error) return 'error!';
-                        console.log('CASE_SCHEMA_AND_PROJECT data', data);
+                        // console.log('CASE_SCHEMA_AND_PROJECT data', data);
                         localStorage.setItem('ecommerce', data.caseProject.find(project => project.schema_id.schemaName === 'ecommerce').schema_id.schemaData);
                         localStorage.setItem('subscribe', data.caseProject.find(project => project.schema_id.schemaName === 'subscribe').schema_id.schemaData);
                         localStorage.setItem('bills', data.caseProject.find(project => project.schema_id.schemaName === 'bills').schema_id.schemaData);

src/app/common/deploy/Deploy.jsx

@@ -8,22 +8,18 @@ import AmazonConfig from './amazon/AmazonConfig';
 
 import './index.css';
 
-const tabListNoTitle = [{
+const tabListNoTitle =
+[{
     key: 'tencent',
     tab: <FormattedMessage id='Tencent'/>,
+}, {
+    key: 'aliyun',
+    tab: <FormattedMessage id='Aliyun'/>,
+}, {
+    key: 'amazon',
+    tab: <FormattedMessage id='AWS'/>,
 }];
 
-// [{
-//     key: 'tencent',
-//     tab: <FormattedMessage id='Tencent'/>,
-// }, {
-//     key: 'aliyun',
-//     tab: <FormattedMessage id='Aliyun'/>,
-// }, {
-//     key: 'amazon',
-//     tab: <FormattedMessage id='AWS'/>,
-// }];
-
 
 class Deploy extends Component {
     constructor(props) {

src/app/common/deploy/ali/AliConfig.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-
+import {FormattedMessage} from 'react-intl';
 
 class AliConfig extends Component {
     constructor(props) {
@@ -13,7 +13,7 @@ class AliConfig extends Component {
     render() {
         return (
             <div>
-                aliyun
+                <p><b><FormattedMessage id="It is under development, please look forward to it. Thank you for your attention"/></b></p>
             </div>
         )
     }

src/app/common/deploy/amazon/AmazonConfig.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-
+import {FormattedMessage} from 'react-intl';
 
 class AmazonConfig extends Component {
     constructor(props) {
@@ -13,7 +13,7 @@ class AmazonConfig extends Component {
     render() {
         return (
             <div>
-                amazon
+                <p><b><FormattedMessage id="It is under development, please look forward to it. Thank you for your attention"/></b></p>
             </div>
         )
     }

src/app/common/deploy/huawei/HuaweiConfig.jsx

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-
+import {FormattedMessage} from 'react-intl';
 
 class HuaweiConfig extends Component {
     constructor(props) {
@@ -13,7 +13,7 @@ class HuaweiConfig extends Component {
     render() {
         return (
             <div>
-                huawei
+                <p><b><FormattedMessage id="It is under development, please look forward to it. Thank you for your attention"/></b></p>
             </div>
         )
     }

src/app/common/deploy/tencent/TencentConfig.js

@@ -105,7 +105,7 @@ class TencentConfig extends Component {
                                     data.project_by_id.schema_id.schemaState === 'ok' ?
                                         ''
                                         :
-                                        this.props.trialcase?
+                                        this.props.trialcase ?
                                             ''
                                             :
                                             <div style={{marginBottom: 10}}>
@@ -196,10 +196,16 @@ class TencentConfig extends Component {
                                             </FormattedMessage>
                                         </Col>
                                         <Col offset={2} span={6}>
-                                            <Button type='primary'
-                                                    disabled={data.project_by_id.schema_id.schemaState === 'ok' ? '' : 'disabled'}
-                                                    onClick={() => this.deployFC()}><FormattedMessage
-                                                id="deploy"/>!</Button>
+                                            {
+                                                this.props.trialcase ?
+                                                    ''
+                                                    :
+                                                    data.project_by_id.schema_id.schemaState === 'ok' ?
+                                                        <Button type='primary' onClick={() => this.deployFC()}><FormattedMessage id="deploy"/>!</Button>
+                                                        :
+                                                        <Button type='primary' disabled><FormattedMessage id="deploy"/>!</Button>
+
+                                            }
                                         </Col>
                                     </Row>
                                 </div>

src/app/common/manage/AliyunResult.js

@@ -1,34 +1,19 @@
 import React, {Component} from 'react';
 import {Switch, Input, Icon} from 'antd';
+import {FormattedMessage} from 'react-intl';
 
 class AliyunResult extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            url: '1111',
-            checked: true
+
         }
     }
 
     render() {
         return (
             <div>
-                <div style={{width: 300}}>
-                    <span>URL: </span>
-                    <Input
-                        placeholder="display your URL"
-                        prefix={<Icon type="copy"/>}
-                        value={this.state.url}
-                        onChange={() => {}}
-                        disabled={!this.state.checked}
-                    />
-                </div>
-                <div style={{marginTop: 30}}>
-                    <span>fc switch </span>
-                    <Switch defaultChecked onChange={(checked) => {
-                        this.setState({checked})
-                    }}/>
-                </div>
+                <p><b><FormattedMessage id="It is under development, please look forward to it. Thank you for your attention"/></b></p>
             </div>
         )
     }

src/app/common/manage/AmazonResult.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {Switch, Input, Icon} from 'antd';
-
+import {FormattedMessage} from 'react-intl';
 class AmazonResult extends Component {
     constructor(props) {
         super(props);
@@ -13,22 +13,7 @@ class AmazonResult extends Component {
     render() {
         return (
             <div>
-                <div style={{width: 300}}>
-                    <span>URL: </span>
-                    <Input
-                        placeholder="display your URL"
-                        prefix={<Icon type="copy"/>}
-                        value={this.state.url}
-                        onChange={() => {}}
-                        disabled={!this.state.checked}
-                    />
-                </div>
-                <div style={{marginTop: 30}}>
-                    <span>fc switch </span>
-                    <Switch defaultChecked onChange={(checked) => {
-                        this.setState({checked})
-                    }}/>
-                </div>
+                <p><b><FormattedMessage id="It is under development, please look forward to it. Thank you for your attention"/></b></p>
             </div>
         )
     }

src/app/common/manage/Manage.jsx

@@ -7,22 +7,18 @@ import AliyunResult from './AliyunResult';
 import AmazonResult from './AmazonResult';
 
 
-const tabListNoTitle = [{
+const tabListNoTitle =
+[{
     key: 'tencent',
     tab: <FormattedMessage id='Tencent'/>,
+}, {
+    key: 'aliyun',
+    tab: <FormattedMessage id='Aliyun'/>,
+}, {
+    key: 'amazon',
+    tab: <FormattedMessage id='AWS'/>,
 }];
 
-// [{
-//     key: 'tencent',
-//     tab: <FormattedMessage id='Tencent'/>,
-// }, {
-//     key: 'aliyun',
-//     tab: <FormattedMessage id='Aliyun'/>,
-// }, {
-//     key: 'amazon',
-//     tab: <FormattedMessage id='AWS'/>,
-// }];
-
 
 class Manage extends Component {
     constructor(props) {

src/app/graphqlService/TrialCase.jsx

@@ -91,7 +91,7 @@ class TrialCase extends Component {
                                     case 'manage':
                                         return <Manage trialcase={true} userID={this.state.userID} projectID={projectID} switchMenu={this.switchMenu} switchAPI={this.switchAPI}/>;
                                     case 'graphiql':
-                                        return <Graphql api={this.state.api}/>;
+                                        return <Graphql api={this.state.api} projectID={projectID}/>;
                                     case 'template':
                                         return <GenerateJs schemaID={schemaID} schemaName={schemaName}/>;
                                     case 'preview':

src/app/graphqlService/UserCreate.jsx

@@ -86,7 +86,7 @@ class UserCreate extends Component {
                                     case 'manage':
                                         return <Manage trialcase={false} userID={this.state.userID} projectID={projectID} switchMenu={this.switchMenu} switchAPI={this.switchAPI}/>;
                                     case 'graphiql':
-                                        return <Graphql api={this.state.api}/>;
+                                        return <Graphql api={this.state.api} projectID={projectID}/>;
                                     case 'template':
                                         return <GenerateJs schemaID={schemaID} schemaName={schemaName}/>;
                                     case 'metabase':

src/app/graphqlService/component/graphql/Graphql.jsx

@@ -1,22 +1,25 @@
 import React, {Component} from 'react';
-import {Input, Alert} from 'antd';
+import {Input, Spin} from 'antd';
 import GraphiQL from "graphiql";
 import fetch from "isomorphic-fetch";
-import {graphqlUrl} from "../../../../config";
+import gql from "graphql-tag";
+import {Query} from "react-apollo";
 
-class Graphql extends Component {
+import {GET_PROJECT} from "../../../../gql";
 
+class Graphql extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            api: props.api ? props.api : 'http://service-cbcf74bl-1254337200.ap-shanghai.apigateway.myqcloud.com/test/graphql'
-
-        }
+            api: props.api,
+            show: false
+        };
     };
 
     componentWillReceiveProps(next) {
         this.setState({
-            api: next.api ? next.api : 'http://service-cbcf74bl-1254337200.ap-shanghai.apigateway.myqcloud.com/test/graphql'
+            api: next.api,
+            show: false
         })
     }
 
@@ -30,16 +33,46 @@ class Graphql extends Component {
     };
 
     render() {
+        let projectID = this.props.projectID ? this.props.projectID : 'ecommerce_projectID';
         return (
-            <div>
-                {/*<Alert message="online 数据库，非开发环境请移除"*/}
-                       {/*type="warning" banner closable/>*/}
-                <Input style={{marginTop: 10}} addonBefore="POST" defaultValue={this.state.api}
-                       onChange={(e) => {
-                           this.setState({api: e.target.value})
-                       }}/>
-                <GraphiQL fetcher={this.graphQLFetcher}/>
-            </div>
+            <Query query={gql(GET_PROJECT)} variables={{id: projectID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        console.log(data);
+                        let group = data.project_by_id.apiGWGroup_id;
+                        if (this.state.api === '') {
+                            this.setState({
+                                // 多路径没做
+                                api: group.frontType.slice(0, 4) + '://' + group.defaultDomain +'/'+ group.environmentName + '/graphql',
+                                show: true
+                            })
+                        }
+                        return (
+                            <div>
+                                <Input
+                                    style={{marginTop: 10}}
+                                    addonBefore="POST"
+                                    defaultValue={this.state.api}
+                                    onChange={(e) => {
+                                        this.setState({api: e.target.value})
+                                    }}/>
+                                {
+                                    this.state.show?
+                                        <GraphiQL fetcher={this.graphQLFetcher}/>
+                                        :
+                                        ''
+                                }
+                            </div>
+                        )
+                    }
+                }
+            </Query>
         )
     }
 

src/app/graphqlService/component/schema/Schema.jsx

@@ -516,7 +516,8 @@ class CopySchemaButton extends Component {
             user_id: userID,
             schemaCreatedAt: createdAt,
             schemaUpdatedAt: '',
-            schemaState: 'copy',
+            // copy的时候直接给 ok，不用检测
+            schemaState: 'ok',
             schemaData: JSON.stringify([]),
             reference:  schemaID
         };

src/case/ShopApp/src/App.css

@@ -33,9 +33,7 @@ p.p1,p.p2,p.p3{
     font-size: 13px;
 }
 
-.pageWrap{
-    margin-top: 45px;
-}
+
 
 
 .indexPage{
@@ -51,5 +49,18 @@ div.am-activity-indicator-content,.am-activity-indicator.am-activity-indicator-t
     position: absolute !important;
 }
 
+.shopAppWrap .orderCnerWrap .am-tabs-default-bar-tab{
+    font-size: 12px !important;
+}
+
+.shopAppWrap .orderList button{
+    border-radius: 3px;
+    border: none;
+    background: green;
+    padding: 5px 10px;
+    color: #fff;
+}
+
+
 
 

src/case/ShopApp/src/App.js

@@ -100,7 +100,7 @@ class ShopApp extends Component {
       case ('detail'):
         return(
           <div className="pageWrap">
-            <ProductDetail product_id={this.state.product_id} setNum={setNum} />
+            <ProductDetail product_id={this.state.product_id} setNum={setNum} changePage={this.changePage}/>
           </div>
           )
   
@@ -137,7 +137,7 @@ class ShopApp extends Component {
         return(
           <div>
             <div className="pageWrap indexPage">
-              <HomePage />
+              <HomePage changePage={this.changePage}/>
             </div>
             <TabBarBottom changePage={this.changePage}/>
           </div>
@@ -185,8 +185,7 @@ class ShopApp extends Component {
       <PageContext.Provider value={{address_id,setAddressId,changePage,triggerAddress,getProductByIds,num,fromShopCar,setFromShopCar,setOrderId,order_id,product_id,fromOrderCenter}}>
           <div className="AppWrap">
             <div className="phone6s">
-              <div className="App">
-                <NavBars />
+              <div className="App shopAppWrap">
                 { this.renderPage(this.state.page) }{/*渲染页面*/}
               </div>
             </div>

src/case/ShopApp/src/components/Common/NavBar.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { NavBar, Icon } from 'antd-mobile';
+
+
+export default class NavBars extends Component{
+    render(){
+        let page=this.props.page||'home'
+        //console.log(this.props)
+        return(
+            <div className="navBars" style={{zIndex:"2000"}}>
+                <NavBar
+                mode="dark" 
+                icon={ <Icon type="left"/> }
+                onLeftClick={() => this.props.changePage(page)}
+                rightContent={[
+                    <Icon key="0" type="search" style={{ marginRight: '16px' }}/>,
+                    <Icon key="1" type="ellipsis" />,
+                ]}
+                ><span style={{fontSize:'14px'}}>{this.props.navBarText}</span>
+                </NavBar>
+            </div>
+        )
+    }
+}
+
+
+
+
+
+
+
+
+

src/case/ShopApp/src/components/HomePage/Cards.css

@@ -53,5 +53,5 @@ div.am-tab-bar-item{
 }
 
 div.am-card{
-   
+   border-radius: 0;
 }

src/case/ShopApp/src/components/HomePage/Cards.jsx

@@ -51,8 +51,8 @@ class Cards extends Component{
                                         <Card.Footer content="" extra={<div></div>} />
                                     </Card>
                                 {/*</Link>*/}
-                            <WhiteSpace size="lg" />
-                        </WingBlank>
+                                     <WhiteSpace size="lg" />
+                            </WingBlank>
                         )
                     }}
                 </PageContext.Consumer>

src/case/ShopApp/src/components/HomePage/HomePage.jsx

@@ -3,6 +3,7 @@ import { ActivityIndicator } from 'antd-mobile';
 import Search from './Search'
 import TabBarTop from './TabBarTop'
 import Cards from './Cards'
+import NavBars from '../Common/NavBar'
 
 import {graphqls} from '../../api/graphql_request'
 import {getProductByProps} from '../../api/graphql/product'
@@ -80,10 +81,14 @@ class HomePage extends Component{
                 <div>order</div>
             )
         }else{
+            //console.log('222changePage',this.props.changePage)
             return(
-                <div>
+                <div style={{paddingTop:"1px"}}>
                     <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-                    <Search getProductByName={this.getGoods.bind(this)}/>
+
+                    <NavBars navBarText="商品" changePage={this.props.changePage} page="index"/>
+
+                    <div style={{marginTop:"45px"}}><Search getProductByName={this.getGoods.bind(this)} /></div>
                     <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
                     <div className="productList">
                         <Cards products={this.state.products||[]} changePage={this.props.changePage}/>

src/case/ShopApp/src/components/OrderCenterPage/OrderCard.jsx

@@ -14,26 +14,25 @@ export default class OrderCard extends Component {
       <div>
         <WingBlank size="lg">
             <WhiteSpace size="lg" />
-                <Card>
-                    <Card.Header
-                    title={<span className="titleWrap"><span>{'订单号:'+order.id}</span><span>{order.createdAt}</span></span>}
-                    extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
-                    />
-                    <Card.Body>
-                    {/*循环渲染然一个订单内的所有产品列表*/}
-                    <div className="OrderProductList">
-                        {
-                            (order.orderProducts||[]).map((item,index)=>{
-                                console.log(index,item)
-                                return (<ProductCard key={item.id} orderProduct={item}/>)
-                            })
-                        }
+            <Card>
+                <Card.Header
+                title={<span className="titleWrap"><span>{'订单号:'+order.id}</span><span>{order.createdAt}</span></span>}
+                extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
+                />
+                <Card.Body>
+                {/*循环渲染然一个订单内的所有产品列表*/}
+                <div className="OrderProductList">
+                    {
+                        (order.orderProducts||[]).map((item,index)=>{
+                            console.log(index,item)
+                            return (<ProductCard key={item.id} orderProduct={item}/>)
+                        })
+                    }
 
-                    </div>
-                    </Card.Body>
-                    <Card.Footer content={<button onClick={()=>this.props.toDeleteOrder(order.id)}>删除</button>} extra={<div>{order.orderStatus==='0'?<button onClick={()=>this.props.toPay(order.id)}>去支付</button>:''}</div>} />
-                </Card>
-            <WhiteSpace size="lg" />
+                </div>
+                </Card.Body>
+                <Card.Footer content={<button  onClick={()=>this.props.toDeleteOrder(order.id)}>删除</button>} extra={<div>{order.orderStatus==='0'?<button onClick={()=>this.props.toPay(order.id)}>去支付</button>:''}</div>} />
+            </Card>
         </WingBlank>
       </div>
     )

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import OrderCard from './OrderCard'
 import { ActivityIndicator } from 'antd-mobile';
 import TabBarTop from './OrderTabTop'
+import NavBars from '../Common/NavBar'
 
 import './OrderCenterPage.css'
 
@@ -106,17 +107,18 @@ class OrderCenterPage extends Component {
   render() {
     const orderList=this.state.orderList||[]
     return (
-      <div>
-      <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-       <TabBarTop tabChange={this.tabChange} tabs={this.state.tabs}/>
-       <div className="orderList">
-        {
-            orderList.map((item,index)=>{
-                console.log(index,item)
-                return(<OrderCard order={item} key={item.id} toPay={this.toPay} toDeleteOrder={this.toDeleteOrder}/>)
-            })
-        }
-       </div>
+      <div className="orderCnerWrap">
+        <ActivityIndicator toast text="loading" animating={this.state.loading}/>
+        <NavBars navBarText="我的订单" changePage={this.props.changePage} page="user"/>
+        <div style={{marginTop:"45px"}}><TabBarTop tabChange={this.tabChange} tabs={this.state.tabs}/></div>
+        <div className="orderList">
+            {
+                orderList.map((item,index)=>{
+                    console.log(index,item)
+                    return(<OrderCard order={item} key={item.id} toPay={this.toPay} toDeleteOrder={this.toDeleteOrder}/>)
+                })
+            }
+        </div>
       </div>
     )
   }

src/case/ShopApp/src/components/OrderCenterPage/OrderTabTop.jsx

@@ -1,15 +1,13 @@
 import React, { Component } from 'react';
-import { Tabs, WhiteSpace } from 'antd-mobile';
+import { Tabs } from 'antd-mobile';
 
 class TabBarTop extends Component {
     render() {
       //console.log('this.state.products',this.state.products)
       return (
         <div>
-          <WhiteSpace />
             <Tabs  onChange={e=>this.props.tabChange(e)} tabs={this.props.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
             </Tabs>
-          <WhiteSpace />
         </div>
       );
     }

src/case/ShopApp/src/components/OrderPage/OrderCard.jsx

@@ -9,14 +9,13 @@ export default class OrderCard extends Component {
     if(product.product_id){
         return (
             <WingBlank size="lg">
-                <WhiteSpace size="lg" />
                     <Card>
                         <Card.Body>
                             <div className="cardWrap">
                                 <img src={product.product_id.img} alt="img" width="100px" height="100px"/>
                                 <div className="middle">
-                                    <div>{product.product_id.name}</div>
-                                    <div>{product.product_id.intro}</div>
+                                    <div style={{fontSize:"12px"}}>{product.product_id.name}</div>
+                                    <div style={{fontSize:"12px"}}>{product.product_id.intro}</div>
                                 </div>
                                 <div className="right">
                                     <div>￥{product.product_id.price}</div>
@@ -32,17 +31,16 @@ export default class OrderCard extends Component {
     }else{
         return (
             <WingBlank size="lg">
-                <WhiteSpace size="lg" />
                     <Card>
                         <Card.Body>
                             <div className="cardWrap">
                                 <img src={product.img} alt="img" width="100px" height="100px"/>
                                 <div className="middle">
-                                    <div>{product.name}</div>
-                                    <div>{product.intro}</div>
+                                    <div style={{fontSize:"12px"}}>{product.name}</div>
+                                    <div style={{fontSize:"12px"}}>{product.intro}</div>
                                 </div>
                                 <div className="right">
-                                    <div>￥{product.price}</div>
+                                    <div style={{fontSize:"12px"}}>￥{product.price}</div>
                                 </div>
                             </div>
                         </Card.Body>

src/case/ShopApp/src/components/OrderPage/OrederPage.css

@@ -6,7 +6,6 @@ div.addressWrap{
     font-size: 10px;
     display: flex;
     padding: 5px 2px;
-    border-bottom: 1px solid #ccc;
 }
 
 .addressWrap span{

src/case/ShopApp/src/components/OrderPage/OrederPage.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {ActivityIndicator} from 'antd-mobile';
 import {PageContext} from '../../context/context'
 import OrderCard from './OrderCard'
+import NavBars from '../Common/NavBar'
 
 
 
@@ -242,7 +243,10 @@ class OrderPage extends React.Component{
         return(
             <div className="orderWrap">
                 <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-                <div className="addressWrap">
+
+                <NavBars navBarText="创建订单" changePage={this.props.changePage} page="detail"/>
+
+                <div className="addressWrap" style={{marginTop:"45px"}}>
                     <List>
                         <Item
                         thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"

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

@@ -22,6 +22,7 @@
     
 }
 
+
 .container  .Cfooter{
     position: absolute;
     bottom: 2px;

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

@@ -26,8 +26,8 @@ export default class Card extends Component{
                 <img src={product.img} alt="Avatar" style={{width:"100%",height:'200px'}}/>
                 <div className="container">
                     <h4>{product.name}</h4> 
-                    <p>{product.intro}</p>
-                    <p>剩余:{product.stock}</p>
+                    <p style={{fontSize:"12px"}}>{product.intro}</p>
+                    <p style={{fontSize:"12px"}}>剩余:{product.stock}</p>
                     <span className="price">￥{product.price}</span>
                 </div>
             </div>

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Card from './Card'
+import NavBars from '../Common/NavBar'
 import './ProductDetail.css'
 
 import {ActivityIndicator} from 'antd-mobile';
@@ -37,8 +38,9 @@ export default class ProductDetail extends Component{
         return(
             <div className="detailWrap">
                 <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-               <Card product={this.state.product}/>
-               <UserAction product={this.state.product} setNum={this.props.setNum} />
+                <NavBars navBarText="创建订单" changePage={this.props.changePage} page="index"/>
+                <div style={{marginTop:"45px"}}><Card product={this.state.product}/></div>
+                <UserAction product={this.state.product} setNum={this.props.setNum} />
             </div>
         )
     }

src/case/ShopApp/src/components/ShopCarPage/ShopCarCard.css

@@ -15,3 +15,11 @@
 .right button{
     margin-top: 43px;
 }
+
+.deleteButton{
+    border-radius: 3px;
+    border: none;
+    background: green;
+    padding: 5px 10px;
+    color: #fff;
+}

src/case/ShopApp/src/components/ShopCarPage/ShopCarCard.jsx

@@ -11,7 +11,6 @@ export default class ShopCarCard extends Component {
         {shopCarList.map((item)=>{
           return (
             <div key={item.id}>
-            <WhiteSpace size="lg" />
             <Card full>
               <Card.Body>
                 <div className="cardWrap">
@@ -23,7 +22,7 @@ export default class ShopCarCard extends Component {
                   <div className="right">
                     <div>￥{item.product_id.price}</div>
                     <div>x {item.count}</div>
-                   <button onClick={()=>{deleteCarById(item.id)}}>刪除</button>
+                   <button onClick={()=>{deleteCarById(item.id)}} className="deleteButton">删除</button>
                   </div>
                 </div>
               </Card.Body>

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.css

@@ -15,6 +15,7 @@
     overflow-y: scroll;
     white-space: nowrap;
     height: 400px;
+    margin-top: 45px;
 }
 
 .footer{

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.jsx

@@ -5,6 +5,7 @@ import {ActivityIndicator} from 'antd-mobile';
 import './ShopCarPage.css'
 import {graphqls} from '../../api/graphql_request'
 import {getShopCarByProps,deleteCarByProps,createShopCar} from '../../api/graphql/shopCar'
+import NavBars from '../Common/NavBar'
 
 class ShopCarPage extends Component{
     constructor(props){
@@ -70,6 +71,7 @@ class ShopCarPage extends Component{
         return(
             <div className="shopCarPage">
                 <ActivityIndicator toast text="loading" animating={this.state.loading}/>
+                <NavBars navBarText="购物车" changePage={this.props.changePage} page="detail"/>
                 <div className="ShopCarList">
                     {/*this.renderShopCarList()*/}
                     <ShopCarCard shopCarList={this.state.shopCarList} deleteCarById={this.deleteCarById}/>

src/case/ShopApp/src/components/UserPage/UserPage.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Head from './Head'
 import Lists from '../Common/List'
+import NavBars from '../Common/NavBar'
 
 import {graphqls} from '../../api/graphql_request'
 import {getUserByProps} from '../../api/graphql/user'
@@ -36,14 +37,19 @@ class UserPage extends Component{
 
     render(){
         return(
-            <div className="UserPageWrap">
-                <div className="headerWrap">
-                    <Head user={this.state.user}/></div>
-                <div className="toWrap">
-                    <Lists text="我的订单" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg" callback={()=>{this.props.changePage('orderCenter')}}/>
-                    <Lists text="我的地址" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/address.svg" callback={()=>this.props.changePage('addressPage')}/>
+            <div>
+                <NavBars navBarText="用户中心" changePage={this.props.changePage} page="user"/>
+                <div className="UserPageWrap">
+                
+                    <div className="headerWrap">
+                        <Head user={this.state.user}/></div>
+                    <div className="toWrap">
+                        <Lists text="我的订单" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg" callback={()=>{this.props.changePage('orderCenter')}}/>
+                        <Lists text="我的地址" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/address.svg" callback={()=>this.props.changePage('addressPage')}/>
+                    </div>
                 </div>
             </div>
+            
         )
     }
 }