Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit ae4d1023 by Denglingling
Options

增加自助下单，中级、已选、左侧分类的数量同步，以及部分样式优化 

(cherry picked from commit 54a17ed6)
parent ee54d211
Inline Side-by-side
Showing with 723 additions and 536 deletions
app/containers/common/ProductModel.js
...@@ -24,7 +24,9 @@ import { ...@@ -24,7 +24,9 @@ import {
safe_view, safe_view,
font_family_medium, font_family_medium,
font_family_light, font_family_light,
list_common_item list_common_item,
third_text_size,
icon_style
} from '../../base/BaseStyle'; } from '../../base/BaseStyle';
import { FooterBtnStyle } from '../common/CellTextStyle'; import { FooterBtnStyle } from '../common/CellTextStyle';
import ChooseCardList from '../common/listDataComponent/ChooseCardList'; import ChooseCardList from '../common/listDataComponent/ChooseCardList';
...@@ -32,82 +34,102 @@ import PicTitDetaiCalcu from '../common/listDataComponent/PicTitDetaiCalcu'; ...@@ -32,82 +34,102 @@ import PicTitDetaiCalcu from '../common/listDataComponent/PicTitDetaiCalcu';
import localMockData from '../../containers/selfOrder/module/mock/sen_mock'; import localMockData from '../../containers/selfOrder/module/mock/sen_mock';
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const SELECTED_QUQNTITY = 'selectedQuantity' // 中类数量
const SELECTED_DATA_ARR = 'selectedDataArr' // 中类已选元素
const DEFAULT_SECOND_DATA = 'localSecondData' // 中类原本元素
const DEFAULT_FIELD = 'quantity' // 计算的字段
class ProductModel extends Component { class ProductModel extends Component {
static propTypres = {
closeModal: PropTypes.func, // 关闭回调
closeSubmit: PropTypes.func, // 选好了回调
show: PropTypes.bool,
modelOption: PropTypes.array, // 已选数据
modelCallBack: PropTypes.func, // 修改选择的回调函数
}
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
isVisible: this.props.show, isVisible: this.props.show,
topProcOptionList: [ topProcOptionList: [],
{ // [
title: '编辑产品' // {
}, // title: '编辑产品'
{ // },
title: '螺钉盒' // {
}, // title: '螺钉盒'
{ // },
title: '器械包' // {
}, // title: '器械包'
{ // },
title: '工具' // {
} // title: '工具'
], // }
// ],
topActiveIndex: 0, topActiveIndex: 0,
contOptionData: [ // 底部产品内容 allCountQuantity: 0,
{
"id": "0", // SELECTED_QUQNTITY: 'selectedQuantity', // 中类数量
title: '规格：JS-CGO PE 10', // SELECTED_DATA_ARR: 'selectedDataArr', // 中类已选元素
tip1: '型号：10',
tip2: '物料代码：JUST00000104', // contOptionData: [ // 底部产品内容
value: 20, // {
imgIcon: require('../../images/model_test.png'), // "id": "0",
select: false // title: '规格：JS-CGO PE 10',
}, // tip1: '型号：10',
{ // tip2: '物料代码：JUST00000104',
"id": "1", // value: 20,
title: '规格：JS-CGO PE 10 11', // imgIcon: require('../../images/model_test.png'),
tip1: '型号：10', // select: false
tip2: '物料代码：JUST00000104', // },
value: 0, // {
imgIcon: require('../../images/model_test.png'), // "id": "1",
select: false // title: '规格：JS-CGO PE 10 11',
}, // tip1: '型号：10',
{ // tip2: '物料代码：JUST00000104',
"id": "2", // value: 0,
title: '规格：JS-CGO PE 10 22', // imgIcon: require('../../images/model_test.png'),
tip1: '型号：10', // select: false
tip2: '物料代码：JUST00000104', // },
value: 0, // {
imgIcon: require('../../images/model_test.png'), // "id": "2",
select: false // title: '规格：JS-CGO PE 10 22',
}, // tip1: '型号：10',
{ // tip2: '物料代码：JUST00000104',
"id": "3", // value: 0,
title: '规格：JS-CGO PE 10 33', // imgIcon: require('../../images/model_test.png'),
tip1: '型号：10', // select: false
tip2: '物料代码：JUST00000104', // },
value: 0, // {
imgIcon: require('../../images/model_test.png'), // "id": "3",
select: false // title: '规格：JS-CGO PE 10 33',
}, // tip1: '型号：10',
{ // tip2: '物料代码：JUST00000104',
"id": "4", // value: 0,
title: '规格：JS-CGO PE 10 44', // imgIcon: require('../../images/model_test.png'),
tip1: '型号：10', // select: false
tip2: '物料代码：JUST00000104', // },
value: 0, // {
imgIcon: require('../../images/model_test.png'), // "id": "4",
select: false // title: '规格：JS-CGO PE 10 44',
}, // tip1: '型号：10',
{ // tip2: '物料代码：JUST00000104',
"id": "5", // value: 0,
title: '规格：JS-CGO PE 10 55', // imgIcon: require('../../images/model_test.png'),
tip1: '型号：10', // select: false
tip2: '物料代码：JUST00000104', // },
value: 0, // {
imgIcon: require('../../images/model_test.png'), // "id": "5",
select: false // title: '规格：JS-CGO PE 10 55',
} // tip1: '型号：10',
] // tip2: '物料代码：JUST00000104',
// value: 0,
// imgIcon: require('../../images/model_test.png'),
// select: false
// }
// ]
} }
} }
...@@ -120,23 +142,29 @@ class ProductModel extends Component { ...@@ -120,23 +142,29 @@ class ProductModel extends Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.state.isVisible != nextProps.show) { if(this.state.isVisible != nextProps.show) {
// console.log('父组件修改----', nextProps.show)
this.setState({isVisible: nextProps.show}); this.setState({isVisible: nextProps.show});
} }
if(nextProps.modelOption) {
console.log('父组件修改---22-', nextProps.modelOption)
this.setState({topProcOptionList: nextProps.modelOption});
}
} }
// 共计已选 点击 // 共计已选 点击
handleCloseSelected() { handleCloseSelected() {
console.log('共计已选：666--model') console.log('共计已选：666--model')
this.closeModal() this.closeModal()
this.props.closeSelected(false) // // this.props.closeSelected(false)
// this.props.closeModal(false)
} }
// 选好了 点击 // 选好了 点击
handleCloseSubmit() { handleCloseSubmit() {
console.log('选好了--model') console.log('选好了--model')
this.closeModal() this.closeModal()
this.props.closeSubmit(false) this.props.closeSubmit()
} }
closeModal() { closeModal() {
...@@ -167,24 +195,87 @@ class ProductModel extends Component { ...@@ -167,24 +195,87 @@ class ProductModel extends Component {
// 修改列表计算后数据 // 修改列表计算后数据
handleCalCallBack(item, index, dataName){ handleCalCallBack(item, index, dataName){
let {topProcOptionList, topActiveIndex} = this.state let {topProcOptionList, topActiveIndex, allCountQuantity} = this.state
let {modelOption} = this.props
// this.state.topProcOptionList[this.state.topActiveIndex].localThridContData console.log('--已选===',item, topActiveIndex, index)
// if(dataName && topProcOptionList[topActiveIndex][dataName]) {
// topProcOptionList.map(function(listItem, listIndex) {
// if(listIndex === topActiveIndex){
// listItem[dataName][index] = item
// }
// })
// this.setState({
// topProcOptionList
// })
// }
if(dataName && topProcOptionList[topActiveIndex][dataName]) { if(SELECTED_DATA_ARR && topProcOptionList[topActiveIndex][SELECTED_DATA_ARR]) {
topProcOptionList.map(function(listItem, listIndex) { topProcOptionList.map(function(listItem, listIndex) {
if(listIndex === topActiveIndex){ if(listIndex === topActiveIndex){
listItem[dataName][index] = item listItem[SELECTED_DATA_ARR][index] = item
// 本地测试 id为唯一值
let curObj = listItem[SELECTED_DATA_ARR][index]
if(curObj.id){
listItem[DEFAULT_SECOND_DATA].forEach(function(deIt) {
if(deIt.id === curObj.id){
deIt = curObj
}
})
}
} }
}) })
// let curDataName = topProcOptionList[topActiveIndex][dataName]
// curDataName[index] = item console.log('---item[DEFAULT_FIELD] ', item[DEFAULT_FIELD], index)
if(item[DEFAULT_FIELD] === 0) {
topProcOptionList[topActiveIndex][SELECTED_DATA_ARR].splice(index, 1)
console.log('topProcOptionList[topActiveIndex][SELECTED_DATA_ARR]---', topProcOptionList[topActiveIndex][SELECTED_DATA_ARR])
}
// 修改左侧分类汇总
// 本地测试
let curCalField = 'quantity'
allCountQuantity = 0 // 初始化
if(topProcOptionList[topActiveIndex][SELECTED_DATA_ARR].length > 0) {
topProcOptionList[topActiveIndex][SELECTED_QUQNTITY] = 0
topProcOptionList[topActiveIndex][SELECTED_DATA_ARR].map((selItem) => {
if(!selItem[curCalField]){
selItem[curCalField] = 0
}
topProcOptionList[topActiveIndex][SELECTED_QUQNTITY] += Number(selItem[curCalField])
})
} else{
topProcOptionList[topActiveIndex][SELECTED_QUQNTITY] = 0
}
topProcOptionList.map(proItem => {
if(!proItem[SELECTED_QUQNTITY]){
proItem[SELECTED_QUQNTITY] = 0
}
allCountQuantity += proItem[SELECTED_QUQNTITY]
})
this.setState({ this.setState({
// [dataName]: curDataName allCountQuantity
topProcOptionList
}) })
// 回调函数
console.log('---计算后 ', topProcOptionList, allCountQuantity)
this.props.modelCallBack(topProcOptionList)
// this.setState({
// topProcOptionList
// })
} }
} }
// 点击顶部菜单 // 点击顶部菜单
...@@ -194,47 +285,105 @@ class ProductModel extends Component { ...@@ -194,47 +285,105 @@ class ProductModel extends Component {
}) })
} }
// 清空
handleClearRubbish() {
console.log('清空======')
}
// 返回清空
renderRubbish() {
return(
<View style={styles.rb_top_cont}>
<TouchableOpacity
activeOpacity={.8}
style={styles.rb_top_inner}
onPress={() => this.handleClearRubbish()}
>
<View style={styles.rb_icon}>
<Image style={icon_style} source={require('../../images/rubbish.png')} />
</View>
<Text style={styles.rb_icon_txt}>清空所有</Text>
</TouchableOpacity>
</View>
)
}
// 返回顶部编辑选项 // 返回顶部编辑选项
renderTopProItem() { renderTopProItem() {
let { topProcOptionList, topActiveIndex } = this.state let { topProcOptionList, topActiveIndex } = this.state
let {modelOption} = this.props
return ( return (
<View style={styles.top_box}>
<ScrollView <ChooseCardList
style={styles.top_scroll_cont} cardStyleBox={styles.top_box}
horizontal={true} cardStyleScroll={styles.top_scroll_cont}
showsHorizontalScrollIndicator={false} cardScrollEnabled={false}
> cardHorizontal={true}
{ cardShowsHorizontalScrollIndicator={false}
topProcOptionList.map((item, index) => cardStyleListItem={styles.top_inner}
<TouchableOpacity cardStyleListItemAct={styles.top_inner_act}
activeOpacity={.8} cardStyleItemTit={styles.top_tit}
style={styles.top_touch_cont} cardStyleItemTitAct={styles.top_tit_act}
onPress={() => this.handleTopNav(item, index)} cardListOptions={topProcOptionList}
> cardItemTitle={'title'}
<View style={[ curActIndex={topActiveIndex}
styles.top_inner, cardCallBack={(item, index) => this.handleTopNav(item, index)}
(index == 1 || index == 2) ? styles.se_thr_width : '', cardCountName={SELECTED_QUQNTITY}
index == 3 ? styles.four_width : '', cardStyleType={'DEFAULT'}
index == topActiveIndex ? styles.top_inner_act : '' />
]}> // <View style={styles.top_box}>
<Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}> // <ScrollView
{item.title} // style={styles.top_scroll_cont}
</Text> // horizontal={true}
</View> // showsHorizontalScrollIndicator={false}
</TouchableOpacity> // >
) // {
} // topProcOptionList.map((item, index) =>
</ScrollView> // <TouchableOpacity
</View> // activeOpacity={.8}
// style={styles.top_touch_cont}
// onPress={() => this.handleTopNav(item, index)}
// >
// <View style={[
// styles.top_inner,
// (index == 1 || index == 2) ? styles.se_thr_width : '',
// index == 3 ? styles.four_width : '',
// index == topActiveIndex ? styles.top_inner_act : ''
// ]}>
// <Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>
// {item.title}
// </Text>
// </View>
// </TouchableOpacity>
// )
// }
// </ScrollView>
// </View>
) )
} }
// 返回底部主要元素 // 返回底部主要元素
renderContItem() { renderContItem() {
let {topProcOptionList, topActiveIndex} = this.state let {topProcOptionList, topActiveIndex} = this.state
// let curData = topProcOptionList[topActiveIndex]
// console.log('curData---', topProcOptionList, topActiveIndex)
// // 本地测试数据
// let localBottomContData = []
// if(curData && curData.localBottomContData) {
// localBottomContData = curData.localBottomContData
// }
let {modelOption} = this.props
let curData = topProcOptionList[topActiveIndex] let curData = topProcOptionList[topActiveIndex]
// 本地测试数据 console.log('已选展示信息 === curData---', topProcOptionList, topActiveIndex, curData)
let localBottomContData = curData.localBottomContData let localBottomContData = []
if(curData && curData[SELECTED_DATA_ARR]){
localBottomContData = curData[SELECTED_DATA_ARR]
}
console.log('已选展示信息---',curData,topActiveIndex, localBottomContData)
return( return(
<View style={styles.edit_cont}> <View style={styles.edit_cont}>
...@@ -265,13 +414,16 @@ class ProductModel extends Component { ...@@ -265,13 +414,16 @@ class ProductModel extends Component {
<PicTitDetaiCalcu <PicTitDetaiCalcu
listItem={item} listItem={item}
listIndex={index} listIndex={index}
calField={'quantity'} calField={DEFAULT_FIELD}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'localBottomContData')} // subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'localBottomContData')}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index)}
titText={'title'} titText={'title'}
tipTextOne={'tip1'} // tipTextOne={'tip1'}
tipTextTwo={'tip2'} // tipTextTwo={'tip2'}
listImgIcon={'imgIcon'} listImgIcon={'imgIcon'}
listPicType={'SQUARE'} listPicType={'SQUARE'}
listStyleImg={styles.list_icon}
listStyleTit={styles.list_tit}
/> />
...@@ -315,7 +467,16 @@ class ProductModel extends Component { ...@@ -315,7 +467,16 @@ class ProductModel extends Component {
// 返回底部按钮 // 返回底部按钮
renderFooterBtnItem() { renderFooterBtnItem() {
// let { selectShowPopup } = this.state let {topProcOptionList, selectShowPopup} = this.state
let allCountQuantity = 0
topProcOptionList.map(proItem => {
if(!proItem[SELECTED_QUQNTITY]){
proItem[SELECTED_QUQNTITY] = 0
}
allCountQuantity += proItem[SELECTED_QUQNTITY]
})
return ( return (
<View style={list_common_item.sub_box}> <View style={list_common_item.sub_box}>
{/* <FooterBtnStyle {/* <FooterBtnStyle
...@@ -338,7 +499,7 @@ class ProductModel extends Component { ...@@ -338,7 +499,7 @@ class ProductModel extends Component {
style={list_common_item.lef_btn} style={list_common_item.lef_btn}
onPress={() => this.handleCloseSelected()} onPress={() => this.handleCloseSelected()}
> >
<Text style={list_common_item.lef_tip}>{'共计已选：666'}</Text> <Text style={list_common_item.lef_tip}>{'已选：'}{allCountQuantity}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={.8}
...@@ -357,6 +518,7 @@ class ProductModel extends Component { ...@@ -357,6 +518,7 @@ class ProductModel extends Component {
<View style={styles.opt_area}> <View style={styles.opt_area}>
<View style={styles.modal_style}> <View style={styles.modal_style}>
<View style={styles.scro_box}> <View style={styles.scro_box}>
{this.renderRubbish()}
{this.renderTopProItem()} {this.renderTopProItem()}
{this.renderContItem()} {this.renderContItem()}
{/* {this.renderFooterBtnItem()} */} {/* {this.renderFooterBtnItem()} */}
...@@ -368,17 +530,18 @@ class ProductModel extends Component { ...@@ -368,17 +530,18 @@ class ProductModel extends Component {
} }
render() { render() {
// console.log('已选----', this.state.isVisible)
return ( return (
<View style={styles.dia_container}> <View style={styles.dia_container}>
<Modal <Modal
transparent={true} transparent={true}
visible={this.state.isVisible} visible={!!this.state.isVisible}
animationType={'fade'} animationType={'fade'}
onRequestClose={() => this.closeModal()}> onRequestClose={() => this.closeModal()}>
<SafeAreaView style={safe_view}> <SafeAreaView style={safe_view}>
<TouchableOpacity style={styles.container} activeOpacity={1} <TouchableOpacity style={styles.container} activeOpacity={1}
// onPress={() => this.closeModal()} // onPress={() => this.closeModal()}
> >
{this.renderDialog()} {this.renderDialog()}
</TouchableOpacity> </TouchableOpacity>
</SafeAreaView> </SafeAreaView>
...@@ -412,7 +575,9 @@ const styles = StyleSheet.create({ ...@@ -412,7 +575,9 @@ const styles = StyleSheet.create({
backgroundColor: '#ffffff', backgroundColor: '#ffffff',
borderTopLeftRadius: 12, borderTopLeftRadius: 12,
borderTopRightRadius: 12, borderTopRightRadius: 12,
height: pxHeight(580) height: pxHeight(580),
// maxHeight: pxHeight(580),
// minHeight: pxHeight(360)
}, },
// item: { // item: {
// width: Width(), // width: Width(),
...@@ -446,31 +611,33 @@ const styles = StyleSheet.create({ ...@@ -446,31 +611,33 @@ const styles = StyleSheet.create({
top_inner: { top_inner: {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginRight: 14, marginRight: 10,
borderBottomWidth: 2, borderBottomWidth: 2,
borderBottomColor: foundation_color, borderBottomColor: foundation_color,
minWidth: 50, minWidth: 45,
},
se_thr_width: {
minWidth: 42
},
four_width: {
minWidth: 28
}, },
// se_thr_width: {
// minWidth: 42
// },
// four_width: {
// minWidth: 28
// },
top_inner_act: { top_inner_act: {
borderBottomWidth: 2, borderBottomWidth: 2,
borderBottomColor: promary_color borderBottomColor: promary_color
}, },
top_tit: { top_tit: {
paddingTop: 16, paddingTop: 10,
paddingBottom: 12, paddingBottom: 10,
color: second_text_color, color: second_text_color,
// fontSize: third_text_size fontSize: third_text_size
fontSize: 14 // fontSize: 12
}, },
top_tit_act: { top_tit_act: {
color: first_text_color, color: first_text_color,
fontWeight: 'bold' fontFamily: font_family_medium,
fontSize: 12
// fontWeight: 'bold'
}, },
edit_cont: { edit_cont: {
// height: pxHeight(430) // height: pxHeight(430)
...@@ -483,6 +650,14 @@ const styles = StyleSheet.create({ ...@@ -483,6 +650,14 @@ const styles = StyleSheet.create({
column_container: { column_container: {
paddingHorizontal: 14 paddingHorizontal: 14
}, },
list_icon: {
width: pxSize(42),
height: pxSize(42),
marginRight: 10
},
list_tit: {
fontSize: 14
},
ri_inner: { ri_inner: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
...@@ -546,6 +721,27 @@ const styles = StyleSheet.create({ ...@@ -546,6 +721,27 @@ const styles = StyleSheet.create({
minWidth: pxSize(20), minWidth: pxSize(20),
textAlign: 'center' textAlign: 'center'
}, },
rb_top_cont:{
paddingHorizontal: 16,
paddingTop: 16,
alignItems: 'flex-end',
// backgroundColor: 'red'
},
rb_top_inner: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 4
},
rb_icon: {
width: pxSize(16),
height: pxSize(16)
},
rb_icon_txt: {
fontSize: 12,
fontFamily: font_family_light,
paddingLeft: 4
}
// sub_box: { // sub_box: {
// width: Width(), // width: Width(),
// backgroundColor: dis_sub_color, // backgroundColor: dis_sub_color,
......
app/containers/common/listDataComponent/ChooseCardList.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { StyleSheet, Image, Text, TouchableOpacity, View, ScrollView } from 'react-native'; 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'; import { first_text_color, font_family_light, font_family_regular, font_family_semibold, foundation_color, home_background_color, icon_style, point_color, promary_color, pxSize, second_text_color, second_text_size, third_text_color, third_text_size, title_text_color, Width } from '../../../base/BaseStyle';
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
import PictureZoom from '../../common/listDataComponent/PictureZoom'; import PictureZoom from '../../common/listDataComponent/PictureZoom';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu'; import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
...@@ -32,7 +32,16 @@ class ChooseCardList extends Component { ...@@ -32,7 +32,16 @@ class ChooseCardList extends Component {
cardItemName: PropTypes.string, cardItemName: PropTypes.string,
cardCallBack: PropTypes.func, cardCallBack: PropTypes.func,
curActIndex: PropTypes.number curActIndex: PropTypes.number,
cardIsCount: PropTypes.bool, // 显示计数
cardCountName: PropTypes.string, // 显示计数字段
cardStyleType: PropTypes.object, // 计数样式
cardCountArray: PropTypes.array, // 已选数组
// cardListOptions: [ // cardListOptions: [
...@@ -53,23 +62,32 @@ class ChooseCardList extends Component { ...@@ -53,23 +62,32 @@ class ChooseCardList extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
curActIndex: 0 countStyleType: ['DEFAULT', 'GRAPHICS'],
countStyleName: ['card_default', 'card_graphice']
// curActIndex: 0
} }
} }
// 点击当前选项 // 点击当前选项
handleCheckTit(item, index) { // handleCheckTit(item, index) {
console.log('item, index----', item, index) // console.log('item, index----', item, index)
this.state = { // // this.state = {
curActIndex: index // // // curActIndex: index
} // // }
this.props.cardCallBack(item, index) // this.props.cardCallBack(item, index)
} // }
render() { render() {
let {cardScrollEnabled, cardHorizontal, cardShowsHorizontalScrollIndicator, cardShowsVerticalScrollIndicator, cardStyleBox, cardStyleScroll, cardListOptions, cardItemTitle, cardItemIcon, cardImgName, cardItemName, let {cardScrollEnabled, cardHorizontal, cardShowsHorizontalScrollIndicator, cardShowsVerticalScrollIndicator, cardStyleBox, cardStyleScroll, cardListOptions, cardItemTitle, cardItemIcon, cardImgName, cardItemName,
cardStyleListItem, cardStyleListItemAct, cardStyleItemIcon, cardStyleItemTit, cardStyleNotIconTit, cardStyleItemTitAct, cardCallBack, curActIndex, ...props} = this.props cardStyleListItem, cardStyleListItemAct, cardStyleItemIcon, cardStyleItemTit, cardStyleNotIconTit, cardStyleItemTitAct, cardCallBack, curActIndex, cardIsCount, cardCountName, cardStyleCount, cardStyleType, cardCountArray, ...props} = this.props
// let {curActIndex} = this.state
let {countStyleType, countStyleName} = this.state
// let count_style = ''
// if(countStyleType.includes(cardStyleType)){
// count_style = countStyleName[countStyleType.indexOf(cardStyleType)]
// }
let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据 let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据
cardListOptions[cardImgName] = localTestImageUrls // 本地测试 cardListOptions[cardImgName] = localTestImageUrls // 本地测试
...@@ -90,12 +108,8 @@ class ChooseCardList extends Component { ...@@ -90,12 +108,8 @@ class ChooseCardList extends Component {
showsVerticalScrollIndicator={!!cardShowsVerticalScrollIndicator} showsVerticalScrollIndicator={!!cardShowsVerticalScrollIndicator}
style={[styles.card_scroll_box,cardStyleScroll]} style={[styles.card_scroll_box,cardStyleScroll]}
> >
{ cardListOptions.map((item, index) => { cardListOptions.map((item, index) =>
<View style={styles.card_list_box}> <View style={styles.card_list_box}>
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={.8}
style={styles.list_touch_cont} style={styles.list_touch_cont}
...@@ -105,54 +119,23 @@ class ChooseCardList extends Component { ...@@ -105,54 +119,23 @@ class ChooseCardList extends Component {
{ item[cardItemIcon] ? <View style={[styles.item_icon_def, cardStyleItemIcon]}> { item[cardItemIcon] ? <View style={[styles.item_icon_def, cardStyleItemIcon]}>
<Image source={item[cardItemIcon]} style={icon_style}/> <Image source={item[cardItemIcon]} style={icon_style}/>
</View> : null } </View> : null }
<Text style={[styles.list_item_tit, cardStyleItemTit, item[cardItemIcon] ? '' : cardStyleNotIconTit, index == curActIndex ? [styles.list_tit_act, cardStyleItemTitAct] : '']}>{item[cardItemTitle]}</Text> <Text numberOfLines={2} style={[styles.list_item_tit, cardStyleItemTit, item[cardItemIcon] ? '' : cardStyleNotIconTit, index == curActIndex ? [styles.list_tit_act, cardStyleItemTitAct] : '']}>
{item[cardItemTitle]}
{ (item[cardCountName] && countStyleType[0] === cardStyleType) ? <Text style={styles.sum_def}>({item[cardCountName]})</Text> : null }
</Text>
</View> </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> </TouchableOpacity>
{ (item[cardCountName] && countStyleType[1] === cardStyleType) ? <View style={styles.card_def_count}>
{/* <View {...props} /> */} <Text style={styles.def_count_txt}>{item[cardCountName]}</Text>
</View> : null}
{/* { (!!cardIsCount && item[cardCountArray].length) ? <View style={styles.card_def_count}>
{/* <Text style={styles.def_count_txt}>{item[cardCountArray].length}</Text>
<TouchableOpacity </View> : null} */}
// 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>
) )
} }
{/* <View {...this.props}> </View> */}
</ScrollView> </ScrollView>
</View> </View>
...@@ -162,24 +145,15 @@ class ChooseCardList extends Component { ...@@ -162,24 +145,15 @@ class ChooseCardList extends Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card_container: {}, card_container: {},
card_scroll_box: { card_scroll_box: {},
// width: Width()
},
card_list_box: { card_list_box: {
// flexDirection: 'row', position: 'relative'
// justifyContent: 'space-between',
// alignItems: 'center',
}, },
list_touch_cont: {}, list_touch_cont: {},
item_icon_def: { item_icon_def: {
width: pxSize(36), width: pxSize(36),
height: pxSize(36) height: pxSize(36)
}, },
// thr_head_tit_img: {
// borderWidth: .5,
// borderColor: 'rgba(0, 0, 0, 0.12)',
// marginBottom: 10
// },
list_item_inner: { list_item_inner: {
alignItems: 'center', alignItems: 'center',
marginRight: 14, marginRight: 14,
...@@ -202,6 +176,22 @@ const styles = StyleSheet.create({ ...@@ -202,6 +176,22 @@ const styles = StyleSheet.create({
color: first_text_color, color: first_text_color,
fontSize: 14, fontSize: 14,
fontFamily: font_family_semibold fontFamily: font_family_semibold
},
card_def_count: {
position: 'absolute',
right: 1,
top: 1,
backgroundColor: point_color,
borderRadius: 50,
},
def_count_txt: {
fontSize: 10,
color: title_text_color,
minWidth: 14,
textAlign: 'center'
},
sum_def: {
fontSize: 10
} }
}) })
......
app/containers/common/listDataComponent/PicTitDetaiCalcu.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { StyleSheet, Image, Text, TouchableOpacity, View } from 'react-native'; import { StyleSheet, Image, Text, TouchableOpacity, View } from 'react-native';
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'; import { first_text_color, font_family_light, font_family_medium, font_family_regular, font_family_semibold, home_background_color, icon_style, promary_text_color, pxSize, second_text_size, third_text_color, third_text_size } from '../../../base/BaseStyle';
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
class PicTitDetaiCalcu extends Component { class PicTitDetaiCalcu extends Component {
...@@ -18,9 +18,13 @@ class PicTitDetaiCalcu extends Component { ...@@ -18,9 +18,13 @@ class PicTitDetaiCalcu extends Component {
titCallBack: PropTypes.func, // 标题回调函数 titCallBack: PropTypes.func, // 标题回调函数
titText: PropTypes.string, // 标题 titText: PropTypes.string, // 标题
tipTextStr: PropTypes.string, tipTextStr: PropTypes.string,
tipTextStrTit: PropTypes.string,
tipTextOne: PropTypes.string, tipTextOne: PropTypes.string,
tipTextOneTit: PropTypes.string,
tipTextTwo: PropTypes.string, tipTextTwo: PropTypes.string,
tipTextTwoTit: PropTypes.string,
listImgIcon: PropTypes.string, listImgIcon: PropTypes.string,
listStyleImg: PropTypes.objec
} }
constructor(props) { constructor(props) {
...@@ -54,7 +58,7 @@ class PicTitDetaiCalcu extends Component { ...@@ -54,7 +58,7 @@ class PicTitDetaiCalcu extends Component {
} }
render() { render() {
let {listItem, listIndex, calField, listStyleBox, listStyleTit, listStyleTip, listStyleCalBtn, listPicType, titCallBack,titText, tipTextStr, tipTextOne, tipTextTwo, listImgIcon} = this.props let {listItem, listIndex, calField, listStyleBox, listStyleTit, listStyleTip, listStyleCalBtn, listPicType, titCallBack,titText, tipTextStr, tipTextOne, tipTextTwo, listImgIcon, listStyleImg} = this.props
let {listPicTypeArr, picStyleArr} = this.state let {listPicTypeArr, picStyleArr} = this.state
let picOthStyle = '' let picOthStyle = ''
if(listPicTypeArr.indexOf(listPicType) > -1){ if(listPicTypeArr.indexOf(listPicType) > -1){
...@@ -71,7 +75,7 @@ class PicTitDetaiCalcu extends Component { ...@@ -71,7 +75,7 @@ class PicTitDetaiCalcu extends Component {
return ( return (
<View style={[styles.ri_inner, listStyleBox]}> <View style={[styles.ri_inner, listStyleBox]}>
{ listImgIcon ? { listImgIcon ?
<View style={[styles.oth_img_box, styles[picOthStyle]]}> <View style={[styles.oth_img_box, styles[picOthStyle], listStyleImg]}>
<Image style={icon_style} source={listItem.imgIcon}/> <Image style={icon_style} source={listItem.imgIcon}/>
</View> : null } </View> : null }
<View style={styles.ri_text_box}> <View style={styles.ri_text_box}>
...@@ -121,8 +125,8 @@ const styles = StyleSheet.create({ ...@@ -121,8 +125,8 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingTop: 12, paddingTop: 16,
paddingBottom: 6, paddingBottom: 12,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: 'rgba(241, 241, 241, 0.87)' borderColor: 'rgba(241, 241, 241, 0.87)'
}, },
...@@ -130,22 +134,25 @@ const styles = StyleSheet.create({ ...@@ -130,22 +134,25 @@ const styles = StyleSheet.create({
flex: 1 flex: 1
}, },
ri_te_ot: { ri_te_ot: {
fontSize: 12, fontSize: third_text_size,
color: third_text_color, color: third_text_color,
fontFamily: font_family_light fontFamily: font_family_regular
}, },
ri_img_box: { // ri_img_box: {
width: 18, // width: 18,
height: 18 // height: 18
// },
oth_box: {
paddingBottom: 2
}, },
thr_ot: { thr_ot: {
fontFamily: font_family_regular, fontFamily: font_family_medium,
fontSize: second_text_size, fontSize: second_text_size,
color: first_text_color color: 'rgba(0, 0, 0, 0.87)'
}, },
te_ot_str: { te_ot_str: {
fontFamily: font_family_semibold, fontFamily: font_family_semibold,
color: first_text_color color: 'rgba(58, 58, 58, 100)'
}, },
oth_img_box: { oth_img_box: {
width: pxSize(58), width: pxSize(58),
......
app/containers/selfOrder/module/ChooseProductPage.js
...@@ -42,6 +42,10 @@ import localMockData from './mock/sen_mock'; ...@@ -42,6 +42,10 @@ import localMockData from './mock/sen_mock';
// import TopTabBar from './customTabbar/TopTabBar'; // import TopTabBar from './customTabbar/TopTabBar';
// import LeftTabBar from './customTabbar/LeftTabBar'; // import LeftTabBar from './customTabbar/LeftTabBar';
const SELECTED_QUQNTITY = 'selectedQuantity' // 中类数量
const SELECTED_DATA_ARR = 'selectedDataArr' // 中类已选元素
const DEFAULT_SECOND_DATA = 'localSecondData' // 中类原本元素
class ChooseProductPage extends Component { class ChooseProductPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -54,6 +58,10 @@ class ChooseProductPage extends Component { ...@@ -54,6 +58,10 @@ class ChooseProductPage extends Component {
leftOptionList: [], // 左侧分类数据 leftOptionList: [], // 左侧分类数据
defaultThridShow: false, // 默认人体髋关节-小类不显示 defaultThridShow: false, // 默认人体髋关节-小类不显示
selectShowPopup: false, // 共计已选弹窗 selectShowPopup: false, // 共计已选弹窗
// SELECTED_QUQNTITY: 'selectedQuantity', // 中类数量
// SELECTED_DATA_ARR: 'selectedDataArr', // 中类已选元素
// DEFAULT_SECOND_DATA: 'localSecondData', // 中类原本元素
allCountQuantity: 0
} }
} }
...@@ -80,7 +88,9 @@ class ChooseProductPage extends Component { ...@@ -80,7 +88,9 @@ class ChooseProductPage extends Component {
let {leftOptionList} = this.state let {leftOptionList} = this.state
this.setState({ this.setState({
leftActiveIndex: index, leftActiveIndex: index,
rightSecondData: leftOptionList[index].localSecondData // 本地数据
rightSecondData: leftOptionList[index][DEFAULT_SECOND_DATA] // 本地数据
// rightSecondData: leftOptionList[index].localSecondData // 本地数据
}) })
} }
...@@ -91,8 +101,46 @@ class ChooseProductPage extends Component { ...@@ -91,8 +101,46 @@ class ChooseProductPage extends Component {
}) })
} }
// 计算中级数量
handleChangeCount(count, coutFieName) {
let {leftActiveIndex, leftOptionList, allCountQuantity, defaultThridShow, rightSecondData} = this.state
console.log('计算中级数量===', count, leftActiveIndex, defaultThridShow, rightSecondData, coutFieName)
// leftOptionList[leftActiveIndex][SELECTED_QUQNTITY] = count
allCountQuantity = 0 // 初始化
leftOptionList[leftActiveIndex][SELECTED_DATA_ARR] = []
leftOptionList.map(function(leItem, leIndex) {
if(!leItem[SELECTED_QUQNTITY]){
leItem[SELECTED_QUQNTITY] = 0
}
if(!leItem[SELECTED_DATA_ARR]){
leItem[SELECTED_DATA_ARR] = []
}
if(leIndex === leftActiveIndex) {
// 当前选择项
leItem[SELECTED_QUQNTITY] = count
if(leItem[DEFAULT_SECOND_DATA].length){ // 本地测试 localSecondData DEFAULT_SECOND_DATA
leItem[DEFAULT_SECOND_DATA].forEach(function(chItem) {
if(chItem[coutFieName]){
leItem[SELECTED_DATA_ARR].push(chItem)
}
})
}
}
allCountQuantity += leItem[SELECTED_QUQNTITY]
// allCountQuantity += leItem[SELECTED_DATA_ARR].length
})
console.log('allCountQuantity---', allCountQuantity, leftOptionList)
this.setState({
leftOptionList,
allCountQuantity
})
}
// 共计已选弹窗 // 共计已选弹窗
handleCloseSelectModal(show) { handleCloseSelectModal(show) {
console.warn('修改共计已选', show)
this.setState({ this.setState({
selectShowPopup: show selectShowPopup: show
}) })
...@@ -100,17 +148,25 @@ class ChooseProductPage extends Component { ...@@ -100,17 +148,25 @@ class ChooseProductPage extends Component {
// 点击共计已选 // 点击共计已选
handleSubSelected(show) { handleSubSelected(show) {
console.warn('共计已选：666') // console.log('show-----', show)
this.handleCloseSelectModal(!show) this.handleCloseSelectModal(!show)
} }
// 点击选好了 // 点击选好了
handleSubmit(show) { handleSubmit() {
console.warn('选好了', this.props.navigation.navigate) console.warn('选好了', this.props.navigation.navigate)
this.handleCloseSelectModal(false) this.handleCloseSelectModal(false)
console.warn('携带数据，返回到自助下单') console.warn('携带数据，返回到自助下单')
} }
// 已选修改回调
handleSelectCallBack(options) {
console.log('--已选修改回调--', options)
this.setState({
leftOptionList: options
})
}
// 返回搜索元素 // 返回搜索元素
renderSearchItem() { renderSearchItem() {
return ( return (
...@@ -198,6 +254,10 @@ class ChooseProductPage extends Component { ...@@ -198,6 +254,10 @@ class ChooseProductPage extends Component {
cardItemIcon={'iconImg'} cardItemIcon={'iconImg'}
curActIndex={leftActiveIndex} curActIndex={leftActiveIndex}
cardCallBack={(item, index) => this.handleLeftNav(item, index)} cardCallBack={(item, index) => this.handleLeftNav(item, index)}
// cardIsCount={true}
// cardCountArray={SELECTED_DATA_ARR}
cardCountName={SELECTED_QUQNTITY}
cardStyleType={'GRAPHICS'}
/> />
// <View style={styles.cont_left_box}> // <View style={styles.cont_left_box}>
...@@ -236,7 +296,15 @@ class ChooseProductPage extends Component { ...@@ -236,7 +296,15 @@ class ChooseProductPage extends Component {
// 返回右侧二级元素 // 返回右侧二级元素
renderContItem() { renderContItem() {
let { leftActiveIndex, defaultThridShow, rightSecondData } = this.state let { leftOptionList, leftActiveIndex, defaultThridShow, rightSecondData } = this.state
let curRigSecoOption = []
if(leftOptionList[leftActiveIndex]){
curRigSecoOption = leftOptionList[leftActiveIndex][DEFAULT_SECOND_DATA] // 本地数据
}
console.log('-返回右侧二级元素--curRigSecoOption', curRigSecoOption)
return ( return (
<View style={styles.cont_bom_box}> <View style={styles.cont_bom_box}>
{ this.renderContLeftItem() } { this.renderContLeftItem() }
...@@ -247,7 +315,9 @@ class ChooseProductPage extends Component { ...@@ -247,7 +315,9 @@ class ChooseProductPage extends Component {
superIndex={leftActiveIndex} superIndex={leftActiveIndex}
defaultThridShow={defaultThridShow} defaultThridShow={defaultThridShow}
changeThrShow={(defaultThridShow) => this.handleChangeThrShow(defaultThridShow)} changeThrShow={(defaultThridShow) => this.handleChangeThrShow(defaultThridShow)}
superStencilData={rightSecondData} // superStencilData={rightSecondData}
superStencilData={curRigSecoOption}
superCallBack={(count, coutFieName) => this.handleChangeCount(count, coutFieName)}
/> />
</View> </View>
) )
...@@ -255,7 +325,17 @@ class ChooseProductPage extends Component { ...@@ -255,7 +325,17 @@ class ChooseProductPage extends Component {
// 返回底部按钮 // 返回底部按钮
renderFooterBtnItem() { renderFooterBtnItem() {
let { selectShowPopup } = this.state let {selectShowPopup, leftOptionList} = this.state
let allCountQuantity = 0
leftOptionList.map(leItem => {
if(!leItem[SELECTED_QUQNTITY]){
leItem[SELECTED_QUQNTITY] = 0
}
allCountQuantity += leItem[SELECTED_QUQNTITY]
})
// console.log('返回底部按钮----', selectShowPopup)
return ( return (
<View style={list_common_item.sub_box}> <View style={list_common_item.sub_box}>
{/* <FooterBtnStyle {/* <FooterBtnStyle
...@@ -279,22 +359,25 @@ class ChooseProductPage extends Component { ...@@ -279,22 +359,25 @@ class ChooseProductPage extends Component {
style={list_common_item.lef_btn} style={list_common_item.lef_btn}
onPress={() => this.handleSubSelected(selectShowPopup)} onPress={() => this.handleSubSelected(selectShowPopup)}
> >
<Text style={list_common_item.lef_tip}>{'共计已选：666'}</Text> <Text style={list_common_item.lef_tip}>{'已选：'}{allCountQuantity}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
activeOpacity={.8} activeOpacity={.8}
style={list_common_item.rig_btn} style={list_common_item.rig_btn}
onPress={() => this.handleSubmit(selectShowPopup)} onPress={() => this.handleSubmit()}
> >
<Text style={list_common_item.rig_tip}>{'选好了'}</Text> <Text style={list_common_item.rig_tip}>{'选好了'}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<ProductModel <ProductModel
// modelShow={selectShowPopup}
show={ selectShowPopup } show={ selectShowPopup }
closeModal={(show) => this.handleCloseSelectModal(show)} closeModal={(show) => this.handleCloseSelectModal(show)}
closeSelected={(show) => this.handleSubSelected(show)} // closeSelected={(show) => this.handleSubSelected(show)}
closeSubmit={(show) => this.handleSubmit(show)} closeSubmit={() => this.handleSubmit()}
modelOption={leftOptionList}
modelCallBack={(options) => this.handleSelectCallBack(options)}
/> />
</View> </View>
) )
...@@ -429,7 +512,7 @@ const styles = StyleSheet.create({ ...@@ -429,7 +512,7 @@ const styles = StyleSheet.create({
}, },
cont_left_inner: { cont_left_inner: {
flexDirection: 'row', flexDirection: 'row',
height: 52, height: 58,
justifyContent: 'flex-start', justifyContent: 'flex-start',
// justifyContent: 'center', // justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
...@@ -460,7 +543,7 @@ const styles = StyleSheet.create({ ...@@ -460,7 +543,7 @@ const styles = StyleSheet.create({
}, },
cont_left_noicon: { cont_left_noicon: {
textAlign: 'center', textAlign: 'center',
paddingHorizontal: 10 paddingHorizontal: 14
}, },
cont_left_tit_act: { cont_left_tit_act: {
// color: first_text_color, // color: first_text_color,
......
app/containers/selfOrder/module/ProductRightStyle.js
...@@ -25,10 +25,15 @@ import { ...@@ -25,10 +25,15 @@ import {
import ShowModel from '../../common/ShowModel'; import ShowModel from '../../common/ShowModel';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu'; import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
import PictureZoom from '../../common/listDataComponent/PictureZoom'; import PictureZoom from '../../common/listDataComponent/PictureZoom';
const PropTypes = require('prop-types');
import localMockData from './mock/sen_mock'; import localMockData from './mock/sen_mock';
class ProductRightStyle extends Component { class ProductRightStyle extends Component {
static propTypres = {
superCallBack: PropTypes.func, // 回调计算函数
}
constructor (props) { constructor (props) {
super(props) super(props)
this.state = { this.state = {
...@@ -38,6 +43,10 @@ class ProductRightStyle extends Component { ...@@ -38,6 +43,10 @@ class ProductRightStyle extends Component {
singleHeadData: [], // 人工髋关节假体等数据 -- 大类 singleHeadData: [], // 人工髋关节假体等数据 -- 大类
rowSingleData: [], // 人工髋关节假体等数据 -- 小类 rowSingleData: [], // 人工髋关节假体等数据 -- 小类
thridIsVisible: false, // 小类展示 thridIsVisible: false, // 小类展示
curThridObj: {
title: '测试标题__',
image: ''
}
} }
} }
...@@ -54,33 +63,33 @@ class ProductRightStyle extends Component { ...@@ -54,33 +63,33 @@ class ProductRightStyle extends Component {
if (this.state.thridIsVisible != nextProps.defaultThridShow) { if (this.state.thridIsVisible != nextProps.defaultThridShow) {
this.setState({thridIsVisible: nextProps.defaultThridShow}); this.setState({thridIsVisible: nextProps.defaultThridShow});
} }
if (this.state.rightSecondData != nextProps.superStencilData) { if (nextProps.superStencilData) {
this.setState({rightSecondData: nextProps.superStencilData}); this.setState({rightSecondData: nextProps.superStencilData});
} }
} }
// 点击模板选中 -- 之前版本 // 点击模板选中 -- 之前版本
handleItemStencil(item, index) { handleItemStencil(item, index) {
console.warn('xuanze', index, item) // console.warn('xuanze', index, item)
let { rightSecondData, selectItem } = this.state // let { rightSecondData, selectItem } = this.state
let { select, id } = item // let { select, id } = item
console.warn(selectItem) // console.warn(selectItem)
console.warn(selectItem, rightSecondData[id]) // console.warn(selectItem, rightSecondData[id])
if (select) { // if (select) {
// 前一次是true，当前变成未选中 // // 前一次是true，当前变成未选中
selectItem.splice(selectItem.findIndex(function (x) { // selectItem.splice(selectItem.findIndex(function (x) {
return x === id; // return x === id;
}), 1); // }), 1);
} else { // } else {
selectItem.push(id); // selectItem.push(id);
// 跳转到新页面 // // 跳转到新页面
// console.warn('-----navigation', this.props.navigation.navigate) // // console.warn('-----navigation', this.props.navigation.navigate)
// this.props.navigation.navigate('EditThirdLevelPage') // // this.props.navigation.navigate('EditThirdLevelPage')
} // }
console.warn(select, rightSecondData[id].select) // console.warn(select, rightSecondData[id].select)
rightSecondData[id].select = !select; // rightSecondData[id].select = !select;
this.setState({ rightSecondData }) // this.setState({ rightSecondData })
this.handleRIghtStencil() // this.handleRIghtStencil()
} }
handleRIghtStencil() { handleRIghtStencil() {
...@@ -95,7 +104,7 @@ class ProductRightStyle extends Component { ...@@ -95,7 +104,7 @@ class ProductRightStyle extends Component {
if(superIndex >= 0 && superIndex < 4) { if(superIndex >= 0 && superIndex < 4) {
this.props.navigation.navigate('EditThirdLevelPage', {title: '选择产品 - 编辑模板'}) this.props.navigation.navigate('EditThirdLevelPage', {title: '选择产品 - 编辑模板'})
}else { }else {
this.changeThrShow(true) this.changeThrShow(true, item.title)
} }
// else if ( superIndex > 0 && superIndex < 4) { // else if ( superIndex > 0 && superIndex < 4) {
// this.handleIsShowDialog() // -- 之前版本 // this.handleIsShowDialog() // -- 之前版本
...@@ -119,9 +128,14 @@ class ProductRightStyle extends Component { ...@@ -119,9 +128,14 @@ class ProductRightStyle extends Component {
// } // }
// 修改当前小类是否展示 // 修改当前小类是否展示
changeThrShow(show) { changeThrShow(show, curTitle) {
let {curThridObj} = this.state
if(curTitle) {
curThridObj.title = curTitle
}
this.setState({ this.setState({
thridIsVisible: show thridIsVisible: show,
curThridObj
}) })
// this.props.changeThrShow(show) ============???? // this.props.changeThrShow(show) ============????
} }
...@@ -152,6 +166,8 @@ class ProductRightStyle extends Component { ...@@ -152,6 +166,8 @@ class ProductRightStyle extends Component {
this.setState({ this.setState({
singleHeadData singleHeadData
}) })
console.log('计算==单选耗材行数据===', item, index, rowSingleData)
} }
// 单选耗材 - 行数据 // 单选耗材 - 行数据
...@@ -161,84 +177,53 @@ class ProductRightStyle extends Component { ...@@ -161,84 +177,53 @@ class ProductRightStyle extends Component {
this.setState({ this.setState({
rowSingleData rowSingleData
}) })
console.log('计算==单选耗材行数据===', item, index, rowSingleData)
} }
// 修改列表计算后数据 - 头/行 // 修改列表计算后数据 - 头/行
handleCalCallBack(item, index, dataName){ handleCalCallBack(item, index, dataName, coutFieName){
if(dataName && this.state[dataName]) { if(dataName && this.state[dataName]) {
let curDataName = this.state[dataName] let curDataName = this.state[dataName]
curDataName[index] = item curDataName[index] = item
this.setState({ this.setState({
[dataName]: curDataName [dataName]: curDataName
}) })
console.log('计算==头/行===', index, dataName, curDataName)
if(coutFieName) {
let tempCount = 0
curDataName.map(item => {
if(item[coutFieName]){
tempCount += Number(item[coutFieName])
}
})
console.log('计算==数量汇总=字段=', coutFieName, tempCount)
this.props.superCallBack(tempCount, coutFieName)
}
} }
} }
// 返回右侧二级每一列（单选耗材以上） // 返回右侧二级每一列（单选耗材以上）
renderSecondtem(item, index) { renderSecondtem(item, index) {
let { toolShowPopup } = this.state // let { toolShowPopup } = this.state
let curCalField = 'quantity'
return ( return (
<SafeAreaView style={styles.ri_container}> <SafeAreaView style={styles.ri_container}>
<PicTitDetaiCalcu <PicTitDetaiCalcu
listItem={item} listItem={item}
listIndex={index} listIndex={index}
calField={'quantity'} calField={curCalField}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'rightSecondData')} subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'rightSecondData', curCalField)}
titCallBack={(item,index) => this.TitleClickEvent(item,index)} titCallBack={(item,index) => this.TitleClickEvent(item,index)}
titText={'title'} titText={'title'}
tipTextOne={'tip1'} tipTextOne={'tip1'}
tipTextTwo={'tip2'} tipTextTwo={'tip2'}
listImgIcon={'imgIcon'} listImgIcon={'imgIcon'}
listPicType={'SQUARE'} listPicType={'SQUARE'}
/> />
{/* <View style={styles.ri_inner}>
<TouchableOpacity
activeOpacity={.8}
onPress={() => this.TitleClickEvent(item, index)}
style={styles.ri_tou_box}
>
<View style={styles.ri_text_box}>
<Text style={styles.ri_te_tit}>
{item.select ? (item.title+"--选中") : (item.title+"--未选中")}
</Text>
<Text style={styles.ri_te_ot}>{item.tip1}</Text>
<Text style={styles.ri_te_ot}>{item.tip2}</Text>
</View>
</TouchableOpacity>
<View style={styles.ri_img_box}>
<TouchableOpacity
activeOpacity={.9}
onPress={() => this.handleItemStencil(item, index)}
>
{item.select ?
<Image
source={require('../../../images/cor_blue.png')}
style={icon_style}/>
:
<Image
source={require('../../../images/frame_icon.png')}
style={icon_style}/>
}
</TouchableOpacity>
</View>
</View>
<ShowModel
title={'通用螺钉盒'}
show={ toolShowPopup }
closeModal={(show) => this.handleCloseModal(show)}
>
<View style={styles.model_cont}>
<View style={styles.model_cont_inner}>
<Text style={styles.mo_cont_title}>螺钉数量统计信息如下：</Text>
<Text style={styles.mo_cont_tip}>HB6.5(全)区：6</Text>
<Text style={styles.mo_cont_tip}>HB6.5(全)区：6</Text>
<Text style={styles.mo_cont_tip}>HB6.5(全)区：6</Text>
</View>
<View style={styles.mo_img_box}>
<Image style={styles.mo_img} source={require('../../../images/model_test.png')}></Image>
</View>
</View>
</ShowModel> */}
</SafeAreaView> </SafeAreaView>
) )
} }
...@@ -260,13 +245,15 @@ class ProductRightStyle extends Component { ...@@ -260,13 +245,15 @@ class ProductRightStyle extends Component {
// 单选耗材 -- 小类每一列 // 单选耗材 -- 小类每一列
renderThridItem(item, index) { renderThridItem(item, index) {
let curCalField = 'quantity'
return ( return (
<SafeAreaView style={styles.thr_container}> <SafeAreaView style={styles.thr_container}>
<PicTitDetaiCalcu <PicTitDetaiCalcu
listItem={item} listItem={item}
listIndex={index} listIndex={index}
calField={'quantity'} calField={curCalField}
subCalCallBack={(item,index) => this.handleRowCalCallBack(item,index)} // subCalCallBack={(item,index) => this.handleRowCalCallBack(item,index)}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index, 'rowSingleData')}
titText={'title'} titText={'title'}
tipTextOne={'tip1'} tipTextOne={'tip1'}
tipTextTwo={'tip2'} tipTextTwo={'tip2'}
...@@ -292,14 +279,16 @@ class ProductRightStyle extends Component { ...@@ -292,14 +279,16 @@ class ProductRightStyle extends Component {
// 单选耗材 -- 大类每一列 // 单选耗材 -- 大类每一列
renderOtherListItem(item, index) { renderOtherListItem(item, index) {
let curCalField = 'quantity'
return ( return (
<SafeAreaView style={styles.oth_container}> <SafeAreaView style={styles.oth_container}>
<PicTitDetaiCalcu <PicTitDetaiCalcu
listItem={item} listItem={item}
listIndex={index} listIndex={index}
calField={'quantity'} calField={curCalField}
listPicType={'ROUND'} listPicType={'ROUND'}
subCalCallBack={(item,index) => this.handleHeadCalCallBack(item,index)} // subCalCallBack={(item,index) => this.handleHeadCalCallBack(item,index)}
subCalCallBack={(item,index) => this.handleCalCallBack(item, index, 'singleHeadData', curCalField)}
titCallBack={(item,index) => this.TitleClickEvent(item, index)} titCallBack={(item,index) => this.TitleClickEvent(item, index)}
titText={'title'} titText={'title'}
listImgIcon={'imgIcon'} listImgIcon={'imgIcon'}
...@@ -338,14 +327,15 @@ class ProductRightStyle extends Component { ...@@ -338,14 +327,15 @@ class ProductRightStyle extends Component {
} }
} }
// 返回右侧三级标题 // 返回右侧单选耗材 -- 三级顶部标题和图片
renderThrHeadStyle() { renderThrHeadStyle() {
let { thridIsVisible } = this.state let { thridIsVisible, curThridObj } = this.state
let testObj = {
title: '测试标题__',
image: require('../../../images/model_test.png')
}
let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据 let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据
// let testObj = {
// title: '测试标题__',
// image: localTestImageUrls
// }
curThridObj.image = localTestImageUrls
if (thridIsVisible) { if (thridIsVisible) {
return ( return (
...@@ -359,12 +349,12 @@ class ProductRightStyle extends Component { ...@@ -359,12 +349,12 @@ 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}>{ testObj.title }</Text> <Text style={styles.thr_head_tit}>{ curThridObj.title }</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<PictureZoom <PictureZoom
listImageIndex={0} listImageIndex={0}
listImageUrls={localTestImageUrls} listImageUrls={curThridObj.image}
listStyleImage={styles.thr_head_tit_img} listStyleImage={styles.thr_head_tit_img}
listPicType={'RECTANGLE'} listPicType={'RECTANGLE'}
/> />
......
app/containers/selfOrder/module/mock/sen_mock.js
...@@ -9,11 +9,11 @@ const localTopProcOption = [ ...@@ -9,11 +9,11 @@ const localTopProcOption = [
iconImg: require('../../../../images/cp_test_1.png') iconImg: require('../../../../images/cp_test_1.png')
}, },
{ {
title: '嘉思特22', title: '正天',
iconImg: require('../../../../images/cp_test_1.png') iconImg: require('../../../../images/cp_test_1.png')
}, },
{ {
title: '嘉思特33', title: '奥斯迈',
iconImg: require('../../../../images/cp_test_1.png') iconImg: require('../../../../images/cp_test_1.png')
}, },
{ {
...@@ -47,6 +47,123 @@ const localTestImageUrls = [{ ...@@ -47,6 +47,123 @@ const localTestImageUrls = [{
url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg' url: 'https://obs.uat.sfrx.guke.tech/jeecg-boot/sys/common/view/upload/dingding/image/8V4599aH.jpg'
}] }]
// 手术模板 -- 大类
const localSingleSeleHead_1 = [{
"id": "0",
title: '手术模板',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "1",
title: '内衬Harmony 28/10°OD（P 2',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "2",
title: '内衬Harmony 28/10°OD（P',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
}]
// 钉盒 -- 大类
const localSingleSeleHead_2 = [{
"id": "0",
title: '钉盒',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "1",
title: '内衬Harmony 28/10°OD（P 2',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "2",
title: '内衬Harmony 28/10°OD（P',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
}]
// 器械包 -- 大类
const localSingleSeleHead_3 = [{
"id": "0",
title: '器械包',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "1",
title: '内衬Harmony 28/10°OD（P 2',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "2",
title: '内衬Harmony 28/10°OD（P',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
}]
// 零散器械 -- 大类
const localSingleSeleHead_4 = [{
"id": "0",
title: '零散器械',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "1",
title: '内衬Harmony 28/10°OD（P 2',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
},
{
"id": "2",
title: '内衬Harmony 28/10°OD（P',
imgIcon: require('../../../../images/model_test.png'),
tip1: '创建人：金城武',
tip2: '创建时间：2020.03.01',
select: false,
quantity: 0
}]
// 人工髋关节假体等数据 -- 大类 // 人工髋关节假体等数据 -- 大类
const localSingleSeleHead = [{ const localSingleSeleHead = [{
"id": "0", "id": "0",
...@@ -185,218 +302,22 @@ const localLeftOption = [ ...@@ -185,218 +302,22 @@ const localLeftOption = [
{ {
title: '手术模板', title: '手术模板',
iconImg: require('../../../../images/surg_temp.png'), iconImg: require('../../../../images/surg_temp.png'),
localSecondData: localSingleSeleHead localSecondData: localSingleSeleHead_1
// [{ },
// "id": "0", {
// title: '髋关节手术001--------', title: '钉盒',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "1",
// title: '髋关节手术002',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "2",
// title: '髋关节手术003',
// tip1: '描述信息',
// tip2: '描述信息',
// select: true,
// quantity: 0
// },
// {
// "id": "3",
// title: '髋关节手术004',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "4",
// title: '髋关节手术005',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "5",
// title: '髋关节手术006',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// }
// ], // 模板数据
},
{
title: '螺钉盒',
iconImg: require('../../../../images/screw_box.png'), iconImg: require('../../../../images/screw_box.png'),
localSecondData: localSingleSeleHead localSecondData: localSingleSeleHead_2
// [{
// "id": "0",
// title: '髋关节手术001--ldh',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "1",
// title: '髋关节手术002',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "2",
// title: '髋关节手术003',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "3",
// title: '髋关节手术004',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "4",
// title: '髋关节手术005',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "5",
// title: '髋关节手术006',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// }
// ], // 模板数据
}, },
{ {
title: '器械包', title: '器械包',
iconImg: require('../../../../images/equip_bag.png'), iconImg: require('../../../../images/equip_bag.png'),
localSecondData: localSingleSeleHead localSecondData: localSingleSeleHead_3
// [{ },
// "id": "0", {
// title: '髋关节手术001----qxb', title: '零散器械',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "1",
// title: '髋关节手术002',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "2",
// title: '髋关节手术003',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "3",
// title: '髋关节手术004',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "4",
// title: '髋关节手术005',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "5",
// title: '髋关节手术006',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// }
// ], // 模板数据
},
{
title: '辅助工具',
iconImg: require('../../../../images/auxili_tool.png'), iconImg: require('../../../../images/auxili_tool.png'),
localSecondData: localSingleSeleHead localSecondData: localSingleSeleHead_4
// [{
// "id": "0",
// title: '髋关节手术001------fzgj',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "1",
// title: '髋关节手术002',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "2",
// title: '髋关节手术003',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "3",
// title: '髋关节手术004',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "4",
// title: '髋关节手术005',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// },
// {
// "id": "5",
// title: '髋关节手术006',
// tip1: '描述信息',
// tip2: '描述信息',
// select: false,
// quantity: 0
// }
// ], // 模板数据
}, },
{ {
title: '人工髋关节假体', title: '人工髋关节假体',
...@@ -526,12 +447,12 @@ const localThridContData = [ // 底部产品内容 ...@@ -526,12 +447,12 @@ const localThridContData = [ // 底部产品内容
// 三级编辑数据 - 顶部 // 三级编辑数据 - 顶部
const localThridOption = [ const localThridOption = [
{ {
title: '编辑产品', title: '耗材',
iconImg: localTestImageUrls, iconImg: localTestImageUrls,
localThridContData localThridContData
}, },
{ {
title: '螺钉盒', title: '钉盒',
iconImg: localTestImageUrls, iconImg: localTestImageUrls,
localThridContData localThridContData
}, },
...@@ -541,7 +462,7 @@ const localThridOption = [ ...@@ -541,7 +462,7 @@ const localThridOption = [
localThridContData localThridContData
}, },
{ {
title: '工具', title: '零散器械',
iconImg: localTestImageUrls, iconImg: localTestImageUrls,
localThridContData localThridContData
} }
...@@ -561,12 +482,12 @@ const localBottomOption = [ ...@@ -561,12 +482,12 @@ const localBottomOption = [
value: 0, value: 0,
imgIcon: require('../../../../images/model_test.png'), imgIcon: require('../../../../images/model_test.png'),
select: false, select: false,
quantity: 0 quantity: 1
} }
] ]
}, },
{ {
title: '螺钉盒', title: '钉盒',
iconImg: localTestImageUrls, iconImg: localTestImageUrls,
localBottomContData: [ localBottomContData: [
{ {
...@@ -577,7 +498,7 @@ const localBottomOption = [ ...@@ -577,7 +498,7 @@ const localBottomOption = [
value: 0, value: 0,
imgIcon: require('../../../../images/model_test.png'), imgIcon: require('../../../../images/model_test.png'),
select: false, select: false,
quantity: 0 quantity: 2
} }
] ]
}, },
...@@ -593,7 +514,7 @@ const localBottomOption = [ ...@@ -593,7 +514,7 @@ const localBottomOption = [
value: 0, value: 0,
imgIcon: require('../../../../images/model_test.png'), imgIcon: require('../../../../images/model_test.png'),
select: false, select: false,
quantity: 0 quantity: 3
} }
] ]
}, },
...@@ -609,7 +530,7 @@ const localBottomOption = [ ...@@ -609,7 +530,7 @@ const localBottomOption = [
value: 0, value: 0,
imgIcon: require('../../../../images/model_test.png'), imgIcon: require('../../../../images/model_test.png'),
select: false, select: false,
quantity: 0 quantity: 4
} }
] ]
}, },
...@@ -625,7 +546,7 @@ const localBottomOption = [ ...@@ -625,7 +546,7 @@ const localBottomOption = [
value: 0, value: 0,
imgIcon: require('../../../../images/model_test.png'), imgIcon: require('../../../../images/model_test.png'),
select: false, select: false,
quantity: 0 quantity: 3
} }
] ]
} }
......
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