Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 47a233e0 by Denglingling
Options

增加插件实现的功能说明、增加 tab 标签实现的中间件、增加历史订单需要的组件

parent 7f3db4af
Expand all
Inline Side-by-side
Showing with 210 additions and 18 deletions
README.md
...@@ -9,3 +9,9 @@ ...@@ -9,3 +9,9 @@
- 输入<my-key-alias>密钥口令：gkzhc2020 - 输入<my-key-alias>密钥口令：gkzhc2020
## 主要功能
- 基于 `react-native-image-picker` 实现本地相册/相机获取
- 基于 `react-native-audio` 和 `react-native-sound` 实现本地录音/音频播放
- 基于 `react-native-date-picker` 实现 `Android`/`Ios` 相同效果的日期选择器
- 基本 `react-native-root-toast` 实现弹窗提示
- 基于 `react-native-scrollable-tab-view` 实现主页面 `Tab` 选项卡切换
app/Router.js
...@@ -18,6 +18,7 @@ import FillUnitPricePage from './containers/equipConsu/module/FillUnitPricePage' ...@@ -18,6 +18,7 @@ import FillUnitPricePage from './containers/equipConsu/module/FillUnitPricePage'
import QuickOrderPage from './containers/quickOrder/QuickOrderPage'; import QuickOrderPage from './containers/quickOrder/QuickOrderPage';
import TransOrderPage from './containers/transOrder/TransOrderPage'; import TransOrderPage from './containers/transOrder/TransOrderPage';
import TransSearchPage from './containers/transOrder/module/TransSearchPage'; import TransSearchPage from './containers/transOrder/module/TransSearchPage';
import HistoricalOrderPage from './containers/historicalOrder/HistoricalOrderPage';
import SubSuccPage from './containers/common/SubSuccPage'; import SubSuccPage from './containers/common/SubSuccPage';
const Router = createAppContainer(createStackNavigator({ const Router = createAppContainer(createStackNavigator({
...@@ -33,6 +34,7 @@ const Router = createAppContainer(createStackNavigator({ ...@@ -33,6 +34,7 @@ const Router = createAppContainer(createStackNavigator({
QuickOrderPage: {screen: QuickOrderPage}, QuickOrderPage: {screen: QuickOrderPage},
TransOrderPage: {screen: TransOrderPage}, TransOrderPage: {screen: TransOrderPage},
TransSearchPage: {screen: TransSearchPage}, TransSearchPage: {screen: TransSearchPage},
HistoricalOrderPage: {screen: HistoricalOrderPage},
SubSuccPage: {screen: SubSuccPage} SubSuccPage: {screen: SubSuccPage}
}, { }, {
navigationOptions: { navigationOptions: {
......
app/action/EquipAction.js
...@@ -68,7 +68,7 @@ export function requestEquipSurgeryHospital(params) { ...@@ -68,7 +68,7 @@ export function requestEquipSurgeryHospital(params) {
} }
// api/latest/surgery/collect_order/search?access_token=${access_token}&org_code=A02&seller_code=shi.ming&customer_code=CU00000017&collect_header_status=RETURNED,COLLECTED // api/latest/surgery/collect_order/search?access_token=${access_token}&org_code=A02&seller_code=shi.ming&customer_code=CU00000017&collect_header_status=RETURNED,COLLECTED
// 获取手术医院 params={access_token:'', org_code:'', seller_code:'', customer_code:'', collect_header_status: ''} // 获取订单信息 params={access_token:'', org_code:'', seller_code:'', customer_code:'', collect_header_status: ''}
export function requestEquipOrderInfo(params) { export function requestEquipOrderInfo(params) {
return dispatch => { return dispatch => {
console.log('----requestEquipOrderInfo====================', params) console.log('----requestEquipOrderInfo====================', params)
......
app/containers/equipConsu/EquipConsuPage.js
...@@ -442,7 +442,7 @@ class EquipConsuPage extends Component { ...@@ -442,7 +442,7 @@ class EquipConsuPage extends Component {
canSubFlag: !tempStatus canSubFlag: !tempStatus
}) })
if(isSubCheck && tempStatus) { if(isSubCheck && tempStatus) {
show(`${tempTit}，不能提交`, 'warn') show(`${tempTit}，不能提交`)
} }
} }
......
app/containers/home/HomePage.js
...@@ -21,8 +21,11 @@ import { ...@@ -21,8 +21,11 @@ import {
import { exitLoginStatus } from '../../action/LoginAction'; import { exitLoginStatus } 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, { DefaultTabBar } from 'react-native-scrollable-tab-view';
import TabBottomItem from './module/TabBottomItem';
class HomePage extends Component { class HomePage extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
...@@ -32,27 +35,36 @@ class HomePage extends Component { ...@@ -32,27 +35,36 @@ class HomePage extends Component {
title: '快速下单', title: '快速下单',
page: 'QuickOrderPage', page: 'QuickOrderPage',
}, },
{ // {
icon: require('../../images/self_order.png'), // icon: require('../../images/self_order.png'),
title: '自助下单', // title: '自助下单',
page: 'SelfOrderPage', // page: 'SelfOrderPage',
}, // },
{ // {
icon: require('../../images/trans_order.png'), // icon: require('../../images/trans_order.png'),
title: '转单', // title: '转单',
page: 'TransOrderPage', // page: 'TransOrderPage',
}, // },
{ {
icon: require('../../images/equip_consu.png'), icon: require('../../images/equip_consu.png'),
title: '器械消耗', title: '器械消耗',
page: 'EquipConsuPage', page: 'EquipConsuPage',
}, },
// {
// icon: require('../../images/equip_consu.png'),
// title: '历史订单',
// page: 'HistoricalOrderPage',
// },
{ {
icon: require('../../images/return_login.png'), icon: require('../../images/return_login.png'),
title: '返回登录页', title: '返回登录页',
page: 'LoginPage', page: 'LoginPage',
} }
] ],
tabNames: ['业务模块', '历史订单'],
tabIconNames: [require('../../images/tab_init.png'), require('../../images/tab_init.png')],
tabSelIconNames:[require('../../images/tab_act.png'), require('../../images/tab_act.png')],
initialPage: 0
} }
} }
...@@ -69,6 +81,19 @@ class HomePage extends Component { ...@@ -69,6 +81,19 @@ class HomePage extends Component {
// } // }
// } // }
// 切换 Tab 标签
switchTabView(obj) {
console.log('切换===',obj)
if(obj.i == 1) {
this.setState({
initialPage: 0
})
// 跳转到历史订单页面
this.props.navigation.navigate('HistoricalOrderPage', {title: '历史订单'})
}
}
// 跳转页面
jumpToSubpage(index) { jumpToSubpage(index) {
// console.warn('跳转') // console.warn('跳转')
// console.warn(index) // console.warn(index)
...@@ -83,6 +108,7 @@ class HomePage extends Component { ...@@ -83,6 +108,7 @@ class HomePage extends Component {
render() { render() {
let {navigation} = this.props let {navigation} = this.props
let { tabNames, tabIconNames, tabSelIconNames, initialPage } = this.state
return ( return (
<View style={styles.home_container}> <View style={styles.home_container}>
<StatusBarView <StatusBarView
...@@ -92,7 +118,48 @@ class HomePage extends Component { ...@@ -92,7 +118,48 @@ class HomePage extends Component {
/> />
<SafeAreaView style={safe_view}> <SafeAreaView style={safe_view}>
<HeadBackItem title={'骨科智慧仓'} navigation={navigation} /> <HeadBackItem title={'骨科智慧仓'} navigation={navigation} />
<View style={styles.home_cont}>
<ScrollableTabView
style={styles.bom_tab_box}
initialPage={initialPage}
page={initialPage}
tabBarPosition='bottom'
locked={true}
renderTabBar={() =>
// <DefaultTabBar />
<TabBottomItem
tabNames={tabNames}
tabIconNames={tabIconNames}
tabSelIconNames={tabSelIconNames}
/>
}
onChangeTab={(obj) => this.switchTabView(obj)}
>
{/* <Text tabLabel={tabNames[0]}>My</Text> */}
<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>
<Text tabLabel={tabNames[1]}>------Tab2------</Text>
</ScrollableTabView>
{/* <View style={styles.home_cont}>
{ {
this.state.showList.map((item, index) => this.state.showList.map((item, index) =>
<TouchableOpacity <TouchableOpacity
...@@ -110,7 +177,7 @@ class HomePage extends Component { ...@@ -110,7 +177,7 @@ class HomePage extends Component {
</TouchableOpacity> </TouchableOpacity>
) )
} }
</View> </View> */}
</SafeAreaView> </SafeAreaView>
</View> </View>
); );
...@@ -169,7 +236,10 @@ const styles = StyleSheet.create({ ...@@ -169,7 +236,10 @@ const styles = StyleSheet.create({
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: {
},
}) })
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
......
app/containers/home/module/TabBottomItem.js 0 → 100644
import React, { Component } from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
StyleSheet
} from 'react-native';
import {
pxSize,
icon_style,
third_text_size,
font_family_regular,
second_text_color,
promary_text_color,
foundation_color
} from '../../../base/BaseStyle';
const PropTypes = require('prop-types');
class TabBottomItem extends Component {
static propTypres = {
goToPage: PropTypes.func, // 跳转到对应tab的方法
activeTab: PropTypes.number, // 当前被选中的tab下标
tabs: PropTypes.array, // 所有tabs集合
tabNames: PropTypes.array, // tab名称
tabIconNames: PropTypes.array, // tab默认图标
tabSelIconNames: PropTypes.tabSelIconNames // tab选中图标
};
constructor(props) {
super(props);
this.state = { }
}
// 返回每一个tab
renderTabOption(tab, i) {
const color = this.props.activeTab == i ? "#6B8E23" : "#ADADAD"; // 判断i是否是当前选中的tab，设置不同的颜色
console.log('props.activeTab---', tab, i)
let {props} = this
return(
<TouchableOpacity
activeOpacity={.8}
style={styles.tab_opt}
onPress={() => props.goToPage(i)}
key={i}
>
<View style={styles.tab_item_box}>
<View style={styles.tab_icon_box}>
{
props.activeTab == i ?
<Image source={props.tabSelIconNames[i]} style={icon_style} />
: <Image source={props.tabIconNames[i]} style={icon_style} />
}
</View>
<Text style={[styles.tab_tit, props.activeTab == i ? styles.tab_tit_act : '']}>
{props.tabNames[i]}
</Text>
</View>
</TouchableOpacity>
)
}
render() {
let {props} = this
return (
<View style={styles.tab_item_main}>
{
props.tabs.map((tab, i) => this.renderTabOption(tab,i))
}
</View>
);
}
}
const styles = StyleSheet.create({
tab_item_main: {
flexDirection: 'row',
backgroundColor: foundation_color,
height: 80,
paddingVertical: 10,
paddingHorizontal: 30,
justifyContent: 'space-around',
shadowColor: '#E5E5E5',
shadowOffset: {
width: 1,
height: 2
},
shadowOpacity: 1,
elevation: 10,
},
tab_opt: {
// backgroundColor: 'red'
},
tab_item_box: {
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 12,
},
tab_icon_box: {
width: pxSize(22),
height: pxSize(22),
marginBottom: 2
},
tab_tit: {
fontSize: third_text_size,
fontFamily: font_family_regular,
color: second_text_color
},
tab_tit_act: {
color: promary_text_color
},
})
export default TabBottomItem;
\ No newline at end of file
app/containers/quickOrder/QuickOrderPage.js
...@@ -58,8 +58,6 @@ import { ...@@ -58,8 +58,6 @@ import {
QUICK_SUBMIT_FAILURE QUICK_SUBMIT_FAILURE
} from '../../base/ActionTypes'; } from '../../base/ActionTypes';
import ImagePicker from 'react-native-image-picker';
class EquipConsuPage extends Component { class EquipConsuPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
......
package.json
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"react-native-gesture-handler": "1.3.0", "react-native-gesture-handler": "1.3.0",
"react-native-image-picker": "0.27.0", "react-native-image-picker": "0.27.0",
"react-native-root-toast": "3.1.1", "react-native-root-toast": "3.1.1",
"react-native-scrollable-tab-view": "^0.9.0",
"react-native-sound": "0.11.0", "react-native-sound": "0.11.0",
"react-navigation": "3.11.0", "react-navigation": "3.11.0",
"react-redux": "7.1.0", "react-redux": "7.1.0",
......
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