增加【消耗明细】的【确认单价】页面布局

app/Router.js

@@ -14,6 +14,7 @@ import EditStencilPage from './containers/selfOrder/module/EditStencilPage';
 import SubSuccessPage from './containers/selfOrder/module/SubSuccessPage';
 import SubSuccessPage from './containers/selfOrder/module/SubSuccessPage';
 import EquipConsuPage from './containers/equipConsu/EquipConsuPage';
 import EquipConsuPage from './containers/equipConsu/EquipConsuPage';
 import ConsumDetailsPage from './containers/equipConsu//module/ConsumDetailsPage';
 import ConsumDetailsPage from './containers/equipConsu//module/ConsumDetailsPage';
+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';
@@ -28,6 +29,7 @@ const Router = createAppContainer(createStackNavigator({
   SubSuccessPage: {screen: SubSuccessPage},
   SubSuccessPage: {screen: SubSuccessPage},
   EquipConsuPage: {screen: EquipConsuPage},
   EquipConsuPage: {screen: EquipConsuPage},
   ConsumDetailsPage: {screen: ConsumDetailsPage},
   ConsumDetailsPage: {screen: ConsumDetailsPage},
+  FillUnitPricePage: {screen: FillUnitPricePage},
   QuickOrderPage: {screen: QuickOrderPage},
   QuickOrderPage: {screen: QuickOrderPage},
   TransOrderPage: {screen: TransOrderPage},
   TransOrderPage: {screen: TransOrderPage},
   TransSearchPage: {screen: TransSearchPage},
   TransSearchPage: {screen: TransSearchPage},

app/containers/equipConsu/module/ConsumDetailsPage.js

@@ -163,7 +163,12 @@ class ConsumDetailsPage extends Component {
     handleSubmit(show) {
     handleSubmit(show) {
         console.warn('确定耗材', this.props.navigation.navigate)
         console.warn('确定耗材', this.props.navigation.navigate)
         this.handleCloseSelectModal(false)
         this.handleCloseSelectModal(false)
-        console.warn('携带数据，返回到自助下单') // 可存储于store中
+        console.warn('携带数据，填写单价') // 可存储于store中!!!
+
+        this.props.navigation.navigate('FillUnitPricePage', {
+            title: '器械消耗 - 填写单价'
+        })
+
     }
     }
 
 
     // 返回搜索元素
     // 返回搜索元素

app/containers/equipConsu/module/FillUnitPricePage.js

+import React, { Component } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    SafeAreaView,
+    TouchableOpacity,
+    ScrollView,
+    FlatList,
+    TextInput
+} from 'react-native';
+import {
+    home_background_color, promary_color, safe_view, list_common_item, placehold_text_color, second_text_size, promary_text_color, font_family_regular, font_family_medium
+} from '../../../base/BaseStyle';
+import StatusBarView from '../../common/StatusBarView';
+import HeadBackItem from '../../common/HeadBackItem';
+
+class FillUnitPricePage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            unitPriceOption: [
+                {
+                    "id": "2",
+                    title: '人工髋关节假体-JS-HB ||| T3',
+                    tip1: '2001202001001774',
+                    select: true
+                },{
+                    "id": "3",
+                    title: '人工髋关节假体-JS-HB ||| T4',
+                    tip1: '2001202001001774',
+                    select: true
+                },{
+                    "id": "4",
+                    title: '人工髋关节假体-JS-HB ||| T5',
+                    tip1: '2001202001001774',
+                    select: true
+                },{
+                    "id": "5",
+                    title: '人工髋关节假体-JS-HB ||| T6',
+                    tip1: '2001202001001774',
+                    select: true
+                }
+            ]
+        }
+    }
+
+    // 每一个元素输入单价
+    handleItemPriceInput(text, index) {
+        console.warn('单价------input:', text, index)
+    }
+
+    // 确定单价 点击
+    handleSubmit() {
+        console.warn('确定单价------check:')
+    }
+
+    // 返回主要元素
+    renderContItem() {
+        return(
+            <ScrollView
+                style={styles.cons_cont_scroll}
+                showsVerticalScrollIndicator={false}
+                >
+                <FlatList
+                    style={styles.cons_cont}
+                    keyExtractor={item => item.id}
+                    data={this.state.unitPriceOption}
+                    extraData={this.state}
+                    renderItem={ ({item,index}) => this.renderSubListItem(item, index) }
+                    />
+            </ScrollView>
+        )
+    }
+
+    // 返回每一列元素
+    renderSubListItem(item, index) {
+        console.log('item, index---',item, index)
+        return(
+            <View style={styles.cons_sub_list}>
+                <Text style={styles.cont_tit}>
+                    {item.title}
+                </Text>
+                <Text style={styles.cont_ser}>
+                    序列号：{item.tip1}
+                </Text>
+                <View style={styles.cont_pri}>
+                    <Text style={styles.pri_icon}>*</Text>
+                    <Text style={styles.pri_inner}>单价：</Text>
+                    <TouchableOpacity
+                        activeOpacity={1}
+                        style={styles.cont_pri_box}
+                        onPress = {() => this.TextInput.focus()}>
+                        <TextInput
+                            style={styles.pri_txt}
+                            placeholder = {'请输入单价'}
+                            placeholderTextColor = {placehold_text_color}
+                            underlineColorAndroid = {'transparent'}
+                            ref = {textInput => this.TextInput = textInput}
+                            onChangeText={(text) => this.handleItemPriceInput(text, index)}
+                            defaultValue={item.price}
+                            />
+                    </TouchableOpacity>
+                </View>
+            </View>
+        )
+    }
+
+    // 返回底部元素
+    renderFooterBtnItem() {
+        return (
+            <View style={list_common_item.sub_box}>
+                <View style={list_common_item.sub_two_btn}>
+                    <TouchableOpacity
+                        activeOpacity={.8}
+                        style={[list_common_item.rig_btn, styles.fot_btn]}
+                        onPress={() => this.handleSubmit()}
+                        >
+                        <Text style={list_common_item.rig_tip}>{'确定单价'}</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        )
+    }
+
+    render() {
+        let {navigation} = this.props
+        let {title} = navigation.state.params
+        return ( 
+            <View style={styles.cu_dl_container}>
+                <StatusBarView
+                    isReactStackNavigator={true}
+                    backgroundColor={promary_color}
+                    barStyle = 'light-content'
+                    />
+                <SafeAreaView style={safe_view}>
+                    <HeadBackItem title={title} navigation={navigation} />
+                    <View style={styles.cu_dl_main}>
+
+                        { this.renderContItem() }
+
+                    </View>
+                    {this.renderFooterBtnItem()}
+                </SafeAreaView>
+            </View>
+         );
+    }
+}
+
+const styles = StyleSheet.create({
+    cu_dl_container: {
+        flex: 1,
+        backgroundColor: home_background_color,
+        padding: 0,
+        margin: 0
+    },
+    cu_dl_main: {
+        flex: 1
+    },
+    cons_cont_scroll: {},
+    cons_cont: {
+        paddingHorizontal: 20
+    },
+
+    cons_sub_list: {
+        backgroundColor: '#FFF',
+        marginVertical: 10,
+        padding: 10
+    },
+    cont_tit: {
+        fontSize: second_text_size,
+        color: promary_text_color,
+        fontFamily: font_family_regular
+    },
+    cont_ser: {
+        fontSize: 14,
+        color: '#A3A3A3',
+        fontFamily: font_family_regular
+    },
+    cont_pri: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    pri_icon: {
+        color: '#EC3A2E',
+        fontSize: 16,
+        fontFamily: font_family_medium
+    },
+    pri_inner: {
+        fontFamily: font_family_medium,
+        fontSize: second_text_size,
+        color: promary_text_color
+    },
+    cont_pri_box: {},
+    pri_txt: {
+        fontFamily: font_family_medium,
+        fontSize: second_text_size,
+        color: promary_text_color
+    },
+
+
+
+    fot_btn: {
+        width: '100%',
+        borderRadius: 10
+    }
+})
+ 
+export default FillUnitPricePage;
\ No newline at end of file