Showing
32 changed files
with
443 additions
and
5 deletions
@@ -35,7 +35,7 @@ export default class ProductListCell extends Component { | @@ -35,7 +35,7 @@ export default class ProductListCell extends Component { | ||
35 | browse = browse/10000.0; | 35 | browse = browse/10000.0; |
36 | browse = Math.round(browse*10)/10; | 36 | browse = Math.round(browse*10)/10; |
37 | } | 37 | } |
38 | - src = src.replace('{width}', rowWidth).replace('{height}',Math.ceil(214*width/750)).replace('{mode}',2); | 38 | + src = src.replace('{width}', rowWidth*2).replace('{height}',Math.ceil(214*width/750)*2).replace('{mode}',2); |
39 | 39 | ||
40 | return ( | 40 | return ( |
41 | <TouchableOpacity | 41 | <TouchableOpacity |
@@ -20,6 +20,8 @@ import BrandProductMoreFilter from '../../../brandStore/components/brandStore/br | @@ -20,6 +20,8 @@ import BrandProductMoreFilter from '../../../brandStore/components/brandStore/br | ||
20 | import ProductCategoryList from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/ProductCategoryList'; | 20 | import ProductCategoryList from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/ProductCategoryList'; |
21 | import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter'; | 21 | import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter'; |
22 | import BrandProductListCell from '../../../common/components/ListCell/ProductListCell'; | 22 | import BrandProductListCell from '../../../common/components/ListCell/ProductListCell'; |
23 | +import NewArrivalFilter from './NewArrivalFilter' | ||
24 | +import NewArrivalCategoryList from './NewArrivalCategoryList' | ||
23 | import TagsCell from './TagsCell' | 25 | import TagsCell from './TagsCell' |
24 | import ShopCell from './ShopCell' | 26 | import ShopCell from './ShopCell' |
25 | import ArticleCell from './ArticleCell' | 27 | import ArticleCell from './ArticleCell' |
@@ -209,7 +211,7 @@ export default class NewArrival extends Component { | @@ -209,7 +211,7 @@ export default class NewArrival extends Component { | ||
209 | yPosition = evt.nativeEvent.layout.y; | 211 | yPosition = evt.nativeEvent.layout.y; |
210 | }} | 212 | }} |
211 | > | 213 | > |
212 | - <BrandProductFilter | 214 | + <NewArrivalFilter |
213 | onPressFilter={this._onPressProductFilter} | 215 | onPressFilter={this._onPressProductFilter} |
214 | lastSelected={this.props.productList.isFilter} | 216 | lastSelected={this.props.productList.isFilter} |
215 | moreFilter={this.props.productList.isMoreFilter} | 217 | moreFilter={this.props.productList.isMoreFilter} |
@@ -283,7 +285,7 @@ export default class NewArrival extends Component { | @@ -283,7 +285,7 @@ export default class NewArrival extends Component { | ||
283 | }} | 285 | }} |
284 | /> | 286 | /> |
285 | {productList.isFilter ? | 287 | {productList.isFilter ? |
286 | - <ProductCategoryList | 288 | + <NewArrivalCategoryList |
287 | productList={productList} | 289 | productList={productList} |
288 | onPressFilter={this._onPressProductFilter} | 290 | onPressFilter={this._onPressProductFilter} |
289 | lastSelected={this.props.productList.isFilter} | 291 | lastSelected={this.props.productList.isFilter} |
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 NewArrivalFilter from './NewArrivalFilter'; | ||
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('../../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 | + <NewArrivalFilter | ||
100 | + onPressFilter={this.props.onPressFilter} | ||
101 | + lastSelected={this.props.productList.isFilter} | ||
102 | + moreFilter={this.props.productList.isMoreFilter} | ||
103 | + selectOrder={this.props.productList.order}/> | ||
104 | + | ||
105 | + <View style={styles.container}> | ||
106 | + <ListView | ||
107 | + style={styles.leftContentContainer} | ||
108 | + dataSource={this.dataSourceL.cloneWithRows(categoryFilterList.toArray())} | ||
109 | + renderRow={this.leftRenderRow} | ||
110 | + scrollsToTop={false} | ||
111 | + /> | ||
112 | + <ListView | ||
113 | + ref='subCategoryList' | ||
114 | + style={styles.rightContentContainer} | ||
115 | + dataSource={this.dataSourceR.cloneWithRows(subList.toArray())} | ||
116 | + renderRow={this.rightRenderRow} | ||
117 | + scrollsToTop={false} | ||
118 | + /> | ||
119 | + </View> | ||
120 | + </View> | ||
121 | + ); | ||
122 | + } | ||
123 | +}; | ||
124 | + | ||
125 | +let {width, height} = Dimensions.get('window'); | ||
126 | +let rowHeight = Math.ceil(height - 37); | ||
127 | +let rowWidth = Math.ceil(width / 2); | ||
128 | + | ||
129 | +let styles = StyleSheet.create({ | ||
130 | + allcontainer:{ | ||
131 | + flex: 1, | ||
132 | + flexDirection: 'column', | ||
133 | + left: 0, | ||
134 | + width: width, | ||
135 | + height: height , | ||
136 | + backgroundColor: '#ffffff', | ||
137 | + borderTopColor: '#e0e0e0', | ||
138 | + borderTopWidth: 0.5, | ||
139 | + borderLeftColor: '#ffffff', | ||
140 | + borderLeftWidth: 0, | ||
141 | + borderRightWidth: 0, | ||
142 | + borderBottomWidth: 0, | ||
143 | + | ||
144 | + }, | ||
145 | + container:{ | ||
146 | + flex: 1, | ||
147 | + flexDirection: 'row', | ||
148 | + position: 'absolute', | ||
149 | + left: 0, | ||
150 | + width: width, | ||
151 | + height: height - 40 - 44 - 64, | ||
152 | + backgroundColor: '#ffffff', | ||
153 | + borderTopWidth: 0, | ||
154 | + borderLeftWidth: 0, | ||
155 | + borderRightWidth: 0, | ||
156 | + borderBottomWidth: 0, | ||
157 | + }, | ||
158 | + leftContentContainer: { | ||
159 | + backgroundColor: '#ffffff', | ||
160 | + }, | ||
161 | + leftRow: { | ||
162 | + justifyContent: 'center', | ||
163 | + height: 44, | ||
164 | + width: rowWidth, | ||
165 | + paddingLeft: 15, | ||
166 | + backgroundColor: '#ffffff', | ||
167 | + }, | ||
168 | + leftRowText: { | ||
169 | + flexDirection: 'row', | ||
170 | + alignItems: 'center', | ||
171 | + height: 43.5, | ||
172 | + width: rowWidth, | ||
173 | + }, | ||
174 | + rightContentContainer: { | ||
175 | + backgroundColor: '#f4f4f4', | ||
176 | + }, | ||
177 | + rightRow: { | ||
178 | + flexDirection: 'column', | ||
179 | + justifyContent: 'center', | ||
180 | + height: 44, | ||
181 | + width: rowWidth, | ||
182 | + paddingLeft: 15, | ||
183 | + }, | ||
184 | + underline:{ | ||
185 | + width: rowWidth, | ||
186 | + height: 0.5, | ||
187 | + backgroundColor:'#e0e0e0', | ||
188 | + position: 'absolute', | ||
189 | + bottom: 0, | ||
190 | + | ||
191 | + }, | ||
192 | + title: { | ||
193 | + fontSize: 14, | ||
194 | + color: '#444444', | ||
195 | + width: rowWidth - 15 - 6, | ||
196 | + }, | ||
197 | + subtitle: { | ||
198 | + fontSize: 14, | ||
199 | + color: '#b0b0b0', | ||
200 | + }, | ||
201 | + arrow: { | ||
202 | + justifyContent: 'flex-end', | ||
203 | + alignItems: 'center', | ||
204 | + width: 6, | ||
205 | + height: 12, | ||
206 | + }, | ||
207 | +}); |
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: 'new', | ||
34 | + name: '最新', | ||
35 | + value: { | ||
36 | + asc: 's_t_desc', | ||
37 | + desc: 's_t_desc', | ||
38 | + }, | ||
39 | + isAsc: false, | ||
40 | + radio: true, | ||
41 | + }, | ||
42 | + { | ||
43 | + key: 'price', | ||
44 | + name: '价格', | ||
45 | + value: { | ||
46 | + asc: 's_p_asc', | ||
47 | + desc: 's_p_desc', | ||
48 | + }, | ||
49 | + isAsc: false, | ||
50 | + radio: false, | ||
51 | + }, | ||
52 | + { | ||
53 | + key: 'discount', | ||
54 | + name: '折扣', | ||
55 | + value: { | ||
56 | + asc: 'p_d_asc', | ||
57 | + desc: 'p_d_desc', | ||
58 | + }, | ||
59 | + isAsc: false, | ||
60 | + radio: false, | ||
61 | + }, | ||
62 | + { | ||
63 | + key: 'filter', | ||
64 | + name: '筛选', | ||
65 | + value: { | ||
66 | + asc: 'filter', | ||
67 | + desc: 'filter', | ||
68 | + }, | ||
69 | + isAsc: false, | ||
70 | + radio: false, | ||
71 | + }, | ||
72 | + ], | ||
73 | + selectedIndex: 0, | ||
74 | + }; | ||
75 | + | ||
76 | + | ||
77 | + this.images = { | ||
78 | + normal: require('../../image/filter/shared_segmentedcontrol_other_normal.png'), | ||
79 | + asc: require('../../image/filter/shared_segmentedcontrol_other_up.png'), | ||
80 | + desc: require('../../image/filter/shared_segmentedcontrol_other_down.png'), | ||
81 | + down:require('../../image/filter/brandstore_filter_arrow_down.png'), | ||
82 | + down_normal:require('../../image/filter/brandstore_filter_arrow_down_normal.png'), | ||
83 | + up:require('../../image/filter/brandstore_filter_arrow_up.png'), | ||
84 | + up_normal:require('../../image/filter/brandstore_filter_arrow_up_normal.png'), | ||
85 | + }; | ||
86 | + } | ||
87 | + | ||
88 | + componentWillReceiveProps(nextProps){ | ||
89 | + if(nextProps.selectOrder==''){ | ||
90 | + this.setState({ | ||
91 | + selectedIndex: 0, | ||
92 | + }); | ||
93 | + } | ||
94 | + } | ||
95 | + | ||
96 | + _renderImage(rowData, rowID) { | ||
97 | + let img; | ||
98 | + if(rowID==0){ | ||
99 | + // if (rowID == this.state.selectedIndex) { | ||
100 | + // img = this.props.moreFilter ? this.images.up : this.images.down; | ||
101 | + // }else{ | ||
102 | + // img = this.props.moreFilter ? this.images.up_normal : this.images.down_normal; | ||
103 | + // } | ||
104 | + img = null; | ||
105 | + }else if(rowID==3){ | ||
106 | + img = this.props.lastSelected ? this.images.up : this.images.down_normal; | ||
107 | + }else{ | ||
108 | + if (rowID == this.state.selectedIndex){ | ||
109 | + img = rowData.isAsc ? this.images.asc : this.images.desc; | ||
110 | + }else{ | ||
111 | + img = this.images.normal; | ||
112 | + } | ||
113 | + } | ||
114 | + return <Image style={styles.image} source={img}/>; | ||
115 | + } | ||
116 | + | ||
117 | + _renderRow(rowData, sectionID, rowID) { | ||
118 | + let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'}; | ||
119 | + if (rowID == 3) { | ||
120 | + colorStyle = this.props.lastSelected ? {color: '#444444'} : {color: '#b0b0b0'}; | ||
121 | + } | ||
122 | + | ||
123 | + if(rowID==0){ | ||
124 | + // if(this.props.selectOrder=='s_t_desc'){ | ||
125 | + // rowData.name='最新'; | ||
126 | + // }else{ | ||
127 | + // rowData.name='默认'; | ||
128 | + // } | ||
129 | + } | ||
130 | + return ( | ||
131 | + <View style={{backgroundColor: 'white'}}> | ||
132 | + <TouchableOpacity style={{backgroundColor: 'white', flex: 1}} onPress={() => { | ||
133 | + | ||
134 | + let filters = this.state.filters; | ||
135 | + let filter = this.state.filters[rowID]; | ||
136 | + // if (filter.radio) { | ||
137 | + // this.props.onPressFilter && this.props.onPressFilter(filters[0].key); | ||
138 | + // return; | ||
139 | + // } | ||
140 | + if (rowID == 3) { | ||
141 | + let value = 'filter'; | ||
142 | + this.props.onPressFilter && this.props.onPressFilter(value); | ||
143 | + return; | ||
144 | + } | ||
145 | + filter.isAsc = !filter.isAsc; | ||
146 | + filters[rowID] = filter; | ||
147 | + this.setState({ | ||
148 | + selectedIndex: rowID, | ||
149 | + filters, | ||
150 | + }); | ||
151 | + | ||
152 | + let value = filter.isAsc ? filter.value['asc'] : filter.value['desc']; | ||
153 | + this.props.onPressFilter && this.props.onPressFilter(value); | ||
154 | + }}> | ||
155 | + <View key={'row' + rowID} style={styles.rowContainer}> | ||
156 | + <Text style={[styles.name, colorStyle]}>{rowData.name}</Text> | ||
157 | + {this._renderImage(rowData, rowID)} | ||
158 | + </View> | ||
159 | + </TouchableOpacity> | ||
160 | + </View> | ||
161 | + ); | ||
162 | + } | ||
163 | + | ||
164 | + _renderSeparator(sectionID, rowID, adjacentRowHighlighted) { | ||
165 | + return ( | ||
166 | + <View key={'sep' + rowID} style={styles.separator}> | ||
167 | + </View> | ||
168 | + ); | ||
169 | + } | ||
170 | + | ||
171 | + render() { | ||
172 | + | ||
173 | + let {style} = this.props; | ||
174 | + return ( | ||
175 | + <View style={[styles.container, style]}> | ||
176 | + <ListView | ||
177 | + contentContainerStyle={[styles.contentContainer, style]} | ||
178 | + enableEmptySections={true} | ||
179 | + dataSource={this.dataSource.cloneWithRows(this.state.filters)} | ||
180 | + renderRow={this._renderRow} | ||
181 | + renderSeparator={this._renderSeparator} | ||
182 | + scrollEnabled={false} | ||
183 | + scrollsToTop={false} | ||
184 | + /> | ||
185 | + <View style={{width: width,height: 0.5,backgroundColor: '#e5e5e5',}}/> | ||
186 | + </View> | ||
187 | + | ||
188 | + ); | ||
189 | + } | ||
190 | +} | ||
191 | + | ||
192 | +let selCol = '444444' | ||
193 | +let norCol = 'b0b0b0' | ||
194 | + | ||
195 | +let {width, height} = Dimensions.get('window'); | ||
196 | + | ||
197 | +let styles = StyleSheet.create({ | ||
198 | + container: { | ||
199 | + marginLeft: -1, | ||
200 | + width: width + 2, | ||
201 | + height: 40, | ||
202 | + backgroundColor:'white', | ||
203 | + }, | ||
204 | + contentContainer: { | ||
205 | + flexDirection: 'row', | ||
206 | + backgroundColor:'white', | ||
207 | + }, | ||
208 | + rowContainer: { | ||
209 | + flexDirection: 'row', | ||
210 | + justifyContent: 'center', | ||
211 | + alignItems: 'center', | ||
212 | + width: Math.ceil(width / 4), | ||
213 | + height: 40, | ||
214 | + backgroundColor: 'white', | ||
215 | + }, | ||
216 | + name: { | ||
217 | + color: '#b0b0b0', | ||
218 | + }, | ||
219 | + image: { | ||
220 | + marginTop: 2, | ||
221 | + marginLeft: 2, | ||
222 | + }, | ||
223 | + separator: { | ||
224 | + width: 0.5, | ||
225 | + top: 12.5, | ||
226 | + height: 15, | ||
227 | + backgroundColor: '#e5e5e5', | ||
228 | + }, | ||
229 | +}); |
@@ -43,7 +43,7 @@ export default class ProductListCell extends Component { | @@ -43,7 +43,7 @@ export default class ProductListCell extends Component { | ||
43 | > | 43 | > |
44 | <View style={{flex:1}}> | 44 | <View style={{flex:1}}> |
45 | <View style={styles.imageContainer}> | 45 | <View style={styles.imageContainer}> |
46 | - <Image style={styles.image} source={{uri: shop_logo.replace('{width}', 120).replace('{height}', 50)}}/> | 46 | + <Image style={styles.image} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/> |
47 | <Text style={styles.name}>{shop_name}</Text> | 47 | <Text style={styles.name}>{shop_name}</Text> |
48 | <Text style={styles.text}> | 48 | <Text style={styles.text}> |
49 | 上新 | 49 | 上新 |
17 KB
14.7 KB
15.2 KB
17.5 KB
15.1 KB
15.2 KB
17.4 KB
15.1 KB
15.2 KB
17 KB
14.7 KB
14.8 KB
1.3 KB
1.47 KB
1.83 KB
3.46 KB
1.08 KB
1.23 KB
3.45 KB
1.08 KB
1.25 KB
3.52 KB
3.87 KB
1.22 KB
1.1 KB
1.21 KB
@@ -20,7 +20,7 @@ let InitialState = Record({ | @@ -20,7 +20,7 @@ let InitialState = Record({ | ||
20 | isMoreFilter:false, | 20 | isMoreFilter:false, |
21 | error: null, | 21 | error: null, |
22 | list: List(), | 22 | list: List(), |
23 | - order: 's_n_desc', | 23 | + order: 's_t_desc', |
24 | currentPage: 0, | 24 | currentPage: 0, |
25 | pageCount: 0, | 25 | pageCount: 0, |
26 | pageSize: 60,//60, | 26 | pageSize: 60,//60, |
-
Please register or login to post a comment