消耗详情按钮

src/pages/consume/consumables.styl

@@ -28,13 +28,19 @@
     margin-left 5px
 
 .list
-  padding 20px
+  padding 0 20px
+
+  &-view
+    flex 1
+    // padding 20px 0
+    padding-top 20px
     background-color home_background_color
 
   &-item
     width 100%
     background-color #fff
     padding 10px
+    margin-bottom 20px
     @extend .row
     @extend .center
 
@@ -59,3 +65,39 @@
     font-size third_text_size
     color list_thr_color
     font-family font_family_regular
+
+.footer
+  height 88px
+  width 100%
+  background-color #fff
+  @extend .middle
+  @extend .center
+
+  &-btn
+    @extend .row
+    @extend .center
+    width 342px
+    height 52px
+    border-radius 10px
+    background-color rgba(79, 79, 79, 1)
+    overflow hidden
+
+    &__selected
+      @extend .row
+      padding-left 20px
+      flex 1
+
+      &-text
+        font-size 18px
+        color btn_color
+        font-family font_family_medium
+
+    &__confirm
+      width 116px
+      height 100%
+      background-color primary_color
+      @extend .center
+      @extend .middle
+
+.mr10
+  margin-right 10px

src/pages/consume/consumables.tsx

@@ -9,7 +9,15 @@
  *
  */
 import React, { Component } from 'react'
-import { View, Text, Image, TextInput, FlatList, TouchableWithoutFeedback } from 'react-native'
+import {
+  View,
+  Text,
+  Image,
+  TextInput,
+  FlatList,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+} from 'react-native'
 import { inject, observer } from 'mobx-react'
 import { IFormField, ISurgeryCollectLine } from 'bonehouse'
 import * as R from 'ramda'
@@ -233,6 +241,7 @@ class Consumables extends Component<IProps, IState> {
         {loading && <Text>加载中</Text>}
 
         {/* 借货单行列表 */}
+        <View style={g(styles, 'list-view')}>
           <FlatList
             renderItem={this._renderItem.bind(this)}
             data={lines}
@@ -240,6 +249,24 @@ class Consumables extends Component<IProps, IState> {
             style={g(styles, 'list')}
           />
         </View>
+
+        <View
+          style={[
+            g(styles, 'footer'),
+            { shadowColor: '#ccc', shadowOffset: { height: -6 }, shadowOpacity: 0.3 },
+          ]}
+        >
+          <View style={g(styles, 'footer-btn')}>
+            <TouchableOpacity style={g(styles, 'footer-btn__selected')} activeOpacity={0.8}>
+              <Text style={g(styles, 'footer-btn__selected-text', 'mr10')}>已选:</Text>
+              <Text style={g(styles, 'footer-btn__selected-text')}>{R.length(selectedLines)}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={g(styles, 'footer-btn__confirm')} activeOpacity={0.8}>
+              <Text style={g(styles, 'footer-btn__selected-text')}>确定耗材</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
     )
   }
 }