Commit 3ad05645 by Denglingling

调整自助下单模块-单选耗材模块,以及部分公共组件的封装

parent 7dda0ec2
import React, { Component } from 'react';
import { StyleSheet, Image, Text, TouchableOpacity, View } from 'react-native';
import { first_text_color, font_family_light, font_family_medium, font_family_regular, home_background_color, icon_style, pxSize, second_text_size, third_text_color } from '../../../base/BaseStyle';
const PropTypes = require('prop-types');
class PicTitDetaiCalcu extends Component {
static propTypres = {
listItem: PropTypes.object,
listIndex: PropTypes.number,
listStyleBox: PropTypes.string,
listStyleTit: PropTypes.string,
listStyleTip: PropTypes.string,
listStyleCalBtn: PropTypes.string,
listPicType: PropTypes.string,
subCalCallBack: PropTypes.func,
calField: PropTypes.string,
titCallBack: PropTypes.func,
titText: PropTypes.string,
tipTextStr: PropTypes.string,
tipTextOne: PropTypes.string,
tipTextTwo: PropTypes.string,
listImgIcon: PropTypes.string,
}
constructor(props) {
super(props);
this.state = {
listPicTypeArr: ['ROUND', 'SQUARE', 'RECTANGLE'],
picStyleArr: ['round_pic', 'square_pic', 'rectan_pic']
}
}
/**
* 点击加减
* @param {object} item 当前小类数据
* @param {number} index 当前角标
* @param {boolean} isPlus 默认减法 false,加法 true,
*/
handelCalculation(item, index, isPlus) {
// let { thridOptionData } = this.state
// let { value } = thridOptionData[index]
let {calField} = this.props
item[calField] = Number(item[calField])
if(Number.isNaN(item[calField])){
item[calField] = 0
}
if(isPlus) {
item[calField] += 1
} else if(!isPlus && item[calField] > 0) {
item[calField] -= 1
}
this.props.subCalCallBack(item, index)
}
render() {
let {listItem, listIndex, calField, listStyleBox, listStyleTit, listStyleTip, listStyleCalBtn, listPicType, titCallBack,titText, tipTextStr, tipTextOne, tipTextTwo, listImgIcon} = this.props
let {listPicTypeArr, picStyleArr} = this.state
let picOthStyle = ''
if(listPicTypeArr.indexOf(listPicType) > -1){
picOthStyle = picStyleArr[listPicTypeArr.indexOf(listPicType)]
}
let valIsZero = Boolean(listItem[calField] === 0)
let calIcon = require('../../../images/plur_icon_big.png')
if(!valIsZero) {
calIcon = require('../../../images/plur_big_act.png')
}
return (
<View style={[styles.ri_inner, listStyleBox]}>
{ listImgIcon ?
<View style={[styles.oth_img_box, styles[picOthStyle]]}>
<Image style={icon_style} source={listItem.imgIcon}/>
</View> : null }
<View style={styles.ri_text_box}>
<TouchableOpacity
activeOpacity={.8}
onPress={() => {titCallBack ? titCallBack(listItem, listIndex) : {}}}
style={styles.oth_box}
>
<Text numberOfLines={1} style={[styles.thr_ot, listStyleTit]}>
{ listItem[titText] }
</Text>
</TouchableOpacity>
{ listItem[tipTextStr] ? <Text numberOfLines={1} style={[styles.ri_te_ot, styles.thr_ot, listStyleTip]}>{listItem[tipTextStr]}</Text> : null }
{ listItem[tipTextOne] ? <Text numberOfLines={1} style={[styles.ri_te_ot, listStyleTip]}>{listItem[tipTextOne]}</Text> : null }
{ listItem[tipTextTwo] ? <Text numberOfLines={1} style={[styles.ri_te_ot, listStyleTip]}>{listItem[tipTextTwo]}</Text> : null }
</View>
<View style={styles.ri_num_box}>
{ listItem[calField] !== 0 ?
<TouchableOpacity
activeOpacity={.9}
style={[styles.btn_inner, listStyleCalBtn]}
onPress={() => this.handelCalculation(listItem, listIndex)}
>
<View style={[styles.thr_num_btn, styles.thr_btn_left]}>
<Image source={require('../../../images/less_icon_big.png')} style={icon_style}></Image>
</View>
</TouchableOpacity> : null }
{ listItem[calField] !== 0 ? <Text style={styles.thr_num}>{ listItem[calField] }</Text> : null}
<TouchableOpacity
activeOpacity={.9}
style={[styles.btn_inner, listStyleCalBtn]}
onPress={() => this.handelCalculation(listItem, listIndex, true)}
>
<View style={[styles.thr_num_btn, styles.thr_btn_right]}>
<Image source={calIcon} style={icon_style}></Image>
</View>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
ri_inner: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 12,
paddingBottom: 6,
borderBottomWidth: 1,
borderColor: 'rgba(241, 241, 241, 0.87)'
},
ri_text_box: {
flex: 1
},
// ri_te_tit: {
// fontSize: 18,
// color: first_text_color,
// fontFamily: font_family_medium
// },
ri_te_ot: {
fontSize: 12,
color: third_text_color,
fontFamily: font_family_light
},
ri_img_box: {
width: 18,
height: 18
},
thr_ot: {
fontFamily: font_family_regular,
fontSize: second_text_size,
color: first_text_color
},
oth_img_box: {
width: pxSize(58),
height: pxSize(58),
justifyContent: 'center',
alignItems: 'center',
marginRight: 6
},
round_pic: {
borderColor: 'rgba(0, 0, 0, 0.12)',
borderWidth: .5,
borderRadius: 50,
},
square_pic: {},
rectan_pic: {
width: pxSize(60),
height: pxSize(40),
},
thr_num_btn: {
width: pxSize(24),
height: pxSize(30)
},
btn_inner: {},
ri_num_box: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 6,
backgroundColor: home_background_color
},
thr_btn_left: {},
thr_btn_right: {},
thr_num: {
minWidth: pxSize(28),
textAlign: 'center',
fontFamily: font_family_regular,
fontSize: 14,
color: first_text_color
},
})
export default PicTitDetaiCalcu;
\ No newline at end of file
import React, { Component } from 'react';
import { StyleSheet, Image, TouchableOpacity, View, Modal, ActivityIndicator } from 'react-native';
import { Height, icon_style, pxSize, Width } from '../../../base/BaseStyle';
import ImageViewer from 'react-native-image-zoom-viewer';
const PropTypes = require('prop-types');
/**
* 图片组件,可放大
*/
class PictureZoom extends Component {
static propTypres = {
listImageIndex: PropTypes.number, //默认展示图片index
listImageUrls: PropTypes.array, //所有图片
listStyleImage: PropTypes.string,
listPicType: PropTypes.string
}
constructor(props) {
super(props);
this.state = {
picZoomIsShow: false,
listPicTypeArr: ['ROUND', 'SQUARE', 'RECTANGLE'],
picStyleArr: ['round_pic', 'square_pic', 'rectan_pic']
}
}
handleShowZoomPic(flag) {
this.setState({
picZoomIsShow: flag
})
}
// 图片加载
renderImageLoad() {
return (
<View style={styles.img_load}>
<ActivityIndicator animating={true} size={"large"} />
</View>
)
}
render() {
let {listImageUrls, listImageIndex, listStyleImage, listPicType} = this.props
let {picZoomIsShow, listPicTypeArr, picStyleArr} = this.state
let picOthStyle = ''
if(listPicTypeArr.indexOf(listPicType) > -1){
picOthStyle = picStyleArr[listPicTypeArr.indexOf(listPicType)]
}
console.log('picOthStyle---', picOthStyle)
return (
<View style={[styles.container]}>
<TouchableOpacity
activeOpacity={.8}
style={[styles.list_item_img, styles[picOthStyle], listStyleImage]}
onPress={() => this.handleShowZoomPic(true)}
>
<Image
defaultSource={require('../../../images/not_img.png')}
source={{uri: listImageUrls[listImageIndex].url}}
style={icon_style} />
</TouchableOpacity>
<Modal
visible={picZoomIsShow}
animationType={"slide"}
transparent={true}
>
<ImageViewer style={styles.zoom_pic_img}
enableImageZoom={true}
saveToLocalByLongPress={false}
loadingRender={() => this.renderImageLoad()}
enableSwipeDown={true}
imageUrls={listImageUrls}
index={listImageIndex}
onClick={() => this.handleShowZoomPic(false)}
/>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {},
list_item_img: {
width: pxSize(58),
height: pxSize(58)
},
round_pic: {
borderColor: 'rgba(0, 0, 0, 0.12)',
borderWidth: .5,
borderRadius: 50,
},
square_pic: {},
rectan_pic: {
width: '100%',
height: pxSize(64),
},
zoom_pic_img: {
maxWidth: Width()
},
img_load: {
marginBottom: (Height() / 2) - 40
}
})
export default PictureZoom;
\ No newline at end of file
...@@ -115,7 +115,8 @@ class HomePage extends Component { ...@@ -115,7 +115,8 @@ class HomePage extends Component {
let { modDefauIcon, modSeleIcon, let { modDefauIcon, modSeleIcon,
hisDefauIcon, hisSeleIcon, hisDefauIcon, hisSeleIcon,
borrowInfo, consumpInfo, borrowInfo, consumpInfo,
transInfo, deviceInfo, backLoginInfo } = this.state transInfo, deviceInfo,
selfOrderInfo,backLoginInfo } = this.state
functions = referenceArrSort(functions, 'child_list', 'function_order') functions = referenceArrSort(functions, 'child_list', 'function_order')
let tempTabNames = [] let tempTabNames = []
let tempTabCodes = [] let tempTabCodes = []
...@@ -143,6 +144,9 @@ class HomePage extends Component { ...@@ -143,6 +144,9 @@ class HomePage extends Component {
} else if(chItem.function_code == 'MOBILE_DEVICE_INFORMATION') { } else if(chItem.function_code == 'MOBILE_DEVICE_INFORMATION') {
deviceInfo.title = chItem.function_name deviceInfo.title = chItem.function_name
tempModuleList.push(deviceInfo) tempModuleList.push(deviceInfo)
}else if(chItem.function_code == 'MOBILE_SELF_HELP_ORDER'){
selfOrderInfo.title = chItem.function_name
tempModuleList.push(selfOrderInfo)
} }
}) })
} }
......
...@@ -35,7 +35,7 @@ import { ...@@ -35,7 +35,7 @@ import {
FooterBtnStyle FooterBtnStyle
} from '../common/CellTextStyle'; } from '../common/CellTextStyle';
import ItemCellModel from '../common/ItemCellModel'; import ItemCellModel from '../common/ItemCellModel';
import tagData from './module/listTagData'; import tagData from './module/mock/listTagData';
import { show, isEmpty, formatStrForDate, changeDateFormat } from '../../utils/Utils'; import { show, isEmpty, formatStrForDate, changeDateFormat } from '../../utils/Utils';
import HeadBackItem from '../common/HeadBackItem'; import HeadBackItem from '../common/HeadBackItem';
import StatusBarView from '../common/StatusBarView'; import StatusBarView from '../common/StatusBarView';
......
export default [
{
isRequest: true,
title: '销售员',
value: '易凯源',
isPicker: false,
isEditText: true
},
{
isRequest: true,
title: '组织',
value: '请选择',
isPicker: true
},
{
isRequest: true,
title: '客户名称',
value: '请选择',
isPicker: true
},
{
isRequest: true,
title: '收单地点',
value: '请选择',
isPicker: true
},
{
isRequest: true,
title: '收货地点',
value: '请选择',
isPicker: true
},
{
isRequest: false,
title: '主治医生',
value: '请选择',
isPicker: true,
showInput: true
},
{
isRequest: false,
title: '手术名称',
value: '请输入',
isPicker: false
},
{
isRequest: false,
title: '手术时间',
value: '请选择',
isPicker: true,
showDatePicker: true
},
{
isRequest: true,
title: '手术类型',
value: '请选择',
isPicker: true
},
{
isRequest: true,
title: '订单类型',
value: '请选择',
isPicker: true
},
{
isRequest: true,
title: '选择产品',
value: '请选择',
isPicker: true,
showItemPage: true
}
]
\ No newline at end of file
/**
* 本地测试数据
*/
// 顶部厂家信息
const localTopProcOption = [
{
title: '嘉思特',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特22',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特33',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特44',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特55',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特66',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特77',
iconImg: require('../../../../images/cp_test_1.png')
},
{
title: '嘉思特88',
iconImg: require('../../../../images/cp_test_1.png')
}
]
// 左侧分类数据
const localLeftOption = [
{
title: '手术模板',
iconImg: require('../../../../images/surg_temp.png'),
stencilData: [{
"id": "0",
title: '髋关节手术001--------',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "1",
title: '髋关节手术002',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "2",
title: '髋关节手术003',
tip1: '描述信息',
tip2: '描述信息',
select: true
},
{
"id": "3",
title: '髋关节手术004',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "4",
title: '髋关节手术005',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "5",
title: '髋关节手术006',
tip1: '描述信息',
tip2: '描述信息',
select: false
}
], // 模板数据
},
{
title: '螺钉盒',
iconImg: require('../../../../images/screw_box.png'),
stencilData: [{
"id": "0",
title: '髋关节手术001--ldh',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "1",
title: '髋关节手术002',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "2",
title: '髋关节手术003',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "3",
title: '髋关节手术004',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "4",
title: '髋关节手术005',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "5",
title: '髋关节手术006',
tip1: '描述信息',
tip2: '描述信息',
select: false
}
], // 模板数据
},
{
title: '器械包',
iconImg: require('../../../../images/equip_bag.png'),
stencilData: [{
"id": "0",
title: '髋关节手术001----qxb',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "1",
title: '髋关节手术002',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "2",
title: '髋关节手术003',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "3",
title: '髋关节手术004',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "4",
title: '髋关节手术005',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "5",
title: '髋关节手术006',
tip1: '描述信息',
tip2: '描述信息',
select: false
}
], // 模板数据
},
{
title: '辅助工具',
iconImg: require('../../../../images/auxili_tool.png'),
stencilData: [{
"id": "0",
title: '髋关节手术001------fzgj',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "1",
title: '髋关节手术002',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "2",
title: '髋关节手术003',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "3",
title: '髋关节手术004',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "4",
title: '髋关节手术005',
tip1: '描述信息',
tip2: '描述信息',
select: false
},
{
"id": "5",
title: '髋关节手术006',
tip1: '描述信息',
tip2: '描述信息',
select: false
}
], // 模板数据
},
{
title: '人工髋关节假体'
},
{
title: '膝关节假体备份'
},
{
title: '骨小梁髋关节假体'
},
{
title: '骨小梁髋关节假体22'
},
{
title: '骨小梁髋关节假体33'
},
{
title: '骨小梁髋关节假体44'
},
{
title: '骨小梁髋关节假体55'
},
]
// 人工髋关节假体等数据 -- 大类
const localSingleSeleHead = [{
"id": "0",
title: '中置器(PE)',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "1",
title: '内衬Harmony 28/10°OD(P 2',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "2",
title: '内衬Harmony 28/10°OD(P',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "3",
title: '中置器(PE)4',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "4",
title: '中置器(PE)5',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "5",
title: '中置器(PE)6',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "6",
title: '中置器(PE)7',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
},
{
"id": "7",
title: '中置器(PE)8',
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
// 人工髋关节假体等数据 -- 小类
const localSingleRowData = [
{
"id": "0",
title: '规格:JS-CGO PE 10',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 20,
select: false,
quantity: 0
},
{
"id": "1",
title: '规格:JS-CGO PE 10 11',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false,
quantity: 0
},
{
"id": "2",
title: '规格:JS-CGO PE 10 22',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false,
quantity: 0
},
{
"id": "3",
title: '规格:JS-CGO PE 10 33',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false,
quantity: 0
},
{
"id": "4",
title: '规格:JS-CGO PE 10 44',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false,
quantity: 0
},
{
"id": "5",
title: '规格:JS-CGO PE 10 55',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false,
quantity: 0
}
]
export default{
localTopProcOption,
localLeftOption,
localSingleSeleHead,
localSingleRowData
}
\ No newline at end of file
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