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';
......
...@@ -36,10 +36,10 @@ import { FooterBtnStyle } from '../../common/CellTextStyle'; ...@@ -36,10 +36,10 @@ import { FooterBtnStyle } from '../../common/CellTextStyle';
import ProductRightStyle from './ProductRightStyle'; import ProductRightStyle from './ProductRightStyle';
import ProductModel from '../../common/ProductModel'; import ProductModel from '../../common/ProductModel';
import StatusBarView from '../../common/StatusBarView'; import StatusBarView from '../../common/StatusBarView';
import localMockData from './mock/sen_mock';
// import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view'; // import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
// import TopTabBar from './customTabbar/TopTabBar'; // import TopTabBar from './customTabbar/TopTabBar';
// import LeftTabBar from './customTabbar/LeftTabBar'; // import LeftTabBar from './customTabbar/LeftTabBar';
// import { leftOptionList } from './mock'
class ChooseProductPage extends Component { class ChooseProductPage extends Component {
constructor(props) { constructor(props) {
...@@ -47,262 +47,22 @@ class ChooseProductPage extends Component { ...@@ -47,262 +47,22 @@ class ChooseProductPage extends Component {
this.state = { this.state = {
searchValue: '', searchValue: '',
topActiveIndex: 0, topActiveIndex: 0,
topProcOptionList: [ topProcOptionList: [], // 顶部厂家信息
{
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')
}
],
leftActiveIndex: 0, leftActiveIndex: 0,
stencilData: [], stencilData: [],
leftOptionList: [ leftOptionList: [], // 左侧分类数据
{
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'
},
], // 左侧数据 - 二级菜单
defaultThridShow: false, // 默认人体髋关节-小类不显示 defaultThridShow: false, // 默认人体髋关节-小类不显示
selectShowPopup: false, // 共计已选弹窗 selectShowPopup: false, // 共计已选弹窗
} }
} }
componentDidMount() { componentDidMount() {
// this.setState({ console.log('本地测试数据====localMockData===', localMockData)
// leftOptionList: leftOptionList // 赋值测试数据
// }) this.setState({
topProcOptionList: localMockData.localTopProcOption,
leftOptionList: localMockData.localLeftOption
})
} }
// 顶部产品点击 // 顶部产品点击
...@@ -519,7 +279,7 @@ class ChooseProductPage extends Component { ...@@ -519,7 +279,7 @@ class ChooseProductPage extends Component {
<SafeAreaView style={safe_view}> <SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} /> <HeadBackItem title={title} navigation={navigation} />
<View style={styles.choo_main}> <View style={styles.choo_main}>
{this.renderSearchItem()} {/* {this.renderSearchItem()} */}
{this.renderTopProItem()} {this.renderTopProItem()}
{this.renderContItem()} {this.renderContItem()}
......
...@@ -23,171 +23,33 @@ import { ...@@ -23,171 +23,33 @@ import {
icon_style icon_style
} from '../../../base/BaseStyle'; } from '../../../base/BaseStyle';
import ShowModel from '../../common/ShowModel'; import ShowModel from '../../common/ShowModel';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
import PictureZoom from '../../common/listDataComponent/PictureZoom';
import localMockData from './mock/sen_mock';
// export function ProductRightStyle({isStencilItem, isBoxBagToolItem, isOtherItem, ...props}) {
// return (
// <View style={{position: 'absolute', left: 80}} {...props}>
// <Text>右侧</Text>
// </View>
// )
// }
// export function ProductRightStyle({isStencilItem, isBoxBagToolItem, isOtherItem, ...props}) {
class ProductRightStyle extends Component { class ProductRightStyle extends Component {
constructor (props) { constructor (props) {
super(props) super(props)
this.state = { this.state = {
// 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
// }
// ], // 模板数据
stencilData: this.props.superStencilData, // 模板数据 stencilData: this.props.superStencilData, // 模板数据
selectItem : [], // 当前选中模板 selectItem : [], // 当前选中模板
toolShowPopup: false, // 螺钉盒等三个弹窗显示 toolShowPopup: false, // 螺钉盒等三个弹窗显示
otherListData : [{ // 人工髋关节假体等数据 -- 大类 singleHeadData: [], // 人工髋关节假体等数据 -- 大类
"id": "0", rowSingleData: [], // 人工髋关节假体等数据 -- 小类
title: '中置器(PE)',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "1",
title: '内衬Harmony 28/10°OD(P 2',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "2",
title: '内衬Harmony 28/10°OD(P',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "3",
title: '中置器(PE)4',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "4",
title: '中置器(PE)5',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "5",
title: '中置器(PE)6',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "6",
title: '中置器(PE)7',
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "7",
title: '中置器(PE)8',
imgIcon: require('../../../images/model_test.png'),
select: false
}
],
thridOptionData: [ // 人工髋关节假体等数据 -- 小类
{
"id": "0",
title: '规格:JS-CGO PE 10',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 20,
select: false
},
{
"id": "1",
title: '规格:JS-CGO PE 10 11',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false
},
{
"id": "2",
title: '规格:JS-CGO PE 10 22',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false
},
{
"id": "3",
title: '规格:JS-CGO PE 10 33',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false
},
{
"id": "4",
title: '规格:JS-CGO PE 10 44',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false
},
{
"id": "5",
title: '规格:JS-CGO PE 10 55',
tip1: '型号:10',
tip2: '物料代码:JUST00000104',
value: 0,
select: false
}
],
thridIsVisible: false, // 小类展示 thridIsVisible: false, // 小类展示
} }
} }
componentDidMount(){
console.log('本地测试数据====localMockData===', localMockData)
// 赋值测试数据
this.setState({
singleHeadData: localMockData.localSingleSeleHead,
rowSingleData: localMockData.localSingleRowData
})
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.state.thridIsVisible != nextProps.defaultThridShow) { if (this.state.thridIsVisible != nextProps.defaultThridShow) {
this.setState({thridIsVisible: nextProps.defaultThridShow}); this.setState({thridIsVisible: nextProps.defaultThridShow});
...@@ -268,16 +130,34 @@ class ProductRightStyle extends Component { ...@@ -268,16 +130,34 @@ class ProductRightStyle extends Component {
* @param {number} index 当前角标 * @param {number} index 当前角标
* @param {boolean} isPlus 默认减法 false,加法 true, * @param {boolean} isPlus 默认减法 false,加法 true,
*/ */
handelCalculationThr(item, index, isPlus) { handleCalculationThr(item, index, isPlus) {
let { thridOptionData } = this.state let { rowSingleData } = this.state
let { value } = thridOptionData[index] let { value } = rowSingleData[index]
if(isPlus) { if(isPlus) {
thridOptionData[index].value += 1 rowSingleData[index].value += 1
} else if(!isPlus && value > 0) { } else if(!isPlus && value > 0) {
thridOptionData[index].value -= 1 rowSingleData[index].value -= 1
}
this.setState({
rowSingleData
})
}
// 单选耗材 - 头数据
handleHeadCalCallBack(item, index) {
let { singleHeadData } = this.state
singleHeadData[index] = item
this.setState({
singleHeadData
})
} }
// 单选耗材 - 行数据
handleRowCalCallBack(item, index) {
let { rowSingleData } = this.state
rowSingleData[index] = item
this.setState({ this.setState({
thridOptionData rowSingleData
}) })
} }
...@@ -381,7 +261,18 @@ class ProductRightStyle extends Component { ...@@ -381,7 +261,18 @@ class ProductRightStyle extends Component {
renderThridItem(item, index) { renderThridItem(item, index) {
return ( return (
<SafeAreaView style={styles.thr_container}> <SafeAreaView style={styles.thr_container}>
<View style={[styles.ri_inner, styles.thr_inner]}> <PicTitDetaiCalcu
listItem={item}
listIndex={index}
calField={'quantity'}
subCalCallBack={(item,index) => this.handleRowCalCallBack(item,index)}
titText={'title'}
tipTextOne={'tip1'}
tipTextTwo={'tip2'}
/>
{/* <View style={[styles.ri_inner, styles.thr_inner]}>
<View style={styles.ri_text_box}> <View style={styles.ri_text_box}>
<Text style={styles.thr_ot}> <Text style={styles.thr_ot}>
{ item.title } { item.title }
...@@ -393,11 +284,9 @@ class ProductRightStyle extends Component { ...@@ -393,11 +284,9 @@ class ProductRightStyle extends Component {
<TouchableOpacity <TouchableOpacity
activeOpacity={.9} activeOpacity={.9}
style={styles.btn_inner} style={styles.btn_inner}
onPress={() => this.handelCalculationThr(item, index)} onPress={() => this.handleCalculationThr(item, index)}
> >
{/* <View style={[styles.thr_num_btn]}> */}
<View style={[styles.thr_num_btn, styles.thr_btn_left]}> <View style={[styles.thr_num_btn, styles.thr_btn_left]}>
{/* <Text style={[styles.thr_num_icon, styles.thr_icon_left]}>{'-'}</Text> */}
<Image source={require('../../../images/less_icon.png')} style={styles.thr_num_icon}></Image> <Image source={require('../../../images/less_icon.png')} style={styles.thr_num_icon}></Image>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
...@@ -405,16 +294,14 @@ class ProductRightStyle extends Component { ...@@ -405,16 +294,14 @@ class ProductRightStyle extends Component {
<TouchableOpacity <TouchableOpacity
activeOpacity={.9} activeOpacity={.9}
style={styles.btn_inner} style={styles.btn_inner}
onPress={() => this.handelCalculationThr(item, index, true)} onPress={() => this.handleCalculationThr(item, index, true)}
> >
{/* <View style={[styles.thr_num_btn]}> */}
<View style={[styles.thr_num_btn, styles.thr_btn_right]}> <View style={[styles.thr_num_btn, styles.thr_btn_right]}>
{/* <Text style={[styles.thr_num_icon, styles.thr_icon_right]}>{'+'}</Text> */}
<Image source={require('../../../images/plur_icon.png')} style={styles.thr_num_icon}></Image> <Image source={require('../../../images/plur_icon.png')} style={styles.thr_num_icon}></Image>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View> */}
</SafeAreaView> </SafeAreaView>
) )
} }
...@@ -438,7 +325,7 @@ class ProductRightStyle extends Component { ...@@ -438,7 +325,7 @@ class ProductRightStyle extends Component {
<FlatList <FlatList
style={styles.cont_thr_list} style={styles.cont_thr_list}
keyExtractor={item => item.id} keyExtractor={item => item.id}
data={this.state.thridOptionData} data={this.state.rowSingleData}
extraData={this.state} extraData={this.state}
renderItem={({item, index}) => this.renderThridItem(item, index)} renderItem={({item, index}) => this.renderThridItem(item, index)}
/> />
...@@ -450,7 +337,19 @@ class ProductRightStyle extends Component { ...@@ -450,7 +337,19 @@ class ProductRightStyle extends Component {
renderOtherListItem(item, index) { renderOtherListItem(item, index) {
return ( return (
<SafeAreaView style={styles.oth_container}> <SafeAreaView style={styles.oth_container}>
<View style={styles.oth_inner}>
<PicTitDetaiCalcu
listItem={item}
listIndex={index}
calField={'quantity'}
listPicType={'ROUND'}
subCalCallBack={(item,index) => this.handleHeadCalCallBack(item,index)}
titCallBack={(item,index) => this.enterEditStencilPage(item, index)}
titText={'title'}
listImgIcon={'imgIcon'}
/>
{/* <View style={styles.oth_inner}>
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={.8}
onPress={() => this.enterEditStencilPage(item, index)} onPress={() => this.enterEditStencilPage(item, index)}
...@@ -463,7 +362,7 @@ class ProductRightStyle extends Component { ...@@ -463,7 +362,7 @@ class ProductRightStyle extends Component {
<Text style={styles.oth_tit}>{item.title}</Text> <Text style={styles.oth_tit}>{item.title}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View> */}
</SafeAreaView> </SafeAreaView>
) )
} }
...@@ -475,7 +374,7 @@ class ProductRightStyle extends Component { ...@@ -475,7 +374,7 @@ class ProductRightStyle extends Component {
<FlatList <FlatList
style={styles.cont_other_list} style={styles.cont_other_list}
keyExtractor={item => item.id} keyExtractor={item => item.id}
data={this.state.otherListData} data={this.state.singleHeadData}
extraData={this.state} extraData={this.state}
renderItem={({item, index}) => this.renderOtherListItem(item, index)} renderItem={({item, index}) => this.renderOtherListItem(item, index)}
/> />
...@@ -501,8 +400,21 @@ class ProductRightStyle extends Component { ...@@ -501,8 +400,21 @@ class ProductRightStyle extends Component {
// 返回右侧三级标题 // 返回右侧三级标题
renderThrHeadStyle() { renderThrHeadStyle() {
let { thridIsVisible } = this.state let { thridIsVisible } = this.state
let testObj = {
title: '测试标题__',
image: require('../../../images/model_test.png')
}
let localTestImageUrls = [{
url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg',
},{
url: 'https://obs.uat.sfrx.guke.tech/upload/dingding/image/QDw05sTo.jpg',
},{
url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg'
}]
if (thridIsVisible) { if (thridIsVisible) {
return ( return (
<View>
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={.8}
style={styles.thr_head_inner} style={styles.thr_head_inner}
...@@ -512,9 +424,16 @@ class ProductRightStyle extends Component { ...@@ -512,9 +424,16 @@ class ProductRightStyle extends Component {
<View style={styles.thr_icon_box}> <View style={styles.thr_icon_box}>
<Image source={require('../../../images/arr_left.png')} style={styles.thr_icon}></Image> <Image source={require('../../../images/arr_left.png')} style={styles.thr_icon}></Image>
</View> </View>
<Text style={styles.thr_head_tit}>{ '测试标题' }</Text> <Text style={styles.thr_head_tit}>{ testObj.title }</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<PictureZoom
listImageIndex={0}
listImageUrls={localTestImageUrls}
listStyleImage={styles.thr_head_tit_img}
listPicType={'RECTANGLE'}
/>
</View>
) )
} }
} }
...@@ -647,12 +566,12 @@ const styles = StyleSheet.create({ ...@@ -647,12 +566,12 @@ const styles = StyleSheet.create({
thr_head_inner: {}, thr_head_inner: {},
thr_head_back: { thr_head_back: {
flexDirection: 'row', flexDirection: 'row',
paddingVertical: 16, paddingVertical: 12,
alignItems: 'center' alignItems: 'center'
}, },
thr_icon_box: { thr_icon_box: {
width: pxSize(16), width: pxSize(14),
height: pxSize(20) height: pxSize(18)
}, },
thr_icon: { thr_icon: {
width: '100%', width: '100%',
...@@ -660,10 +579,15 @@ const styles = StyleSheet.create({ ...@@ -660,10 +579,15 @@ const styles = StyleSheet.create({
}, },
thr_head_tit: { thr_head_tit: {
color: third_text_color, color: third_text_color,
paddingLeft: 10, paddingLeft: 6,
fontSize: second_text_size, fontSize: second_text_size,
fontFamily: font_family_regular fontFamily: font_family_regular
}, },
thr_head_tit_img: {
borderWidth: .5,
borderColor: 'rgba(0, 0, 0, 0.12)',
marginBottom: 10
},
cont_thr_list: {}, cont_thr_list: {},
thr_container: {}, thr_container: {},
thr_inner: { thr_inner: {
...@@ -671,7 +595,6 @@ const styles = StyleSheet.create({ ...@@ -671,7 +595,6 @@ const styles = StyleSheet.create({
paddingBottom: 26 paddingBottom: 26
}, },
thr_ot: { thr_ot: {
// fontWeight: 'normal',
fontFamily: font_family_regular, fontFamily: font_family_regular,
fontSize: second_text_size, fontSize: second_text_size,
color: first_text_color color: first_text_color
......
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