Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 7a9a6114 by Denglingling
Options

调整自助下单 -【手术模板、器械包、钉盒、零散器械】、【已选】的布局、以及功能组件选择器的封装

parent 6812cc02
Expand all
Inline Side-by-side
Showing with 426 additions and 66 deletions
app/containers/common/CellTextStyle.js
......@@ -8,7 +8,6 @@ import {
} from 'react-native';
import {
first_text_color,
third_text_color,
foundation_color,
dis_sub_color,
title_text_color,
......@@ -100,7 +99,7 @@ const styles = StyleSheet.create({
marginBottom: 18
},
btn_cont: {
paddingHorizontal: 16
paddingHorizontal: 26
},
sub_btn_box: {
backgroundColor: dis_sub_color,
......@@ -108,7 +107,7 @@ const styles = StyleSheet.create({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 26,
marginBottom: 14,
borderRadius: 10
},
sub_btn: {
......
app/containers/common/ProductModel.js
......@@ -27,6 +27,10 @@ import {
list_common_item
} from '../../base/BaseStyle';
import { FooterBtnStyle } from '../common/CellTextStyle';
import ChooseCardList from '../common/listDataComponent/ChooseCardList';
import PicTitDetaiCalcu from '../common/listDataComponent/PicTitDetaiCalcu';
import localMockData from '../../containers/selfOrder/module/mock/sen_mock';
const PropTypes = require('prop-types');
class ProductModel extends Component {
constructor(props) {
......@@ -106,6 +110,14 @@ class ProductModel extends Component {
]
}
}
componentDidMount(){
console.log('本地测试数据====localMockData===', localMockData)
// 赋值测试数据
this.setState({
topProcOptionList: localMockData.localBottomOption
})
}
componentWillReceiveProps(nextProps) {
if (this.state.isVisible != nextProps.show) {
......@@ -141,16 +153,38 @@ class ProductModel extends Component {
* @param {boolean} isPlus 默认减法 false，加法 true,
*/
handelCalculationList(item, index, isPlus) {
let { contOptionData } = this.state
let { value } = contOptionData[index]
if(isPlus) {
contOptionData[index].value += 1
} else if(!isPlus && value > 0) {
contOptionData[index].value -= 1
// let { contOptionData } = this.state
// let { value } = contOptionData[index]
// if(isPlus) {
// contOptionData[index].value += 1
// } else if(!isPlus && value > 0) {
// contOptionData[index].value -= 1
// }
// this.setState({
// contOptionData
// })
}
// 修改列表计算后数据
handleCalCallBack(item, index, dataName){
let {topProcOptionList, topActiveIndex} = this.state
// this.state.topProcOptionList[this.state.topActiveIndex].localThridContData
if(dataName && topProcOptionList[topActiveIndex][dataName]) {
topProcOptionList.map(function(listItem, listIndex) {
if(listIndex === topActiveIndex){
listItem[dataName][index] = item
}
})
// let curDataName = topProcOptionList[topActiveIndex][dataName]
// curDataName[index] = item
this.setState({
// [dataName]: curDataName
topProcOptionList
})
}
this.setState({
contOptionData
})
}
// 点击顶部菜单
......@@ -197,6 +231,11 @@ class ProductModel extends Component {
// 返回底部主要元素
renderContItem() {
let {topProcOptionList, topActiveIndex} = this.state
let curData = topProcOptionList[topActiveIndex]
// 本地测试数据
let localBottomContData = curData.localBottomContData
return(
<View style={styles.edit_cont}>
<ScrollView
......@@ -206,7 +245,7 @@ class ProductModel extends Component {
<FlatList
style={styles.edit_list}
keyExtractor={item => item.id}
data={this.state.contOptionData}
data={localBottomContData}
extraData={this.state}
renderItem={ ({item, index}) => this.renderContColumnItem(item, index) }
/>
......@@ -220,8 +259,23 @@ class ProductModel extends Component {
return (
<TouchableOpacity
activeOpacity={1}
style={styles.column_container}>
<View style={styles.ri_inner}>
style={styles.column_container}>
<PicTitDetaiCalcu
listItem={item}
listIndex={index}
calField={'quantity'}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'localBottomContData')}
titText={'title'}
tipTextOne={'tip1'}
tipTextTwo={'tip2'}
listImgIcon={'imgIcon'}
listPicType={'SQUARE'}
/>
{/* <View style={styles.ri_inner}>
<View style={styles.oth_img_box}>
<Image style={styles.oth_img} source={item.imgIcon}/>
</View>
......@@ -253,7 +307,8 @@ class ProductModel extends Component {
</View>
</TouchableOpacity>
</View>
</View>
</View> */}
</TouchableOpacity>
)
}
......
app/containers/common/listDataComponent/ChooseCardList.js 0 → 100644
import React, { Component } from 'react';
import { StyleSheet, Image, Text, TouchableOpacity, View, ScrollView } from 'react-native';
import { first_text_color, font_family_light, font_family_regular, font_family_semibold, foundation_color, home_background_color, icon_style, promary_color, pxSize, second_text_color, second_text_size, third_text_color, third_text_size, Width } from '../../../base/BaseStyle';
const PropTypes = require('prop-types');
import PictureZoom from '../../common/listDataComponent/PictureZoom';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
import localMockData from '../../selfOrder/module/mock/sen_mock';
class ChooseCardList extends Component {
static propTypres = {
cardScrollEnabled: PropTypes.bool, // 属性为 true 可以滚动
cardHorizontal: PropTypes.bool, // 属性为 flase 默认的在垂直方向上排成一列，属性为 true 所有的子视图会在水平方向上排成一行
cardShowsHorizontalScrollIndicator: PropTypes.bool, // 属性为 true 的时候，显示一个水平方向的滚动条
cardShowsVerticalScrollIndicator: PropTypes.bool, // 属性为 true 的时候，显示一个垂直方向的滚动条
cardStyleBox: PropTypes.object,
cardStyleScroll: PropTypes.object,
cardStyleListItem: PropTypes.object,
cardStyleListItemAct: PropTypes.object,
cardStyleItemIcon: PropTypes.object,
cardStyleNotIconTit: PropTypes.object,
cardStyleItemTit: PropTypes.object,
cardStyleItemTitAct: PropTypes.object,
cardListOptions: PropTypes.array,
cardItemTitle: PropTypes.string,
cardItemIcon: PropTypes.string,
cardImgName: PropTypes.string,
cardItemName: PropTypes.string,
cardCallBack: PropTypes.func,
curActIndex: PropTypes.number
// cardListOptions: [
// {
// cardItemTitle: '螺钉盒',
// cardImgName: ['xxx','xxx'],
// cardItemName: [{
// title: '',
// iconImg: '',
// tip1:'',
// tip2:'',
// quantity: 0
// }]
// }
// ]
}
constructor(props) {
super(props);
this.state = {
curActIndex: 0
}
}
// 点击当前选项
handleCheckTit(item, index) {
console.log('item, index----', item, index)
this.state = {
curActIndex: index
}
this.props.cardCallBack(item, index)
}
render() {
let {cardScrollEnabled, cardHorizontal, cardShowsHorizontalScrollIndicator, cardShowsVerticalScrollIndicator, cardStyleBox, cardStyleScroll, cardListOptions, cardItemTitle, cardItemIcon, cardImgName, cardItemName,
cardStyleListItem, cardStyleListItemAct, cardStyleItemIcon, cardStyleItemTit, cardStyleNotIconTit, cardStyleItemTitAct, cardCallBack, curActIndex, ...props} = this.props
// let {curActIndex} = this.state
let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据
cardListOptions[cardImgName] = localTestImageUrls // 本地测试
console.log('cardStyleItemTit===', cardStyleItemTit)
// cardScrollEnabled 默认 true，是否可以滚动
// cardHorizontal=true 的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列
// showsHorizontalScrollIndicator 当此属性为 true 的时候，显示一个水平方向的滚动条
// showsVerticalScrollIndicator 当此属性为 true 的时候，显示一个垂直方向的滚动条
return (
<View style={[styles.card_container, cardStyleBox]}>
<ScrollView
scrollEnabled={!!cardScrollEnabled}
horizontal={!!cardHorizontal}
showsHorizontalScrollIndicator={!!cardShowsHorizontalScrollIndicator}
showsVerticalScrollIndicator={!!cardShowsVerticalScrollIndicator}
style={[styles.card_scroll_box,cardStyleScroll]}
>
{ cardListOptions.map((item, index) =>
<View style={styles.card_list_box}>
<TouchableOpacity
activeOpacity={.8}
style={styles.list_touch_cont}
onPress={() => cardCallBack(item, index)}
>
<View style={[styles.list_item_inner, cardStyleListItem, index == curActIndex ? [styles.list_inner_act, cardStyleListItemAct] : '']}>
{ item[cardItemIcon] ? <View style={[styles.item_icon_def, cardStyleItemIcon]}>
<Image source={item[cardItemIcon]} style={icon_style}/>
</View> : null }
<Text style={[styles.list_item_tit, cardStyleItemTit, item[cardItemIcon] ? '' : cardStyleNotIconTit, index == curActIndex ? [styles.list_tit_act, cardStyleItemTitAct] : '']}>{item[cardItemTitle]}</Text>
</View>
{/* { cardImgName ?
<PictureZoom
listImageIndex={0}
listImageUrls={cardListOptions[cardImgName]}
listStyleImage={styles.thr_head_tit_img}
listPicType={'RECTANGLE'}
/> : null }
<PicTitDetaiCalcu
listItem={item}
listIndex={index}
calField={'quantity'}
subCalCallBack={(item,index) => this.handleRowCalCallBack(item,index)}
titText={'title'}
tipTextOne={'tip1'}
tipTextTwo={'tip2'}
listImgIcon={'imgIcon'}
listPicType={'SQUARE'}
/> */}
</TouchableOpacity>
{/* <View {...props} /> */}
{/*
<TouchableOpacity
// activeOpacity={.8}
// style={styles.top_touch_cont}
// onPress={() => this.handleTopNav(item, index)}
// >
// <View style={[styles.list_item_inner, index == topActiveIndex ? styles.list_inner_act : '']}>
// <View style={styles.top_img_box}>
// <Image source={item.iconImg} style={icon_style}/>
// </View>
// <Text style={[styles.list_item_tit, index == topActiveIndex ? styles.list_tit_act : '']}>{item.title}</Text>
// </View>
// </TouchableOpacity> */}
</View>
)
}
{/* <View {...this.props}> </View> */}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
card_container: {},
card_scroll_box: {
// width: Width()
},
card_list_box: {
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
},
list_touch_cont: {},
item_icon_def: {
width: pxSize(36),
height: pxSize(36)
},
// thr_head_tit_img: {
// borderWidth: .5,
// borderColor: 'rgba(0, 0, 0, 0.12)',
// marginBottom: 10
// },
list_item_inner: {
alignItems: 'center',
marginRight: 14,
borderBottomWidth: 4,
borderBottomColor: home_background_color,
minWidth: 60
},
list_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
},
list_item_tit: {
paddingTop: 10,
paddingBottom: 14,
color: second_text_color,
fontSize: third_text_size,
fontFamily: font_family_regular
},
list_tit_act: {
color: first_text_color,
fontSize: 14,
fontFamily: font_family_semibold
}
})
export default ChooseCardList;
\ No newline at end of file
app/containers/common/listDataComponent/PicTitDetaiCalcu.js
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';
import { first_text_color, font_family_light, font_family_regular, font_family_semibold, home_background_color, icon_style, pxSize, second_text_size, third_text_color } from '../../../base/BaseStyle';
const PropTypes = require('prop-types');
class PicTitDetaiCalcu extends Component {
......@@ -8,15 +8,15 @@ 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,
listStyleBox: PropTypes.object,
listStyleTit: PropTypes.object,
listStyleTip: PropTypes.object,
listStyleCalBtn: PropTypes.object,
listPicType: PropTypes.string, // 每一列图片类型
subCalCallBack: PropTypes.func, // 计算后回调给父组件
calField: PropTypes.string, // 计算的字段名
titCallBack: PropTypes.func, // 标题回调函数
titText: PropTypes.string, // 标题
tipTextStr: PropTypes.string,
tipTextOne: PropTypes.string,
tipTextTwo: PropTypes.string,
......@@ -66,6 +66,8 @@ class PicTitDetaiCalcu extends Component {
calIcon = require('../../../images/plur_big_act.png')
}
// console.log('picOthStyle----', picOthStyle)
return (
<View style={[styles.ri_inner, listStyleBox]}>
{ listImgIcon ?
......@@ -82,7 +84,7 @@ class PicTitDetaiCalcu extends Component {
{ listItem[titText] }
</Text>
</TouchableOpacity>
{ listItem[tipTextStr] ? <Text numberOfLines={1} style={[styles.ri_te_ot, styles.thr_ot, listStyleTip]}>{listItem[tipTextStr]}</Text> : null }
{ listItem[tipTextStr] ? <Text numberOfLines={1} style={[styles.ri_te_ot, styles.te_ot_str, 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>
......@@ -127,11 +129,6 @@ const styles = StyleSheet.create({
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,
......@@ -146,6 +143,10 @@ const styles = StyleSheet.create({
fontSize: second_text_size,
color: first_text_color
},
te_ot_str: {
fontFamily: font_family_semibold,
color: first_text_color
},
oth_img_box: {
width: pxSize(58),
height: pxSize(58),
......
app/containers/common/listDataComponent/PictureZoom.js
......@@ -11,9 +11,9 @@ class PictureZoom extends Component {
static propTypres = {
listImageIndex: PropTypes.number, //默认展示图片index
listImageUrls: PropTypes.array, //所有图片
listStyleImage: PropTypes.string,
listPicType: PropTypes.string
listImageUrls: PropTypes.array || PropTypes.string, //所有图片
listStyleImage: PropTypes.object, // 图片样式
listPicType: PropTypes.string // 图片类型
}
constructor(props) {
......@@ -65,6 +65,17 @@ class PictureZoom extends Component {
if(listPicTypeArr.indexOf(listPicType) > -1){
picOthStyle = picStyleArr[listPicTypeArr.indexOf(listPicType)]
}
// console.log('listImageUrls----', typeof listImageUrls)
// if(typeof listImageUrls !== "array"){
// listImageUrls = [{url : listImageUrls}]
// listImageIndex = 0
// }
console.log('listImageUrls----', listImageUrls, typeof listImageUrls)
return (
<View style={[styles.container]}>
<TouchableOpacity
......
app/containers/selfOrder/module/ProductRightStyle.js
......@@ -92,7 +92,7 @@ class ProductRightStyle extends Component {
let { superIndex } = this.props
console.warn('右侧标题点击事件 ', superIndex, index, item)
if(superIndex > 0 && superIndex < 4) {
if(superIndex >= 0 && superIndex < 4) {
this.props.navigation.navigate('EditThirdLevelPage', {title: '选择产品 - 编辑模板'})
}else {
this.changeThrShow(true)
......@@ -104,19 +104,19 @@ class ProductRightStyle extends Component {
}
// 关闭当前弹窗
handleCloseModal(show) {
this.setState({
toolShowPopup: show
})
}
// // 关闭当前弹窗
// handleCloseModal(show) {
// this.setState({
// toolShowPopup: show
// })
// }
// 螺钉盒、器械包、辅助工具 弹窗显示
handleIsShowDialog() {
this.setState({
toolShowPopup: !this.state.toolShowPopup
})
}
// // 螺钉盒、器械包、辅助工具 弹窗显示
// handleIsShowDialog() {
// this.setState({
// toolShowPopup: !this.state.toolShowPopup
// })
// }
// 修改当前小类是否展示
changeThrShow(show) {
......@@ -132,18 +132,18 @@ class ProductRightStyle extends Component {
* @param {number} index 当前角标
* @param {boolean} isPlus 默认减法 false，加法 true,
*/
handleCalculationThr(item, index, isPlus) {
let { rowSingleData } = this.state
let { value } = rowSingleData[index]
if(isPlus) {
rowSingleData[index].value += 1
} else if(!isPlus && value > 0) {
rowSingleData[index].value -= 1
}
this.setState({
rowSingleData
})
}
// handleCalculationThr(item, index, isPlus) {
// let { rowSingleData } = this.state
// let { value } = rowSingleData[index]
// if(isPlus) {
// rowSingleData[index].value += 1
// } else if(!isPlus && value > 0) {
// rowSingleData[index].value -= 1
// }
// this.setState({
// rowSingleData
// })
// }
// 单选耗材 - 头数据
handleHeadCalCallBack(item, index) {
......@@ -183,13 +183,13 @@ class ProductRightStyle extends Component {
listItem={item}
listIndex={index}
calField={'quantity'}
listPicType={'SQUARE'}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'rightSecondData')}
titCallBack={(item,index) => this.TitleClickEvent(item,index)}
titText={'title'}
tipTextOne={'tip1'}
tipTextTwo={'tip2'}
listImgIcon={'imgIcon'}
listPicType={'SQUARE'}
/>
{/* <View style={styles.ri_inner}>
<TouchableOpacity
......
app/containers/selfOrder/module/mock/sen_mock.js
......@@ -527,26 +527,109 @@ const localThridContData = [ // 底部产品内容
const localThridOption = [
{
title: '编辑产品',
iconImg: require('../../../../images/model_test.png'),
iconImg: localTestImageUrls,
localThridContData
},
{
title: '螺钉盒',
iconImg: require('../../../../images/model_test.png'),
iconImg: localTestImageUrls,
localThridContData
},
{
title: '器械包',
iconImg: require('../../../../images/model_test.png'),
iconImg: localTestImageUrls,
localThridContData
},
{
title: '工具',
iconImg: require('../../../../images/model_test.png'),
iconImg: localTestImageUrls,
localThridContData
}
]
// 已选数据 - 底部按钮
const localBottomOption = [
{
title: '模板',
iconImg: localTestImageUrls,
localBottomContData: [
{
"id": "0",
title: '已选模板111',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
},
{
title: '螺钉盒',
iconImg: localTestImageUrls,
localBottomContData: [
{
"id": "0",
title: '已选模板111',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
},
{
title: '器械包',
iconImg: localTestImageUrls,
localBottomContData: [
{
"id": "0",
title: '已选器械包111',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
},
{
title: '零散器械',
iconImg: localTestImageUrls,
localBottomContData: [
{
"id": "0",
title: '已选零散器械111',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
},
{
title: '单选耗材',
iconImg: localTestImageUrls,
localBottomContData: [
{
"id": "0",
title: '已选单选耗材11',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../../images/model_test.png'),
select: false,
quantity: 0
}
]
}
]
export default{
......@@ -555,5 +638,6 @@ export default{
localSingleSeleHead,
localSingleRowData,
localTestImageUrls,
localThridOption
localThridOption,
localBottomOption
}
\ 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