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 193 additions and 29 deletions
src/pages/order/productions/common.tsx
......@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/common.tsx
* @Author: peii
* @Date: 2021-07-16 17:04:20
* @LastEditTime: 2021-07-16 17:53:15
* @LastEditTime: 2021-08-05 17:45:16
* @LastEditors: peii
* @Vision: 1.0
* @Description: 一些产品的通用组件
......@@ -10,8 +10,7 @@
// @ts-nocheck
import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import { ISupplier } from 'bonehouse'
import { View, Text, Image, ActivityIndicator } from 'react-native'
import * as R from 'ramda'
import { g, isBlank, isNotBlank } from '../../../utils/utils'
import styles from './index.styl'
......@@ -22,7 +21,7 @@ import { TYPES } from '../../../inversify/types'
const store = container.get(TYPES.Store)
type ITextImageProps = {
size: string
big: boolean
image?: string
text?: string
colorNumber: string
......@@ -32,24 +31,50 @@ type ITextImageProps = {
* @description: 文字图片
* @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 style = isNotBlank(size) ? { width: size, height: size } : {}
text = R.take(4, text)
text = R.compose(R.ifElse(R.compose(R.lt(3), R.length), R.take(4), R.take(2)), R.replace(/[（-）:：]/g, ''))(text)
return (
<View style="text-image">
{isBlank(image) ? (
<View style={[g(styles, 'text-image__text-icon', numClass), style]}>
<Text style={g(styles, 'text-image__text-icon-text', `${numClass}__text`)}>{text}</Text>
<View
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>
) : (
<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"
/>
)}
</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 @@
@import '../../../assets/styles/variable.styl'
iconWidth = 44px
iconWidthBig = 58px
colors = {
'1':
}
......@@ -34,6 +35,10 @@ colors = {
width iconWidth
height iconWidth
&-big
width iconWidthBig
height iconWidthBig
&__text-icon
width iconWidth
height iconWidth
......@@ -42,16 +47,28 @@ colors = {
align-items center
borderWidth 2px
&-big
width iconWidthBig
height iconWidthBig
borderRadius 29px
&-text
font-size 14px
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}
borderColor hsl(i * 50, 50%, 50%)
.text-icon-{i}__text
color hsl(i * 30, 50%, 50%)
color hsl(i * 50, 50%, 50%)
.body
width 100%
......@@ -66,7 +83,7 @@ for i in 1 .. 50
height 60px
padding-left 5px
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 .center
......@@ -99,9 +116,65 @@ for i in 1 .. 50
.pro
flex 1
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
@extend .row
padding 10px 0
margin-left 20px
border-bottom-width 1px
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 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/production.tsx
* @Author: peii
* @Date: 2021-07-16 15:36:02
* @LastEditTime: 2021-08-04 00:03:18
* @LastEditTime: 2021-08-05 17:54:48
* @LastEditors: peii
* @Vision: 1.0
* @Description: 产品列表
......@@ -10,11 +10,13 @@
// @ts-nocheck
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 { ISupplier } from 'bonehouse'
import { ICategory } from 'bonehouse'
import { toJS } from 'mobx'
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'
type IField = {
......@@ -28,28 +30,59 @@ type IProps = {
productionStore: {
productionFields: IField[]
productions: any[]
imgFields: { sourceField: string; textField: string }
loading: boolean
getProductions: Function
activeCatetory: ICategory
}
}
type 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 }) {
const productionFields = this.props.productionStore.productionFields
console.log(item)
const imgFields = this.props.productionStore.imgFields
return (
<View style={g(styles, 'pro-item')}>
<View style={g(styles, 'pro-item__img')}>
<TextImage
big={true}
image={
item[imgFields.sourceField] && item[imgFields.sourceField].length > 0
? R.head(item[imgFields.sourceField])
: ''
}
text={item[imgFields.textField]}
colorNumber={(index + 1) % 50}
/>
</View>
<View style={g(styles, 'pro-item__info')}>
{productionFields.map((field, idx) => {
return (
<View key={field.field} style={g(styles, 'pro-item__field')}>
<Text
style={[
g(styles, { 'pro-item__field-text': true, 'pro-item__field-text-title': field.type === 'title' }),
field.style,
]}
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,
})}
>
{field.type === 'title' ? (
{/* 单项或者title都加序号 */}
{R.includes(field.type, ['title', 'only']) ? (
<Text>
{index + 1 + '.'} {item[field.field]}
</Text>
......@@ -61,22 +94,53 @@ class Production extends Component<IProps, IState> {
)
})}
</View>
</View>
)
}
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 (
<View style={g(styles, 'pro')}>
{isNotBlank(activeCatetory) && <Header title={activeCatetory.categoryName} />}
{loading ? (
<Loading clzss={g(styles, 'pro-loading')} text="努力加载中" />
) : (
<FlatList
style={g(styles, 'pro-list')}
data={productions}
renderItem={this.renderItem.bind(this)}
keyExtractor={item => item.itemCode || item.templateNumber}
keyExtractor={item => item.serialNumber || item.itemCode || item.templateNumber || item.categoryCode}
ListEmptyComponent={Empty}
refreshing={refreshing}
onRefresh={this.onPullDownRefresh.bind(this)}
/>
)}
</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))
src/pages/order/productions/supplier.tsx
......@@ -2,7 +2,7 @@
* @FilePath: /BoneHouse_Business_APP/src/pages/order/productions/supplier.tsx
* @Author: peii
* @Date: 2021-07-15 12:07:24
* @LastEditTime: 2021-07-16 17:44:43
* @LastEditTime: 2021-08-04 17:56:36
* @LastEditors: peii
* @Vision: 1.0
* @Description: 供应商列表
......@@ -93,7 +93,7 @@ class Supplier extends Component<IProps> {
this.supplierClickHandler(supplier)
}}
>
<TextImage size={42} colorNumber={index + 1} image={icon} text={supplier.supplierShortName} />
<TextImage colorNumber={index + 1} image={icon} text={supplier.supplierShortName} />
</TouchableOpacity>
)
})}
......
src/router.tsx
......@@ -116,7 +116,7 @@ function createNavigator() {
Productions: { screen: Productions },
Success: { screen: Success },
},
{ initialRouteName: 'Main', ...options },
{ initialRouteName: 'Productions', ...options },
)
return createAppContainer(stackNavigator)
......
types/global.ts
......@@ -214,5 +214,6 @@ declare module 'bonehouse' {
categoryName: string
categoryIcon?: 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