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 {
StyleSheet,
View,
Text,
Image,
SafeAreaView,
TouchableOpacity
} from 'react-native';
import {connect} from "react-redux";
import {
foundation_color,
promary_text_color,
second_text_size,
home_background_color,
pxSize,
promary_color,
safe_view,
font_family_regular
} 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';
foundation_color,
promary_text_color,
second_text_size,
home_background_color,
pxSize,
promary_color,
safe_view,
font_family_regular,
} from '../../base/BaseStyle'
import { exitLoginStatus, requestSysProfile } from '../../action/LoginAction'
import HeadBackItem from '../common/HeadBackItem'
import StatusBarView from '../common/StatusBarView'
import TabBottomItem from './module/TabBottomItem'
import HistoricalOrderPage from '../historicalOrder/HistoricalOrderPage'
import { referenceArrSort, show, isNotBlank, isBlank } from '../../utils/Utils'
import { setEquConDisplayPrice } from '../../base/BaseConstants'
import { LOGIN_NO } from '../../base/ActionTypes'
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) {
super(props)
this.state = {
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'
},
componentDidMount() {
this.getMenuRuleInfo()
this.getSysConfigValue()
}
// tabNames: ['业务模块', '历史订单'],
// tabIconNames: [require('../../images/tab_mod_def.png'), require('../../images/tab_his_def.png')],
// tabSelIconNames:[require('../../images/tab_mod_sel.png'), require('../../images/tab_his_sel.png')],
tabNames: [], // Tab标题
tabIconNames: [], // Tab默认图标
tabSelIconNames:[], // Tab选择后图标
tabCodes: [], // Tab标题对应代码
initialPage: 0,
modDefauIcon: require('../../images/tab_mod_def.png'),
modSeleIcon: require('../../images/tab_mod_sel.png'),
hisDefauIcon: require('../../images/tab_his_def.png'),
hisSeleIcon: require('../../images/tab_his_sel.png'),
isRightExit: true
}
componentWillReceiveProps(nextProps) {
let { loginState, navigation } = this.props
if (loginState != nextProps.loginState) {
switch (nextProps.loginState) {
case LOGIN_NO:
navigation.navigate('LoginPage')
break
default:
break
}
}
}
componentDidMount() {
this.getMenuRuleInfo()
this.getSysConfigValue()
}
// 获取菜单权限
getMenuRuleInfo() {
let { functions } = this.props.userInfo
let { menus, icons, tabs } = this.state
R.compose(
R.map(item => {
const icon = icons[item.function_code]
componentWillReceiveProps(nextProps) {
let { loginState, navigation } = this.props
if(loginState != nextProps.loginState) {
switch(nextProps.loginState) {
case LOGIN_NO:
navigation.navigate('LoginPage')
break;
default:
break;
// child_list相关
const children = R.compose(
R.map(submenu => {
const info = R.pathOr({}, [item.function_code, submenu.function_code])(menus)
return {
...info,
...submenu,
}
}),
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)
// 获取菜单权限
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)
}
})
}
this.setState({ tabs })
}
} else if(item.function_code == 'MOBILE_HISTORICAL_ORDER') {
tempTabIconNames.push(hisDefauIcon)
tempTabSelIconNames.push(hisSeleIcon)
}
})
this.setState({
tabNames: tempTabNames,
tabCodes: tempTabCodes,
tabIconNames: tempTabIconNames,
tabSelIconNames: tempTabSelIconNames,
showList: tempModuleList
})
// 获取配置值
async getSysConfigValue() {
let { global_domain_config, token } = this.props
const params = {
access_token: token,
profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE',
}
// 获取配置值
async getSysConfigValue() {
let { global_domain_config, token } = this.props
const params = {
access_token: token,
profile_code: 'OBS_MOBILE_EQU_CON_DISPLAY_PRICE'
}
let sysRes = await requestSysProfile(global_domain_config, params)
console.log('sysRes:==', sysRes)
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);
}
let sysRes = await requestSysProfile(global_domain_config, params)
console.log('sysRes:==', sysRes)
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) {
let {page, title} = this.state.showList[index]
if('LoginPage' === page) {
this.props.exitLoginStatus()
}
this.props.navigation.navigate(page, {title})
// 跳转页面
jumpToSubpage(menu) {
const page = menu.page
if ('LoginPage' === page) {
this.props.exitLoginStatus()
}
this.props.navigation.navigate(page, { title: menu.function_name })
}
render() {
let {navigation, sysProfiles} = this.props
let { tabNames, tabIconNames, tabSelIconNames,
initialPage, tabCodes, isRightExit } = this.state
const title = sysProfiles.OBS_MOBILE_APP_TITLE || '骨科智慧仓'
return (
<View style={styles.home_container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} />
<ScrollableTabView
style={styles.bom_tab_box}
initialPage={initialPage}
page={initialPage}
tabBarPosition='bottom'
locked={true}
renderTabBar={() =>
<TabBottomItem
tabNames={tabNames}
tabIconNames={tabIconNames}
tabSelIconNames={tabSelIconNames}
/>
}
>
{
tabCodes.includes('MOBILE_BUSINESS_MODULE') ? <View style={styles.home_cont} tabLabel={tabNames[0]}>
{
this.state.showList.map((item, index) =>
<TouchableOpacity
activeOpacity={.8}
style={[styles.home_list, (index%2 !== 0) && styles.home_list_even]}
onPress={() => this.jumpToSubpage(index)}
key={index}
>
<View style={styles.list_item}>
<View style={styles.img_box}>
<Image source={item.icon} style={styles.list_img}/>
</View>
<Text style={styles.list_tit}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}
</View> : null
}
{
tabCodes.includes('MOBILE_HISTORICAL_ORDER') ? <View style={{flex: 1}} tabLabel={tabNames[1]}>
<HistoricalOrderPage navigation={navigation} />
</View> : null
}
</ScrollableTabView>
</SafeAreaView>
</View>
);
}
render() {
let { navigation, sysProfiles } = this.props
let { initialPage, isRightExit, tabs } = this.state
const title = sysProfiles.OBS_MOBILE_APP_TITLE || '骨科智慧仓'
return (
<View style={styles.home_container}>
<StatusBarView isReactStackNavigator={true} backgroundColor={promary_color} barStyle="light-content" />
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} isRightExit={isRightExit} />
<ScrollableTabView
style={styles.bom_tab_box}
initialPage={initialPage}
page={initialPage}
tabBarPosition="bottom"
locked={true}
renderTabBar={() => (
<TabBottomItem
tabNames={R.pluck('name')(tabs)}
tabIconNames={R.pluck('defIcon')(tabs)}
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']) &&
tab.children &&
tab.children.map((menu, index) => {
return (
<TouchableOpacity
activeOpacity={0.8}
style={[styles.home_list, index % 2 !== 0 && styles.home_list_even]}
onPress={() => this.jumpToSubpage(menu)}
key={menu.function_code}
>
<View style={styles.list_item}>
<View style={styles.img_box}>
<Image source={menu.icon} style={styles.list_img} />
</View>
<Text style={styles.list_tit}>{menu.function_name}</Text>
</View>
</TouchableOpacity>
)
})}
{R.includes(tab.code, 'MOBILE_HISTORICAL_ORDER') && <HistoricalOrderPage navigation={navigation} />}
</View>
)
})}
</ScrollableTabView>
</SafeAreaView>
</View>
)
}
}
const styles = StyleSheet.create({
home_container: {
flex: 1,
backgroundColor: home_background_color
},
home_cont: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: '8%',
marginLeft: '10%',
justifyContent: 'flex-start'
},
home_list: {
width: pxSize(150),
height: pxSize(150),
backgroundColor: foundation_color,
marginBottom: '6%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4
},
home_list_even: {
marginLeft: '8%'
},
list_item: {
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
img_box: {
width: pxSize(46),
marginBottom: 6
},
list_img: {
resizeMode: 'contain',
width: '100%'
},
list_tit: {
fontSize: second_text_size,
color: promary_text_color,
lineHeight: second_text_size + 12,
fontFamily: font_family_regular
},
bom_tab_box: {
flex: 1
},
home_container: {
flex: 1,
backgroundColor: home_background_color,
},
home_cont: {
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: '8%',
marginLeft: '10%',
justifyContent: 'flex-start',
},
home_list: {
width: pxSize(150),
height: pxSize(150),
backgroundColor: foundation_color,
marginBottom: '6%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
},
home_list_even: {
marginLeft: '8%',
},
list_item: {
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
img_box: {
width: pxSize(46),
marginBottom: 6,
},
list_img: {
resizeMode: 'contain',
width: '100%',
},
list_tit: {
fontSize: second_text_size,
color: promary_text_color,
lineHeight: second_text_size + 12,
fontFamily: font_family_regular,
},
bom_tab_box: {
flex: 1,
},
})
const mapStateToProps = (state) => ({
loginState:state.login.loginState,
userInfo: state.login.userInfo,
token: state.login.token,
global_domain_config: state.login.global_domain_config,
sysProfiles: state.login.sysProfiles,
const mapStateToProps = state => ({
loginState: state.login.loginState,
userInfo: state.login.userInfo,
token: state.login.token,
global_domain_config: state.login.global_domain_config,
sysProfiles: state.login.sysProfiles,
})
const mapDispatchToProps = (dispatch) => ({
exitLoginStatus: () => {
dispatch(exitLoginStatus())
}
const mapDispatchToProps = dispatch => ({
exitLoginStatus: () => {
dispatch(exitLoginStatus())
},
})
export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
\ No newline at end of file
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