Merge remote-tracking branch 'origin/master'

src/case/BillApp/src/App.css

@@ -10,6 +10,7 @@
     overflow-y: hidden;
     overflow:scroll;
     margin-top: 1px;
+    background-color: #f5f5f5;
 }
 
 .billApp div.am-tabs-default-bar-tab{
@@ -22,7 +23,7 @@
     width: 100%;
     top: 0;
     left: 0;
-    z-index:100;
+    z-index:2;
 }
 
 .billApp  div.am-navbar{

src/case/BillApp/src/components/HomePage/HomePage.jsx

@@ -32,7 +32,7 @@ class HomePage  extends Component{
             bills:[],
             navBarText:'微记账本'
         }
-
+        
         //this.handleChange=this.handleChange.bind(this)
     }
 

src/case/BillApp/src/components/My/My.jsx

@@ -36,9 +36,6 @@ export default class My extends Component {
 
   }
 
-
-
-
   render() {
     return (
       <div>

src/case/BillApp/src/components/common/Head.css

@@ -4,6 +4,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    background-color: #fff;
 }
 
 .head .avatar{

src/case/OrderApp/src/App.css

@@ -1,13 +1,35 @@
 
 
-/* .title{
-    font-size: 18px;
-    font-weight: bold;
-    text-align: center;
-    padding: 10px;
-    color: #fff;
-    background: #ccc;  
-} */
+.orderApp .pageWrap{
+    position: relative;
+    z-index: 2;
+    height: 100%;
+    margin-top: 0;
+    padding-top: 45px;
+}
+.scrollPage{
+    height: 440px;
+    overflow-y: hidden;
+    overflow:scroll;
+    margin-top: 1px;
+}
+
+.orderApp div.am-tabs-default-bar-tab{
+    font-size: 10px;
+}
+
+
+.orderApp  .navBars{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index:2;
+}
+
+.orderApp  div.am-navbar{
+    background-color: black;
+}
 
 
 

src/case/OrderApp/src/App.js

@@ -1,24 +1,104 @@
 import React, { Component } from 'react';
+import {PageContext} from './components/context'
 
 import './App.css';
+import {graphqls} from './api/graphql_request'
+import {getStoreByProps} from './api/graphql/store'
+import {getSlidesByProps} from './api/graphql/slides'
 
-import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
+import HomePage from './components/HomePage/HomePage'
 
+import UserPage from './components/UserPage/userPage'
 
 
 class OrderApp extends Component {
-  // constructor(props){
-  //   super(props)
-  // }
-  
+
+  constructor(props){
+    super(props)
+    this.state={
+      page:'home',
+      store:[],
+      slide:[]
+    }
+    this.changePage=this.changePage.bind(this)
+  }
+
+  componentDidMount(){
+    this.getStores()
+    this.getSlides()
+  }
+
+  changePage(page){
+    this.setState({page})
+  }
+
+  getStores(){
+    //获取所有商家
+    return graphqls(getStoreByProps,{}).then((e)=>{
+      console.log(e.storebyprops)
+      this.setState({
+        store:e.storebyprops
+      })
+    })
+  }
+
+  getSlides(){
+    return graphqls(getSlidesByProps,{}).then((e)=>{
+
+      this.setState({ slide:e.slidsbyprops })
+    })
+  }
+
+
+  //根据状态渲染页面
+  renderPage(page){
+    switch(page){
+      case ('home'):
+        //console.log('++++1+++++',this.state.store)
+        return(
+          <div className="pageWrap">
+            <div className="scrollPage">
+              <HomePage changePage={this.changePage} store={this.state.store} slide={this.state.slide}/>
+            </div>
+          </div>
+          )
+
+      case ('user'):
+        return(
+          <div className="pageWrap">
+            <div className="scrollPage">
+              <UserPage changePage={this.changePage} />
+            </div>
+          </div>
+        )
+ 
+      default:
+          return(
+            <div>页面加载失败,请刷新页面</div>
+          )
+    }
+  }
+
+  renderBottom(){
+    let page=this.state.page
+    if(page==='home'||page==='user'){
+      return(<TabBarBottom changePage={this.changePage}/>)
+    }
+  }
+
   render() {
+    const changePage=this.changePage
     return (
       <div className="AppWrap">
         <div className="phone6s">
           <div className="App">
-            <NavBars />
-            <TabBarBottom />
+          <div className="App orderApp">
+            <PageContext.Provider value={changePage}>
+              {this.renderPage(this.state.page)}
+              {this.renderBottom()}
+            </PageContext.Provider>
+        </div>
           </div>
         </div>
       </div>

src/case/OrderApp/src/api/url_config.js

@@ -6,4 +6,3 @@ var config={
 export default config
 
 
-

src/case/OrderApp/src/components/App/NavBar.css

@@ -1,11 +0,0 @@
-.navBars{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index:100;
-}
-
-div.am-navbar{
-    background-color: black;
-}

src/case/OrderApp/src/components/App/TabBarBottom.jsx

@@ -1,8 +1,7 @@
 import React ,{Component} from 'react';
 import { TabBar } from 'antd-mobile';
 
-import UserPage from '../UserPage/userPage'
-import HomePage from '../HomePage/HomePage'
+
 
 import './TabBarBottom.css'
 
@@ -14,32 +13,22 @@ class TabBarBottom extends Component {
       hidden: false,
       fullScreen: true
     };
+
+    this.handleChange=this.handleChange.bind(this)
+
   }
 
-  renderContent(page) { 
-    if(page==='index'){
-      //console.log(page)
-      return (
-        <div className="pageWrap">
-          <HomePage />
-        </div>
-      );
-    }
 
-    if(page==='user'){
-      //console.log(page)
-      return (
-        <div className="pageWrap">
-          <UserPage />
-        </div>
-      );
-    }
-    
-    
+  //要保留，勿动
+  renderContent(page){}
+
+  handleChange(page){
+    this.props.changePage(page)
   }
 
   render() {
     //这里渲染一次
+    const handleChange=this.handleChange
     return (
       <div style={this.state.fullScreen ? { position: 'absolute', height: '100%', width: '100%', bottom: 0 } : { height: 400 }} className="TabBarBottom">
         <TabBar
@@ -66,6 +55,7 @@ class TabBarBottom extends Component {
             selected={this.state.selectedTab === 'index'}
          
             onPress={() => {
+              handleChange('home')
               this.setState({
                 selectedTab: 'index',
               });
@@ -95,6 +85,7 @@ class TabBarBottom extends Component {
   
             selected={this.state.selectedTab === 'user'}
             onPress={() => {
+              handleChange('user')
               this.setState({
                 selectedTab: 'user',
               });

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

@@ -5,10 +5,10 @@ import './Cards.css'
 
 
 class Cards extends Component{
-    // constructor(props){
-    //     //console.log('111',props)
-    //     super(props)
-    // }
+
+    componentWillReceiveProps(props){
+        console.log('++++333++++',props)
+    }
 
     onClickChange(e,d){
         //console.log('onClickChange',e,d)

src/case/OrderApp/src/components/HomePage/HomePage.jsx

@@ -1,10 +1,10 @@
 import React ,{Component} from 'react';
 
-import Slide from '../HomePage/Slide'
-import Cards from '../HomePage/Cards'
 
-import {graphqls} from '../../api/graphql_request'
-import {getStoreByProps} from '../../api/graphql/store'
+import NavBars from '../common/NavBar'
+import Slide from '../common/Slide'
+import Cards from './Cards'
+
 
 export default class HomePage extends Component{
     constructor(props){
@@ -12,28 +12,16 @@ export default class HomePage extends Component{
         this.state={
             store:[]
         }
-    }
-
-    getStores(){
-        //获取所有商家
-        graphqls(getStoreByProps,{}).then((e)=>{
-          console.log(e.storebyprops)
-          this.setState({
-            store:e.storebyprops
-          })
-        })
-      }
-    
-    componentDidMount(){
-        this.getStores()
+        //console.log('+++222+++',this.props.store)
     }
 
     render(){
         return (
             <div>
-                <Slide />
+                <NavBars navBarText="店铺" />
+                <Slide slide={this.props.slide}/>
                 <div className="subTitle">推荐店铺</div>
-                <Cards store={this.state.store||[]}/>
+                <Cards store={this.props.store||[]}/>
             </div>
         )
     }

src/case/OrderApp/src/components/ShopCarPage/shopCar.jsx

@@ -1,21 +0,0 @@
-import React, { Component } from 'react';
-
-class ShopCar extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-
-        }
-    }
-
-    render(){
-        return(
-            <div>ShopCar</div>
-        )
-    }
-}
-
-
-
-
-export default ShopCar

src/case/OrderApp/src/components/UserPage/userPage.jsx

@@ -1,5 +1,11 @@
 import React, { Component } from 'react';
 
+
+import NavBars from '../common/NavBar'
+import Head from '../common/Head'
+
+
+
 class UserPage extends Component{
     constructor(props){
         super(props)
@@ -7,10 +13,12 @@ class UserPage extends Component{
 
         }
     }
-
     render(){
         return(
-            <div>UserPage</div>
+            <div>
+                <NavBars navBarText="我的"/>
+                <Head />
+            </div>
         )
     }
 }

src/case/OrderApp/src/components/common/Alert.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+
+const alert = Modal.alert;
+
+export const dialog =(type,message)=>{
+    return new Promise((resolve,reject)=>{
+        alert(type, message, [
+            { text: '取消', onPress: () => {reject.call(null,0)}},
+            { text: '确认', onPress: () => {resolve.call(null,1)} },
+          ])
+    })
+}
+
+

src/case/OrderApp/src/components/common/Button.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
+// import { genPercentAdd } from 'antd/lib/upload/utils';
+
+export default class Buttons extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            buttonStyle:{
+                background:"green",
+                margin:'0 10px'
+            }
+        }
+    }
+    render(){
+        return (
+            <WingBlank>
+                <Button type="primary" style={this.state.buttonStyle} onClick={()=>this.props.changePage(this.props.toPage)}>{this.props.buttonText}</Button><WhiteSpace />
+            </WingBlank>
+        )
+    }
+}

src/case/OrderApp/src/components/common/Head.css

@@ -0,0 +1,15 @@
+.head{
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.head .avatar{
+    border-radius: 50%;
+}
+
+.nickName{
+    font-weight: bold;
+}

src/case/OrderApp/src/components/common/Head.jsx

@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import './Head.css'
+
+export default class Head extends Component {
+  render() {
+    return (
+      <div className="head">
+        <img className="avatar" src={this.props.icon||'https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg'} alt="head" width="50px" height="50px"/>
+        <div className="nickName">{this.props.name||'旺仔小馒头'}</div>
+      </div>
+    )
+  }
+}
+

src/case/OrderApp/src/components/common/List.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { List } from 'antd-mobile';
+const Item = List.Item;
+
+export default class Lists extends Component {
+  render() {
+    return (
+        <List >
+            {
+                this.props.icon ?
+                <Item
+                thumb={this.props.icon}
+                arrow="horizontal"
+                onClick={() => {this.props.callback()}}
+                >{this.props.text}</Item>
+                :
+                <Item
+                arrow="horizontal"
+                onClick={() => {this.props.callback()}}
+                >{this.props.text}</Item>
+            }
+        </List>
+    )
+  }
+}
+
+
+
+

src/case/OrderApp/src/components/App/NavBar.jsx → src/case/OrderApp/src/components/common/NavBar.jsx

@@ -1,24 +1,25 @@
 import React, { Component } from 'react';
 import { NavBar, Icon } from 'antd-mobile';
 
-import './NavBar.css'
+import {PageContext} from '../context'
+
+
 
 export default class NavBars extends Component{
-    goBack(){
-        console.log('back')
-    }
     render(){
+        let page=this.props.page||'home'
+        console.log(page)
         return(
             <div className="navBars">
                 <NavBar
                 mode="dark"
-                icon={<Icon type="left" />}
-                onLeftClick={() => this.goBack()}
+                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'}}>预约小程序</span>
+                ><span style={{fontSize:'14px'}}>{this.props.navBarText}</span>
                 </NavBar>
             </div>
         )
@@ -27,3 +28,9 @@ export default class NavBars extends Component{
 
 
 
+
+
+
+
+
+

src/case/OrderApp/src/components/HomePage/Slide.jsx → src/case/OrderApp/src/components/common/Slide.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Carousel, WingBlank } from 'antd-mobile';
-import {graphqls} from '../../api/graphql_request'
-import {getSlidesByProps} from '../../api/graphql/slides'
+
 
 import './Slide.css'
 
@@ -9,39 +8,21 @@ class Slide extends React.Component {
     constructor(props){
       super(props)
       this.state = {
-        data: ['1', '2', '3'],
-        imgHeight: 176,
+        imgHeight: 176
       }
     }
 
-    getSlides(){
-      return graphqls(getSlidesByProps,{}).then((e)=>{
-        return e.slidsbyprops
-      })
-    }
-    
-    componentDidMount() {
-      // simulate img loading
-     this.getSlides().then((e)=>{
-       console.log(e)
-       this.setState({
-        data:e
-       })
-     })
-    }
-
-    
     render() {
       return (
         <WingBlank>
           <Carousel
-            autoplay={false}
+            autoplay={true}
             infinite
             slideWidth={1}
-            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
-            afterChange={index => console.log('slide to', index)}
+            beforeChange={(from, to) => {}}
+            afterChange={index => {}}
           >
-            {this.state.data.map(item => (
+            {this.props.slide.map(item => (
               <a
                 key={item.toString()}
                 href="http://www.alipay.com"

src/case/OrderApp/src/components/common/Status.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ActivityIndicator } from 'antd-mobile';
+
+export const Loading=(text,show)=>{
+    return(<ActivityIndicator toast text={text} animating={show}/>)
+}

src/case/OrderApp/src/components/common/Toast.jsx

@@ -0,0 +1,11 @@
+//封装Toast
+import React, { Component } from 'react'
+import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
+
+
+export const successToast=(message,time)=> {
+  Toast.success(message, time);
+}
+export const failToast=(message,time)=> {
+  Toast.fail(message, time);
+}

src/case/OrderApp/src/components/context.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const PageContext=React.createContext()
+export const NumContext=React.createContext()
+

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

@@ -51,5 +51,5 @@ div.am-tab-bar-item{
 }
 
 div.am-card{
-    background: #f3f3f3;
+   
 }