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) {
initial={false}
navBar={NavBar}
titleStyle={styles.navTitle}
type='push'
/>
... ...
... ... @@ -3,7 +3,7 @@
import React from 'react-native';
import PlainTextSection from './PlainTextSection';
import TrendTextSection from './TrendTextSection';
import PlaceHolder from './PlaceHolder';
import Placeholder from './Placeholder';
import Category from './Category';
let {
... ... @@ -31,6 +31,7 @@ export default class Home extends Component {
bottom: React.PropTypes.string,
small: React.PropTypes.string,
style: View.propTypes.style,
arrowUp: React.PropTypes.bool,
})
),
section3: React.PropTypes.arrayOf(
... ... @@ -49,9 +50,9 @@ export default class Home extends Component {
<ScrollView>
<TrendTextSection content={this.props.section1} />
<PlaceHolder />
<Placeholder />
<PlainTextSection content={this.props.section2} />
<PlaceHolder />
<Placeholder />
<Category content={this.props.section3} onPress={this.props.onPressCategory} />
</ScrollView>
... ...
... ... @@ -12,7 +12,7 @@ let {
} = React;
export default class PlaceHolder extends Component {
export default class Placeholder extends Component {
static propTypes = {
containerStyle: View.propTypes.style,
... ...
'use strict';
import React, {View, Text, StyleSheet} from "react-native";
import React from "react-native";
import Button from "apsl-react-native-button";
import {Actions} from "react-native-router-flux";
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F0F0F0",
},
statusBar: {
backgroundColor: '#3E3E3E',
paddingTop: 0,
top: 0,
height: 20,
right: 0,
left: 0,
position: 'absolute',
let {
Component,
View,
Text,
ListView,
StyleSheet,
TouchableHighlight,
Dimensions
} = React;
export default class SideMenu extends React.Component {
static propTypes = {
items: React.PropTypes.arrayOf(
React.PropTypes.shape({
id: React.PropTypes.number,
name: React.PropTypes.string,
})
),
onPressItem: React.PropTypes.func,
};
constructor(props) {
super(props);
this._renderHeader = this._renderHeader.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this._renderRow = this._renderRow.bind(this);
this._pressRow = this._pressRow.bind(this);
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
});
_pressRow(rowID) {
this.props.onPressItem && this.props.onPressItem(rowID);
}
_renderHeader(sectionData, sectionID) {
return (
<Text style={styles.header}>
店铺切换
</Text>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View style={styles.separator} key={rowID}/>
);
}
_renderRow(rowData, sectionID, rowID) {
return (
<TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor={'white'} key={rowID}>
<View style={styles.row} >
<Text style={styles.text}>
{rowData.name}
</Text>
</View>
</TouchableHighlight>
);
}
export default class SideMenu extends React.Component {
render(){
var {View, Text} = React;
return (
<View style={[styles.container, this.props.sceneStyle]}>
<View style={[styles.container]}>
<View style={styles.statusBar} />
<Text>Tab {this.props.title}</Text>
<View style={styles.listContainer}>
<ListView
contentContainerStyle={styles.contentContainer}
dataSource={this.ds.cloneWithRows(this.props.items)}
renderHeader={this._renderHeader}
renderSeparator={this._renderSeparator}
renderRow={this._renderRow}
enableEmptySections={true}
/>
</View>
</View>
);
}
... ... @@ -39,3 +90,51 @@ export default class SideMenu extends React.Component {
SideMenu.contextTypes = {
drawer: React.PropTypes.object
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F0F0F0",
},
statusBar: {
backgroundColor: '#3E3E3E',
paddingTop: 0,
top: 0,
height: 20,
right: 0,
left: 0,
position: 'absolute',
},
listContainer: {
top: 20,
height: height - 20,
},
contentContainer: {
backgroundColor: 'white',
},
header: {
fontSize: 18,
color: '#B0B0B0',
top: 10,
right: 15,
height: 28,
alignSelf: 'flex-end',
},
separator: {
height: 1,
backgroundColor: '#E0E0E0',
},
row: {
height: 65,
justifyContent: 'center',
backgroundColor: 'transparent',
},
text: {
fontSize: 18,
color: '#444444',
fontWeight: 'bold',
left: 14,
},
});
... ...
... ... @@ -24,6 +24,7 @@ export default class TrendTextSection extends Component {
bottom: React.PropTypes.string,
small: React.PropTypes.string,
style: View.propTypes.style,
arrowUp: React.PropTypes.bool,
})
),
};
... ... @@ -44,6 +45,7 @@ export default class TrendTextSection extends Component {
<TrendText
topText={item2.top}
bottomText={item2.bottom}
arrowUp={item2.arrowUp}
smallText={item2.small}
containerStyle={[styles.contentContainerStyle, item2.style]}
/>
... ...
... ... @@ -49,6 +49,8 @@ export default keyMirror({
GO_TO_REQUEST_STATS: null,
GO_TO_ACCOUNT_SETTLEMENT: null,
SWITCH_SHOP: null,
/*
GET_PROFILE_REQUEST: null,
GET_PROFILE_SUCCESS: null,
... ...
... ... @@ -44,14 +44,68 @@ function mapDispatchToProps(dispatch) {
class DrawerContainer extends Component {
constructor(props) {
super(props);
this._onPressItem = this._onPressItem.bind(this);
}
_onPressItem(index) {
//选择店铺
console.log(index);
// let item = this.props.user.shops.get(index);
// this.props.actions.switchShop(item.id);
}
render() {
let items = [
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
{
id: 1,
name: '我的店铺',
},
];
const children = this.props.navigationState.children;
let disabled = children[0].index === 0 ? false : true; //只在第一个tab页启用抽屉菜单
return (
<Drawer
ref="navigation"
type="displace"
content={<SideMenu/>}
content={<SideMenu items={items} onPressItem={this._onPressItem}/>}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
... ... @@ -78,21 +132,7 @@ class DrawerContainer extends Component {
}
let styles = StyleSheet.create({
drawer: {
// shadowColor: "red",
// shadowOpacity: 0.8,
// shadowRadius: 0,
},
drawerOverlay: {
borderColor: 'red',
},
main: {
padding: 30,
borderColor: 'red',
},
mainOverlay: {
backgroundColor: 'yellow',
}
})
export default connect(mapStateToProps, mapDispatchToProps)(DrawerContainer);
\ No newline at end of file
... ...
... ... @@ -61,35 +61,6 @@ class HomeContainer extends Component {
this._onPressCategory = this._onPressCategory.bind(this);
this.content = [
{
top: '同品类中品牌排名',
bottom: '76',
//bottom: this.props.home.rank,
},
{
top: '较上周同期',
arrowUp: true,
//arrowUp: this.props.home.rise,
bottom: '28',
// bottom: this.props.home.riseCount,
small: '个名次',
}
];
this.content2 = [
{
top: '今日有效订单的\n商品件数',
bottom: '7600',
//bottom: this.props.home.goodsCount,
},
{
top: '今日有效订单的\n商品金额（元）',
bottom: '↑↓19800.00',
//bottom: this.props.home.goodsCount,
}
];
this.category = [
{
type: CONFIG.statsKey.saleStats,
... ... @@ -125,6 +96,11 @@ class HomeContainer extends Component {
}
componentDidMount() {
console.log('shopId'+ this.props.home.shopId);
this.props.actions.overview(this.props.home.shopId);
}
_onPressCategory(id) {
let item = this.category[id];
this.props.actions.goToStatsPage(item.type);
... ... @@ -132,11 +108,35 @@ class HomeContainer extends Component {
render() {
let section1 = [
{
top: '同品类中品牌排名',
bottom: `${this.props.home.overview.rank}`,
},
{
top: '较上周同期',
arrowUp: this.props.home.overview.rise,
bottom: `${this.props.home.overview.riseCount}`,
small: '个名次',
}
];
let section2 = [
{
top: '今日有效订单的\n商品件数',
bottom: `${this.props.home.overview.goodsCount}`,
},
{
top: '今日有效订单的\n商品金额（元）',
bottom: `${this.props.home.overview.goodsCount}`,
}
];
return (
<View style={styles.container}>
<Home
section1={this.content}
section2={this.content2}
section1={section1}
section2={section2}
section3={this.category}
onPressCategory={this._onPressCategory}
/>
... ...
... ... @@ -8,6 +8,7 @@
import {Actions} from 'react-native-router-flux';
import CONFIG from '../../constants/config';
import HomeService from '../../services/HomeService';
const {
... ... @@ -22,6 +23,8 @@ const {
GO_TO_REQUEST_STATS,
GO_TO_ACCOUNT_SETTLEMENT,
SWITCH_SHOP,
} = require('../../constants/actionTypes').default;
export function overviewRequest(shopId) {
... ... @@ -48,15 +51,21 @@ export function overviewFailure(error) {
export function overview(shopId) {
return dispatch => {
dispatch(overviewRequest());
dispatch(overviewSuccess({
rank: 76,
rise: true,
riseCount: 28,
goodsCount: 7600,
goodsAmount: 19800.00,
}));
dispatch(overviewRequest(shopId));
return new HomeService().overview(shopId)
.then(json => {
console.log(json);
dispatch(overviewSuccess({
rank: 76,
rise: true,
riseCount: 28,
goodsCount: 7600,
goodsAmount: 19800.00,
}));
})
.catch(error => {
dispatch(overviewFailure(error));
});
};
}
... ... @@ -97,3 +106,7 @@ export function goToStatsPage(type) {
}
}
export function switchShop(shopId) {
return overview(shopId);
}
... ...
... ... @@ -24,6 +24,8 @@ const {
GO_TO_REQUEST_STATS,
GO_TO_ACCOUNT_SETTLEMENT,
SWITCH_SHOP,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ...
'use strict';
import Request from './Request';
export default class UserService {
constructor () {
this.api = new Request();
}
async overview(shopId) {
console.log(11111);
return await this.api.get({
url: '/operations/api/v6/category/getCategory',
body: {
shopId,
}
})
.then((json) => {
console.log(json);
return json;
})
.catch((error) => {
console.error(error);
throw(error);
});
}
}
... ...
... ... @@ -32,7 +32,7 @@ const logger = createLogger({
*/
const createStoreWithMiddleware = applyMiddleware(
thunk,
// logger
logger
)(createStore);
/**
... ...