Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit 7a9a6114 by Denglingling
Options

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

parent 6812cc02
Inline Side-by-side
Showing with 778 additions and 259 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/ChooseProductPage.js
......@@ -36,6 +36,7 @@ import { FooterBtnStyle } from '../../common/CellTextStyle';
import ProductRightStyle from './ProductRightStyle';
import ProductModel from '../../common/ProductModel';
import StatusBarView from '../../common/StatusBarView';
import ChooseCardList from '../../common/listDataComponent/ChooseCardList';
import localMockData from './mock/sen_mock';
// import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
// import TopTabBar from './customTabbar/TopTabBar';
......@@ -128,33 +129,51 @@ class ChooseProductPage extends Component {
// 返回顶部产品元素
renderTopProItem() {
let {leftOptionList, topProcOptionList, topActiveIndex} = this.state
let {topProcOptionList, topActiveIndex} = this.state
return (
<View style={styles.top_box}>
<ScrollView
style={styles.top_scroll_cont}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{
topProcOptionList.map((item, index) =>
<TouchableOpacity
activeOpacity={.8}
style={styles.top_touch_cont}
onPress={() => this.handleTopNav(item, index)}
>
<View style={[styles.top_inner, index == topActiveIndex ? styles.top_inner_act : '']}>
<View style={styles.top_img_box}>
<Image source={item.iconImg} style={icon_style}/>
</View>
<Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}
</ScrollView>
<ChooseCardList
cardStyleBox={styles.top_box}
cardStyleScroll={styles.top_scroll_cont}
cardScrollEnabled={true}
cardHorizontal={true}
cardShowsHorizontalScrollIndicator={false}
cardStyleListItem={styles.top_inner}
cardStyleListItemAct={styles.top_inner_act}
cardStyleItemTit={styles.top_tit}
cardStyleItemTitAct={styles.top_tit_act}
cardListOptions={topProcOptionList}
cardItemTitle={'title'}
cardItemIcon={'iconImg'}
curActIndex={topActiveIndex}
cardCallBack={(item, index) => this.handleTopNav(item, index)}
/>
// <View style={styles.top_box}>
// <ScrollView
// style={styles.top_scroll_cont}
// horizontal={true}
// showsHorizontalScrollIndicator={false}
// >
// {
// topProcOptionList.map((item, index) =>
// <TouchableOpacity
// activeOpacity={.8}
// style={styles.top_touch_cont}
// onPress={() => this.handleTopNav(item, index)}
// >
// <View style={[styles.top_inner, index == topActiveIndex ? styles.top_inner_act : '']}>
// <View style={styles.top_img_box}>
// <Image source={item.iconImg} style={icon_style}/>
// </View>
// <Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>{item.title}</Text>
// </View>
// </TouchableOpacity>
// )
// }
// </ScrollView>
</View>
// </View>
)
}
......@@ -163,37 +182,55 @@ class ChooseProductPage extends Component {
let {leftActiveIndex, leftOptionList} = this.state
// let {leftActiveIndex} = this.state
return (
<View style={styles.cont_left_box}>
<ScrollView
style={styles.cont_left_scroll_cont}
showsVerticalScrollIndicator={false}
>
{
leftOptionList.map((item, index) =>
<TouchableOpacity
activeOpacity={.8}
onPress={() => this.handleLeftNav(item, index)}
>
<View style={[styles.cont_left_inner, index == leftActiveIndex ? styles.cont_left_inner_act : '']}>
{
item.iconImg ?
<View style={styles.cont_left_img_box}>
<Image source={item.iconImg} style={icon_style}/>
</View> : null
}
<Text style={[
styles.cont_left_tit,
index == leftActiveIndex ? styles.cont_left_tit_act : '',
item.iconImg ? '' : styles.cont_left_noicon]}
>
{item.title}
</Text>
</View>
</TouchableOpacity>
)
}
</ScrollView>
</View>
<ChooseCardList
cardStyleBox={styles.cont_left_box}
cardStyleScroll={styles.cont_left_scroll_cont}
cardScrollEnabled={true}
cardShowsVerticalScrollIndicator={false}
cardStyleListItem={styles.cont_left_inner}
cardStyleListItemAct={styles.cont_left_inner_act}
cardStyleItemTit={styles.cont_left_tit}
cardStyleItemTitAct={styles.cont_left_tit_act}
cardStyleNotIconTit={styles.cont_left_noicon}
cardStyleItemIcon={styles.cont_left_img_box}
cardListOptions={leftOptionList}
cardItemTitle={'title'}
cardItemIcon={'iconImg'}
curActIndex={leftActiveIndex}
cardCallBack={(item, index) => this.handleLeftNav(item, index)}
/>
// <View style={styles.cont_left_box}>
// <ScrollView
// style={styles.cont_left_scroll_cont}
// showsVerticalScrollIndicator={false}
// >
// {
// leftOptionList.map((item, index) =>
// <TouchableOpacity
// activeOpacity={.8}
// onPress={() => this.handleLeftNav(item, index)}
// >
// <View style={[styles.cont_left_inner, index == leftActiveIndex ? styles.cont_left_inner_act : '']}>
// {
// item.iconImg ?
// <View style={styles.cont_left_img_box}>
// <Image source={item.iconImg} style={icon_style}/>
// </View> : null
// }
// <Text style={[
// styles.cont_left_tit,
// index == leftActiveIndex ? styles.cont_left_tit_act : '',
// item.iconImg ? '' : styles.cont_left_noicon]}
// >
// {item.title}
// </Text>
// </View>
// </TouchableOpacity>
// )
// }
// </ScrollView>
// </View>
)
}
......@@ -203,7 +240,6 @@ class ChooseProductPage extends Component {
return (
<View style={styles.cont_bom_box}>
{ this.renderContLeftItem() }
{/* { this.renderContRightItem() } */}
<ProductRightStyle
navigation={this.props.navigation}
......@@ -280,6 +316,7 @@ class ChooseProductPage extends Component {
<View style={styles.choo_main}>
{/* {this.renderSearchItem()} */}
{this.renderTopProItem()}
{this.renderContItem()}
</View>
......@@ -342,37 +379,36 @@ const styles = StyleSheet.create({
top_scroll_cont: {},
top_touch_cont: {},
top_inner: {
justifyContent: 'center',
alignItems: 'center',
marginRight: 14,
borderBottomWidth: 4,
// justifyContent: 'center',
// alignItems: 'center',
// marginRight: 14,
// borderBottomWidth: 4,
borderBottomColor: foundation_color,
minWidth: 60
},
top_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
// borderBottomWidth: 2,
// borderBottomColor: promary_color
},
top_img_box: {
width: pxSize(36),
height: pxSize(36)
// width: pxSize(36),
// height: pxSize(36)
},
// top_img: {
// width: '100%',
// height: '100%'
// },
top_tit: {
paddingTop: 10,
paddingBottom: 14,
color: second_text_color,
fontSize: third_text_size,
fontFamily: font_family_regular
// paddingTop: 10,
// paddingBottom: 14,
// color: second_text_color,
// fontSize: third_text_size,
// fontFamily: font_family_regular
},
top_tit_act: {
color: first_text_color,
// fontWeight: 'bold',
fontSize: 14,
fontFamily: font_family_semibold
// color: first_text_color,
// fontSize: 14,
// fontFamily: font_family_semibold
},
cont_bom_box: {
position: 'relative',
......@@ -395,10 +431,17 @@ const styles = StyleSheet.create({
flexDirection: 'row',
height: 52,
justifyContent: 'flex-start',
alignItems: 'center'
// justifyContent: 'center',
alignItems: 'center',
borderWidth: 0,
width: '100%',
borderBottomWidth: 0,
// paddingHorizontal: 10
},
cont_left_inner_act: {
backgroundColor: foundation_color
backgroundColor: foundation_color,
borderBottomWidth: 0,
borderBottomColor: null
},
cont_left_img_box: {
width: pxSize(14),
......@@ -406,59 +449,60 @@ const styles = StyleSheet.create({
marginRight: 4,
marginLeft: 6
},
cont_left_img: {
width: '100%',
height: '100%'
},
// cont_left_img: {
// width: '100%',
// height: '100%'
// },
cont_left_tit: {
color: second_text_color,
fontSize: third_text_size,
fontFamily: font_family_regular
// color: second_text_color,
// fontSize: third_text_size,
// fontFamily: font_family_regular
},
cont_left_noicon: {
textAlign: 'center',
paddingHorizontal: 10
},
cont_left_tit_act: {
color: first_text_color,
fontWeight: 'bold'
},
cont_right_box: {
position: 'absolute',
left: 80,
width: Width() - 80,
backgroundColor: foundation_color,
height: '100%',
paddingHorizontal: 20
},
cont_right_scroll_cont: {},
cont_right_list: {},
ri_container: {
borderBottomColor: '#F9F9F9',
borderBottomWidth: 2,
// backgroundColor: '#ccc'
},
ri_tou_box: {
paddingVertical: 14
},
ri_inner: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
ri_text_box: {},
ri_te_tit: {
fontSize: first_text_size,
color: first_text_color,
fontWeight: 'bold',
fontFamily: 'PingFangSC-Medium'
},
ri_te_ot: {
fontSize: second_text_size,
color: third_text_color
// color: first_text_color,
// fontWeight: 'bold',
fontSize: third_text_size
},
ri_img_box: {},
ri_img_check: {},
// cont_right_box: {
// position: 'absolute',
// left: 80,
// width: Width() - 80,
// backgroundColor: foundation_color,
// height: '100%',
// paddingHorizontal: 20
// },
// cont_right_scroll_cont: {},
// cont_right_list: {},
// ri_container: {
// borderBottomColor: '#F9F9F9',
// borderBottomWidth: 2,
// // backgroundColor: '#ccc'
// },
// ri_tou_box: {
// paddingVertical: 14
// },
// ri_inner: {
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center'
// },
// ri_text_box: {},
// ri_te_tit: {
// fontSize: first_text_size,
// color: first_text_color,
// fontWeight: 'bold',
// fontFamily: 'PingFangSC-Medium'
// },
// ri_te_ot: {
// fontSize: second_text_size,
// color: third_text_color
// },
// ri_img_box: {},
// ri_img_check: {},
sub_box: {
width: Width(),
backgroundColor: foundation_color,
......
app/containers/selfOrder/module/EditThirdLevelPage.js
......@@ -23,12 +23,17 @@ import {
pxSize,
safe_view,
font_family_semibold,
font_family_light
font_family_light,
btn_sub_color
} from '../../../base/BaseStyle';
import {
FooterBtnStyle
} from '../../common/CellTextStyle';
import StatusBarView from '../../common/StatusBarView';
import ChooseCardList from '../../common/listDataComponent/ChooseCardList';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
import PictureZoom from '../../common/listDataComponent/PictureZoom';
import localMockData from './mock/sen_mock';
class EditStencilPage extends Component {
constructor(props) {
......@@ -135,6 +140,14 @@ class EditStencilPage extends Component {
}
}
componentDidMount() {
console.log('本地测试数据====localMockData===', localMockData)
// 赋值测试数据
this.setState({
topProcOptionList: localMockData.localThridOption
})
}
/**
* 点击当前产品加减
* @param {object} item 当前小类数据
......@@ -142,20 +155,44 @@ class EditStencilPage 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
})
}
// 点击顶部菜单
handleTopNav(item, index) {
// console.log('item, index----', item, index)
this.setState({
topActiveIndex: index
})
......@@ -165,42 +202,75 @@ class EditStencilPage extends Component {
renderTopProItem() {
let { topProcOptionList, topActiveIndex } = this.state
return (
<View style={styles.top_box}>
<ScrollView
style={styles.top_scroll_cont}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{
topProcOptionList.map((item, index) =>
<TouchableOpacity
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>
<ChooseCardList
cardStyleBox={styles.top_box}
cardStyleScroll={styles.top_scroll_cont}
cardScrollEnabled={false}
cardHorizontal={true}
cardShowsHorizontalScrollIndicator={false}
cardStyleListItem={styles.top_inner}
cardStyleListItemAct={styles.top_inner_act}
cardStyleItemTit={styles.top_tit}
cardStyleItemTitAct={styles.top_tit_act}
cardListOptions={topProcOptionList}
cardItemTitle={'title'}
curActIndex={topActiveIndex}
cardCallBack={(item, index) => this.handleTopNav(item, index)}
/>
// <View style={styles.top_box}>
// <ScrollView
// style={styles.top_scroll_cont}
// horizontal={true}
// showsHorizontalScrollIndicator={false}
// >
// {
// topProcOptionList.map((item, index) =>
// <TouchableOpacity
// 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() {
let {topProcOptionList, topActiveIndex} = this.state
let curData = topProcOptionList[topActiveIndex]
// 本地测试数据
let localThridContData = curData.localThridContData
let iconImg = curData.iconImg
// console.log('底部数据==' , localThridContData)
return(
<View style={styles.edit_cont}>
{ iconImg ? <PictureZoom
listImageIndex={0}
listImageUrls={iconImg}
listStyleImage={styles.thr_head_tit_img}
listPicType={'RECTANGLE'}
/> : null
}
<ScrollView
style={styles.edit_scroll_cont}
showsVerticalScrollIndicator={false}
......@@ -208,7 +278,7 @@ class EditStencilPage extends Component {
<FlatList
style={styles.edit_list}
keyExtractor={item => item.id}
data={this.state.contOptionData}
data={localThridContData}
extraData={this.state}
renderItem={ ({item, index}) => this.renderContColumnItem(item, index) }
/>
......@@ -219,9 +289,23 @@ class EditStencilPage extends Component {
// 返回每一列元素
renderContColumnItem(item, index) {
// console.log('item, index----', item, index)
return (
<SafeAreaView style={styles.column_container}>
<View style={styles.ri_inner}>
<SafeAreaView style={styles.column_container}>
<PicTitDetaiCalcu
listItem={item}
listIndex={index}
calField={'quantity'}
subCalCallBack={(item,index) => this.handleCalCallBack(item,index,'localThridContData')}
titText={'title'}
tipTextStr={'tip1'}
tipTextOne={'tip2'}
listImgIcon={'imgIcon'}
listPicType={'ROUND'}
listStyleBox={styles.list_style_box}
/>
{/* <View style={styles.ri_inner}>
<View style={styles.oth_img_box}>
<Image style={styles.oth_img} source={item.imgIcon}/>
</View>
......@@ -253,7 +337,7 @@ class EditStencilPage extends Component {
</View>
</TouchableOpacity>
</View>
</View>
</View> */}
</SafeAreaView>
)
}
......@@ -274,13 +358,15 @@ class EditStencilPage extends Component {
{this.renderTopProItem()}
{this.renderContItem()}
</View>
<FooterBtnStyle
style={styles.sub_btn_pro}
activeOpacity={.8}
title={'编辑完成'}
textStyle= {styles.sub_btn}
onPress={() => console.warn('编辑完成')}
/>
<View style={styles.btom_btn_box}>
<FooterBtnStyle
style={styles.sub_btn_pro}
activeOpacity={.8}
title={'编辑完成'}
textStyle= {styles.sub_btn_txt}
onPress={() => console.warn('编辑完成')}
/>
</View>
</SafeAreaView>
</View>
);
......@@ -308,12 +394,12 @@ const styles = StyleSheet.create({
top_scroll_cont: {},
top_touch_cont: {},
top_inner: {
justifyContent: 'center',
alignItems: 'center',
marginRight: 14,
borderBottomWidth: 2,
borderBottomColor: home_background_color,
minWidth: 50,
// justifyContent: 'center',
// alignItems: 'center',
// marginRight: 14,
// borderBottomWidth: 2,
// borderBottomColor: home_background_color,
// minWidth: 50,
},
se_thr_width: {
minWidth: 42
......@@ -322,14 +408,13 @@ const styles = StyleSheet.create({
minWidth: 28
},
top_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
// borderBottomWidth: 2,
// borderBottomColor: promary_color
},
top_tit: {
paddingTop: 10,
paddingBottom: 12,
color: second_text_color,
// fontSize: third_text_size
// paddingTop: 10,
// paddingBottom: 12,
// color: second_text_color,
fontSize: 14
},
top_tit_act: {
......@@ -338,21 +423,25 @@ const styles = StyleSheet.create({
},
edit_cont: {
marginTop: 14,
flex: 1
flex: 1,
paddingHorizontal: 20
// height: Height() - 187
},
edit_list: {},
column_container: {
paddingHorizontal: 20
marginBottom: 10,
paddingHorizontal: 10,
paddingVertical: 6,
backgroundColor: foundation_color
},
ri_inner: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 14,
paddingHorizontal: 8,
backgroundColor: foundation_color,
marginBottom: 14
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
// paddingVertical: 14,
// paddingHorizontal: 8,
// backgroundColor: foundation_color,
// marginBottom: 14
},
oth_img_box: {
borderColor: '#ccc',
......@@ -406,9 +495,34 @@ const styles = StyleSheet.create({
minWidth: pxSize(20),
textAlign: 'center'
},
btom_btn_box: {
backgroundColor: foundation_color,
paddingTop: 14,
shadowColor: btn_sub_color,
shadowOffset: {
width: 1,
height: 2
},
shadowOpacity: 1,
elevation: 2,
borderWidth: 0
},
sub_btn_pro: {
backgroundColor: promary_color
backgroundColor: promary_color,
height: 48,
// marginBottom: 18
},
thr_head_tit_img: {
borderWidth: .5,
borderColor: 'rgba(0, 0, 0, 0.12)',
marginBottom: 10
},
list_style_box: {
borderBottomWidth: 0
},
sub_btn_txt: {
// fontSize: 14
}
})
export default EditStencilPage;
\ No newline at end of file
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