mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 92c03a87b9014e67f3095205d285a571c8a803e7 1 parent a5f111f9

红人店铺不展示默认和人气切换，review by Redding

Inline Side-by-side
Showing 3 changed files with 502 additions and 11 deletions
  1 + 'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +
  6 +const {
  7 + View,
  8 + Image,
  9 + Text,
  10 + ListView,
  11 + TouchableOpacity,
  12 + Dimensions,
  13 + StyleSheet,
  14 +} = ReactNative;
  15 +
  16 +
  17 +export default class BrandProductFilter extends React.Component {
  18 +
  19 + constructor(props) {
  20 + super (props);
  21 +
  22 + this._renderRow = this._renderRow.bind(this);
  23 + this._renderSeparator = this._renderSeparator.bind(this);
  24 + this._renderImage = this._renderImage.bind(this);
  25 +
  26 + this.dataSource = new ListView.DataSource({
  27 + rowHasChanged: (r1, r2) => r1.key != r2.key,
  28 + });
  29 +
  30 + this.state = {
  31 + filters: [
  32 + {
  33 + key: 'default',
  34 + name: '默认',
  35 + value: {
  36 + normal: '',
  37 + popular: 'h_v_desc',
  38 + },
  39 + isPopular: false,
  40 + radio: true,
  41 + },
  42 + {
  43 + key: 'new',
  44 + name: '新品',
  45 + value: {
  46 + asc: 's_t_desc',
  47 + desc: 's_t_desc',
  48 + },
  49 + isAsc: false,
  50 + radio: false,
  51 + },
  52 + {
  53 + key: 'price',
  54 + name: '价格',
  55 + value: {
  56 + asc: 's_p_asc',
  57 + desc: 's_p_desc',
  58 + },
  59 + isAsc: false,
  60 + radio: false,
  61 + },
  62 + {
  63 + key: 'discount',
  64 + name: '折扣',
  65 + value: {
  66 + asc: 'p_d_asc',
  67 + desc: 'p_d_desc',
  68 + },
  69 + isAsc: false,
  70 + radio: false,
  71 + },
  72 + {
  73 + key: 'filter',
  74 + name: '筛选',
  75 + value: {
  76 + asc: 'filter',
  77 + desc: 'filter',
  78 + },
  79 + isAsc: false,
  80 + radio: false,
  81 + },
  82 + ],
  83 + selectedIndex: 0,
  84 + };
  85 +
  86 +
  87 + this.images = {
  88 + normal: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_normal.png'),
  89 + asc: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_up.png'),
  90 + desc: require('../../../brandStore/image/filter/shared_segmentedcontrol_other_down.png'),
  91 + down:require('../../../brandStore/image/filter/brandstore_filter_arrow_down.png'),
  92 + down_normal:require('../../../brandStore/image/filter/brandstore_filter_arrow_down_normal.png'),
  93 + up:require('../../../brandStore/image/filter/brandstore_filter_arrow_up.png'),
  94 + up_normal:require('../../../brandStore/image/filter/brandstore_filter_arrow_up_normal.png'),
  95 + default_normal:require('../../../brandStore/image/filter/3_down_h.png'),
  96 + default_selected:require('../../../brandStore/image/filter/3_down.png'),
  97 + };
  98 + }
  99 +
  100 + componentWillReceiveProps(nextProps){
  101 + if(this.props.selectOrder=='' || this.props.selectOrder=='h_v_desc'){
  102 + this.setState({
  103 + selectedIndex: 0,
  104 + });
  105 + }else if (this.props.selectOrder =='s_t_desc') {
  106 + this.setState({
  107 + selectedIndex: 1,
  108 + });
  109 + }else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
  110 + this.setState({
  111 + selectedIndex: 2,
  112 + });
  113 + }else if (this.props.selectOrder =='p_d_asc' || this.props.selectOrder =='p_d_desc') {
  114 + this.setState({
  115 + selectedIndex: 3,
  116 + });
  117 + }
  118 + }
  119 +
  120 + componentDidMount() {
  121 + if(this.props.selectOrder=='' || this.props.selectOrder=='h_v_desc'){
  122 + this.setState({
  123 + selectedIndex: 0,
  124 + });
  125 + }else if (this.props.selectOrder =='s_t_desc') {
  126 + this.setState({
  127 + selectedIndex: 1,
  128 + });
  129 + }else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
  130 + this.setState({
  131 + selectedIndex: 2,
  132 + });
  133 + }else if (this.props.selectOrder =='p_d_asc' || this.props.selectOrder =='p_d_desc') {
  134 + this.setState({
  135 + selectedIndex: 3,
  136 + });
  137 + }
  138 + }
  139 +
  140 + _renderImage(rowData, rowID) {
  141 + let img;
  142 + if(rowID==0 || rowID==1){
  143 + return null;
  144 + }else if(rowID==4){
  145 + img = this.props.lastSelected ? this.images.up : this.images.down_normal;
  146 + }else{
  147 + if (rowID == this.state.selectedIndex){
  148 + if (rowData.value.asc == this.props.selectOrder) {
  149 + img = this.images.asc;
  150 + }else if (rowData.value.desc == this.props.selectOrder) {
  151 + img = this.images.desc;
  152 + }else {
  153 + img = this.images.normal;
  154 + }
  155 + }else{
  156 + img = this.images.normal;
  157 + }
  158 + }
  159 + return <Image style={styles.image} source={img}/>;
  160 + }
  161 +
  162 + _renderRow(rowData, sectionID, rowID) {
  163 + let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
  164 + if (rowID == 4) {
  165 + colorStyle = this.props.lastSelected ? {color: '#444444'} : {color: '#b0b0b0'};
  166 + }
  167 +
  168 + if(rowID==0){
  169 + if (this.props.lastSelectedPopular) {
  170 + rowData.name='人气';
  171 + }else {
  172 + rowData.name='默认';
  173 + }
  174 + }
  175 + return (
  176 + <View style={{backgroundColor: 'white'}}>
  177 + <TouchableOpacity style={{backgroundColor: 'white', flex: 1}} onPress={() => {
  178 +
  179 + let filters = this.state.filters;
  180 + let filter = this.state.filters[rowID];
  181 + if (rowID == 1 && this.state.selectedIndex == 1) {
  182 + return;
  183 + }
  184 + if (filter.radio) {
  185 + if (this.state.selectedIndex > 0) {
  186 + this.setState({
  187 + selectedIndex: rowID,
  188 + });
  189 + let value = this.props.lastSelectedPopular ? filter.value['popular'] : filter.value['normal'];
  190 + this.props.onPressFilter && this.props.onPressFilter(value);
  191 + } else {
  192 + this.props.onPressFilter && this.props.onPressFilter(filters[0].key);
  193 + }
  194 +
  195 + return;
  196 + }
  197 + if (rowID == 4) {
  198 + let value = 'filter';
  199 + this.props.onPressFilter && this.props.onPressFilter(value);
  200 + return;
  201 + }
  202 + if (filter.value.asc == this.props.selectOrder) {
  203 + filter.isAsc = true;
  204 + }else {
  205 + filter.isAsc = false;
  206 + }
  207 + filter.isAsc = !filter.isAsc;
  208 + filters[rowID] = filter;
  209 + this.setState({
  210 + selectedIndex: rowID,
  211 + filters,
  212 + });
  213 +
  214 + let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];
  215 + this.props.onPressFilter && this.props.onPressFilter(value);
  216 + }}>
  217 + <View key={'row' + rowID} style={styles.rowContainer}>
  218 + <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
  219 + {this._renderImage(rowData, rowID)}
  220 + </View>
  221 + </TouchableOpacity>
  222 + </View>
  223 + );
  224 + }
  225 +
  226 + _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
  227 + return (
  228 + <View key={'sep' + rowID} style={styles.separator}>
  229 + </View>
  230 + );
  231 + }
  232 +
  233 + render() {
  234 +
  235 + let {style} = this.props;
  236 + return (
  237 + <View style={[styles.container, style]}>
  238 + <ListView
  239 + contentContainerStyle={[styles.contentContainer, style]}
  240 + enableEmptySections={true}
  241 + dataSource={this.dataSource.cloneWithRows(this.state.filters)}
  242 + renderRow={this._renderRow}
  243 + renderSeparator={this._renderSeparator}
  244 + scrollEnabled={false}
  245 + scrollsToTop={false}
  246 + />
  247 + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/>
  248 + </View>
  249 +
  250 + );
  251 + }
  252 +}
  253 +
  254 +let selCol = '444444'
  255 +let norCol = 'b0b0b0'
  256 +
  257 +let {width, height} = Dimensions.get('window');
  258 +
  259 +let styles = StyleSheet.create({
  260 + container: {
  261 + marginLeft: -1,
  262 + width: width + 2,
  263 + height: 40,
  264 + backgroundColor:'white',
  265 + },
  266 + contentContainer: {
  267 + flexDirection: 'row',
  268 + backgroundColor:'white',
  269 + },
  270 + rowContainer: {
  271 + flexDirection: 'row',
  272 + justifyContent: 'center',
  273 + alignItems: 'center',
  274 + width: Math.ceil(width / 5),
  275 + height: 40,
  276 + backgroundColor: 'white',
  277 + },
  278 + name: {
  279 + color: '#b0b0b0',
  280 + },
  281 + image: {
  282 + marginTop: 2,
  283 + marginLeft: 2,
  284 + },
  285 + separator: {
  286 + width: 0.5,
  287 + top: 12.5,
  288 + height: 15,
  289 + backgroundColor: '#e5e5e5',
  290 + },
  291 +});
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +
  6 +const {
  7 + AppRegistry,
  8 + StyleSheet,
  9 + Text,
  10 + View,
  11 + Image,
  12 + ListView,
  13 + Dimensions,
  14 + TouchableOpacity,
  15 +} = ReactNative;
  16 +
  17 +import BrandProductFilter from './BrandProductFilter';
  18 +import immutable from 'immutable';
  19 +
  20 +export default class ProductCategoryList extends React.Component {
  21 + constructor(props) {
  22 + super(props);
  23 +
  24 + this.leftRenderRow = this.leftRenderRow.bind(this);
  25 + this.rightRenderRow = this.rightRenderRow.bind(this);
  26 + this._pressLeftRow = this._pressLeftRow.bind(this);
  27 + this._pressRightRow = this._pressRightRow.bind(this);
  28 +
  29 + this.dataSourceL = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
  30 + this.dataSourceR = new ListView.DataSource({rowHasChanged: (r1, r2) => !immutable.is(r1, r2)});
  31 + }
  32 +
  33 + _pressLeftRow(rowData) {
  34 + this.refs.subCategoryList && this.refs.subCategoryList.scrollTo({x: 0, y: 0, animated: false});
  35 + this.props.onPressProductFilterLeftItem(rowData);
  36 + }
  37 +
  38 + _pressRightRow(rowData) {
  39 + let items = this.props.categoryFilterList.toJS().filter((item) => {
  40 + return item.isSelect;
  41 + });
  42 +
  43 + if (items.length > 0) {
  44 + this.props.onPressProductFilterRightItem(items[0], rowData);
  45 + }
  46 + }
  47 +
  48 + leftRenderRow(rowData, sectionID, rowID, highlightRow) {
  49 + let selectText = this.props.filterNameFactors.get(rowData.get('key'));
  50 + let arrow = rowData.get('isSelect') ? <Image style={styles.arrow} source={require('../../../brandStore/image/filter_category_select_icon.png')}/> : null;
  51 +
  52 + return (
  53 + <TouchableOpacity onPress={() => this._pressLeftRow(rowData.toJS())}>
  54 + <View style={[styles.leftRow]} >
  55 +
  56 + <View style={styles.leftRowText} >
  57 + <Text style={styles.title} numberOfLines={1}>
  58 + {rowData.get('name')}:{" " + selectText}
  59 + </Text>
  60 + {arrow}
  61 + </View>
  62 + <View style={[styles.underline]}></View>
  63 +
  64 + </View>
  65 + </TouchableOpacity>
  66 + );
  67 + }
  68 +
  69 + rightRenderRow(rowData, sectionID, rowID, highlightRow) {
  70 +
  71 + let colorStyle = rowData.get('isSelect') ? {backgroundColor: '#DBDBDB'} : {backgroundColor: '#f4f4f4'};
  72 + return (
  73 + <TouchableOpacity onPress={() => this._pressRightRow(rowData.toJS())}>
  74 + <View style={[styles.rightRow, colorStyle]}>
  75 + <Text style={styles.subtitle} numberOfLines={1}>
  76 + {rowData.get('name')}
  77 + </Text>
  78 + <View style={[styles.underline]}></View>
  79 +
  80 + </View>
  81 + </TouchableOpacity>
  82 + );
  83 + }
  84 +
  85 + render() {
  86 + let {categoryFilterList, filterCategoryDetailFilterList, filterNameFactors} = this.props;
  87 + let subList = [];
  88 +
  89 + let items = categoryFilterList.toJS().filter((item) => {
  90 + return item.isSelect;
  91 + });
  92 +
  93 + if (items.length > 0) {
  94 + subList = filterCategoryDetailFilterList.get(items[0].key);
  95 + }
  96 +
  97 + return (
  98 + <View style={styles.allcontainer}>
  99 + <BrandProductFilter
  100 + onPressFilter={this.props.onPressFilter}
  101 + lastSelected={this.props.productList.isFilter}
  102 + moreFilter={this.props.productList.isMoreFilter}
  103 + selectOrder={this.props.productList.order}
  104 + lastSelectedPopular={this.props.lastSelectedPopular}/>
  105 +
  106 + <View style={styles.container}>
  107 + <ListView
  108 + style={styles.leftContentContainer}
  109 + dataSource={this.dataSourceL.cloneWithRows(categoryFilterList.toArray())}
  110 + renderRow={this.leftRenderRow}
  111 + scrollsToTop={false}
  112 + />
  113 + <ListView
  114 + ref='subCategoryList'
  115 + style={styles.rightContentContainer}
  116 + dataSource={this.dataSourceR.cloneWithRows(subList.size?subList.toArray():[])}
  117 + renderRow={this.rightRenderRow}
  118 + scrollsToTop={false}
  119 + />
  120 + </View>
  121 + </View>
  122 + );
  123 + }
  124 +};
  125 +
  126 +let {width, height} = Dimensions.get('window');
  127 +let rowHeight = Math.ceil(height - 37);
  128 +let rowWidth = Math.ceil(width / 2);
  129 +
  130 +let styles = StyleSheet.create({
  131 + allcontainer:{
  132 + flex: 1,
  133 + flexDirection: 'column',
  134 + top: 0,
  135 + left: 0,
  136 + width: width,
  137 + height: height ,
  138 + backgroundColor: '#ffffff',
  139 + borderTopColor: '#e0e0e0',
  140 + borderTopWidth: 0.5,
  141 + borderLeftColor: '#ffffff',
  142 + borderLeftWidth: 0,
  143 + borderRightWidth: 0,
  144 + borderBottomWidth: 0,
  145 + position: 'absolute',
  146 +
  147 + },
  148 + container:{
  149 + flex: 1,
  150 + flexDirection: 'row',
  151 + left: 0,
  152 + width: width,
  153 + height: height - 40 - 44 - 64,
  154 + backgroundColor: '#ffffff',
  155 + borderTopWidth: 0,
  156 + borderLeftWidth: 0,
  157 + borderRightWidth: 0,
  158 + borderBottomWidth: 0,
  159 + },
  160 + leftContentContainer: {
  161 + backgroundColor: '#ffffff',
  162 + },
  163 + leftRow: {
  164 + justifyContent: 'center',
  165 + height: 44,
  166 + width: rowWidth,
  167 + paddingLeft: 15,
  168 + backgroundColor: '#ffffff',
  169 + },
  170 + leftRowText: {
  171 + flexDirection: 'row',
  172 + alignItems: 'center',
  173 + height: 43.5,
  174 + width: rowWidth,
  175 + },
  176 + rightContentContainer: {
  177 + backgroundColor: '#f4f4f4',
  178 + },
  179 + rightRow: {
  180 + flexDirection: 'column',
  181 + justifyContent: 'center',
  182 + height: 44,
  183 + width: rowWidth,
  184 + paddingLeft: 15,
  185 + },
  186 + underline:{
  187 + width: rowWidth,
  188 + height: 0.5,
  189 + backgroundColor:'#e0e0e0',
  190 + position: 'absolute',
  191 + bottom: 0,
  192 +
  193 + },
  194 + title: {
  195 + fontSize: 14,
  196 + color: '#444444',
  197 + width: rowWidth - 15 - 6,
  198 + },
  199 + subtitle: {
  200 + fontSize: 14,
  201 + color: '#b0b0b0',
  202 + },
  203 + arrow: {
  204 + justifyContent: 'flex-end',
  205 + alignItems: 'center',
  206 + width: 6,
  207 + height: 12,
  208 + },
  209 +});
@@ -21,12 +21,11 @@ import SingleImage from './SingleImage'; @@ -21,12 +21,11 @@ import SingleImage from './SingleImage';
21 import DoubleImage from './DoubleImage'; 21 import DoubleImage from './DoubleImage';
22 import TripleImage from './TripleImage'; 22 import TripleImage from './TripleImage';
23 import RedBrandSwiper from './RedBrandSwiper'; 23 import RedBrandSwiper from './RedBrandSwiper';
24 -import BrandProductMoreFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductMoreFilter';  
25 -import ProductCategoryList from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/ProductCategoryList'; 24 +import ProductCategoryList from './ProductCategoryList';
26 import LoadingIndicator from '../../../common/components/LoadingIndicator'; 25 import LoadingIndicator from '../../../common/components/LoadingIndicator';
27 import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator'; 26 import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
28 import BrandProductListCell from '../../../common/components/ListCell/ProductListCell'; 27 import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
29 -import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter'; 28 +import BrandProductFilter from './BrandProductFilter';
30 import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell'; 29 import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell';
31 import Prompt from '../../../coupon/components/coupon/Prompt'; 30 import Prompt from '../../../coupon/components/coupon/Prompt';
32 import FourImages from './FourImages'; 31 import FourImages from './FourImages';
@@ -255,14 +254,6 @@ export default class RedBrand extends Component { @@ -255,14 +254,6 @@ export default class RedBrand extends Component {
255 onPressProductFilterRightItem={this.props.onPressProductFilterRightItem} 254 onPressProductFilterRightItem={this.props.onPressProductFilterRightItem}
256 onPressCloseMoreFilter={this.props.onPressCloseMoreFilter} 255 onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}
257 onPressMoreFilter={this.props.onPressMoreFilter}/> : null} 256 onPressMoreFilter={this.props.onPressMoreFilter}/> : null}
258 -  
259 - {productList.isMoreFilter ?  
260 - <BrandProductMoreFilter  
261 - productList={productList}  
262 - onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}  
263 - onPressMoreFilter={this.props.onPressMoreFilter}/> : null}  
264 -  
265 -  
266 {needShowToast ? <Prompt 257 {needShowToast ? <Prompt
267 text={showToastMessage} 258 text={showToastMessage}
268 duration={1000} 259 duration={1000}