Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit c45a3cef by wong.peiyi
Options

加载和空列表

parent 59970bc2
Inline Side-by-side
Showing with 142 additions and 48 deletions
src/components/empty/index.styl 0 → 100644
@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
src/components/empty/index.tsx 0 → 100644
/*
* @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>
)
}
src/components/loading/index.styl 0 → 100644
@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
src/components/loading/index.tsx 0 → 100644
/*
* @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>
)
}
src/pages/consume/consumables.tsx
......@@ -25,6 +25,8 @@ import dayjs from 'dayjs'
import { ConsumablesModal } from './components/consumables-modal'
import Checkbox from '../../components/common/checkbox'
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 styles from './consumables.styl'
......@@ -108,10 +110,8 @@ class Consumables extends Component<IProps, IState> {
const { orderId } = this.props.navigation.state.params
let orderLines = this.props.consumeStore.orderLines(orderId)
if (isBlank(orderLines)) {
this.setState({ loading: true })
await this.props.consumeStore.getOrderLines(orderId)
orderLines = this.props.consumeStore.orderLines(orderId)
this.setState({ loading: false })
}
this.setState({ lines: orderLines })
......@@ -302,55 +302,65 @@ class Consumables extends Component<IProps, IState> {
</View>
</View>
{loading && <Text>加载中</Text>}
{/* 借货单行列表 */}
<View style={g(styles, 'list-view')}>
<FlatList
renderItem={this._renderItem.bind(this)}
data={lines}
keyExtractor={(item, index) => item.itemCode + index}
style={g(styles, 'list')}
/>
</View>
{/* 加载中 */}
{loading ? (
<Loading />
) : (
<>
{/* 借货单行列表 */}
<View style={g(styles, 'list-view')}>
<FlatList
renderItem={this._renderItem.bind(this)}
data={lines}
keyExtractor={(item, index) => item.itemCode + index}
style={g(styles, 'list')}
ListEmptyComponent={() => {
return <Empty />
}}
/>
</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}
onPress={() => {
this.setState({ modalVisible: true })
}}
>
<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}
onPress={this.onConfirmHandler}
{/* 下方按钮 */}
<View
style={[
g(styles, 'footer'),
{ shadowColor: '#ccc', shadowOffset: { height: -6 }, shadowOpacity: 0.3 },
]}
>
<Text style={g(styles, 'footer-btn__selected-text')}>确定耗材</Text>
</TouchableOpacity>
</View>
</View>
<View style={g(styles, 'footer-btn')}>
<TouchableOpacity
style={g(styles, 'footer-btn__selected')}
activeOpacity={0.8}
onPress={() => {
this.setState({ modalVisible: true })
}}
>
<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}
onPress={this.onConfirmHandler}
>
<Text style={g(styles, 'footer-btn__selected-text')}>确定耗材</Text>
</TouchableOpacity>
</View>
</View>
{/* 已选择耗材弹窗 */}
<ConsumablesModal
visible={modalVisible}
onClose={() => {
this.setState({ modalVisible: false })
}}
data={selectedLines}
onChange={this.onRemoveHandler}
/>
{/* 已选择耗材弹窗 */}
<ConsumablesModal
visible={modalVisible}
onClose={() => {
this.setState({ modalVisible: false })
}}
data={selectedLines}
onChange={this.onRemoveHandler}
/>
</>
)}
</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