Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit a86ad241 by peii
Options

产品

parent 40d3d481
Expand all
Inline Side-by-side
Showing with 212 additions and 48 deletions
src/pages/order/productions/common.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/common.tsx * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/common.tsx
* @Author: peii * @Author: peii
* @Date: 2021-07-16 17:04:20 * @Date: 2021-07-16 17:04:20
* @LastEditTime: 2021-07-16 17:53:15 * @LastEditTime: 2021-08-05 17:45:16
* @LastEditors: peii * @LastEditors: peii
* @Vision: 1.0 * @Vision: 1.0
* @Description: 一些产品的通用组件 * @Description: 一些产品的通用组件
...@@ -10,8 +10,7 @@ ...@@ -10,8 +10,7 @@
// @ts-nocheck // @ts-nocheck
import React, { Component } from 'react' import React, { Component } from 'react'
import { View, Text, Image } from 'react-native' import { View, Text, Image, ActivityIndicator } from 'react-native'
import { ISupplier } from 'bonehouse'
import * as R from 'ramda' import * as R from 'ramda'
import { g, isBlank, isNotBlank } from '../../../utils/utils' import { g, isBlank, isNotBlank } from '../../../utils/utils'
import styles from './index.styl' import styles from './index.styl'
...@@ -22,7 +21,7 @@ import { TYPES } from '../../../inversify/types' ...@@ -22,7 +21,7 @@ import { TYPES } from '../../../inversify/types'
const store = container.get(TYPES.Store) const store = container.get(TYPES.Store)
type ITextImageProps = { type ITextImageProps = {
size: string big: boolean
image?: string image?: string
text?: string text?: string
colorNumber: string colorNumber: string
...@@ -32,24 +31,50 @@ type ITextImageProps = { ...@@ -32,24 +31,50 @@ type ITextImageProps = {
* @description: 文字图片 * @description: 文字图片
* @return {*} * @return {*}
*/ */
export function TextImage({ size, image, text, colorNumber }: ITextImageProps) { export function TextImage({ big, image, text = '图片', colorNumber }: ITextImageProps) {
const numClass = isNotBlank(colorNumber) ? `text-icon-${colorNumber}` : '' const numClass = isNotBlank(colorNumber) ? `text-icon-${colorNumber}` : ''
const style = isNotBlank(size) ? { width: size, height: size } : {} text = R.compose(R.ifElse(R.compose(R.lt(3), R.length), R.take(4), R.take(2)), R.replace(/[（-）:：]/g, ''))(text)
text = R.take(4, text)
return ( return (
<View style="text-image"> <View style="text-image">
{isBlank(image) ? ( {isBlank(image) ? (
<View style={[g(styles, 'text-image__text-icon', numClass), style]}> <View
<Text style={g(styles, 'text-image__text-icon-text', `${numClass}__text`)}>{text}</Text> style={[g(styles, { 'text-image__text-icon': true, [numClass]: true, 'text-image__text-icon-big': big })]}
>
<Text
style={g(styles, {
'text-image__text-icon-text': true,
[`${numClass}__text`]: true,
'text-image__text-icon-text-big': big,
})}
>
{text}
</Text>
</View> </View>
) : ( ) : (
<Image <Image
source={{ uri: store.host + IMAGE_PREFIX + image }} source={{ uri: store.host + IMAGE_PREFIX + image }}
style={[g(styles, 'text-image__icon'), style]} style={[g(styles, { 'text-image__icon': true, 'text-image__icon-big': big })]}
resizeMode="contain" resizeMode="contain"
/> />
)} )}
</View> </View>
) )
} }
/**
* @description: 加载
* @param {*} param1
* @return {*}
*/
export function Loading({ text = '加载中', color, clzss }) {
const style = {}
color && (style.color = color)
return (
<View style={[g(styles, 'loading'), clzss]}>
<ActivityIndicator style={[g(styles, 'loading-icon')]} color={color || '#999'} />
{isNotBlank(text) && <Text style={[g(styles, 'loading-text'), style]}>{text}</Text>}
</View>
)
}
src/pages/order/productions/index.styl
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
@import '../../../assets/styles/variable.styl' @import '../../../assets/styles/variable.styl'
iconWidth = 44px iconWidth = 44px
iconWidthBig = 58px
colors = { colors = {
'1': '1':
} }
...@@ -34,6 +35,10 @@ colors = { ...@@ -34,6 +35,10 @@ colors = {
width iconWidth width iconWidth
height iconWidth height iconWidth
&-big
width iconWidthBig
height iconWidthBig
&__text-icon &__text-icon
width iconWidth width iconWidth
height iconWidth height iconWidth
...@@ -42,16 +47,28 @@ colors = { ...@@ -42,16 +47,28 @@ colors = {
align-items center align-items center
borderWidth 2px borderWidth 2px
&-big
width iconWidthBig
height iconWidthBig
borderRadius 29px
&-text &-text
font-size 14px font-size 14px
font-family font_family_semibold font-family font_family_semibold
padding 3px
text-align center
line-height 18px
for i in 1 .. 50 &-big
font-size 18px
line-height 22px
for i in 1...50
.text-icon-{i} .text-icon-{i}
borderColor hsl(i * 50, 50%, 50%) borderColor hsl(i * 50, 50%, 50%)
.text-icon-{i}__text .text-icon-{i}__text
color hsl(i * 30, 50%, 50%) color hsl(i * 50, 50%, 50%)
.body .body
width 100% width 100%
...@@ -66,7 +83,7 @@ for i in 1 .. 50 ...@@ -66,7 +83,7 @@ for i in 1 .. 50
height 60px height 60px
padding-left 5px padding-left 5px
border-bottom-width 1px border-bottom-width 1px
border-bottom-color rgba(0, 0, 0, 0.1) border-bottom-color rgba(99, 99, 99, 0.1)
@extend .row @extend .row
@extend .center @extend .center
...@@ -99,9 +116,65 @@ for i in 1 .. 50 ...@@ -99,9 +116,65 @@ for i in 1 .. 50
.pro .pro
flex 1 flex 1
background-color foundation_color background-color foundation_color
padding-left 20px
&-header
border-bottom-width 1px
border-bottom-color #ddd
padding 10px 20px
&__text
font-size 16px
color primary_text_color
font-family font_family_semibold
font-weight bold
&-loading
height 200px
&-empty
height 100px
justify-content center
align-items center
flex-direction row
border-bottom-width 1px
border-bottom-color rgba(99, 99, 99, 0.1)
&__icon
width 20px
height @width
margin-top 3px
margin-right 5px
&__text
font-size 18px
font-family font_family_semibold
color #999
&-item &-item
@extend .row
padding 10px 0 padding 10px 0
margin-left 20px
border-bottom-width 1px border-bottom-width 1px
border-bottom-color rgba(99, 99, 99, 0.1) border-bottom-color rgba(99, 99, 99, 0.1)
align-items center
&__img
margin-right 10px
&__field
&-text
font-size third_text_size
color second_text_color
font-family font_family_semibold
&-title
font-size 16px
color first_text_color
&-only
font-size 16px
color first_text_color
.loading
justify-content center
align-items center
\ No newline at end of file
src/pages/order/productions/production.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/production.tsx * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/production.tsx
* @Author: peii * @Author: peii
* @Date: 2021-07-16 15:36:02 * @Date: 2021-07-16 15:36:02
* @LastEditTime: 2021-08-04 00:03:18 * @LastEditTime: 2021-08-05 17:54:48
* @LastEditors: peii * @LastEditors: peii
* @Vision: 1.0 * @Vision: 1.0
* @Description: 产品列表 * @Description: 产品列表
...@@ -10,11 +10,13 @@ ...@@ -10,11 +10,13 @@
// @ts-nocheck // @ts-nocheck
import React, { Component } from 'react' import React, { Component } from 'react'
import { View, Text, ScrollView, FlatList } from 'react-native' import { View, Text, FlatList, Image } from 'react-native'
import { inject, observer } from 'mobx-react' import { inject, observer } from 'mobx-react'
import { ISupplier } from 'bonehouse' import { ICategory } from 'bonehouse'
import { toJS } from 'mobx'
import * as R from 'ramda' import * as R from 'ramda'
import { g, getFormItem, isBlank, isNotBlank, show, translateSysprofile } from '../../../utils/utils' import { g, isBlank, isNotBlank, show } from '../../../utils/utils'
import { TextImage, Loading } from './common'
import styles from './index.styl' import styles from './index.styl'
type IField = { type IField = {
...@@ -28,55 +30,117 @@ type IProps = { ...@@ -28,55 +30,117 @@ type IProps = {
productionStore: { productionStore: {
productionFields: IField[] productionFields: IField[]
productions: any[] productions: any[]
imgFields: { sourceField: string; textField: string }
loading: boolean
getProductions: Function
activeCatetory: ICategory
} }
} }
type IState = {} type IState = {}
class Production extends Component<IProps, IState> { class Production extends Component<IProps, IState> {
state = {
refreshing: false,
}
async onPullDownRefresh() {
this.setState({ refreshing: true })
await this.props.productionStore.getProductions(false)
this.setState({ refreshing: false })
}
renderItem({ item, index }) { renderItem({ item, index }) {
const productionFields = this.props.productionStore.productionFields const productionFields = this.props.productionStore.productionFields
console.log(item) const imgFields = this.props.productionStore.imgFields
return ( return (
<View style={g(styles, 'pro-item')}> <View style={g(styles, 'pro-item')}>
{productionFields.map((field, idx) => { <View style={g(styles, 'pro-item__img')}>
return ( <TextImage
<View key={field.field} style={g(styles, 'pro-item__field')}> big={true}
<Text image={
style={[ item[imgFields.sourceField] && item[imgFields.sourceField].length > 0
g(styles, { 'pro-item__field-text': true, 'pro-item__field-text-title': field.type === 'title' }), ? R.head(item[imgFields.sourceField])
field.style, : ''
]} }
> text={item[imgFields.textField]}
{field.type === 'title' ? ( colorNumber={(index + 1) % 50}
<Text> />
{index + 1 + '.'} {item[field.field]} </View>
</Text> <View style={g(styles, 'pro-item__info')}>
) : ( {productionFields.map((field, idx) => {
<Text>{field.label + '：' + (item[field.field] || '无')}</Text> return (
)} <View key={field.field} style={g(styles, 'pro-item__field')}>
</Text> <Text
</View> numberOfLines={2}
) style={g(styles, {
})} 'pro-item__field-text': true,
'pro-item__field-title': field.type === 'title',
'pro-item__field-only': field.type === 'only',
[field.style]: !!field.style,
})}
>
{/* 单项或者title都加序号 */}
{R.includes(field.type, ['title', 'only']) ? (
<Text>
{index + 1 + '.'} {item[field.field]}
</Text>
) : (
<Text>{field.label + '：' + (item[field.field] || '无')}</Text>
)}
</Text>
</View>
)
})}
</View>
</View> </View>
) )
} }
render() { render() {
const productions = this.props.productionStore.productions const productions = toJS(this.props.productionStore.productions)
const loading = this.props.productionStore.loading
const activeCatetory = toJS(this.props.productionStore.activeCatetory)
const { refreshing } = this.state
return ( return (
<View style={g(styles, 'pro')}> <View style={g(styles, 'pro')}>
<FlatList {isNotBlank(activeCatetory) && <Header title={activeCatetory.categoryName} />}
data={productions}
renderItem={this.renderItem.bind(this)} {loading ? (
keyExtractor={item => item.itemCode || item.templateNumber} <Loading clzss={g(styles, 'pro-loading')} text="努力加载中" />
/> ) : (
<FlatList
style={g(styles, 'pro-list')}
data={productions}
renderItem={this.renderItem.bind(this)}
keyExtractor={item => item.serialNumber || item.itemCode || item.templateNumber || item.categoryCode}
ListEmptyComponent={Empty}
refreshing={refreshing}
onRefresh={this.onPullDownRefresh.bind(this)}
/>
)}
</View> </View>
) )
} }
} }
const Header = ({ title }) => {
return (
<View style={g(styles, 'pro-header')}>
<Text style={g(styles, 'pro-header__text')}>{title}</Text>
</View>
)
}
const Empty = () => {
return (
<View style={g(styles, 'pro-empty')}>
<Image style={g(styles, 'pro-empty__icon')} source={require('../../../assets/images/empty-list.png')} />
<Text style={g(styles, 'pro-empty__text')}>暂无数据</Text>
</View>
)
}
export default inject('productionStore')(observer(Production)) export default inject('productionStore')(observer(Production))
src/pages/order/productions/supplier.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/supplier.tsx * @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/supplier.tsx
* @Author: peii * @Author: peii
* @Date: 2021-07-15 12:07:24 * @Date: 2021-07-15 12:07:24
* @LastEditTime: 2021-07-16 17:44:43 * @LastEditTime: 2021-08-04 17:56:36
* @LastEditors: peii * @LastEditors: peii
* @Vision: 1.0 * @Vision: 1.0
* @Description: 供应商列表 * @Description: 供应商列表
...@@ -93,7 +93,7 @@ class Supplier extends Component<IProps> { ...@@ -93,7 +93,7 @@ class Supplier extends Component<IProps> {
this.supplierClickHandler(supplier) this.supplierClickHandler(supplier)
}} }}
> >
<TextImage size={42} colorNumber={index + 1} image={icon} text={supplier.supplierShortName} /> <TextImage colorNumber={index + 1} image={icon} text={supplier.supplierShortName} />
</TouchableOpacity> </TouchableOpacity>
) )
})} })}
......
src/router.tsx
...@@ -116,7 +116,7 @@ function createNavigator() { ...@@ -116,7 +116,7 @@ function createNavigator() {
Productions: { screen: Productions }, Productions: { screen: Productions },
Success: { screen: Success }, Success: { screen: Success },
}, },
{ initialRouteName: 'Main', ...options }, { initialRouteName: 'Productions', ...options },
) )
return createAppContainer(stackNavigator) return createAppContainer(stackNavigator)
......
types/global.ts
...@@ -214,5 +214,6 @@ declare module 'bonehouse' { ...@@ -214,5 +214,6 @@ declare module 'bonehouse' {
categoryName: string categoryName: string
categoryIcon?: string categoryIcon?: string
categoryImage?: string categoryImage?: string
details?: ICategory[]
} }
} }
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