重构shopapp页面结构

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>
+            
         )
     }
 }