Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 2c8ca6d4 by peii
Options

功能页 

(cherry picked from commit 17c9068f)
parent d3dd7466
Inline Side-by-side
Showing with 167 additions and 157 deletions
app/containers/home/HomePage.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import { import { StyleSheet, View, Text, Image, SafeAreaView, TouchableOpacity } from 'react-native'
StyleSheet, import { connect } from 'react-redux'
View, import ScrollableTabView from 'react-native-scrollable-tab-view'
Text, import * as R from 'ramda'
Image,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {connect} from "react-redux";
import { import {
foundation_color, foundation_color,
promary_text_color, promary_text_color,
...@@ -16,68 +11,102 @@ import { ...@@ -16,68 +11,102 @@ import {
pxSize, pxSize,
promary_color, promary_color,
safe_view, safe_view,
font_family_regular font_family_regular,
} from '../../base/BaseStyle'; } from '../../base/BaseStyle'
import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction'; import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction'
import HeadBackItem from '../common/HeadBackItem'; import HeadBackItem from '../common/HeadBackItem'
import StatusBarView from '../common/StatusBarView'; import StatusBarView from '../common/StatusBarView'
import ScrollableTabView from 'react-native-scrollable-tab-view'; import TabBottomItem from './module/TabBottomItem'
import TabBottomItem from './module/TabBottomItem'; import HistoricalOrderPage from '../historicalOrder/HistoricalOrderPage'
import HistoricalOrderPage from '../historicalOrder/HistoricalOrderPage'; import { referenceArrSort, show, isNotBlank, isBlank } from '../../utils/Utils'
import { referenceArrSort, show } from '../../utils/Utils'; import { setEquConDisplayPrice } from '../../base/BaseConstants'
import { setEquConDisplayPrice } from '../../base/BaseConstants'; import { LOGIN_NO } from '../../base/ActionTypes'
import { LOGIN_NO } from '../../base/ActionTypes';
class HomePage extends Component { class HomePage extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
showList: [], showList: [],
backLoginInfo: { // 不需要了 menus: {
icon: require('../../images/return_login.png'), // 业务模块
title: '返回登录页', MOBILE_BUSINESS_MODULE: {
page: 'LoginPage', MOBILE_BORROW_ORDER: {
},
borrowInfo: {
icon: require('../../images/quick_order.png'), icon: require('../../images/quick_order.png'),
title: '借货订单', title: '借货订单',
page: 'QuickOrderPage' page: 'QuickOrderPage',
}, },
consumpInfo: { MOBILE_CONSUMP_CONFIRMA: {
icon: require('../../images/equip_consu.png'), icon: require('../../images/equip_consu.png'),
title: '消耗确认', title: '消耗确认',
page: 'EquipConsuPage' page: 'EquipConsuPage',
}, },
selfOrderInfo: { MOBILE_SELF_HELP_ORDER: {
icon: require('../../images/self_order.png'), icon: require('../../images/self_order.png'),
title: '自助下单', title: '自助下单',
page: 'SelfOrderPage' page: 'SelfOrderPage',
}, },
transInfo: { MOBILE_TRANSFER_APPLICATION: {
icon: require('../../images/trans_order.png'), icon: require('../../images/trans_order.png'),
title: '转单申请', title: '转单申请',
page: 'TransOrderPage' page: 'TransOrderPage',
}, },
deviceInfo: { MOBILE_DEVICE_INFORMATION: {
icon: require('../../images/device_info.png'), icon: require('../../images/device_info.png'),
title: '门禁管理', title: '门禁管理',
page: 'DeviceInfoPage' page: 'DeviceInfoPage',
}, },
},
// tabNames: ['业务模块', '历史订单'], // 结算模块
// tabIconNames: [require('../../images/tab_mod_def.png'), require('../../images/tab_his_def.png')], MOBILE_SETTLEMENT_MODULE: {
// tabSelIconNames:[require('../../images/tab_mod_sel.png'), require('../../images/tab_his_sel.png')], MOBILE_DISTRIBUTION_CONFIRM: {
tabNames: [], // Tab标题 icon: require('../../images/quick_order.png'),
tabIconNames: [], // Tab默认图标 title: '分销-结算确认',
tabSelIconNames:[], // Tab选择后图标 page: 'QuickOrderPage',
tabCodes: [], // Tab标题对应代码 },
MOBILE_DISTRIBUTION_INVOICE_APPLICATION: {
icon: require('../../images/quick_order.png'),
title: '分销-开票申请',
page: 'QuickOrderPage',
},
MOBILE_DISTRIBUTION_SETTLEMENT_GATHER: {
icon: require('../../images/quick_order.png'),
title: '分销-结算汇总',
page: 'QuickOrderPage',
},
MOBILE_DISTRIBUTION_INVOICE_GATHER: {
icon: require('../../images/quick_order.png'),
title: '分销-开票汇总',
page: 'QuickOrderPage',
},
MOBILE_DIRECT_INVOICE_APPLICATION: {
icon: require('../../images/quick_order.png'),
title: '直销-开票申请',
page: 'QuickOrderPage',
},
MOBILE_DIRECT_INVOICE_GATHER: {
icon: require('../../images/quick_order.png'),
title: '直销-开票汇总',
page: 'QuickOrderPage',
},
},
},
tabs: [],
initialPage: 0, initialPage: 0,
modDefauIcon: require('../../images/tab_mod_def.png'), icons: {
modSeleIcon: require('../../images/tab_mod_sel.png'), MOBILE_BUSINESS_MODULE: {
hisDefauIcon: require('../../images/tab_his_def.png'), defIcon: require('../../images/tab_mod_def.png'),
hisSeleIcon: require('../../images/tab_his_sel.png'), selIcon: require('../../images/tab_mod_sel.png'),
isRightExit: true },
MOBILE_SETTLEMENT_MODULE: {
defIcon: require('../../images/tab_mod_def.png'),
selIcon: require('../../images/tab_mod_sel.png'),
},
MOBILE_HISTORICAL_ORDER: {
defIcon: require('../../images/tab_his_def.png'),
selIcon: require('../../images/tab_his_sel.png'),
},
},
isRightExit: true,
} }
} }
...@@ -88,13 +117,13 @@ class HomePage extends Component { ...@@ -88,13 +117,13 @@ class HomePage extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
let { loginState, navigation } = this.props let { loginState, navigation } = this.props
if(loginState != nextProps.loginState) { if (loginState != nextProps.loginState) {
switch(nextProps.loginState) { switch (nextProps.loginState) {
case LOGIN_NO: case LOGIN_NO:
navigation.navigate('LoginPage') navigation.navigate('LoginPage')
break; break
default: default:
break; break
} }
} }
} }
...@@ -102,58 +131,36 @@ class HomePage extends Component { ...@@ -102,58 +131,36 @@ class HomePage extends Component {
// 获取菜单权限 // 获取菜单权限
getMenuRuleInfo() { getMenuRuleInfo() {
let { functions } = this.props.userInfo let { functions } = this.props.userInfo
let { modDefauIcon, modSeleIcon, let { menus, icons, tabs } = this.state
hisDefauIcon, hisSeleIcon,
borrowInfo, consumpInfo,
transInfo, deviceInfo,
selfOrderInfo } = this.state
functions = referenceArrSort(functions, 'child_list', 'function_order')
let tempTabNames = []
let tempTabCodes = []
let tempTabIconNames = []
let tempTabSelIconNames = []
let tempModuleList = []
functions.forEach(item => {
tempTabNames.push(item.function_name)
tempTabCodes.push(item.function_code)
if(item.function_code == 'MOBILE_BUSINESS_MODULE') {
tempTabIconNames.push(modDefauIcon)
tempTabSelIconNames.push(modSeleIcon)
if(item.child_list && item.child_list.length) {
item.child_list.forEach(chItem => { R.compose(
if(chItem.function_code == 'MOBILE_BORROW_ORDER') { R.map(item => {
borrowInfo.title = chItem.function_name const icon = icons[item.function_code]
tempModuleList.push(borrowInfo)
} else if(chItem.function_code == 'MOBILE_CONSUMP_CONFIRMA') { // child_list相关
consumpInfo.title = chItem.function_name const children = R.compose(
tempModuleList.push(consumpInfo) R.map(submenu => {
} else if(chItem.function_code == 'MOBILE_TRANSFER_APPLICATION') { const info = R.pathOr({}, [item.function_code, submenu.function_code])(menus)
transInfo.title = chItem.function_name return {
tempModuleList.push(transInfo) ...info,
} else if(chItem.function_code == 'MOBILE_DEVICE_INFORMATION') { ...submenu,
deviceInfo.title = chItem.function_name
tempModuleList.push(deviceInfo)
}else if(chItem.function_code == 'MOBILE_SELF_HELP_ORDER'){
selfOrderInfo.title = chItem.function_name
tempModuleList.push(selfOrderInfo)
}
})
} }
}),
R.propOr([], 'child_list'),
)(item)
} else if(item.function_code == 'MOBILE_HISTORICAL_ORDER') { const tab = {
tempTabIconNames.push(hisDefauIcon) code: item.function_code,
tempTabSelIconNames.push(hisSeleIcon) name: item.function_name,
...icon,
children,
} }
}) tabs.push(tab)
this.setState({ }),
tabNames: tempTabNames, R.sort(R.ascend(R.prop('function_order'))),
tabCodes: tempTabCodes, )(functions)
tabIconNames: tempTabIconNames,
tabSelIconNames: tempTabSelIconNames,
showList: tempModuleList
})
this.setState({ tabs })
} }
// 获取配置值 // 获取配置值
...@@ -161,102 +168,105 @@ class HomePage extends Component { ...@@ -161,102 +168,105 @@ class HomePage extends Component {
let { global_domain_config, token } = this.props let { global_domain_config, token } = this.props
const params = { const params = {
access_token: token, access_token: token,
profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE' profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE',
} }
let sysRes = await requestSysProfile(global_domain_config, params) let sysRes = await requestSysProfile(global_domain_config, params)
console.log('sysRes:==', sysRes) console.log('sysRes:==', sysRes)
if(sysRes.error_code === 0){ if (sysRes.error_code === 0) {
setEquConDisplayPrice(sysRes.data.profile_value) setEquConDisplayPrice(sysRes.data.profile_value)
} else if(sysRes.error_code == 41006) { } else if (sysRes.error_code == 41006) {
show('登录过期，请重新登录'); show('登录过期，请重新登录')
this.props.exitLoginStatus(); this.props.exitLoginStatus()
} else { } else {
let error_msg = sysRes.error_msg || sysRes.message let error_msg = sysRes.error_msg || sysRes.message
show(error_msg); show(error_msg)
} }
} }
// 跳转页面 // 跳转页面
jumpToSubpage(index) { jumpToSubpage(menu) {
let {page, title} = this.state.showList[index] const page = menu.page
if('LoginPage' === page) { if ('LoginPage' === page) {
this.props.exitLoginStatus() this.props.exitLoginStatus()
} }
this.props.navigation.navigate(page, {title}) this.props.navigation.navigate(page, { title: menu.function_name })
} }
render() { render() {
let {navigation, sysProfiles} = this.props let { navigation, sysProfiles } = this.props
let { tabNames, tabIconNames, tabSelIconNames, let { initialPage, isRightExit, tabs } = this.state
initialPage, tabCodes, isRightExit } = this.state
const title = sysProfiles.OBS_MOBILE_APP_TITLE || '骨科智慧仓' const title = sysProfiles.OBS_MOBILE_APP_TITLE || '骨科智慧仓'
return ( return (
<View style={styles.home_container}> <View style={styles.home_container}>
<StatusBarView <StatusBarView isReactStackNavigator={true} backgroundColor={promary_color} barStyle="light-content" />
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}> <SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} /> <HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} />
<ScrollableTabView <ScrollableTabView
style={styles.bom_tab_box} style={styles.bom_tab_box}
initialPage={initialPage} initialPage={initialPage}
page={initialPage} page={initialPage}
tabBarPosition='bottom' tabBarPosition="bottom"
locked={true} locked={true}
renderTabBar={() => renderTabBar={() => (
<TabBottomItem <TabBottomItem
tabNames={tabNames} tabNames={R.pluck('name')(tabs)}
tabIconNames={tabIconNames} tabIconNames={R.pluck('defIcon')(tabs)}
tabSelIconNames={tabSelIconNames} tabSelIconNames={R.pluck('selIcon')(tabs)}
/> />
} )}
>
{tabs.map(tab => {
return (
<View
style={!R.includes(tab.code, 'MOBILE_HISTORICAL_ORDER') ? styles.home_cont : { flex: 1 }}
tabLabel={tab.name}
key={tab.code}
> >
{ {R.includes(tab.code, ['MOBILE_BUSINESS_MODULE', 'MOBILE_SETTLEMENT_MODULE']) &&
tabCodes.includes('MOBILE_BUSINESS_MODULE') ? <View style={styles.home_cont} tabLabel={tabNames[0]}> tab.children &&
{ tab.children.map((menu, index) => {
this.state.showList.map((item, index) => return (
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={0.8}
style={[styles.home_list, (index%2 !== 0) && styles.home_list_even]} style={[styles.home_list, index % 2 !== 0 && styles.home_list_even]}
onPress={() => this.jumpToSubpage(index)} onPress={() => this.jumpToSubpage(menu)}
key={index} key={menu.function_code}
> >
<View style={styles.list_item}> <View style={styles.list_item}>
<View style={styles.img_box}> <View style={styles.img_box}>
<Image source={item.icon} style={styles.list_img}/> <Image source={menu.icon} style={styles.list_img} />
</View> </View>
<Text style={styles.list_tit}>{item.title}</Text> <Text style={styles.list_tit}>{menu.function_name}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
) )
} })}
</View> : null
} {R.includes(tab.code, 'MOBILE_HISTORICAL_ORDER') && <HistoricalOrderPage navigation={navigation} />}
{ </View>
tabCodes.includes('MOBILE_HISTORICAL_ORDER') ? <View style={{flex: 1}} tabLabel={tabNames[1]}> )
<HistoricalOrderPage navigation={navigation} /> })}
</View> : null
}
</ScrollableTabView> </ScrollableTabView>
</SafeAreaView> </SafeAreaView>
</View> </View>
); )
} }
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
home_container: { home_container: {
flex: 1, flex: 1,
backgroundColor: home_background_color backgroundColor: home_background_color,
}, },
home_cont: { home_cont: {
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
marginTop: '8%', marginTop: '8%',
marginLeft: '10%', marginLeft: '10%',
justifyContent: 'flex-start' justifyContent: 'flex-start',
}, },
home_list: { home_list: {
width: pxSize(150), width: pxSize(150),
...@@ -265,47 +275,47 @@ const styles = StyleSheet.create({ ...@@ -265,47 +275,47 @@ const styles = StyleSheet.create({
marginBottom: '6%', marginBottom: '6%',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderRadius: 4 borderRadius: 4,
}, },
home_list_even: { home_list_even: {
marginLeft: '8%' marginLeft: '8%',
}, },
list_item: { list_item: {
width: '100%', width: '100%',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center',
}, },
img_box: { img_box: {
width: pxSize(46), width: pxSize(46),
marginBottom: 6 marginBottom: 6,
}, },
list_img: { list_img: {
resizeMode: 'contain', resizeMode: 'contain',
width: '100%' width: '100%',
}, },
list_tit: { list_tit: {
fontSize: second_text_size, fontSize: second_text_size,
color: promary_text_color, color: promary_text_color,
lineHeight: second_text_size + 12, lineHeight: second_text_size + 12,
fontFamily: font_family_regular fontFamily: font_family_regular,
}, },
bom_tab_box: { bom_tab_box: {
flex: 1 flex: 1,
}, },
}) })
const mapStateToProps = (state) => ({ const mapStateToProps = state => ({
loginState:state.login.loginState, loginState: state.login.loginState,
userInfo: state.login.userInfo, userInfo: state.login.userInfo,
token: state.login.token, token: state.login.token,
global_domain_config: state.login.global_domain_config, global_domain_config: state.login.global_domain_config,
sysProfiles: state.login.sysProfiles, sysProfiles: state.login.sysProfiles,
}) })
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = dispatch => ({
exitLoginStatus: () => { exitLoginStatus: () => {
dispatch(exitLoginStatus()) dispatch(exitLoginStatus())
} },
}) })
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment