Commit c45a3cef by wong.peiyi

加载和空列表

parent 59970bc2
@import '../../assets/styles/base.styl'
@import '../../assets/styles/variable.styl'
.empty
flex 1
@extend .middle
@extend .center
padding-top 30px
&-icon
width 80px
height 75px
&-text
font-size 20px
color second_text_color
margin-top 20px
font-family font_family_regular
/*
* @FilePath: /BoneHouse_Business_APP/src/components/empty/index.tsx
* @Author: peii
* @Date: 2021-05-30 17:04:50
* @Vision: 1.0
* @Description: 加载
*
* @Revision:
*
*/
import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import { g } from '../../utils/utils'
import styles from './index.styl'
export default ({ text = '暂无数据', style }) => {
return (
<View style={[g(styles, 'empty'), style]}>
<Image style={[g(styles, 'empty-icon')]} source={require('../../assets/images/empty.png')} />
<Text style={[g(styles, 'empty-text')]}>{text}</Text>
</View>
)
}
@import '../../assets/styles/base.styl'
@import '../../assets/styles/variable.styl'
.loading
&-container
flex 1
@extend .row
@extend .middle
@extend .center
background-color home_background_color
&-text
font-size second_text_size
padding-left 8px
/*
* @FilePath: /BoneHouse_Business_APP/src/components/loading/index.tsx
* @Author: peii
* @Date: 2021-05-30 17:04:50
* @Vision: 1.0
* @Description: 加载
*
* @Revision:
*
*/
import React, { Component } from 'react'
import { View, Text, ActivityIndicator } from 'react-native'
import { second_text_color } from '../../assets/styles/base'
import { g } from '../../utils/utils'
import styles from './index.styl'
export default ({
text = '加载中',
color = second_text_color,
textColor = second_text_color,
style,
}) => {
return (
<View style={[g(styles, 'loading-container'), style]}>
<ActivityIndicator style={g(styles, 'loading-icon')} color={color} />
<Text style={[g(styles, 'loading-text'), { color: textColor }]}>{text}</Text>
</View>
)
}
...@@ -25,6 +25,8 @@ import dayjs from 'dayjs' ...@@ -25,6 +25,8 @@ import dayjs from 'dayjs'
import { ConsumablesModal } from './components/consumables-modal' import { ConsumablesModal } from './components/consumables-modal'
import Checkbox from '../../components/common/checkbox' import Checkbox from '../../components/common/checkbox'
import Header from '../../components/header/header' import Header from '../../components/header/header'
import Loading from '../../components/loading'
import Empty from '../../components/empty'
import { g, isBlank, isNotBlank, show } from '../../utils/utils' import { g, isBlank, isNotBlank, show } from '../../utils/utils'
import styles from './consumables.styl' import styles from './consumables.styl'
...@@ -108,10 +110,8 @@ class Consumables extends Component<IProps, IState> { ...@@ -108,10 +110,8 @@ class Consumables extends Component<IProps, IState> {
const { orderId } = this.props.navigation.state.params const { orderId } = this.props.navigation.state.params
let orderLines = this.props.consumeStore.orderLines(orderId) let orderLines = this.props.consumeStore.orderLines(orderId)
if (isBlank(orderLines)) { if (isBlank(orderLines)) {
this.setState({ loading: true })
await this.props.consumeStore.getOrderLines(orderId) await this.props.consumeStore.getOrderLines(orderId)
orderLines = this.props.consumeStore.orderLines(orderId) orderLines = this.props.consumeStore.orderLines(orderId)
this.setState({ loading: false })
} }
this.setState({ lines: orderLines }) this.setState({ lines: orderLines })
...@@ -302,8 +302,11 @@ class Consumables extends Component<IProps, IState> { ...@@ -302,8 +302,11 @@ class Consumables extends Component<IProps, IState> {
</View> </View>
</View> </View>
{loading && <Text>加载中</Text>} {/* 加载中 */}
{loading ? (
<Loading />
) : (
<>
{/* 借货单行列表 */} {/* 借货单行列表 */}
<View style={g(styles, 'list-view')}> <View style={g(styles, 'list-view')}>
<FlatList <FlatList
...@@ -311,6 +314,9 @@ class Consumables extends Component<IProps, IState> { ...@@ -311,6 +314,9 @@ class Consumables extends Component<IProps, IState> {
data={lines} data={lines}
keyExtractor={(item, index) => item.itemCode + index} keyExtractor={(item, index) => item.itemCode + index}
style={g(styles, 'list')} style={g(styles, 'list')}
ListEmptyComponent={() => {
return <Empty />
}}
/> />
</View> </View>
...@@ -330,7 +336,9 @@ class Consumables extends Component<IProps, IState> { ...@@ -330,7 +336,9 @@ class Consumables extends Component<IProps, IState> {
}} }}
> >
<Text style={g(styles, 'footer-btn__selected-text', 'mr10')}>已选:</Text> <Text style={g(styles, 'footer-btn__selected-text', 'mr10')}>已选:</Text>
<Text style={g(styles, 'footer-btn__selected-text')}>{R.length(selectedLines)}</Text> <Text style={g(styles, 'footer-btn__selected-text')}>
{R.length(selectedLines)}
</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={g(styles, 'footer-btn__confirm')} style={g(styles, 'footer-btn__confirm')}
...@@ -351,6 +359,8 @@ class Consumables extends Component<IProps, IState> { ...@@ -351,6 +359,8 @@ class Consumables extends Component<IProps, IState> {
data={selectedLines} data={selectedLines}
onChange={this.onRemoveHandler} onChange={this.onRemoveHandler}
/> />
</>
)}
</View> </View>
) )
} }
......
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