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 296 additions and 287 deletions
app/containers/home/HomePage.js
import React, { Component } from 'react'; import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, SafeAreaView, TouchableOpacity } from 'react-native'
import { connect } from 'react-redux'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import * as R from 'ramda'
import { import {
StyleSheet, foundation_color,
View, promary_text_color,
Text, second_text_size,
Image, home_background_color,
SafeAreaView, pxSize,
TouchableOpacity promary_color,
} from 'react-native'; safe_view,
import {connect} from "react-redux"; font_family_regular,
import { } from '../../base/BaseStyle'
foundation_color, import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction'
promary_text_color, import HeadBackItem from '../common/HeadBackItem'
second_text_size, import StatusBarView from '../common/StatusBarView'
home_background_color, import TabBottomItem from './module/TabBottomItem'
pxSize, import HistoricalOrderPage from '../historicalOrder/HistoricalOrderPage'
promary_color, import { referenceArrSort, show, isNotBlank, isBlank } from '../../utils/Utils'
safe_view, import { setEquConDisplayPrice } from '../../base/BaseConstants'
font_family_regular import { LOGIN_NO } from '../../base/ActionTypes'
} from '../../base/BaseStyle';
import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction';
import HeadBackItem from '../common/HeadBackItem';
import StatusBarView from '../common/StatusBarView';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabBottomItem from './module/TabBottomItem';
import HistoricalOrderPage from '../historicalOrder/HistoricalOrderPage';
import { referenceArrSort, show } from '../../utils/Utils';
import { setEquConDisplayPrice } from '../../base/BaseConstants';
import { LOGIN_NO } from '../../base/ActionTypes';
class HomePage extends Component { class HomePage extends Component {
constructor(props) {
super(props)
this.state = {
showList: [],
menus: {
// 业务模块
MOBILE_BUSINESS_MODULE: {
MOBILE_BORROW_ORDER: {
icon: require('../../images/quick_order.png'),
title: '借货订单',
page: 'QuickOrderPage',
},
MOBILE_CONSUMP_CONFIRMA: {
icon: require('../../images/equip_consu.png'),
title: '消耗确认',
page: 'EquipConsuPage',
},
MOBILE_SELF_HELP_ORDER: {
icon: require('../../images/self_order.png'),
title: '自助下单',
page: 'SelfOrderPage',
},
MOBILE_TRANSFER_APPLICATION: {
icon: require('../../images/trans_order.png'),
title: '转单申请',
page: 'TransOrderPage',
},
MOBILE_DEVICE_INFORMATION: {
icon: require('../../images/device_info.png'),
title: '门禁管理',
page: 'DeviceInfoPage',
},
},
// 结算模块
MOBILE_SETTLEMENT_MODULE: {
MOBILE_DISTRIBUTION_CONFIRM: {
icon: require('../../images/quick_order.png'),
title: '分销-结算确认',
page: 'QuickOrderPage',
},
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,
icons: {
MOBILE_BUSINESS_MODULE: {
defIcon: require('../../images/tab_mod_def.png'),
selIcon: require('../../images/tab_mod_sel.png'),
},
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,
}
}
constructor(props) { componentDidMount() {
super(props) this.getMenuRuleInfo()
this.state = { this.getSysConfigValue()
showList: [], }
backLoginInfo: { // 不需要了
icon: require('../../images/return_login.png'),
title: '返回登录页',
page: 'LoginPage',
},
borrowInfo: {
icon: require('../../images/quick_order.png'),
title: '借货订单',
page: 'QuickOrderPage'
},
consumpInfo: {
icon: require('../../images/equip_consu.png'),
title: '消耗确认',
page: 'EquipConsuPage'
},
selfOrderInfo: {
icon: require('../../images/self_order.png'),
title: '自助下单',
page: 'SelfOrderPage'
},
transInfo: {
icon: require('../../images/trans_order.png'),
title: '转单申请',
page: 'TransOrderPage'
},
deviceInfo: {
icon: require('../../images/device_info.png'),
title: '门禁管理',
page: 'DeviceInfoPage'
},
// tabNames: ['业务模块', '历史订单'], componentWillReceiveProps(nextProps) {
// tabIconNames: [require('../../images/tab_mod_def.png'), require('../../images/tab_his_def.png')], let { loginState, navigation } = this.props
// tabSelIconNames:[require('../../images/tab_mod_sel.png'), require('../../images/tab_his_sel.png')], if (loginState != nextProps.loginState) {
tabNames: [], // Tab标题 switch (nextProps.loginState) {
tabIconNames: [], // Tab默认图标 case LOGIN_NO:
tabSelIconNames:[], // Tab选择后图标 navigation.navigate('LoginPage')
tabCodes: [], // Tab标题对应代码 break
initialPage: 0, default:
modDefauIcon: require('../../images/tab_mod_def.png'), break
modSeleIcon: require('../../images/tab_mod_sel.png'), }
hisDefauIcon: require('../../images/tab_his_def.png'),
hisSeleIcon: require('../../images/tab_his_sel.png'),
isRightExit: true
}
} }
}
componentDidMount() { // 获取菜单权限
this.getMenuRuleInfo() getMenuRuleInfo() {
this.getSysConfigValue() let { functions } = this.props.userInfo
} let { menus, icons, tabs } = this.state
R.compose(
R.map(item => {
const icon = icons[item.function_code]
componentWillReceiveProps(nextProps) { // child_list相关
let { loginState, navigation } = this.props const children = R.compose(
if(loginState != nextProps.loginState) { R.map(submenu => {
switch(nextProps.loginState) { const info = R.pathOr({}, [item.function_code, submenu.function_code])(menus)
case LOGIN_NO: return {
navigation.navigate('LoginPage') ...info,
break; ...submenu,
default:
break;
} }
}),
R.propOr([], 'child_list'),
)(item)
const tab = {
code: item.function_code,
name: item.function_name,
...icon,
children,
} }
} tabs.push(tab)
}),
R.sort(R.ascend(R.prop('function_order'))),
)(functions)
// 获取菜单权限 this.setState({ tabs })
getMenuRuleInfo() { }
let { functions } = this.props.userInfo
let { modDefauIcon, modSeleIcon,
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 => {
if(chItem.function_code == 'MOBILE_BORROW_ORDER') {
borrowInfo.title = chItem.function_name
tempModuleList.push(borrowInfo)
} else if(chItem.function_code == 'MOBILE_CONSUMP_CONFIRMA') {
consumpInfo.title = chItem.function_name
tempModuleList.push(consumpInfo)
} else if(chItem.function_code == 'MOBILE_TRANSFER_APPLICATION') {
transInfo.title = chItem.function_name
tempModuleList.push(transInfo)
} else if(chItem.function_code == 'MOBILE_DEVICE_INFORMATION') {
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)
}
})
}
} else if(item.function_code == 'MOBILE_HISTORICAL_ORDER') { // 获取配置值
tempTabIconNames.push(hisDefauIcon) async getSysConfigValue() {
tempTabSelIconNames.push(hisSeleIcon) let { global_domain_config, token } = this.props
} const params = {
}) access_token: token,
this.setState({ profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE',
tabNames: tempTabNames,
tabCodes: tempTabCodes,
tabIconNames: tempTabIconNames,
tabSelIconNames: tempTabSelIconNames,
showList: tempModuleList
})
} }
let sysRes = await requestSysProfile(global_domain_config, params)
// 获取配置值 console.log('sysRes:==', sysRes)
async getSysConfigValue() { if (sysRes.error_code === 0) {
let { global_domain_config, token } = this.props setEquConDisplayPrice(sysRes.data.profile_value)
const params = { } else if (sysRes.error_code == 41006) {
access_token: token, show('登录过期，请重新登录')
profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE' this.props.exitLoginStatus()
} } else {
let sysRes = await requestSysProfile(global_domain_config, params) let error_msg = sysRes.error_msg || sysRes.message
console.log('sysRes:==', sysRes) show(error_msg)
if(sysRes.error_code === 0){
setEquConDisplayPrice(sysRes.data.profile_value)
} else if(sysRes.error_code == 41006) {
show('登录过期，请重新登录');
this.props.exitLoginStatus();
} else {
let error_msg = sysRes.error_msg || sysRes.message
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} <SafeAreaView style={safe_view}>
barStyle = 'light-content' <HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} />
/>
<SafeAreaView style={safe_view}> <ScrollableTabView
<HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} /> style={styles.bom_tab_box}
<ScrollableTabView initialPage={initialPage}
style={styles.bom_tab_box} page={initialPage}
initialPage={initialPage} tabBarPosition="bottom"
page={initialPage} locked={true}
tabBarPosition='bottom' renderTabBar={() => (
locked={true} <TabBottomItem
renderTabBar={() => tabNames={R.pluck('name')(tabs)}
<TabBottomItem tabIconNames={R.pluck('defIcon')(tabs)}
tabNames={tabNames} tabSelIconNames={R.pluck('selIcon')(tabs)}
tabIconNames={tabIconNames} />
tabSelIconNames={tabSelIconNames} )}
/> >
} {tabs.map(tab => {
> return (
{ <View
tabCodes.includes('MOBILE_BUSINESS_MODULE') ? <View style={styles.home_cont} tabLabel={tabNames[0]}> style={!R.includes(tab.code, 'MOBILE_HISTORICAL_ORDER') ? styles.home_cont : { flex: 1 }}
{ tabLabel={tab.name}
this.state.showList.map((item, index) => key={tab.code}
<TouchableOpacity >
activeOpacity={.8} {R.includes(tab.code, ['MOBILE_BUSINESS_MODULE', 'MOBILE_SETTLEMENT_MODULE']) &&
style={[styles.home_list, (index%2 !== 0) && styles.home_list_even]} tab.children &&
onPress={() => this.jumpToSubpage(index)} tab.children.map((menu, index) => {
key={index} return (
> <TouchableOpacity
<View style={styles.list_item}> activeOpacity={0.8}
<View style={styles.img_box}> style={[styles.home_list, index % 2 !== 0 && styles.home_list_even]}
<Image source={item.icon} style={styles.list_img}/> onPress={() => this.jumpToSubpage(menu)}
</View> key={menu.function_code}
<Text style={styles.list_tit}>{item.title}</Text> >
</View> <View style={styles.list_item}>
</TouchableOpacity> <View style={styles.img_box}>
) <Image source={menu.icon} style={styles.list_img} />
} </View>
</View> : null <Text style={styles.list_tit}>{menu.function_name}</Text>
} </View>
{ </TouchableOpacity>
tabCodes.includes('MOBILE_HISTORICAL_ORDER') ? <View style={{flex: 1}} tabLabel={tabNames[1]}> )
<HistoricalOrderPage navigation={navigation} /> })}
</View> : null
} {R.includes(tab.code, 'MOBILE_HISTORICAL_ORDER') && <HistoricalOrderPage navigation={navigation} />}
</ScrollableTabView> </View>
</SafeAreaView> )
</View> })}
); </ScrollableTabView>
} </SafeAreaView>
</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),
height: pxSize(150), height: pxSize(150),
backgroundColor: foundation_color, backgroundColor: foundation_color,
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)
\ No newline at end of file
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