mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 2228581733385767af10ca1f3a4b3f4f8f5845f0 1 parent ba60b92b

红人店铺筛选，review by Redding

Inline Side-by-side
Showing 9 changed files with 277 additions and 65 deletions
... ... @@ -34,7 +34,7 @@ export default class BrandProductFilter extends React.Component {
name: '默认',
value: {
normal: '',
popular: 'h_v_desc',
popular: '',
},
isPopular: false,
radio: true,
... ... @@ -50,21 +50,21 @@ export default class BrandProductFilter extends React.Component {
radio: false,
},
{
key: 'price',
name: '价格',
key: 'popular',
name: '人气',
value: {
asc: 's_p_asc',
desc: 's_p_desc',
asc: 'h_v_desc',
desc: 'h_v_desc',
},
isAsc: false,
radio: false,
},
{
key: 'discount',
name: '折扣',
key: 'price',
name: '价格',
value: {
asc: 'p_d_asc',
desc: 'p_d_desc',
asc: 's_p_asc',
desc: 's_p_desc',
},
isAsc: false,
radio: false,
... ... @@ -98,48 +98,54 @@ export default class BrandProductFilter extends React.Component {
}
componentWillReceiveProps(nextProps){
if(this.props.selectOrder=='' || this.props.selectOrder=='h_v_desc'){
this.setState({
selectedIndex: 0,
});
}else if (this.props.selectOrder =='s_t_desc') {
if (this.props.selectOrder =='s_t_desc') {
this.setState({
selectedIndex: 1,
});
}else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
}else if (this.props.selectOrder =='h_v_desc') {
this.setState({
selectedIndex: 2,
});
}else if (this.props.selectOrder =='p_d_asc' || this.props.selectOrder =='p_d_desc') {
}else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
this.setState({
selectedIndex: 3,
});
}else {
this.setState({
selectedIndex: 0,
});
}
}
componentDidMount() {
if(this.props.selectOrder=='' || this.props.selectOrder=='h_v_desc'){
this.setState({
selectedIndex: 0,
});
}else if (this.props.selectOrder =='s_t_desc') {
if (this.props.selectOrder =='s_t_desc') {
this.setState({
selectedIndex: 1,
});
}else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
}else if (this.props.selectOrder =='h_v_desc') {
this.setState({
selectedIndex: 2,
});
}else if (this.props.selectOrder =='p_d_asc' || this.props.selectOrder =='p_d_desc') {
}else if (this.props.selectOrder =='s_p_asc' || this.props.selectOrder =='s_p_desc') {
this.setState({
selectedIndex: 3,
});
}else {
this.setState({
selectedIndex: 0,
});
}
}
_renderImage(rowData, rowID) {
let img;
if(rowID==0 || rowID==1){
if(rowID==0){
if (rowID == this.state.selectedIndex) {
img = this.images.default_selected;
}else{
img = this.images.default_normal;
}
}else if(rowID==1 || rowID==2){
return null;
}else if(rowID==4){
img = this.props.lastSelected ? this.images.up : this.images.down_normal;
... ... @@ -166,8 +172,8 @@ export default class BrandProductFilter extends React.Component {
}
if(rowID==0){
if (this.props.lastSelectedPopular) {
rowData.name='人气';
if (this.props.moreFilterSelectOrder!= '') {
rowData.name='折扣';
}else {
rowData.name='默认';
}
... ... @@ -180,14 +186,16 @@ export default class BrandProductFilter extends React.Component {
let filter = this.state.filters[rowID];
if (rowID == 1 && this.state.selectedIndex == 1) {
return;
}else if (rowID == 2 && this.state.selectedIndex == 2) {
return;
}
if (filter.radio) {
if (this.state.selectedIndex > 0) {
this.setState({
selectedIndex: rowID,
});
let value = this.props.lastSelectedPopular ? filter.value['popular'] : filter.value['normal'];
this.props.onPressFilter && this.props.onPressFilter(value);
// let value = this.props.lastSelectedPopular ? filter.value['popular'] : filter.value['normal'];
this.props.onPressFilter && this.props.onPressFilter(this.props.moreFilterSelectOrder);
} else {
this.props.onPressFilter && this.props.onPressFilter(filters[0].key);
}
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Image,
Text,
ListView,
TouchableOpacity,
Dimensions,
StyleSheet,
} = ReactNative;
export default class BrandProductMoreFilter extends React.Component {
constructor(props) {
super (props);
this._renderRow = this._renderRow.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this._renderImage = this._renderImage.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1.key != r2.key,
});
this.state = {
filters: [
{
key: 'default',
name: '默认',
value:'',
},
{
key: 'new',
name: '折扣从高到低',
value:'p_d_asc',
},
{
key: 'new',
name: '折扣从低到高',
value:'p_d_desc',
},
],
};
this.images = {
selected: require('../../../brandStore/image/filter/brandstore_filter_selected.png'),
};
}
_renderImage(rowData, rowID) {
let {moreFilterSelectOrder} = this.props;
if(rowData.value!=moreFilterSelectOrder){
return null;
}
return <Image style={styles.image} source={require('../../../brandStore/image/filter/brandstore_filter_selected.png')}/>;
}
_renderRow(rowData, sectionID, rowID) {
let {moreFilterSelectOrder} = this.props;
let colorStyle = {};
if(rowData.value != moreFilterSelectOrder){
colorStyle = {color: '#b0b0b0'};
}
return (
<TouchableOpacity onPress={() => {
let filters = this.state.filters;
let filter = this.state.filters[rowID];
this.props.onPressMoreFilter && this.props.onPressMoreFilter(filter.value);
}}>
<View key={'row' + rowID} style={styles.rowContainer}>
<Text style={[styles.name,colorStyle]}>{rowData.name}</Text>
{this._renderImage(rowData, rowID)}
</View>
</TouchableOpacity>
);
}
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
return (
<View key={'sep' + rowID} style={styles.separator}>
</View>
);
}
render() {
let {style} = this.props;
return (
<View style={[styles.container, style]}>
<View style={styles.line}/>
<ListView
contentContainerStyle={[styles.contentContainer, style]}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(this.state.filters)}
renderRow={this._renderRow}
renderSeparator={this._renderSeparator}
scrollEnabled={false}
scrollsToTop={false}
/>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.props.onPressCloseMoreFilter && this.props.onPressCloseMoreFilter();
}}>
<View style={styles.bg}/>
</TouchableOpacity>
</View>
);
}
}
let selCol = '444444'
let norCol = 'b0b0b0'
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
position: 'absolute',
top: 40,
left: 0,
width: width,
height: height - 40 - 64,
},
contentContainer: {
flexDirection: 'column',
backgroundColor: 'white',
},
rowContainer: {
flexDirection: 'row',
alignItems: 'center',
width: width,
height: 44,
},
name: {
flex:1,
color: 'black',
marginLeft:16,
fontSize:14,
},
image: {
marginRight:20,
},
line: {
width: width,
height: 0.5,
backgroundColor: '#e0e0e0',
},
separator: {
width: width,
height: 0.5,
marginLeft:16,
backgroundColor: '#e0e0e0',
},
bg: {
width: width,
height:height - 40 - 44 - 64-88,
backgroundColor: '#000000',
opacity:0.5,
},
});
... ...
... ... @@ -101,7 +101,7 @@ export default class ProductCategoryList extends React.Component {
lastSelected={this.props.productList.isFilter}
moreFilter={this.props.productList.isMoreFilter}
selectOrder={this.props.productList.order}
lastSelectedPopular={this.props.lastSelectedPopular}/>
moreFilterSelectOrder={this.props.moreFilterSelectOrder}/>
<View style={styles.container}>
<ListView
... ...
... ... @@ -26,6 +26,7 @@ import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import RedBrandTwoProductCell from './RedBrandTwoProductCell';
import BrandProductFilter from './BrandProductFilter';
import BrandProductMoreFilter from './BrandProductMoreFilter';
import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell';
import Prompt from '../../../coupon/components/coupon/Prompt';
import FourImages from './FourImages';
... ... @@ -334,6 +335,7 @@ export default class RedBrand extends Component {
lastSelected={this.props.productList.isFilter}
moreFilter={this.props.productList.isMoreFilter}
selectOrder={this.props.productList.order}
moreFilterSelectOrder={this.props.moreFilterSelectOrder}
/>
:null
}
... ... @@ -359,11 +361,11 @@ export default class RedBrand extends Component {
let {launchProfile, shopsdecorator} = this.props;
let resList = shopsdecorator.modules?shopsdecorator.modules.toArray():[];
return (
<Header
resource={rowData}
launchProfile={launchProfile}
onPressLaunchProfile={this._onPressLaunchProfile}
onPressCollection={this.props.onPressCollection}
<Header
resource={rowData}
launchProfile={launchProfile}
onPressLaunchProfile={this._onPressLaunchProfile}
onPressCollection={this.props.onPressCollection}
onPressLink={this.props.onPressLink}
/>
);
... ... @@ -379,80 +381,80 @@ export default class RedBrand extends Component {
};
if (rowData.get('module_type') == 'coupon') {
return (
<CouponCell
yh_exposureData={params}
resource={rowData}
<CouponCell
yh_exposureData={params}
resource={rowData}
onPressCoupon={this.props.onPressCoupon}
/>
);
} else if (rowData.get('module_type') == 'CarouselImage') {
return (
<RedBrandSwiper
yh_exposureData={params}
resource={rowData}
<RedBrandSwiper
yh_exposureData={params}
resource={rowData}
onPressSlideItem={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'Title') {
return (
<Title
yh_exposureData={params}
resource={rowData}
<Title
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'SingleImage') {
return (
<SingleImage
yh_exposureData={params}
resource={rowData}
<SingleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'DoubleImage') {
return (
<DoubleImage
yh_exposureData={params}
resource={rowData}
<DoubleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'Video') {
return (
<Video
yh_exposureData={params}
resource={rowData}
videoCounts={videoCounts}
<Video
yh_exposureData={params}
resource={rowData}
videoCounts={videoCounts}
onPressVideo={this.props.onPressVideo}
/>
);
} else if (rowData.get('module_type') == 'TripleImage') {
return (
<TripleImage
yh_exposureData={params}
resource={rowData}
<TripleImage
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'FourImage') {
return (
<FourImages
yh_exposureData={params}
resource={rowData}
<FourImages
yh_exposureData={params}
resource={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else if (rowData.get('module_type') == 'AppRecommendProduct') {
return (
<GoodsGroupList
yh_exposureData={params}
resource={rowData}
<GoodsGroupList
yh_exposureData={params}
resource={rowData}
onPressProductRecommend={this.props.onPressProductRecommend}
/>
);
} else {
return (
<View
<View
style={{height:0,width:width,backgroundColor:'red'}}
/>
);
... ... @@ -597,13 +599,21 @@ export default class RedBrand extends Component {
filterNameFactors={filterNameFactors}
onPressProductFilterRightItem={this.props.onPressProductFilterRightItem}
onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}
onPressMoreFilter={this.props.onPressMoreFilter}/> : null}
onPressMoreFilter={this.props.onPressMoreFilter}
moreFilterSelectOrder={this.props.moreFilterSelectOrder}/> : null}
{needShowToast ? <Prompt
text={showToastMessage}
duration={1000}
onPromptHidden={this.props.resetReceiveCouponResult}
/> : null}
{productList.isMoreFilter ?
<BrandProductMoreFilter
productList={productList}
onPressCloseMoreFilter={this.props.onPressCloseMoreFilter}
onPressMoreFilter={this.props.onPressMoreFilter}
moreFilterSelectOrder={this.props.moreFilterSelectOrder}/> : null}
<LoadingIndicator
isVisible={isFetching}
/>
... ...
... ... @@ -3,7 +3,7 @@ import keyMirror from 'key-mirror';
export default keyMirror({
SET_SIMILAR_PRODUCT_INDEX: null,
SET_SHOW_SIMILAR_GUIDER: null,
SET_PLATFORM: null,
SET_HOST: null,
SET_SHOP_ID: null,
... ... @@ -64,4 +64,5 @@ export default keyMirror({
GET_LIVE_COUNT_REQUEST: null,
GET_LIVE_COUNT_SUCCESS: null,
GET_LIVE_COUNT_FAILURE: null,
UPDATE_MORE_FILTER_SELECTED_OTHER: null,
});
... ...
... ... @@ -263,6 +263,12 @@ class RedPersonBrandContainer extends Component {
this.props.actions.getProductList(true);
}
_onPressMoreFilter(value){
let {productList} = this.props.redBrand;
if (value == productList.get('order')) {
this.props.actions.setFilterMoreView(false);
return;
}
this.props.actions.updateMoreFilterSelectOrder(value);
this.props.actions.setFilterMoreView(false);
this.props.actions.setProductListFilter(value);
this.props.actions.resetListPageInfo();
... ... @@ -300,6 +306,7 @@ class RedPersonBrandContainer extends Component {
filterNameFactors,
receiveCouponResult,
coupon,
moreFilterSelectOrder,
} = this.props.redBrand;
return (
... ... @@ -309,6 +316,7 @@ class RedPersonBrandContainer extends Component {
productListForNew={productListForNew}
launchProfile={launchProfile}
fliter={fliter}
moreFilterSelectOrder={moreFilterSelectOrder}
receiveCouponResult={receiveCouponResult}
coupon={coupon}
categoryFilterList={categoryFilterList}
... ...
... ... @@ -64,6 +64,8 @@ const {
GET_LIVE_COUNT_SUCCESS,
GET_LIVE_COUNT_FAILURE,
UPDATE_MORE_FILTER_SELECTED_OTHER,
} = require('../../constants/actionTypes').default;
export function setSimilarIndex(rowID) {
... ... @@ -1290,3 +1292,10 @@ export function getVideoLiveCount(room_id) {
});
};
}
export function updateMoreFilterSelectOrder(state) {
return {
type: UPDATE_MORE_FILTER_SELECTED_OTHER,
payload: state,
}
}
... ...
... ... @@ -93,6 +93,7 @@ let InitialState = Record({
isNeedShow: false,
})),
showSimilarGuider: false,
moreFilterSelectOrder: '',
});
export default InitialState;
... ...
... ... @@ -63,6 +63,8 @@ const {
GET_LIVE_COUNT_SUCCESS,
GET_LIVE_COUNT_FAILURE,
UPDATE_MORE_FILTER_SELECTED_OTHER,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ... @@ -330,6 +332,9 @@ export default function redBrandReducer(state=initialState, action) {
case SET_SHOW_SIMILAR_GUIDER: {
return state.set('showSimilarGuider', action.payload);
}
case UPDATE_MORE_FILTER_SELECTED_OTHER: {
return state.set('moreFilterSelectOrder', action.payload);
}
}
return state;
}
... ...