Startseite Erkunden Hilfe
Registrieren Anmelden
ioobot
/
online
3
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

提取公共组件

wly vor 7 Jahren
Ursprung
62cce31b97
Commit
6bd9480008
18 geänderte Dateien mit 220 neuen und 150 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 3 3
      src/app/App.jsx
  2. 0 6
      src/case/BillApp/src/App.css
  3. 7 4
      src/case/BillApp/src/components/My/My.jsx
  4. 3 2
      src/case/OrderApp/src/App.css
  5. 0 45
      src/case/OrderApp/src/components/HomePage/Cards.css
  6. 0 65
      src/case/OrderApp/src/components/HomePage/Cards.jsx
  7. 18 3
      src/case/OrderApp/src/components/HomePage/HomePage.jsx
  8. 16 2
      src/case/OrderApp/src/components/UserPage/userPage.jsx
  9. 55 0
      src/case/OrderApp/src/components/common/Cards.css
  10. 69 0
      src/case/OrderApp/src/components/common/Cards.jsx
  11. 6 2
      src/case/OrderApp/src/components/common/List.jsx
  12. 1 2
      src/case/ShopApp/src/App.css
  13. 33 0
      src/case/ShopApp/src/components/Common/List.jsx
  14. 3 1
      src/case/ShopApp/src/components/HomePage/Cards.css
  15. 0 1
      src/case/ShopApp/src/components/HomePage/Cards.jsx
  16. 2 1
      src/case/ShopApp/src/components/HomePage/HomePage.css
  17. 1 7
      src/case/ShopApp/src/components/UserPage/UserPage.css
  18. 3 6
      src/case/ShopApp/src/components/UserPage/UserPage.jsx

+ 3 - 3
src/app/App.jsx
Datei anzeigen 

@@ -364,9 +364,9 @@ class GraphqlSidebar extends Component {
 
                         if (loading) return <Spin style={{marginLeft: 3}}/>;
 
                         if (error) return 'error!';
 
                         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);
 
+                        // 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);
 
                         return (
 
                             <Menu
 
                                 theme="dark"

+ 0 - 6
src/case/BillApp/src/App.css
Datei anzeigen 

@@ -85,13 +85,7 @@
 
     text-align: center;
 
 }
 
 
-.myWrap .extra{
 
-    padding-top: 30px;
 
-}
 
 
-.myWrap .am-list{
 
-    margin: 3px 0;
 
-}

+ 7 - 4
src/case/BillApp/src/components/My/My.jsx
Datei anzeigen 

@@ -42,12 +42,15 @@ export default class My extends Component {
 
         <NavBars navBarText={this.state.navBarText} changePage={this.props.changePage}/>
 
         <div className="myWrap">
 
           <Head name="王刘永" icon="https://wx.qlogo.cn/mmopen/vi_32/WVmxTicpGCIAM13MBzSQTbqicMaWJNVpDqKHO9aC3SAdrSACCBcwOhIFSOeUY99iay8xlEkibhK0TaHElgtoBF1gzg/132"/>
 
+          <div style={{height:"30px"}}></div>
 
           <Lists callback={this.myAccount} text="我的账户" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/bill.svg"/>
 
+          <div style={{height:"10px"}}></div>
 
           <Lists callback={this.myAssets} text="资产管理" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/assets.svg"/>
 
-          <div className="extra">
 
-            <Lists callback={this.contactServer} text="联系客服"/>
 
-            <Lists callback={this.feedback} text="意见反馈"/>
 
-          </div>
 
+          <div style={{height:"20px"}}></div>
 
+          <Lists callback={this.contactServer} text="联系客服"/>
 
+          <div style={{height:"10px"}}></div>
 
+          <Lists callback={this.feedback} text="意见反馈"/>
 
+        
         </div>
 
       </div>
 
     )

+ 3 - 2
src/case/OrderApp/src/App.css
Datei anzeigen 

@@ -27,8 +27,8 @@
 
     z-index:2;
 
 }
 
 
-.orderApp  div.am-navbar{
 
-    background-color: black;
 
+.orderApp  .listText{
 
+    font-size: 14px;
 
 }
 
 
 
@@ -36,3 +36,4 @@
 
 
 
 
+

+ 0 - 45
src/case/OrderApp/src/components/HomePage/Cards.css
Datei anzeigen 

@@ -1,45 +0,0 @@
 
-*{
 
-    box-sizing: border-box;
 
-}
 
-
 
-div.Card{
 
-    font-size:15px;
 
-}
 
-.sidebar{
 
-    flex-grow:1;
 
-    flex-basis:178px;
 
-    
-}
 
-div.imgWrap{
 
-    text-align: left;
 
-    flex-basis:145px;
 
-}
 
-.bodyWrap{
 
-   display: flex; 
-}
 
-
 
-.p1{
 
-    text-align: left;
 
-    color: #108ee9;
 
-    font-size: 14px;
 
-}
 
-
 
-.p2{
 
-    text-align: left;
 
-    font-size: 12px;
 
-}
 
-
 
-.buttonWrap{
 
-    flex-basis:30px;
 
-    display: flex;
 
-    align-items: center;
 
-}
 
-
 
-
 
-.button{
 
-    width: 42px;
 
-    height: 42px;
 
-    border-radius: 50%;
 
-    border: none;
 
-    background: #d24a58;
 
-}

+ 0 - 65
src/case/OrderApp/src/components/HomePage/Cards.jsx
Datei anzeigen 

@@ -1,65 +0,0 @@
 
-import React, { Component } from 'react';
 
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
 
-// import { Item } from 'antd-mobile/lib/tab-bar';
 
-import './Cards.css'
 
-
 
-
 
-class Cards extends Component{
 
-
 
-    componentWillReceiveProps(props){
 
-        console.log('++++333++++',props)
 
-    }
 
-
 
-    onClickChange(e,d){
 
-        //console.log('onClickChange',e,d)
 
-    }
 
-    
-    render(){
 
-        //console.log(this.props.products)
 
-        const Cardss=this.props.store.map((item,index)=>{
 
-            //console.log(item)
 
-            return (
 
-                <WingBlank size="lg" key={index} className="Card">
 
-                    <WhiteSpace size="lg" />
 
-                        <Card>
 
-                            <Card.Header
 
-                                title={item.name}
 
-                                extra={<span>this is extra</span>} 
-                            />
 
-                            <Card.Body>
 
-                                <div className="bodyWrap">
 
-                                    <div className="imgWrap">
 
-                                        <img src={item.img} alt="icon" height="100px" width="100px"/>
 
-                                    </div>
 
-                                    <div className="sidebar">
 
-                                        <p className="p1">{item.describle}</p>
 
-                                        <p className="p2">{item.address}</p>
 
-                                    </div>
 
-                                    <div className="buttonWrap">
 
-                                        <button onClick={(e)=>{this.onClickChange(e,item.id)}} className="button">详情</button>
 
-                                    </div>
 
-                                </div>
 
-                            </Card.Body>
 
-                            <Card.Footer content="" extra={<div></div>}/>
 
-                        </Card>
 
-                    <WhiteSpace size="lg" />
 
-                </WingBlank>
 
-            )
 
-        })
 
-
 
-        return (
 
-            <div>
 
-               {Cardss}
 
-            </div>
 
-        )
 
-    }
 
-}
 
-export default Cards
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-

+ 18 - 3
src/case/OrderApp/src/components/HomePage/HomePage.jsx
Datei anzeigen 

@@ -3,7 +3,8 @@ import React ,{Component} from 'react';
 
 
 import NavBars from '../common/NavBar'
 
 import Slide from '../common/Slide'
 
-import Cards from './Cards'
 
+import Cards from '../common/Cards'
 
+import Lists from '../common/List'
 
 
 
 export default class HomePage extends Component{
 
@@ -16,12 +17,26 @@ export default class HomePage extends Component{
 
     }
 
 
     render(){
 
+        const store =this.props.store
 
+
 
         return (
 
             <div>
 
                 <NavBars navBarText="店铺" />
 
                 <Slide slide={this.props.slide}/>
 
-                <div className="subTitle">推荐店铺</div>
 
-                <Cards store={this.props.store||[]}/>
 
+                <Lists text="推荐商家" extra="更多"/>
 
+                <div className="cardlist" style={{padding:"0 5px"}}>
 
+                    {
 
+                        store.map((item,index)=>{
 
+                            if(item.recommended==='1'){
 
+                                return (
 
+                                    <Cards key={index} item={item} changePage={this.props.changePage}/>
 
+                                    )
 
+                            }else{
 
+                                return ''
 
+                            }
 
+                        })
 
+                    }
 
+                </div>
 
             </div>
 
         )
 
     }

+ 16 - 2
src/case/OrderApp/src/components/UserPage/userPage.jsx
Datei anzeigen 

@@ -1,9 +1,8 @@
 
 import React, { Component } from 'react';
 
 
-
 
 import NavBars from '../common/NavBar'
 
 import Head from '../common/Head'
 
-
 
+import Lists from '../common/List'
 
 
 
 class UserPage extends Component{
 
@@ -12,12 +11,27 @@ class UserPage extends Component{
 
         this.state={
 
 
         }
 
+
 
+
 
+        this.toOrder=this.toOrder.bind(this)
 
+    }
 
+
 
+    toOrder(){
 
+        console.log('toOrder')
 
     }
 
+    
     render(){
 
         return(
 
             <div>
 
                 <NavBars navBarText="我的"/>
 
                 <Head />
 
+                <div className="lists">
 
+                    <Lists text="我的预约" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg" callback={this.toOrder}/>
 
+                    <div style={{height:"30px"}}></div>
 
+                    <Lists text="我的客服"  callback={this.toOrder}/>
 
+                    <div style={{height:"10px"}}></div>
 
+                    <Lists text="意见反馈"  callback={this.toOrder}/>
 
+                </div>
 
             </div>
 
         )
 
     }

+ 55 - 0
src/case/OrderApp/src/components/common/Cards.css
Datei anzeigen 

@@ -0,0 +1,55 @@
 
+div.Card{
 
+    font-size:15px;
 
+}
 
+
 
+div.imgWrap{
 
+    flex-basis:100px;
 
+}
 
+.hot{
 
+    color:red;
 
+    font-size: 12px;
 
+}
 
+.title{
 
+    font-size: 15px;
 
+}
 
+p{
 
+    padding: 0;
 
+    margin: 0;
 
+}
 
+
 
+
 
+.rightsidebar{
 
+    padding-left: 4px;
 
+}
 
+.rightsidebar .p1,.rightsidebar .p2{
 
+    font-size: 14px;
 
+    text-align: left;
 
+}
 
+
 
+
 
+.p3{
 
+    text-align: left;
 
+    margin-top: 60px;
 
+}
 
+.sidebar{
 
+    padding-left:10px;
 
+    font-size: 14px;
 
+    flex-grow: 1;
 
+}
 
+.bodyWrap{
 
+    display: flex;
 
+    overflow: hidden;
 
+}
 
+
 
+.rightsidebar{
 
+    flex-basis:100px;
 
+}
 
+
 
+div.am-tab-bar-item{
 
+    height: auto;
 
+    background-color: #ccc;
 
+}
 
+
 
+div.am-card{
 
+   
+}

+ 69 - 0
src/case/OrderApp/src/components/common/Cards.jsx
Datei anzeigen 

@@ -0,0 +1,69 @@
 
+import React, { Component } from 'react';
 
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
 
+//import { Item } from 'antd-mobile/lib/tab-bar';
 
+import './Cards.css'
 
+
 
+class Cards extends Component{
 
+    constructor(props){
 
+        console.log('111',props)
 
+        super(props)
 
+        this.state={
 
+            product_id:''
 
+        }
 
+    }
 
+    /*
 
+    
+    address: "合肥蜀山那长江路545号"
 
+    admin_id: null
 
+    class: "美甲"
 
+    createdAt: "2018/3/12"
 
+    describle: "只属于你一个人的浪漫"
 
+    id: "12312"
 
+    img: "https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/recommend_img_02.png"
 
+    name: "一个人美容"
 
+    recommended: "1"
 
+    telephone: "18355093647"
 
+    updatedAt: "String"
 
+    */ 
+    
+    render(){
 
+        const item =this.props.item
 
+        const changePage=this.props.changePage
 
+        return(
 
+            <WingBlank size="lg" className="Card">
 
+                {/*<Link to={"/detail?product_id="+item.id}>*/}
 
+                    <Card onClick={(e)=>{changePage('detail',item.id)}}>
 
+                        <Card.Header
 
+                            title={<span className="title">{item.name}</span>}
 
+                            extra={<span className="hot">热门</span>} 
+                        />
 
+                        <Card.Body>
 
+                            <div className="bodyWrap">
 
+                                <div className="imgWrap">
 
+                                    <img src={item.img} alt="xxx" height="100px" width="100px"/>
 
+                                </div>
 
+                                <div className="sidebar">
 
+                                    <p style={{fontSize:"10px"}}>{item.class}</p>
 
+                                    <p style={{fontSize:"10px"}}>{item.describle}</p>
 
+                                    <p style={{fontSize:"10px"}}>{item.address}</p>
 
+                                    <button style={{border:"none",padding:"5px 11px",background:"green",borderRadius:"3px",color:"#fff",fontSize:"10px",marginTop:"16px"}}>了解更多</button>
 
+                                </div>
 
+                            </div>
 
+                        </Card.Body>
 
+                        <Card.Footer content="" extra={<div></div>} />
 
+                    </Card>
 
+                {/*</Link>*/}
 
+            <WhiteSpace size="lg" />
 
+        </WingBlank>
 
+        )
 
+    }
 
+}
 
+export default Cards
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+

+ 6 - 2
src/case/OrderApp/src/components/common/List.jsx
Datei anzeigen 

@@ -9,15 +9,17 @@ export default class Lists extends Component {
 
             {
 
                 this.props.icon ?
 
                 <Item
 
+                extra={this.props.extra}
 
                 thumb={this.props.icon}
 
                 arrow="horizontal"
 
                 onClick={() => {this.props.callback()}}
 
-                >{this.props.text}</Item>
 
+                ><span className="listText">{this.props.text}</span></Item>
 
                 :
 
                 <Item
 
+                extra={this.props.extra}
 
                 arrow="horizontal"
 
                 onClick={() => {this.props.callback()}}
 
-                >{this.props.text}</Item>
 
+                ><span className="listText">{this.props.text}</span></Item>
 
             }
 
         </List>
 
     )
 
@@ -27,3 +29,5 @@ export default class Lists extends Component {
 
 
 
 
+
 
+

+ 1 - 2
src/case/ShopApp/src/App.css
Datei anzeigen 

@@ -13,7 +13,7 @@
 
     overflow: hidden;
 
     overflow-x: hidden;
 
     overflow-y: hidden;
 
-    background:#fff;
 
+    background-color: #f5f5f5;;
 
 }
 
 
 .App *::-webkit-scrollbar {display:none !important}
 
@@ -35,7 +35,6 @@ p.p1,p.p2,p.p3{
 
 
 .pageWrap{
 
     margin-top: 45px;
 
-    background: #ffffff;
 
 }

+ 33 - 0
src/case/ShopApp/src/components/Common/List.jsx
Datei anzeigen 

@@ -0,0 +1,33 @@
 
+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
 
+                extra={this.props.extra}
 
+                thumb={this.props.icon}
 
+                arrow="horizontal"
 
+                onClick={() => {this.props.callback()}}
 
+                >{this.props.text}</Item>
 
+                :
 
+                <Item
 
+                extra={this.props.extra}
 
+                arrow="horizontal"
 
+                onClick={() => {this.props.callback()}}
 
+                >{this.props.text}</Item>
 
+            }
 
+        </List>
 
+    )
 
+  }
 
+}
 
+
 
+
 
+
 
+
 
+
 
+

+ 3 - 1
src/case/ShopApp/src/components/HomePage/Cards.css
Datei anzeigen 

@@ -19,7 +19,7 @@ p{
 
 
 
 .rightsidebar{
 
-    padding-left: 4px;
 
+    padding-left: 8px;
 
 }
 
 .rightsidebar .p1,.rightsidebar .p2{
 
     font-size: 14px;
 
@@ -35,6 +35,8 @@ p{
 
     padding-left:10px;
 
     font-size: 14px;
 
     flex-grow: 1;
 
+    width: 100px;
 
+    overflow: hidden;
 
 }
 
 .bodyWrap{
 
     display: flex;

+ 0 - 1
src/case/ShopApp/src/components/HomePage/Cards.jsx
Datei anzeigen 

@@ -28,7 +28,6 @@ class Cards extends Component{
 
                     {({changePage})=>{
 
                         return(
 
                             <WingBlank size="lg" className="Card">
 
-                            <WhiteSpace size="lg" />
 
                                 {/*<Link to={"/detail?product_id="+item.id}>*/}
 
                                     <Card onClick={(e)=>{changePage('detail',item.id)}}>
 
                                         <Card.Header

+ 2 - 1
src/case/ShopApp/src/components/HomePage/HomePage.css
Datei anzeigen 

@@ -8,6 +8,7 @@
 
     -webkit-overflow-scrolling: touch;
 
     overflow-x: scroll;
 
     white-space: nowrap;
 
-    height: 300px;
 
+    height: 333px;
 
+    background-color: #f5f5f5;
 
 }

+ 1 - 7
src/case/ShopApp/src/components/UserPage/UserPage.css
Datei anzeigen 

@@ -2,7 +2,7 @@
 
     position: relative;
 
     z-index: 3;
 
     height: 100%;
 
-    padding: 0 5px;
 
+    background-color: #f5f5f5;
 
 }
 
 
 .UserPageWrap *{
 
@@ -33,12 +33,6 @@
 
     flex-basis: 16px;
 
 }
 
 
-.toOrderCenter span:nth-child(1){
 
-    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg') no-repeat center center;
 
-}
 
-.toAddressCenter span:nth-child(1){
 
-    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/address.svg') no-repeat center center;
 
-}
 
 
 
 .toOrderCenter span:nth-child(3) ,.toAddressCenter span:nth-child(3){

+ 3 - 6
src/case/ShopApp/src/components/UserPage/UserPage.jsx
Datei anzeigen 

@@ -1,5 +1,6 @@
 
 import React, { Component } from 'react';
 
 import Head from './Head'
 
+import Lists from '../Common/List'
 
 
 import {graphqls} from '../../api/graphql_request'
 
 import {getUserByProps} from '../../api/graphql/user'
 
@@ -39,12 +40,8 @@ class UserPage extends Component{
 
                 <div className="headerWrap">
 
                     <Head user={this.state.user}/></div>
 
                 <div className="toWrap">
 
-                    <div className='toOrderCenter' onClick={()=>this.props.changePage('orderCenter')}>
 
-                        <span></span><span>我的订单</span><span></span>
 
-                    </div>
 
-                    <div className='toAddressCenter' onClick={()=>this.props.changePage('addressPage')}>
 
-                        <span></span><span>我的地址</span><span></span>
 
-                    </div>
 
+                    <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>
 
         )