Skip to content

zhangzhonghua / BoneHouse_APP

Go to a project
Commit cdc8c3a8 by Denglingling
Options

[转单]页面布局、以及[转单搜索]子页面部分布局

parent 0a992408
Inline Side-by-side
Showing with 1258 additions and 19 deletions
app/Router.js
...@@ -15,6 +15,7 @@ import SubSuccessPage from './containers/selfOrder/module/SubSuccessPage'; ...@@ -15,6 +15,7 @@ import SubSuccessPage from './containers/selfOrder/module/SubSuccessPage';
import EquipConsuPage from './containers/equipConsu/EquipConsuPage'; import EquipConsuPage from './containers/equipConsu/EquipConsuPage';
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 SubSuccPage from './containers/common/SubSuccPage'; import SubSuccPage from './containers/common/SubSuccPage';
const Router = createAppContainer(createStackNavigator({ const Router = createAppContainer(createStackNavigator({
...@@ -27,6 +28,7 @@ const Router = createAppContainer(createStackNavigator({ ...@@ -27,6 +28,7 @@ const Router = createAppContainer(createStackNavigator({
EquipConsuPage: {screen: EquipConsuPage}, EquipConsuPage: {screen: EquipConsuPage},
QuickOrderPage: {screen: QuickOrderPage}, QuickOrderPage: {screen: QuickOrderPage},
TransOrderPage: {screen: TransOrderPage}, TransOrderPage: {screen: TransOrderPage},
TransSearchPage: {screen: TransSearchPage},
SubSuccPage: {screen: SubSuccPage} SubSuccPage: {screen: SubSuccPage}
}, { }, {
navigationOptions: { navigationOptions: {
......
app/containers/quickOrder/QuickOrderPage.js
...@@ -194,7 +194,7 @@ class EquipConsuPage extends Component { ...@@ -194,7 +194,7 @@ class EquipConsuPage extends Component {
name: '请选择', name: '请选择',
value: '' value: ''
}, },
localOtherObj: { localOtherObj: { // 恢复原状态
name: '请选择', name: '请选择',
value: '' value: ''
}, },
...@@ -203,18 +203,18 @@ class EquipConsuPage extends Component { ...@@ -203,18 +203,18 @@ class EquipConsuPage extends Component {
isSubLoding: false, // 加载中弹窗 isSubLoding: false, // 加载中弹窗
lodingTitle: '加载中', lodingTitle: '加载中',
listCurrentOption: [ // 当前选择器数据 listCurrentOption: [ // 当前选择器数据
{ // {
name: '男', // name: '男',
value: 'boy' // value: 'boy'
}, // },
{ // {
name: '女', // name: '女',
value: 'girl' // value: 'girl'
}, // },
{ // {
name: '其他', // name: '其他',
value: 'other' // value: 'other'
} // }
], ],
dateModelPop: false, // 日期选择器 dateModelPop: false, // 日期选择器
hasPermission: undefined, //录音 授权状态 hasPermission: undefined, //录音 授权状态
......
app/containers/transOrder/TransOrderPage.js
...@@ -4,28 +4,628 @@ import { ...@@ -4,28 +4,628 @@ import {
Text, Text,
StyleSheet, StyleSheet,
SafeAreaView, SafeAreaView,
ScrollView ScrollView,
TouchableOpacity,
Image,
TextInput
} from 'react-native'; } from 'react-native';
import { import {
home_background_color, home_background_color,
promary_color, promary_color,
safe_view safe_view,
icon_style,
second_text_size,
font_family_regular,
first_text_color,
Width,
placehold_text_color,
pxSize,
foundation_color,
third_text_size,
title_text_color,
second_text_color,
pxHeight
} from '../../base/BaseStyle'; } from '../../base/BaseStyle';
import StatusBarView from '../common/StatusBarView'; import StatusBarView from '../common/StatusBarView';
import HeadBackItem from '../common/HeadBackItem'; import HeadBackItem from '../common/HeadBackItem';
import { FooterBtnStyle } from '../common/CellTextStyle'; import {
FooterBtnStyle,
CellTextStyle,
AsteriskTextStyle,
TitleTextStyle,
ContInputTextStyle,
ImageTextStyle,
ContTextStyle
} from '../common/CellTextStyle';
import { connect } from 'react-redux';
import { AudioRecorder, AudioUtils } from 'react-native-audio';
import Sound from 'react-native-sound';
import DialogModel from '../common/DialogModel';
class EquipConsuPage extends Component { class EquipConsuPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
canSubFlag: false, // 生成订单按钮样式改变 canSubFlag: false, // 生成订单按钮样式改变
listOptionData: [ // 备注以上的元素
{
"id": "0",
title: '销售员',
name: '蔡妍',
value: 'caiyan',
isPicker: false,
select: false,
isEditable: false // 不可编辑
},
{
"id": "1",
title: '组织',
name: '请选择',
value: '',
isPicker: true,
select: false
},
{
"id": "2",
title: '手术医院',
name: '请选择',
value: '',
isPicker: true,
select: false
},
{
"id": "3",
title: '目标订单信息',
name: '请选择',
value: '',
isPicker: true,
select: false
},
{
"id": "4",
title: '备注',
value: '',
isPicker: false,
select: false,
isRemark: true // 备注
},
{
"id": "5",
title: '还有什么要安排的，可录音备注哟！',
value: '',
isPicker: false,
select: false,
isRecode: true // 录音
},
{
"id": "6",
title: '耗材明细',
btnTit: '+添加转单申请明细',
value: '',
isPicker: false,
select: false,
isJumpSubPage: true, // 跳转子页
isShowSub: true, // 是否展示子项
subOption: [{
title: '人工髋关节假体-JS-HB ||| 人工髋关节假体-JS-HB',
orderNumber: 'SC20200506000006, SC20200506000006'
},{
title: '人工髋关节假体-JS-22 ||| 人工髋关节假体-JS-HB',
orderNumber: 'SC20200506000006, SC20200506000006'
},{
title: '人工髋关节假体-JS-33 ||| 人工髋关节假体-JS-HB',
orderNumber: 'SC20200506000006, SC20200506000006'
},{
title: '人工髋关节假体-JS-44 ||| 人工髋关节假体-JS-HB',
orderNumber: 'SC20200506000006, SC20200506000006'
},{
title: '人工髋关节假体-JS-5 ||| 人工髋关节假体-JS-HB',
orderNumber: 'SC20200506000006, SC20200506000006'
}]
},
{
"id": "7",
title: '添加照片',
value: '',
isPicker: false,
select: false,
isAddImage: true // 添加图片
}
],
submitOption: { // 提交的信息
// seller_code: '', // 用户名username
// org_code: '', // 组织
// customer_code: '', // 手术医院
// bill_to_site_code: '', // 收单地点
// ship_to_site_code: '', // 收货地点
// doctor_name: '', // 主治医生
// // surgery_name: '', // 手术名称
// surgery_date: '', // 手术时间
// // surgery_type_code: '', // 手术类型
// template_collect_number: '', // 配台模版
// order_type_code: '', // 订单类型
// surgery_desc: '', // 备注信息
// voice_url: '', // 录音地址
// order_currency: 'CNY',
// Caller: 'dingding',
// force_balance_check_flag: 'Y', // 检查缺失物料
},
currentItem: {
name: '请选择',
value: ''
},
localOtherObj: { // 恢复原状态
name: '请选择',
value: ''
},
currentTitle: '组织', // 当前点击项
showTypePop: false, // 选择器弹窗
isSubLoding: false, // 加载中弹窗
lodingTitle: '加载中',
listCurrentOption: [ // 当前选择器数据
{
name: '男',
value: 'boy'
},
{
name: '女',
value: 'girl'
},
{
name: '其他',
value: 'other'
}
],
hasPermission: undefined, //录音 授权状态
// audioPath: AudioUtils.DocumentDirectoryPath + `/quickAudio${Math.floor(Math.random() * (1000))+1}.aac`, // 文件路径
audioPath: AudioUtils.DocumentDirectoryPath + `/quickAudio${Math.floor(Math.random() * (1000))+1}.ogg`, // 文件路径
recording: false, //是否录音
pause: false, //录音是否暂停
stop: false, //录音是否停止
currentTime: 0, //录音时长
// localCustomersOption: [], // 当前医院信息：手术医院、收单地点、收货地点、主治医生
}
}
componentDidMount() {
this.getSellerName()
}
// 赋值销售员
getSellerName() {
let {state, props} = this
// console.log('---userInfo',props.userInfo)
if(state.listOptionData[0].name !== props.userInfo.person_name) {
this.setState({
listOptionData: state.listOptionData.map((item) => {
if(item.title === '销售员') {
item.name = props.userInfo.person_name
item.value = props.userInfo.user_name
}
return item
})
})
}
}
// 选择器弹窗回调函数
handleCallBack(item, itemTitle) {
console.warn(item, 'item--选择器弹窗回调函数----')
console.warn('item-itemTitle-----',itemTitle)
}
// 关闭弹窗
handleCloseModal(show) {
this.setState({
showTypePop: show
})
}
// 组织 点击
handleOrganizationCheck() {
console.warn('组织------check')
// let { state, props } = this
// this.setState({
// currentTitle: '组织',
// currentItem: {
// name: state.listOptionData[1].name,
// value: state.listOptionData[1].value
// }
// }, () => {
// let params = {
// access_token: props.token
// }
// props.requestQuickOrganizations(params)
// })
}
// 手术医院 点击
handleCustomerCheck() {
console.warn('手术医院------check')
// let { state, props } = this
// let self = this
// if(this.judgeOrgIsNull()) {
// self.setState({
// currentTitle: '手术医院',
// currentItem: {
// name: state.listOptionData[2].name,
// value: state.listOptionData[2].value
// }
// }, () => {
// // 在此修改接口
// self.getCustomerData()
// })
// }
}
// 目标订单信息 点击
handleTargetOrderCheck() {
console.warn('目标订单信息------check')
}
// 耗材明细 隐藏子项
handleDetailBtmCheck() {
let {listOptionData} = this.state
this.setState({
listOptionData: listOptionData.map((item, index) => {
if(index == 6) {
item.isShowSub = false
} }
return item
})
})
}
// 耗材明细 显示子项
handleDetailRigCheck() {
let {listOptionData} = this.state
this.setState({
listOptionData: listOptionData.map((item, index) => {
if(index == 6) {
item.isShowSub = true
}
return item
})
})
}
// 耗材明细 点击
handleConsumDetailCheck() {
console.warn('耗材明细------check')
this.props.navigation.navigate('TransSearchPage', {
title: '耗材明细 - 转单查询'
})
}
// 添加图片 点击
handleAddPicCheck() {
console.warn('添加图片------check')
} }
// 生成订单 点击 // 生成订单 点击
handleSubmit() { handleSubmit() {
console.warn('生成订单------check')
}
// 返回备注以上的元素
renderListItem() {
let { listOptionData } = this.state
return(
<View style={styles.list_cont}>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={1}
>
<CellTextStyle>
<AsteriskTextStyle>*</AsteriskTextStyle>
<TitleTextStyle>{'销售员'}</TitleTextStyle>
<ContInputTextStyle editable={false} defaultValue={listOptionData[0].name}></ContInputTextStyle>
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={.8}
onPress={() => this.handleOrganizationCheck()}
>
<CellTextStyle>
<AsteriskTextStyle>*</AsteriskTextStyle>
<TitleTextStyle>{'组织'}</TitleTextStyle>
<ContTextStyle>{listOptionData[1].name}</ContTextStyle>
{ this.renderRightArrowItem() }
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={.8}
onPress={() => this.handleCustomerCheck()}
>
<CellTextStyle>
<AsteriskTextStyle>*</AsteriskTextStyle>
<TitleTextStyle>{'手术医院'}</TitleTextStyle>
<ContTextStyle>{listOptionData[2].name}</ContTextStyle>
{ this.renderRightArrowItem() }
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={.8}
onPress={() => this.handleTargetOrderCheck()}
>
<CellTextStyle>
<AsteriskTextStyle>*</AsteriskTextStyle>
<TitleTextStyle>{'目标订单信息'}</TitleTextStyle>
<ContTextStyle>{listOptionData[3].name}</ContTextStyle>
{ this.renderRightArrowItem() }
</CellTextStyle>
</TouchableOpacity>
</View>
{/* { this.renderPickerModel() } */}
</View>
)
}
// 返回右侧箭头
renderRightArrowItem() {
return (
<ImageTextStyle>
<Image source={require('../../images/arr_rig.png')} style={icon_style}/>
</ImageTextStyle>
)
}
// 返回选择器弹窗
renderPickerModel() {
let {
listCurrentOption,
currentItem,
currentTitle,
showTypePop,
} = this.state
console.warn('弹窗-----,', listCurrentOption)
return (
<SafeAreaView style={styles.item_container}>
<DialogModel
entityList={listCurrentOption}
callback={(item, itemTitle) => this.handleCallBack(item, itemTitle)}
show={showTypePop}
itemValue={currentItem.value}
itemTitle={currentTitle}
closeModal={(show) => this.handleCloseModal(show)}
/>
</SafeAreaView>
)
}
// 返回备注元素
renderRemarksItem() {
let { state } = this
return (
<CellTextStyle style={styles.remark_item}>
<View style={styles.rema_box}>
<Text style={styles.rema_tit}>备注</Text>
<View style = {styles.rema_Input_outer} >
<TouchableOpacity activeOpacity = {1} style = {styles.rema_Input_inner} onPress = {() => this.TextInput.focus()} >
<TextInput
placeholder = {'请输入备注信息'}
placeholderTextColor = {placehold_text_color}
underlineColorAndroid = {'transparent'}
multiline = {true}
ref = {textInput => this.TextInput = textInput}
numberOfLines = {8}
style={styles.rema_Input}
maxLength={140}
onChangeText={(text) => this.handleRemarkInput(text)}
defaultValue={state.listOptionData[4].value}
/>
</TouchableOpacity>
</View>
</View>
</CellTextStyle>
)
}
// 返回录音元素
renderRecordingItem() {
let { recording, pause, stop, currentTime } = this.state
return (
<CellTextStyle style={styles.reco_item}>
<View style={styles.reco_btn_cont}>
<Text style={styles.reco_btn_tit}>还有什么要安排的，可录音备注哟！</Text>
{
!stop ?
<View style={styles.reco_btn_inner}>
<TouchableOpacity
activeOpacity = {.8}
style={styles.reco_btn_box}
onLongPress={this._record}
onPressOut={this._stop}
>
<View style={styles.reco_img_box}>
<Image source={require('../../images/record_icon.png')} style={icon_style}/>
</View>
<Text style={styles.reco_btn_text}>长按录音</Text>
</TouchableOpacity>
{/* <Text style={styles.reco_text} onPress={this._record}> Record(开始录音) </Text>
<Text style={styles.reco_text} onPress={this._pause}> Pause(暂停录音) </Text>
<Text style={styles.reco_text} onPress={this._resume}> Resume(恢复录音) </Text>
<Text style={styles.reco_text} onPress={this._stop}> Stop(停止录音) </Text>
<Text style={styles.reco_text} onPress={this._play}> Play(播放录音) </Text>
<Text style={styles.reco_text} onPress={this._del}> Del(删除录音) </Text>
<Text style={styles.reco_text}>
{
recording ? '正在录音' :
pause ? '已暂停' : '未开始'
}
</Text>
<Text style={styles.reco_text}>时长: {currentTime}</Text> */}
</View>
: <View style={styles.reco_play_box}>
<View style={styles.play_tit}>
<Text style={styles.play_text}>时长: {currentTime} 秒</Text>
<Text style={styles.play_text}>正在播放</Text>
</View>
<View style={styles.play_btn}>
<TouchableOpacity
activeOpacity = {.8}
style={[styles.reco_list_box, styles.reco_del_btn]}
onPress={this._del}
>
<Text style={[styles.reco_text, styles.reco_del_tit]}> 删除 </Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity = {.8}
style={[styles.reco_list_box, styles.reco_play_btn]}
onPress={this._play}
>
<Text style={[styles.reco_text, styles.reco_play_tit]}> 播放({currentTime}‘‘) </Text>
</TouchableOpacity>
{/* <TouchableOpacity
activeOpacity = {.8}
style={styles.reco_list_box}
onPress={this._stopPlay}
>
<Text style={styles.reco_text}> 停止 </Text>
</TouchableOpacity> */}
</View>
</View>
}
</View>
</CellTextStyle>
)
}
// 返回耗材明细
renderConsumablesDetailsItem() {
let { state } = this
return (
<CellTextStyle style={styles.consu_detail}>
<View style={styles.detail_inner}>
<Text style={styles.detail_tit}>耗材明细</Text>
{
state.listOptionData[6].subOption.length ?
<View
// activeOpacity={1}
style={styles.detail_sub_cont}>
<View style={styles.detail_sub_tit}>
<Text style={styles.detail_tit_text}>
耗材（{state.listOptionData[6].subOption.length}）
</Text>
{
state.listOptionData[6].isShowSub ?
<TouchableOpacity
activeOpacity={.7}
style={styles.detail_icon}
onPress={() => this.handleDetailBtmCheck()}
>
<Image style={[icon_style, styles.detail_top_icon]} source={require('../../images/arr_btm.png')} />
</TouchableOpacity> :
<TouchableOpacity
activeOpacity={.7}
style={[styles.detail_icon, styles.detail_icon_rig]}
onPress={() => this.handleDetailRigCheck()}
>
<Image style={[icon_style, styles.detail_top_icon]} source={require('../../images/arr_rig.png')} />
</TouchableOpacity>
}
</View>
{
state.listOptionData[6].isShowSub ?
<View style={styles.detail_sub_inner}>
<ScrollView
style={styles.detail_scroll}
onPress={() => {console.log('--触碰---')}}
onScrollBeginDrag={() => {console.log('--滚动---')}}
// showsVerticalScrollIndicator={false}
>
{
state.listOptionData[6].subOption.map((item, index) => {
return this.renderConDeSubItem(item, index)
})
}
</ScrollView>
</View> : null
}
</View> : null
}
<View style={styles.detail_footer}>
<TouchableOpacity
activeOpacity={.7}
style={styles.detail_btn_box}
onPress = {() => this.handleConsumDetailCheck()}
>
<Text style={styles.detail_btn}>{state.listOptionData[6].btnTit}</Text>
</TouchableOpacity>
</View>
</View>
</CellTextStyle>
)
}
// 返回耗材明细子项
renderConDeSubItem(item, index) {
return(
<View style={styles.con_de_sub}>
<Text style={styles.de_sub_tit}>
{index+1}：{ item.title }
</Text>
<Text style={styles.de_tip}>
{ item.orderNumber }
</Text>
</View>
)
}
// 返回添加图片
renderAddPictures() {
let { state } = this
return (
<CellTextStyle style={styles.consu_addpic}>
<View style={styles.addpic_inner}>
<Text style={styles.addpic_tit}>添加图片</Text>
<View style={styles.addpic_cont}>
<TouchableOpacity
activeOpacity={.7}
style={styles.addpic_img_btn}
onPress={() => this.handleAddPicCheck()}
>
<Image style={icon_style} source={require('../../images/add_icon_large.png')} />
</TouchableOpacity>
{/* <TouchableOpacity
activeOpacity={.7}
style={styles.addpic_img_btn}>
<Image style={icon_style} source={require('../../images/add_icon_large.png')} />
</TouchableOpacity> */}
</View>
</View>
</CellTextStyle>
)
}
// 返回正在加载中
renderLodingItem() {
// let { lodingTitle, isSubLoding } = this.state
// return(
// <LodingModel title={lodingTitle} show={isSubLoding} style_back={styles.loding_back} />
// )
} }
render() { render() {
...@@ -46,7 +646,17 @@ class EquipConsuPage extends Component { ...@@ -46,7 +646,17 @@ class EquipConsuPage extends Component {
style={styles.trans_main} style={styles.trans_main}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
> >
<Text>'转单⚠️⚠️'</Text>
{this.renderListItem()}
{this.renderRemarksItem()}
{this.renderRecordingItem()}
{this.renderConsumablesDetailsItem()}
{this.renderAddPictures()}
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
...@@ -57,6 +667,9 @@ class EquipConsuPage extends Component { ...@@ -57,6 +667,9 @@ class EquipConsuPage extends Component {
textStyle= {styles.sub_btn} textStyle= {styles.sub_btn}
onPress={() => this.handleSubmit()} onPress={() => this.handleSubmit()}
/> />
{/* { this.renderLodingItem() } */}
</View> </View>
); );
} }
...@@ -70,10 +683,282 @@ const styles = StyleSheet.create({ ...@@ -70,10 +683,282 @@ const styles = StyleSheet.create({
trans_main : { trans_main : {
padding: 14 padding: 14
}, },
remark_item: {
minHeight: 80,
height: 'auto'
},
rema_box: {
paddingVertical: 16
},
rema_tit: {
fontSize: second_text_size,
color: first_text_color,
fontFamily: font_family_regular
// fontWeight: 'bold'
},
rema_Input_outer: {
height: 120,
alignItems: 'center',
// paddingHorizontal: 15,
paddingBottom: 0
},
rema_Input_inner: {
paddingTop: 10,
height: 105,
width: Width() - 38,
// borderWidth: 1,
// borderColor: '#eeeeee'
},
rema_Input: {
paddingVertical: 0,
maxHeight: 105,
fontSize: second_text_size,
textAlign:'left',
textAlignVertical:'top',
alignSelf:'flex-start',
justifyContent:'flex-start',
alignItems:'flex-start',
fontFamily: font_family_regular
},
list_cont: {
flex: 1
},
item_container: {
flex: 1
},
reco_item: {
height: 160,
// height: 340,
// marginBottom: 42
},
reco_btn_cont: {
paddingVertical: 20
},
reco_btn_tit: {
fontSize: second_text_size,
color: first_text_color,
fontFamily: font_family_regular
},
reco_btn_inner: {
flex: 1,
width: Width() - 38,
// justifyContent: 'flex-end',
alignItems: 'center',
paddingTop: 30
},
reco_btn_box: {
backgroundColor: '#EEECEC',
borderRadius: 30,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 50,
width: pxSize(152)
},
reco_img_box: {
width: pxSize(20),
height: pxSize(22)
},
// reco_img: {
// width: '100%',
// height: '100%'
// },
reco_text: {
fontSize: 14,
marginVertical: 10
},
reco_btn_text: {
fontSize: second_text_size,
color: first_text_color,
marginLeft: 6,
fontFamily: font_family_regular
},
reco_play_box: {
flex: 1,
width: Width() - 68,
// justifyContent: 'flex-end',
// alignItems: 'center'
},
play_tit:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 60
},
play_text: {
fontSize: second_text_size,
color: first_text_color,
fontFamily: font_family_regular
},
play_btn:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
// height: 80
},
reco_list_box:{
backgroundColor: '#EEECEC',
borderRadius: 30,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: 34,
width: pxSize(100)
},
reco_del_btn: {
backgroundColor: promary_color,
height: 20,
borderRadius: 5,
width: pxSize(60)
},
reco_play_btn: {
width: pxSize(200),
borderRadius: 5,
height: 34,
borderColor: '#DFDFDF',
borderWidth: 1,
backgroundColor: foundation_color
},
reco_text: {
fontSize: second_text_size,
color: first_text_color,
fontFamily: font_family_regular
},
reco_del_tit: {
color: title_text_color,
fontSize: third_text_size
},
reco_play_tit: {},
consu_detail: {
backgroundColor: home_background_color,
// backgroundColor: '#ccc',
paddingHorizontal: 0,
minHeight: 80,
height: 'auto',
alignItems: 'flex-start'
},
detail_inner: {
flex: 1
},
detail_tit: {
fontSize: second_text_size,
color: '#A3A3A3',
fontFamily: font_family_regular
},
detail_sub_cont: {
backgroundColor: foundation_color,
padding: 20,
marginTop: 10
},
detail_footer: {
paddingHorizontal: 16
},
detail_sub_tit: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
detail_tit_text: {
color: '#000',
fontSize: 16,
fontFamily: font_family_regular
},
detail_icon: {
width: pxSize(20),
height: pxSize(20)
},
detail_icon_rig: {
width: pxSize(18),
height: pxSize(18)
},
detail_top_icon: {},
detail_sub_inner: {
marginTop: 10,
maxHeight: pxSize(160),
// flex: 1
},
detail_scroll: {
// flex: 1
// height: 100
},
con_de_sub: {
marginBottom: 10
},
de_sub_tit: {
color: second_text_color
},
de_tip: {
color: second_text_color
},
consu_addpic: {
backgroundColor: home_background_color,
paddingHorizontal: 0,
minHeight: pxHeight(320),
height: 'auto',
alignItems: 'flex-start',
marginBottom: 34
},
addpic_inner: {
flex: 1
},
addpic_tit: {
fontSize: second_text_size,
color: '#A3A3A3',
fontFamily: font_family_regular
},
addpic_cont: {
backgroundColor: foundation_color,
padding: 20,
marginTop: 10,
flexDirection: 'row',
flex: 1
},
addpic_img_btn: {
width: pxSize(68),
height: pxSize(68),
marginRight: 20
},
detail_btn_box: {
backgroundColor: promary_color,
width: '100%',
height: pxSize(46),
borderRadius: 5,
marginTop: 10
},
detail_btn: {
color: title_text_color,
textAlign: 'center',
fontSize: second_text_size,
lineHeight: 40
},
sub_btn_pro: { sub_btn_pro: {
backgroundColor: promary_color backgroundColor: promary_color
}, },
sub_btn: {}, sub_btn: {},
loding_back: {
backgroundColor: 'rgba(0, 0, 0, 0)'
}
}) })
export default EquipConsuPage; const mapStateToProps = (state) => {
\ No newline at end of file return {
userInfo: state.login.userInfo,
token: state.login.token,
loginState: state.login.loginState,
}
}
const mapDispatchToProps = (dispatch) => {
return {
// requestQuickOrganizations: (params) => {
// dispatch(requestQuickOrganizations(params))
// },
}
}
export default connect(mapStateToProps, mapDispatchToProps)(EquipConsuPage);
\ No newline at end of file
app/containers/transOrder/module/TransSearchPage.js 0 → 100644
import React, { Component } from 'react';
import {
View,
StyleSheet,
SafeAreaView,
TouchableOpacity,
Text,
Image
} from 'react-native';
import {
home_background_color,
promary_color,
safe_view,
pxHeight,
title_text_color,
second_text_color,
icon_style,
pxSize,
foundation_color,
second_text_size,
font_family_regular,
first_text_color,
promary_text_color
} from '../../../base/BaseStyle';
import StatusBarView from '../../common/StatusBarView';
import {
FooterBtnStyle,
CellTextStyle,
TitleTextStyle,
ContInputTextStyle
} from '../../common/CellTextStyle';
import { ScrollView } from 'react-native-gesture-handler';
import HeadBackItem from '../../common/HeadBackItem';
class TransSearchPage extends Component {
constructor(props) {
super(props);
this.state = { }
}
// 返回顶部查询
renderTopProItem() {
return(
<View style={styles.list_cont}>
<Text style={styles.search_top_tip}>查询条件，至少输入一个条件</Text>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={1}
>
<CellTextStyle style={styles.cell_box}>
<TitleTextStyle style={styles.cell_title}>{'序列号'}</TitleTextStyle>
<ContInputTextStyle
style={styles.cell_input}
placeholder={'不支持模糊查询'}
defaultValue={''}
onChangeText={(text) => console.log('序列号=====', text)}
/>
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={1}
>
<CellTextStyle style={styles.cell_box}>
<TitleTextStyle style={styles.cell_title}>{'来源借货订单号'}</TitleTextStyle>
<ContInputTextStyle
style={styles.cell_input}
placeholder={'不支持模糊查询'}
defaultValue={''}
onChangeText={(text) => console.log('来源借货订单号=====', text)}
/>
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={1}
>
<CellTextStyle style={styles.cell_box}>
<TitleTextStyle style={styles.cell_title}>{'物料名称'}</TitleTextStyle>
<ContInputTextStyle
style={styles.cell_input}
placeholder={'不支持模糊查询'}
defaultValue={''}
onChangeText={(text) => console.log('物料名称=====', text)}
/>
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={styles.item_container}>
<TouchableOpacity
activeOpacity={1}
>
<CellTextStyle style={styles.cell_box}>
<TitleTextStyle style={styles.cell_title}>{'手术名称'}</TitleTextStyle>
<ContInputTextStyle
style={styles.cell_input}
placeholder={'不支持模糊查询'}
defaultValue={''}
onChangeText={(text) => console.log('手术名称=====', text)}
/>
</CellTextStyle>
</TouchableOpacity>
</View>
<View style={[styles.item_container, styles.item_btn_cont]}>
<TouchableOpacity
activeOpacity={.7}
style={styles.search_btn_box}
onPress={() => console.log('查询')}
>
<Text style={styles.search_btn}>查询</Text>
</TouchableOpacity>
</View>
</View>
)
}
// 返回主要查询内容
renderContItem() {
return(
<View style={styles.search_cont}>
<View style={styles.search_cont_inner}>
<Text style={styles.cont_tit}>
当前查询（5）数据
</Text>
<TouchableOpacity
activeOpacity={.7}
style={styles.tit_btn_box}
onPress={() => console.log('全选，取消全选')}
>
<Text style={styles.tit_btn}>全选</Text>
</TouchableOpacity>
</View>
<View style={styles.cont_list}>
<View style={styles.cont_list_item}>
<View style={styles.list_left}>
<TouchableOpacity
activeOpacity={.7}
style={styles.btn_single_box}
onPress={() => console.log('单选！！！')}
>
<Image style={icon_style} source={require('../../../images/add_icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.list_right}>
<Text style={styles.right_top_tit}>
人工髋关节假体-JS-HB ||| T人工髋关节假体-JS
</Text>
<Text style={styles.right_tip}>
SC20200506000006, SC20200506000006
</Text>
</View>
</View>
<View style={styles.cont_list_item}>
<View style={styles.list_left}>
<TouchableOpacity
activeOpacity={.7}
style={styles.btn_single_box}
onPress={() => console.log('单选！！！')}
>
<Image style={icon_style} source={require('../../../images/add_icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.list_right}>
<Text style={styles.right_top_tit}>
人工髋关节假体-JS-HB ||| T人工髋关节假体-JS
</Text>
<Text style={styles.right_tip}>
SC20200506000006, SC20200506000006
</Text>
</View>
</View>
<View style={styles.cont_list_item}>
<View style={styles.list_left}>
<TouchableOpacity
activeOpacity={.7}
style={styles.btn_single_box}
onPress={() => console.log('单选！！！')}
>
<Image style={icon_style} source={require('../../../images/add_icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.list_right}>
<Text style={styles.right_top_tit}>
人工髋关节假体-JS-HB ||| T人工髋关节假体-JS
</Text>
<Text style={styles.right_tip}>
SC20200506000006, SC20200506000006
</Text>
</View>
</View>
<View style={styles.cont_list_item}>
<View style={styles.list_left}>
<TouchableOpacity
activeOpacity={.7}
style={styles.btn_single_box}
onPress={() => console.log('单选！！！')}
>
<Image style={icon_style} source={require('../../../images/add_icon.png')}/>
</TouchableOpacity>
</View>
<View style={styles.list_right}>
<Text style={styles.right_top_tit}>
人工髋关节假体-JS-HB ||| T人工髋关节假体-JS
</Text>
<Text style={styles.right_tip}>
SC20200506000006, SC20200506000006
</Text>
</View>
</View>
</View>
</View>
)
}
render() {
let {navigation} = this.props
let {title} = navigation.state.params
return (
<View style={styles.search_container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} />
<View style={styles.search_main}>
<ScrollView style={styles.search_scroll}>
{this.renderTopProItem()}
{this.renderContItem()}
</ScrollView>
</View>
<FooterBtnStyle
style={styles.sub_btn_pro}
activeOpacity={.8}
title={'确定'}
textStyle= {styles.sub_btn}
onPress={() => console.warn('确定')}
/>
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
search_container: {
flex: 1,
backgroundColor: home_background_color,
padding: 0,
margin: 0
},
search_main: {
flex: 1
},
search_scroll: {
paddingTop: 16,
paddingHorizontal: 16
},
list_cont: {
flex: 1,
// alignItems: 'center'
},
item_container: {
flex: 1
},
item_btn_cont: {
alignItems: 'center',
justifyContent: 'center'
},
search_top_tip: {
fontSize: 14,
color: second_text_color,
marginBottom: 10
},
cell_box: {
height: 46,
marginBottom: 10
},
cell_title: {
width: 120
},
cell_input: {
textAlign: 'left'
},
search_btn_box: {
backgroundColor: promary_color,
height: 46,
width: '90%',
borderRadius: 5
},
search_btn: {
color: title_text_color,
lineHeight: 44,
textAlign: 'center',
fontSize: 16
},
search_cont:{
backgroundColor: foundation_color,
padding: 16,
marginTop: 20
},
search_cont_inner:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
cont_tit:{
fontSize: second_text_size,
fontFamily: font_family_regular,
color: promary_text_color
},
tit_btn_box:{
backgroundColor: promary_color,
height: 24,
borderRadius: 5,
width: 52
},
tit_btn:{
color: title_text_color,
lineHeight: 22,
textAlign: 'center',
fontSize: 14
},
cont_list:{},
cont_list_item:{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
list_left:{},
btn_single_box:{
width: pxSize(30),
height: pxSize(30)
},
list_right:{
paddingLeft: 10,
paddingRight: 20
},
right_top_tit:{},
right_tip:{},
sub_btn_pro: {
backgroundColor: promary_color
},
})
export default TransSearchPage;
\ 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