Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 47a233e0 by Denglingling
Options

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

parent 7f3db4af
Inline Side-by-side
Showing with 560 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/historicalOrder/HistoricalOrderPage.js 0 → 100644
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
FlatList,
ScrollView,
SafeAreaView,
TextInput
} from 'react-native';
import StatusBarView from '../common/StatusBarView';
import {
promary_color,
safe_view,
icon_style,
list_common_item,
foundation_color,
home_background_color,
second_text_color,
first_text_color,
Width,
font_family_regular,
pxSize,
title_text_color,
promary_text_color,
font_family_medium,
third_text_color,
second_text_size
} from '../../base/BaseStyle';
import HeadBackItem from '../common/HeadBackItem';
import LodingModel from '../common/LodingModel';
class HistoricalOrderPage extends Component {
constructor(props) {
super(props);
this.state = {
searchValue: '',
isSubLoding: true, // 加载中弹窗
lodingTitle: '加载中',
topProcOptionList: [
{
title: '借货订单'
},
{
title: '消耗确认'
},
{
title: '转单申请'
}
],
topActiveIndex: 0,
contOptionData: [{
}]
}
}
// 搜索 输入
handleSearchInput(text) {
console.log('搜索 输入---', text)
}
// 点击顶部菜单
handleTopNav(item, index) {
this.setState({
topActiveIndex: index
})
}
// 返回搜索元素
renderSearchItem() {
return (
<View style={list_common_item.ser_cont}>
<TextInput
placeholder={'搜索订单号'}
style={list_common_item.ser_text_input}
defaultValue={this.state.searchValue}
onChangeText={(text) => this.handleSearchInput(text)}
/>
<View style={list_common_item.ser_img_box}>
<Image source={require('../../images/search_icon.png')} style={icon_style}/>
</View>
</View>
)
}
// 返回中间主要内容
renderContItem() {
let { topProcOptionList, topActiveIndex, contOptionData } = this.state
return(
<View style={styles.cont_item_box}>
<View style={styles.top_box}>
<View style={styles.top_tab_cont}>
{/* <ScrollView
style={styles.top_scroll_cont}
horizontal={true}
showsHorizontalScrollIndicator={false}
> */}
{
topProcOptionList.map((item, index) =>
<TouchableOpacity
activeOpacity={1}
style={styles.top_touch_cont}
onPress={() => this.handleTopNav(item, index)}
>
<View style={[
styles.top_inner,
index == topActiveIndex ? styles.top_inner_act : ''
]}>
<Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>
{item.title}
</Text>
</View>
</TouchableOpacity>
)
}
{/* </ScrollView> */}
</View>
<View style={styles.top_sea_box}>
<TouchableOpacity
activeOpacity={.8}
style={styles.sea_inner}
onPress={()=>console.log('hi22')}
>
<Text style={styles.sea_tit}>
筛选
</Text>
<View style={styles.sea_icon}>
<Image source={require('../../images/arr_top.png')} style={icon_style} />
</View>
</TouchableOpacity>
<View style={styles.sea_sel_opt}>
<Text>待定！！！！</Text>
</View>
<View style={styles.sea_btn_box}>
<TouchableOpacity
activeOpacity={.8}
style={styles.sea_btn_inner}
onPress={()=>console.log('hi33')}
>
<Text style={styles.sea_btn_tit}>确定</Text>
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.cont_main}>
<ScrollView
style={styles.cont_scroll}
>
<FlatList
style={styles.cont_box}
keyExtractor={item => item.id}
data={this.state.contOptionData}
extraData={this.state}
renderItem={ ({item, index}) => this.renderSubListItem(item, index) }
/>
</ScrollView>
</View>
</View>
)
}
// 返回每一列数据
renderSubListItem(item, index) {
return (
<View style={styles.cont_list_item}>
<TouchableOpacity
activeOpacity={.8}
style={styles.cont_list_box}
onPress={()=>console.log('hi')}
>
<View style={styles.cont_lef}>
<Text style={styles.cont_lef_tit}>
202005182012033
</Text>
<Text style={styles.cont_tip}>
手术名称：髋关节手术
</Text>
<Text style={styles.cont_tip}>
2020/05/18 10:25
</Text>
</View>
<View style={styles.cont_rig}>
<Text style={styles.cont_rig_status}>待审核</Text>
</View>
</TouchableOpacity>
</View>
)
}
// 返回正在加载中
renderLodingItem() {
let { lodingTitle, isSubLoding } = this.state
return(
<LodingModel title={lodingTitle} show={isSubLoding} style_back={styles.loding_back} />
)
}
render() {
let {navigation} = this.props
let {title} = navigation.state.params
return (
<View style={styles.hist_container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} />
<View style={styles.hist_main}>
{ this.renderSearchItem() }
{ this.renderContItem() }
{/* {this.renderLodingItem()} */}
</View>
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
hist_container: {
flex: 1,
backgroundColor: home_background_color,
padding: 0,
margin: 0
},
hist_main: {
flex: 1
},
loding_back: {
backgroundColor: 'rgba(0, 0, 0, 0)'
},
cont_item_box: {},
top_box: {},
top_tab_cont: {
flexDirection: 'row',
backgroundColor: foundation_color
},
top_scroll_cont: {
paddingBottom: 4,
borderBottomColor: '#DEDBDB',
borderBottomWidth: 1
},
top_touch_cont: {
width: '33.33333%'
},
top_inner: {
justifyContent: 'center',
alignItems: 'center',
// marginRight: 14,
borderBottomWidth: 2,
borderBottomColor: foundation_color,
// minWidth: 50
},
top_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
},
top_tit: {
paddingTop: 16,
paddingBottom: 12,
color: second_text_color,
fontSize: 14
},
top_tit_act: {
color: first_text_color,
fontWeight: 'bold'
},
top_sea_box: {
paddingVertical: 10,
paddingHorizontal: 24
},
sea_inner: {
flexDirection: 'row',
alignItems: 'center'
},
sea_tit: {
fontSize: 14,
color: second_text_color,
fontFamily: font_family_regular
},
sea_icon: {
width: pxSize(8),
height: pxSize(8),
marginLeft: 4
},
sea_sel_opt: {},
sea_btn_box: {
alignItems: 'flex-end'
},
sea_btn_inner: {
backgroundColor: promary_color,
width: 52,
height: 26,
borderRadius: 4
},
sea_btn_tit: {
fontSize: 14,
fontFamily: font_family_regular,
textAlign: 'center',
lineHeight: 24,
color: title_text_color
},
cont_main: {
backgroundColor: foundation_color
},
cont_scroll: {},
cont_box: {},
cont_list_item: {
margin: 20,
borderBottomWidth: .5,
borderBottomColor: '#EEEEEE',
paddingBottom: 20
},
cont_list_box: {
flexDirection: 'row',
justifyContent: 'space-between'
},
cont_lef: {},
cont_lef_tit: {
color: promary_text_color,
fontSize: 18,
fontFamily: font_family_medium
},
cont_tip: {
fontSize: 12,
color: third_text_color,
fontFamily: font_family_regular
},
cont_rig: {
justifyContent: 'flex-end'
},
cont_rig_status: {
fontSize: second_text_size,
fontFamily: font_family_medium,
color: '#FF0000'
},
})
export default HistoricalOrderPage;
\ No newline at end of file
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