save

src/App.js

@@ -9,18 +9,20 @@ class App extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            selectedTab: 'home'
+            selectedTab: 'home',
+            tabHidden: false
         }
     }
 
-    changeTabBar = (tab) => {
+    changeTabBar = (tab, hidden) => {
         this.setState({
-            selectedTab: tab
+            selectedTab: tab,
+            tabHidden: hidden !== undefined ? hidden : false
         })
     }
 
     render() {
-        let {selectedTab} = this.state;
+        let {selectedTab, tabHidden} = this.state
         return (
             <div style={{
                 position: 'fixed',
@@ -32,6 +34,7 @@ class App extends Component {
                     unselectedTintColor="#949494"
                     tintColor="#33A3F4"
                     barTintColor="white"
+                    hidden={tabHidden}
                 >
                     <TabBar.Item
                         title="首页"
@@ -78,27 +81,19 @@ class App extends Component {
 export default App
 
 const HomeUnselectedIcon = () => (
-    <div style={{
-        width: '22px',
-        height: '22px',
-        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
-    }}/>
+    <Icon type="home" style={{fontSize: 22}}/>
 )
 
 const HomeSelectedIcon = () => (
-    <div style={{
-        width: '22px',
-        height: '22px',
-        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
-    }}/>
+    <Icon type="home" theme="twoTone" style={{fontSize: 22}}/>
 )
 
 const CartUnselectedIcon = () => (
-    <Icon type="shopping" style={{fontSize:22}}/>
+    <Icon type="shopping" style={{fontSize: 22}}/>
 )
 
 const CartSelectedIcon = () => (
-    <Icon type="shopping" theme="twoTone" style={{fontSize:22}}/>
+    <Icon type="shopping" theme="twoTone" style={{fontSize: 22}}/>
 )
 
 const MyUnselectedIcon = () => (

src/pages/home/all/index.js

@@ -0,0 +1,153 @@
+import React, {Component} from "react"
+import {productbyprops} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
+
+class All extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI']
+        }
+    }
+
+    render() {
+        const data = [
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '夹克',
+                id: 'jacket'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '外套',
+                id: 'coat'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '衬衫',
+                id: 'shirt'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '半身裙',
+                id: 'skirts'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '针织衫',
+                id: 'sweater'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '风衣',
+                id: 'windbreak'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '裤子',
+                id: 'pants'
+            },
+            {
+                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                text: '更多',
+                id: 'more'
+            }
+        ]
+        let {changePageInHome} = this.props
+        return (
+            <div>
+                <Carousel
+                    autoplay={true}
+                    infinite
+                >
+                    {this.state.data.map(val => (
+                        <a
+                            key={val}
+                            href="http://www.alipay.com"
+                            style={{
+                                display: 'inline-block',
+                                width: '100%',
+                                height: 'auto',
+                                maxHeight: '200px',
+                                overflow: 'hidden'
+                            }}
+                        >
+                            <img
+                                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
+                                alt=""
+                                style={{width: '100%', verticalAlign: 'top'}}
+                            />
+                        </a>
+                    ))}
+                </Carousel>
+                <Grid
+                    data={data}
+                    hasLine={false}
+                    onClick={(kind)=>{
+                        changePageInHome('kind', {id: kind.id})
+                    }}/>
+                <WhiteSpace/>
+                <div className='guess-wrap'>
+                    <Query query={gql(productbyprops)} variables={{status: '1'}}>
+                        {
+                            ({loading, error, data}) => {
+                                if (loading) {
+                                    return (
+                                        <div className="loading-center">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    )
+                                }
+                                if (error) {
+                                    return 'error!'
+                                }
+                                return (
+                                    <Like
+                                        data={data.productbyprops}
+                                        changePageInHome={changePageInHome}
+                                    />
+                                )
+                            }
+                        }
+                    </Query>
+                </div>
+            </div>
+        )
+    }
+}
+
+class Like extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {data, changePageInHome} = this.props
+        return (
+            <div className='guess-wrapper'>
+                <div className='guess-title'>- 猜你喜欢 -</div>
+                <Grid data={data}
+                      columnNum={2}
+                      hasLine={false}
+                      onClick={(guess)=>{
+                          changePageInHome('detail', {id: guess.id})
+                      }}
+                      renderItem={dataItem => (
+                          <div key={dataItem.id} className='guess-item'>
+                              <div className='guess-item-img' style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                              <div className='guess-item-description'>
+                                  <div className='guess-item-name'>{dataItem.name}</div>
+                                  <div className='guess-item-price'>{dataItem.price}</div>
+                              </div>
+                          </div>
+                      )}
+                />
+            </div>
+        )
+    }
+}
+
+export default All

src/pages/home/detail/index.css

@@ -0,0 +1,97 @@
+.detail-wrap {
+    height: 100%;
+}
+
+.detail-wrapper {
+    height: 100%;
+}
+
+.detail-simple-show {
+    height: 70%;
+    background-color: white;
+}
+
+.detail-img {
+    width: 90%;
+    height: 75%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+}
+
+.detail-below-img-in-simle-show-hahahahah {
+    height: 30%;
+    margin-left: 10px;
+}
+
+.detail-name {
+    font-size: 1.6rem;
+}
+
+.detail-price {
+    color: orangered;
+    font-size: 1.8rem;
+    font-weight: 500;
+}
+
+.detail-price::before {
+    content: '￥';
+}
+
+.detail-stock {
+    font-size: 1.2rem;
+}
+
+.detail-stock::before {
+    content: '库存：';
+}
+
+.detail-complicate-show {
+    margin-top: 20px;
+    height: 700px;
+    background-color: #397f44;
+}
+
+.detail-bottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 8%;
+    background-color: white;
+}
+
+.detail-bottom-cart {
+    display: inline-block;
+    height: 100%;
+    width: 15%;
+    border: 1px solid lightgrey;
+}
+
+.detail-bottom-home {
+    display: inline-block;
+    height: 100%;
+    width: 15%;
+    border: 1px solid lightgrey;
+}
+
+.detail-bottom-add {
+    display: inline-block;
+    width: 35%;
+    text-align: center;
+    color: white;
+    background-color: orange;
+    height: 100%;
+    font-size: 20px;
+    border: 1px solid lightgrey;
+}
+
+.detail-bottom-buy {
+    display: inline-block;
+    width: 35%;
+    text-align: center;
+    color: white;
+    background-color: orangered;
+    height: 100%;
+    font-size: 20px;
+    border: 1px solid lightgrey;
+}

src/pages/home/detail/index.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react'
+import {NavBar, Icon, ActivityIndicator} from 'antd-mobile'
+import {productbyid} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+import './index.css'
+
+class Detail extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {id, changePageInHome} = this.props
+        return (
+            <div className='detail-wrap'>
+                <NavBar
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => changePageInHome('all', {}, false)}
+                    rightContent={[
+                        <Icon key="1" type="ellipsis"/>,
+                    ]}
+                >商品详情</NavBar>
+                <Query query={gql(productbyid)} variables={{id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+
+                            return (
+                                <DetailRender data={data.productbyid}/>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        )
+    }
+}
+
+export default Detail
+
+class DetailRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    render() {
+        let {data} = this.props;
+        return (
+            <div className='detail-wrapper'>
+                <div className='detail-simple-show'>
+                    <div className='detail-img' style={{backgroundImage: "url('"+ data.img + "')"}}/>
+                    <div className='detail-below-img-in-simle-show-hahahahah'>
+                        <div className='detail-name'>{data.name}</div>
+                        <div className='detail-price'>{data.price}</div>
+                        <div className='detail-stock'>{data.stock}</div>
+                    </div>
+                </div>
+                <div className='detail-complicate-show'>详情详情</div>
+                <div className='detail-bottom'>
+                    <div className='detail-bottom-cart'>购物车</div>
+                    <div className='detail-bottom-home'>店铺</div>
+                    <div className='detail-bottom-add'>加入购物车</div>
+                    <div className='detail-bottom-buy'>立即购买</div>
+                </div>
+            </div>
+        )
+    }
+}

src/pages/home/index.css

@@ -28,6 +28,7 @@
 
 .guess-item-img {
     background-size: cover;
+    background-repeat: no-repeat;
     width: 60%;
     height: 80%;
     display: block;

src/pages/home/index.js

@@ -1,135 +1,51 @@
 import React, {Component} from 'react'
-import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
 import './index.css'
-import {Query} from "react-apollo"
-import gql from "graphql-tag"
-import {productbyprops} from "../../utils/gql"
+import All from './all'
+import Kind from './kind'
+import Detail from './detail'
 
 class Home extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
+            page: 'all',
+            param: {}
         }
     }
 
-    render() {
-        const data = [
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '基础护理'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '面膜'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '洁面'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '防晒'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '面部保湿'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '彩妆'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '指甲油'
-            },
-            {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-                text: '更多'
-            }
-        ]
-
-        return (
-            <div>
-                <Carousel
-                    autoplay={true}
-                    infinite
-                >
-                    {this.state.data.map(val => (
-                        <a
-                            key={val}
-                            href="http://www.alipay.com"
-                            style={{
-                                display: 'inline-block',
-                                width: '100%',
-                                height: 'auto',
-                                maxHeight: '200px',
-                                overflow: 'hidden'
-                            }}
-                        >
-                            <img
-                                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
-                                alt=""
-                                style={{width: '100%', verticalAlign: 'top'}}
-                            />
-                        </a>
-                    ))}
-                </Carousel>
-                <Grid data={data} hasLine={false}/>
-                <WhiteSpace/>
-                <div className='guess-wrap'>
-                    <Query query={gql(productbyprops)} variables={{status: '1'}}>
-                        {
-                            ({loading, error, data}) => {
-                                if (loading) {
-                                    return (
-                                        <div className="loading-center">
-                                            <ActivityIndicator text="Loading..." size="large"/>
-                                        </div>
-                                    )
-                                }
-                                if (error) {
-                                    return 'error!'
-                                }
-                                return (
-                                    <Like data={data.productbyprops}/>
-                                )
-                            }
-                        }
-                    </Query>
-                </div>
-            </div>
-        )
+    changePageInHome = (page, param, hidden) => {
+        this.props.changeTabBar('home', hidden !== undefined ? hidden : true)
+        this.setState({
+            page,
+            param: param ? param : {}
+        })
     }
-}
 
-export default Home
+    renderPage = () => {
+        let {page, param} = this.state
 
-class Like extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
+        switch (page) {
+            case 'all':
+                return <All changePageInHome={this.changePageInHome} {...param}/>
+            case 'kind':
+                return <Kind changePageInHome={this.changePageInHome} {...param}/>
+            case 'detail':
+                return <Detail changePageInHome={this.changePageInHome} {...param}/>
+            default:
+                return <div>这个页面不应该出现是</div>
+        }
     }
 
     render() {
-        let {data} = this.props
         return (
-            <div className='guess-wrapper'>
-                <div className='guess-title'>- 猜你喜欢 -</div>
-                <Grid data={data}
-                      columnNum={2}
-                      hasLine={false}
-                      renderItem={dataItem => (
-                          <div key={dataItem.id} className='guess-item'>
-                              <div className='guess-item-img' style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
-                              <div className='guess-item-description'>
-                                  <div className='guess-item-name'>{dataItem.name}</div>
-                                  <div className='guess-item-price'>{dataItem.price}</div>
-                              </div>
-                          </div>
-                      )}
-                />
+            <div style={{height: '100%'}}>
+                {
+                    this.renderPage()
+                }
             </div>
         )
     }
-}
+}
+
+export default Home
+

src/pages/home/kind/index.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react'
+import {NavBar, Icon} from 'antd-mobile'
+
+class Kind extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {id, changePageInHome} = this.props
+        return (
+            <div>
+                <NavBar
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => changePageInHome('all', {}, false)}
+                    rightContent={[
+                        <Icon key="1" type="ellipsis"/>,
+                    ]}
+                >商品分类</NavBar>
+            </div>
+        )
+    }
+}
+
+export default Kind

src/utils/gql.js

@@ -1,5 +1,5 @@
-const productbyprops =
-    `query productbyprops($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $intro: String, $price: Float, $img: String, $stock: Int) {
+const productbyprops = `
+    query productbyprops($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $intro: String, $price: Float, $img: String, $stock: Int) {
         productbyprops: product_by_props(category: $category updatedAt: $updatedAt name: $name createdAt: $createdAt status: $status intro: $intro price: $price img: $img stock: $stock) {
             category
             updatedAt
@@ -16,6 +16,25 @@ const productbyprops =
     }
 `
 
+const productbyid = `
+    query productbyid($id: ID) {
+        productbyid: product_by_id(id: $id) {
+            category
+            updatedAt
+            unit
+            name
+            createdAt
+            status
+            id
+            intro
+            price
+            img
+            stock
+        }
+    }
+`
+
 export {
-    productbyprops
+    productbyprops,
+    productbyid
 }