mobile / yh_vendor · Commits

Go to a project

Authored by 于良
Commit 4a292e5fb39f9c5dc605b6a2164d0394a0c6e661 1 parent 0a0412e8

首页侧滑抽屉UI， review by 盖剑秋

Inline Side-by-side
Showing 12 changed files with 271 additions and 84 deletions
@@ -152,7 +152,6 @@ export default function native(platform) { @@ -152,7 +152,6 @@ export default function native(platform) {
152 initial={false} 152 initial={false}
153 navBar={NavBar} 153 navBar={NavBar}
154 titleStyle={styles.navTitle} 154 titleStyle={styles.navTitle}
155 -  
156 type='push' 155 type='push'
157 /> 156 />
158 157
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 import React from 'react-native'; 3 import React from 'react-native';
4 import PlainTextSection from './PlainTextSection'; 4 import PlainTextSection from './PlainTextSection';
5 import TrendTextSection from './TrendTextSection'; 5 import TrendTextSection from './TrendTextSection';
6 -import PlaceHolder from './PlaceHolder'; 6 +import Placeholder from './Placeholder';
7 import Category from './Category'; 7 import Category from './Category';
8 8
9 let { 9 let {
@@ -31,6 +31,7 @@ export default class Home extends Component { @@ -31,6 +31,7 @@ export default class Home extends Component {
31 bottom: React.PropTypes.string, 31 bottom: React.PropTypes.string,
32 small: React.PropTypes.string, 32 small: React.PropTypes.string,
33 style: View.propTypes.style, 33 style: View.propTypes.style,
  34 + arrowUp: React.PropTypes.bool,
34 }) 35 })
35 ), 36 ),
36 section3: React.PropTypes.arrayOf( 37 section3: React.PropTypes.arrayOf(
@@ -49,9 +50,9 @@ export default class Home extends Component { @@ -49,9 +50,9 @@ export default class Home extends Component {
49 <ScrollView> 50 <ScrollView>
50 51
51 <TrendTextSection content={this.props.section1} /> 52 <TrendTextSection content={this.props.section1} />
52 - <PlaceHolder /> 53 + <Placeholder />
53 <PlainTextSection content={this.props.section2} /> 54 <PlainTextSection content={this.props.section2} />
54 - <PlaceHolder /> 55 + <Placeholder />
55 <Category content={this.props.section3} onPress={this.props.onPressCategory} /> 56 <Category content={this.props.section3} onPress={this.props.onPressCategory} />
56 57
57 </ScrollView> 58 </ScrollView>
@@ -12,7 +12,7 @@ let { @@ -12,7 +12,7 @@ let {
12 } = React; 12 } = React;
13 13
14 14
15 -export default class PlaceHolder extends Component { 15 +export default class Placeholder extends Component {
16 16
17 static propTypes = { 17 static propTypes = {
18 containerStyle: View.propTypes.style, 18 containerStyle: View.propTypes.style,
1 'use strict'; 1 'use strict';
2 2
3 -import React, {View, Text, StyleSheet} from "react-native"; 3 +import React from "react-native";
4 import Button from "apsl-react-native-button"; 4 import Button from "apsl-react-native-button";
5 import {Actions} from "react-native-router-flux"; 5 import {Actions} from "react-native-router-flux";
6 6
7 -const styles = StyleSheet.create({  
8 - container: {  
9 - flex: 1,  
10 - justifyContent: "center",  
11 - alignItems: "center",  
12 - backgroundColor: "#F0F0F0",  
13 - },  
14 - statusBar: {  
15 - backgroundColor: '#3E3E3E',  
16 - paddingTop: 0,  
17 - top: 0,  
18 - height: 20,  
19 - right: 0,  
20 - left: 0,  
21 - position: 'absolute', 7 +let {
  8 + Component,
  9 + View,
  10 + Text,
  11 + ListView,
  12 + StyleSheet,
  13 + TouchableHighlight,
  14 + Dimensions
  15 +} = React;
  16 +
  17 +export default class SideMenu extends React.Component {
  18 +
  19 + static propTypes = {
  20 + items: React.PropTypes.arrayOf(
  21 + React.PropTypes.shape({
  22 + id: React.PropTypes.number,
  23 + name: React.PropTypes.string,
  24 + })
  25 + ),
  26 + onPressItem: React.PropTypes.func,
  27 + };
  28 +
  29 + constructor(props) {
  30 + super(props);
  31 +
  32 + this._renderHeader = this._renderHeader.bind(this);
  33 + this._renderSeparator = this._renderSeparator.bind(this);
  34 + this._renderRow = this._renderRow.bind(this);
  35 + this._pressRow = this._pressRow.bind(this);
  36 +
  37 + this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
22 } 38 }
23 -});  
24 39
  40 + _pressRow(rowID) {
  41 + this.props.onPressItem && this.props.onPressItem(rowID);
  42 + }
  43 +
  44 + _renderHeader(sectionData, sectionID) {
  45 + return (
  46 + <Text style={styles.header}>
  47 + 店铺切换
  48 + </Text>
  49 + );
  50 + }
  51 +
  52 + _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
  53 + return (
  54 + <View style={styles.separator} key={rowID}/>
  55 + );
  56 + }
  57 +
  58 + _renderRow(rowData, sectionID, rowID) {
  59 + return (
  60 + <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor={'white'} key={rowID}>
  61 + <View style={styles.row} >
  62 + <Text style={styles.text}>
  63 + {rowData.name}
  64 + </Text>
  65 + </View>
  66 + </TouchableHighlight>
  67 + );
  68 + }
25 69
26 -export default class SideMenu extends React.Component {  
27 render(){ 70 render(){
28 - var {View, Text} = React; 71 +
29 return ( 72 return (
30 - <View style={[styles.container, this.props.sceneStyle]}> 73 + <View style={[styles.container]}>
31 <View style={styles.statusBar} /> 74 <View style={styles.statusBar} />
32 - <Text>Tab {this.props.title}</Text>  
33 - 75 + <View style={styles.listContainer}>
  76 + <ListView
  77 + contentContainerStyle={styles.contentContainer}
  78 + dataSource={this.ds.cloneWithRows(this.props.items)}
  79 + renderHeader={this._renderHeader}
  80 + renderSeparator={this._renderSeparator}
  81 + renderRow={this._renderRow}
  82 + enableEmptySections={true}
  83 + />
  84 + </View>
34 </View> 85 </View>
35 ); 86 );
36 } 87 }
@@ -39,3 +90,51 @@ export default class SideMenu extends React.Component { @@ -39,3 +90,51 @@ export default class SideMenu extends React.Component {
39 SideMenu.contextTypes = { 90 SideMenu.contextTypes = {
40 drawer: React.PropTypes.object 91 drawer: React.PropTypes.object
41 }; 92 };
  93 +
  94 +let {width, height} = Dimensions.get('window');
  95 +
  96 +let styles = StyleSheet.create({
  97 + container: {
  98 + flex: 1,
  99 + backgroundColor: "#F0F0F0",
  100 + },
  101 + statusBar: {
  102 + backgroundColor: '#3E3E3E',
  103 + paddingTop: 0,
  104 + top: 0,
  105 + height: 20,
  106 + right: 0,
  107 + left: 0,
  108 + position: 'absolute',
  109 + },
  110 + listContainer: {
  111 + top: 20,
  112 + height: height - 20,
  113 + },
  114 + contentContainer: {
  115 + backgroundColor: 'white',
  116 + },
  117 + header: {
  118 + fontSize: 18,
  119 + color: '#B0B0B0',
  120 + top: 10,
  121 + right: 15,
  122 + height: 28,
  123 + alignSelf: 'flex-end',
  124 + },
  125 + separator: {
  126 + height: 1,
  127 + backgroundColor: '#E0E0E0',
  128 + },
  129 + row: {
  130 + height: 65,
  131 + justifyContent: 'center',
  132 + backgroundColor: 'transparent',
  133 + },
  134 + text: {
  135 + fontSize: 18,
  136 + color: '#444444',
  137 + fontWeight: 'bold',
  138 + left: 14,
  139 + },
  140 +});
@@ -24,6 +24,7 @@ export default class TrendTextSection extends Component { @@ -24,6 +24,7 @@ export default class TrendTextSection extends Component {
24 bottom: React.PropTypes.string, 24 bottom: React.PropTypes.string,
25 small: React.PropTypes.string, 25 small: React.PropTypes.string,
26 style: View.propTypes.style, 26 style: View.propTypes.style,
  27 + arrowUp: React.PropTypes.bool,
27 }) 28 })
28 ), 29 ),
29 }; 30 };
@@ -44,6 +45,7 @@ export default class TrendTextSection extends Component { @@ -44,6 +45,7 @@ export default class TrendTextSection extends Component {
44 <TrendText 45 <TrendText
45 topText={item2.top} 46 topText={item2.top}
46 bottomText={item2.bottom} 47 bottomText={item2.bottom}
  48 + arrowUp={item2.arrowUp}
47 smallText={item2.small} 49 smallText={item2.small}
48 containerStyle={[styles.contentContainerStyle, item2.style]} 50 containerStyle={[styles.contentContainerStyle, item2.style]}
49 /> 51 />
@@ -49,6 +49,8 @@ export default keyMirror({ @@ -49,6 +49,8 @@ export default keyMirror({
49 GO_TO_REQUEST_STATS: null, 49 GO_TO_REQUEST_STATS: null,
50 GO_TO_ACCOUNT_SETTLEMENT: null, 50 GO_TO_ACCOUNT_SETTLEMENT: null,
51 51
  52 + SWITCH_SHOP: null,
  53 +
52 /* 54 /*
53 GET_PROFILE_REQUEST: null, 55 GET_PROFILE_REQUEST: null,
54 GET_PROFILE_SUCCESS: null, 56 GET_PROFILE_SUCCESS: null,
@@ -44,14 +44,68 @@ function mapDispatchToProps(dispatch) { @@ -44,14 +44,68 @@ function mapDispatchToProps(dispatch) {
44 44
45 class DrawerContainer extends Component { 45 class DrawerContainer extends Component {
46 46
  47 + constructor(props) {
  48 + super(props);
  49 +
  50 + this._onPressItem = this._onPressItem.bind(this);
  51 + }
  52 +
  53 + _onPressItem(index) {
  54 + //选择店铺
  55 + console.log(index);
  56 + // let item = this.props.user.shops.get(index);
  57 + // this.props.actions.switchShop(item.id);
  58 + }
  59 +
47 render() { 60 render() {
  61 +
  62 + let items = [
  63 + {
  64 + id: 1,
  65 + name: '我的店铺',
  66 + },
  67 + {
  68 + id: 1,
  69 + name: '我的店铺',
  70 + },
  71 + {
  72 + id: 1,
  73 + name: '我的店铺',
  74 + },
  75 + {
  76 + id: 1,
  77 + name: '我的店铺',
  78 + },
  79 + {
  80 + id: 1,
  81 + name: '我的店铺',
  82 + },
  83 + {
  84 + id: 1,
  85 + name: '我的店铺',
  86 + },
  87 + {
  88 + id: 1,
  89 + name: '我的店铺',
  90 + },
  91 + {
  92 + id: 1,
  93 + name: '我的店铺',
  94 + },
  95 + {
  96 + id: 1,
  97 + name: '我的店铺',
  98 + },
  99 + ];
  100 +
48 const children = this.props.navigationState.children; 101 const children = this.props.navigationState.children;
49 let disabled = children[0].index === 0 ? false : true; //只在第一个tab页启用抽屉菜单 102 let disabled = children[0].index === 0 ? false : true; //只在第一个tab页启用抽屉菜单
  103 +
50 return ( 104 return (
51 <Drawer 105 <Drawer
52 ref="navigation" 106 ref="navigation"
53 type="displace" 107 type="displace"
54 - content={<SideMenu/>} 108 + content={<SideMenu items={items} onPressItem={this._onPressItem}/>}
55 tapToClose={true} 109 tapToClose={true}
56 openDrawerOffset={0.2} 110 openDrawerOffset={0.2}
57 panCloseMask={0.2} 111 panCloseMask={0.2}
@@ -78,21 +132,7 @@ class DrawerContainer extends Component { @@ -78,21 +132,7 @@ class DrawerContainer extends Component {
78 } 132 }
79 133
80 let styles = StyleSheet.create({ 134 let styles = StyleSheet.create({
81 - drawer: {  
82 - // shadowColor: "red",  
83 - // shadowOpacity: 0.8,  
84 - // shadowRadius: 0,  
85 - },  
86 - drawerOverlay: {  
87 - borderColor: 'red',  
88 - },  
89 - main: {  
90 - padding: 30,  
91 - borderColor: 'red',  
92 - },  
93 - mainOverlay: {  
94 - backgroundColor: 'yellow',  
95 - } 135 +
96 }) 136 })
97 137
98 export default connect(mapStateToProps, mapDispatchToProps)(DrawerContainer); 138 export default connect(mapStateToProps, mapDispatchToProps)(DrawerContainer);
@@ -61,35 +61,6 @@ class HomeContainer extends Component { @@ -61,35 +61,6 @@ class HomeContainer extends Component {
61 61
62 this._onPressCategory = this._onPressCategory.bind(this); 62 this._onPressCategory = this._onPressCategory.bind(this);
63 63
64 - this.content = [  
65 - {  
66 - top: '同品类中品牌排名',  
67 - bottom: '76',  
68 - //bottom: this.props.home.rank,  
69 - },  
70 - {  
71 - top: '较上周同期',  
72 - arrowUp: true,  
73 - //arrowUp: this.props.home.rise,  
74 - bottom: '28',  
75 - // bottom: this.props.home.riseCount,  
76 - small: '个名次',  
77 - }  
78 - ];  
79 -  
80 - this.content2 = [  
81 - {  
82 - top: '今日有效订单的\n商品件数',  
83 - bottom: '7600',  
84 - //bottom: this.props.home.goodsCount,  
85 - },  
86 - {  
87 - top: '今日有效订单的\n商品金额（元）',  
88 - bottom: '↑↓19800.00',  
89 - //bottom: this.props.home.goodsCount,  
90 - }  
91 - ];  
92 -  
93 this.category = [ 64 this.category = [
94 { 65 {
95 type: CONFIG.statsKey.saleStats, 66 type: CONFIG.statsKey.saleStats,
@@ -125,6 +96,11 @@ class HomeContainer extends Component { @@ -125,6 +96,11 @@ class HomeContainer extends Component {
125 96
126 } 97 }
127 98
  99 + componentDidMount() {
  100 + console.log('shopId'+ this.props.home.shopId);
  101 + this.props.actions.overview(this.props.home.shopId);
  102 + }
  103 +
128 _onPressCategory(id) { 104 _onPressCategory(id) {
129 let item = this.category[id]; 105 let item = this.category[id];
130 this.props.actions.goToStatsPage(item.type); 106 this.props.actions.goToStatsPage(item.type);
@@ -132,11 +108,35 @@ class HomeContainer extends Component { @@ -132,11 +108,35 @@ class HomeContainer extends Component {
132 108
133 render() { 109 render() {
134 110
  111 + let section1 = [
  112 + {
  113 + top: '同品类中品牌排名',
  114 + bottom: `${this.props.home.overview.rank}`,
  115 + },
  116 + {
  117 + top: '较上周同期',
  118 + arrowUp: this.props.home.overview.rise,
  119 + bottom: `${this.props.home.overview.riseCount}`,
  120 + small: '个名次',
  121 + }
  122 + ];
  123 +
  124 + let section2 = [
  125 + {
  126 + top: '今日有效订单的\n商品件数',
  127 + bottom: `${this.props.home.overview.goodsCount}`,
  128 + },
  129 + {
  130 + top: '今日有效订单的\n商品金额（元）',
  131 + bottom: `${this.props.home.overview.goodsCount}`,
  132 + }
  133 + ];
  134 +
135 return ( 135 return (
136 <View style={styles.container}> 136 <View style={styles.container}>
137 <Home 137 <Home
138 - section1={this.content}  
139 - section2={this.content2} 138 + section1={section1}
  139 + section2={section2}
140 section3={this.category} 140 section3={this.category}
141 onPressCategory={this._onPressCategory} 141 onPressCategory={this._onPressCategory}
142 /> 142 />
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 8
9 import {Actions} from 'react-native-router-flux'; 9 import {Actions} from 'react-native-router-flux';
10 import CONFIG from '../../constants/config'; 10 import CONFIG from '../../constants/config';
  11 +import HomeService from '../../services/HomeService';
11 12
12 const { 13 const {
13 14
@@ -22,6 +23,8 @@ const { @@ -22,6 +23,8 @@ const {
22 GO_TO_REQUEST_STATS, 23 GO_TO_REQUEST_STATS,
23 GO_TO_ACCOUNT_SETTLEMENT, 24 GO_TO_ACCOUNT_SETTLEMENT,
24 25
  26 + SWITCH_SHOP,
  27 +
25 } = require('../../constants/actionTypes').default; 28 } = require('../../constants/actionTypes').default;
26 29
27 export function overviewRequest(shopId) { 30 export function overviewRequest(shopId) {
@@ -48,15 +51,21 @@ export function overviewFailure(error) { @@ -48,15 +51,21 @@ export function overviewFailure(error) {
48 export function overview(shopId) { 51 export function overview(shopId) {
49 52
50 return dispatch => { 53 return dispatch => {
51 - dispatch(overviewRequest());  
52 -  
53 - dispatch(overviewSuccess({  
54 - rank: 76,  
55 - rise: true,  
56 - riseCount: 28,  
57 - goodsCount: 7600,  
58 - goodsAmount: 19800.00,  
59 - })); 54 + dispatch(overviewRequest(shopId));
  55 + return new HomeService().overview(shopId)
  56 + .then(json => {
  57 + console.log(json);
  58 + dispatch(overviewSuccess({
  59 + rank: 76,
  60 + rise: true,
  61 + riseCount: 28,
  62 + goodsCount: 7600,
  63 + goodsAmount: 19800.00,
  64 + }));
  65 + })
  66 + .catch(error => {
  67 + dispatch(overviewFailure(error));
  68 + });
60 }; 69 };
61 70
62 } 71 }
@@ -97,3 +106,7 @@ export function goToStatsPage(type) { @@ -97,3 +106,7 @@ export function goToStatsPage(type) {
97 } 106 }
98 } 107 }
99 108
  109 +export function switchShop(shopId) {
  110 + return overview(shopId);
  111 +}
  112 +
@@ -24,6 +24,8 @@ const { @@ -24,6 +24,8 @@ const {
24 GO_TO_REQUEST_STATS, 24 GO_TO_REQUEST_STATS,
25 GO_TO_ACCOUNT_SETTLEMENT, 25 GO_TO_ACCOUNT_SETTLEMENT,
26 26
  27 + SWITCH_SHOP,
  28 +
27 } = require('../../constants/actionTypes').default; 29 } = require('../../constants/actionTypes').default;
28 30
29 const initialState = new InitialState; 31 const initialState = new InitialState;
  1 +'use strict';
  2 +
  3 +import Request from './Request';
  4 +
  5 +
  6 +export default class UserService {
  7 +
  8 + constructor () {
  9 + this.api = new Request();
  10 + }
  11 +
  12 + async overview(shopId) {
  13 + console.log(11111);
  14 + return await this.api.get({
  15 + url: '/operations/api/v6/category/getCategory',
  16 + body: {
  17 + shopId,
  18 + }
  19 + })
  20 + .then((json) => {
  21 + console.log(json);
  22 + return json;
  23 + })
  24 + .catch((error) => {
  25 + console.error(error);
  26 + throw(error);
  27 + });
  28 + }
  29 +}
@@ -32,7 +32,7 @@ const logger = createLogger({ @@ -32,7 +32,7 @@ const logger = createLogger({
32 */ 32 */
33 const createStoreWithMiddleware = applyMiddleware( 33 const createStoreWithMiddleware = applyMiddleware(
34 thunk, 34 thunk,
35 - // logger 35 + logger
36 )(createStore); 36 )(createStore);
37 37
38 /** 38 /**