Skip to content

zhangzhonghua / BoneHouse_Business_APP

Go to a project
Commit ae4d1023 by Denglingling
Options

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

(cherry picked from commit 54a17ed6)
parent ee54d211
Expand all
Inline Side-by-side
Showing with 173 additions and 93 deletions
app/containers/common/listDataComponent/ChooseCardList.js
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';
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');
import PictureZoom from '../../common/listDataComponent/PictureZoom';
import PicTitDetaiCalcu from '../../common/listDataComponent/PicTitDetaiCalcu';
......@@ -32,7 +32,16 @@ class ChooseCardList extends Component {
cardItemName: PropTypes.string,
cardCallBack: PropTypes.func,
curActIndex: PropTypes.number
curActIndex: PropTypes.number,
cardIsCount: PropTypes.bool, // 显示计数
cardCountName: PropTypes.string, // 显示计数字段
cardStyleType: PropTypes.object, // 计数样式
cardCountArray: PropTypes.array, // 已选数组
// cardListOptions: [
......@@ -53,23 +62,32 @@ class ChooseCardList extends Component {
constructor(props) {
super(props);
this.state = {
curActIndex: 0
countStyleType: ['DEFAULT', 'GRAPHICS'],
countStyleName: ['card_default', 'card_graphice']
// curActIndex: 0
}
}
// 点击当前选项
handleCheckTit(item, index) {
console.log('item, index----', item, index)
this.state = {
curActIndex: index
}
this.props.cardCallBack(item, index)
}
// 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
cardStyleListItem, cardStyleListItemAct, cardStyleItemIcon, cardStyleItemTit, cardStyleNotIconTit, cardStyleItemTitAct, cardCallBack, curActIndex, cardIsCount, cardCountName, cardStyleCount, cardStyleType, cardCountArray, ...props} = this.props
let {countStyleType, countStyleName} = this.state
// let count_style = ''
// if(countStyleType.includes(cardStyleType)){
// count_style = countStyleName[countStyleType.indexOf(cardStyleType)]
// }
let localTestImageUrls = localMockData.localTestImageUrls // 本地测试数据
cardListOptions[cardImgName] = localTestImageUrls // 本地测试
......@@ -90,12 +108,8 @@ class ChooseCardList extends Component {
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}
......@@ -105,55 +119,24 @@ class ChooseCardList extends Component {
{ 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>
<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>
{/* { 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>
{ (item[cardCountName] && countStyleType[1] === cardStyleType) ? <View style={styles.card_def_count}>
<Text style={styles.def_count_txt}>{item[cardCountName]}</Text>
</View> : null}
{/* <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> */}
{/* { (!!cardIsCount && item[cardCountArray].length) ? <View style={styles.card_def_count}>
<Text style={styles.def_count_txt}>{item[cardCountArray].length}</Text>
</View> : null} */}
</View>
)
}
{/* <View {...this.props}> </View> */}
</ScrollView>
</View>
);
......@@ -162,24 +145,15 @@ class ChooseCardList extends Component {
const styles = StyleSheet.create({
card_container: {},
card_scroll_box: {
// width: Width()
},
card_scroll_box: {},
card_list_box: {
// flexDirection: 'row',
// justifyContent: 'space-between',
// alignItems: 'center',
position: 'relative'
},
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,
......@@ -202,6 +176,22 @@ const styles = StyleSheet.create({
color: first_text_color,
fontSize: 14,
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 { 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');
class PicTitDetaiCalcu extends Component {
......@@ -18,9 +18,13 @@ class PicTitDetaiCalcu extends Component {
titCallBack: PropTypes.func, // 标题回调函数
titText: PropTypes.string, // 标题
tipTextStr: PropTypes.string,
tipTextStrTit: PropTypes.string,
tipTextOne: PropTypes.string,
tipTextOneTit: PropTypes.string,
tipTextTwo: PropTypes.string,
tipTextTwoTit: PropTypes.string,
listImgIcon: PropTypes.string,
listStyleImg: PropTypes.objec
}
constructor(props) {
......@@ -54,7 +58,7 @@ class PicTitDetaiCalcu extends Component {
}
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 picOthStyle = ''
if(listPicTypeArr.indexOf(listPicType) > -1){
......@@ -71,7 +75,7 @@ class PicTitDetaiCalcu extends Component {
return (
<View style={[styles.ri_inner, listStyleBox]}>
{ 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}/>
</View> : null }
<View style={styles.ri_text_box}>
......@@ -121,8 +125,8 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingTop: 12,
paddingBottom: 6,
paddingTop: 16,
paddingBottom: 12,
borderBottomWidth: 1,
borderColor: 'rgba(241, 241, 241, 0.87)'
},
......@@ -130,22 +134,25 @@ const styles = StyleSheet.create({
flex: 1
},
ri_te_ot: {
fontSize: 12,
fontSize: third_text_size,
color: third_text_color,
fontFamily: font_family_light
fontFamily: font_family_regular
},
ri_img_box: {
width: 18,
height: 18
// ri_img_box: {
// width: 18,
// height: 18
// },
oth_box: {
paddingBottom: 2
},
thr_ot: {
fontFamily: font_family_regular,
fontFamily: font_family_medium,
fontSize: second_text_size,
color: first_text_color
color: 'rgba(0, 0, 0, 0.87)'
},
te_ot_str: {
fontFamily: font_family_semibold,
color: first_text_color
color: 'rgba(58, 58, 58, 100)'
},
oth_img_box: {
width: pxSize(58),
......
app/containers/selfOrder/module/ChooseProductPage.js
......@@ -42,6 +42,10 @@ import localMockData from './mock/sen_mock';
// import TopTabBar from './customTabbar/TopTabBar';
// import LeftTabBar from './customTabbar/LeftTabBar';
const SELECTED_QUQNTITY = 'selectedQuantity' // 中类数量
const SELECTED_DATA_ARR = 'selectedDataArr' // 中类已选元素
const DEFAULT_SECOND_DATA = 'localSecondData' // 中类原本元素
class ChooseProductPage extends Component {
constructor(props) {
super(props);
......@@ -54,6 +58,10 @@ class ChooseProductPage extends Component {
leftOptionList: [], // 左侧分类数据
defaultThridShow: false, // 默认人体髋关节-小类不显示
selectShowPopup: false, // 共计已选弹窗
// SELECTED_QUQNTITY: 'selectedQuantity', // 中类数量
// SELECTED_DATA_ARR: 'selectedDataArr', // 中类已选元素
// DEFAULT_SECOND_DATA: 'localSecondData', // 中类原本元素
allCountQuantity: 0
}
}
......@@ -80,7 +88,9 @@ class ChooseProductPage extends Component {
let {leftOptionList} = this.state
this.setState({
leftActiveIndex: index,
rightSecondData: leftOptionList[index].localSecondData // 本地数据
rightSecondData: leftOptionList[index][DEFAULT_SECOND_DATA] // 本地数据
// rightSecondData: leftOptionList[index].localSecondData // 本地数据
})
}
......@@ -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) {
console.warn('修改共计已选', show)
this.setState({
selectShowPopup: show
})
......@@ -100,17 +148,25 @@ class ChooseProductPage extends Component {
// 点击共计已选
handleSubSelected(show) {
console.warn('共计已选：666')
// console.log('show-----', show)
this.handleCloseSelectModal(!show)
}
// 点击选好了
handleSubmit(show) {
handleSubmit() {
console.warn('选好了', this.props.navigation.navigate)
this.handleCloseSelectModal(false)
console.warn('携带数据，返回到自助下单')
}
// 已选修改回调
handleSelectCallBack(options) {
console.log('--已选修改回调--', options)
this.setState({
leftOptionList: options
})
}
// 返回搜索元素
renderSearchItem() {
return (
......@@ -198,6 +254,10 @@ class ChooseProductPage extends Component {
cardItemIcon={'iconImg'}
curActIndex={leftActiveIndex}
cardCallBack={(item, index) => this.handleLeftNav(item, index)}
// cardIsCount={true}
// cardCountArray={SELECTED_DATA_ARR}
cardCountName={SELECTED_QUQNTITY}
cardStyleType={'GRAPHICS'}
/>
// <View style={styles.cont_left_box}>
......@@ -236,7 +296,15 @@ class ChooseProductPage extends Component {
// 返回右侧二级元素
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 (
<View style={styles.cont_bom_box}>
{ this.renderContLeftItem() }
......@@ -247,7 +315,9 @@ class ChooseProductPage extends Component {
superIndex={leftActiveIndex}
defaultThridShow={defaultThridShow}
changeThrShow={(defaultThridShow) => this.handleChangeThrShow(defaultThridShow)}
superStencilData={rightSecondData}
// superStencilData={rightSecondData}
superStencilData={curRigSecoOption}
superCallBack={(count, coutFieName) => this.handleChangeCount(count, coutFieName)}
/>
</View>
)
......@@ -255,7 +325,17 @@ class ChooseProductPage extends Component {
// 返回底部按钮
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 (
<View style={list_common_item.sub_box}>
{/* <FooterBtnStyle
......@@ -279,22 +359,25 @@ class ChooseProductPage extends Component {
style={list_common_item.lef_btn}
onPress={() => this.handleSubSelected(selectShowPopup)}
>
<Text style={list_common_item.lef_tip}>{'共计已选：666'}</Text>
<Text style={list_common_item.lef_tip}>{'已选：'}{allCountQuantity}</Text>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={.8}
style={list_common_item.rig_btn}
onPress={() => this.handleSubmit(selectShowPopup)}
onPress={() => this.handleSubmit()}
>
<Text style={list_common_item.rig_tip}>{'选好了'}</Text>
</TouchableOpacity>
</View>
<ProductModel
// modelShow={selectShowPopup}
show={ selectShowPopup }
closeModal={(show) => this.handleCloseSelectModal(show)}
closeSelected={(show) => this.handleSubSelected(show)}
closeSubmit={(show) => this.handleSubmit(show)}
// closeSelected={(show) => this.handleSubSelected(show)}
closeSubmit={() => this.handleSubmit()}
modelOption={leftOptionList}
modelCallBack={(options) => this.handleSelectCallBack(options)}
/>
</View>
)
......@@ -429,7 +512,7 @@ const styles = StyleSheet.create({
},
cont_left_inner: {
flexDirection: 'row',
height: 52,
height: 58,
justifyContent: 'flex-start',
// justifyContent: 'center',
alignItems: 'center',
......@@ -460,7 +543,7 @@ const styles = StyleSheet.create({
},
cont_left_noicon: {
textAlign: 'center',
paddingHorizontal: 10
paddingHorizontal: 14
},
cont_left_tit_act: {
// color: first_text_color,
......
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