mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 46b9dc8db4ef4c321d9d9be9d1fe6a26cb32e8dc 1 parent b731ad17

红人店铺模块化, review by Redding

Inline Side-by-side
Showing 12 changed files with 404 additions and 39 deletions
@@ -42,6 +42,7 @@ export default class DoubleImage extends React.Component { @@ -42,6 +42,7 @@ export default class DoubleImage extends React.Component {
42 let data1 = list?list[0]:null; 42 let data1 = list?list[0]:null;
43 let backgroundImage1 = data1.pic; 43 let backgroundImage1 = data1.pic;
44 let linkType1 = data1.linkType; 44 let linkType1 = data1.linkType;
  45 + let showProductInfo1 = data1.showProductInfo;
45 let product1 = data1.product; 46 let product1 = data1.product;
46 let salePrice1 = product1?parseFloat(product1.sales_price):0; 47 let salePrice1 = product1?parseFloat(product1.sales_price):0;
47 let originPrice1 = product1?parseFloat(product1.market_price):0; 48 let originPrice1 = product1?parseFloat(product1.market_price):0;
@@ -54,6 +55,7 @@ export default class DoubleImage extends React.Component { @@ -54,6 +55,7 @@ export default class DoubleImage extends React.Component {
54 let data2 = list?list[1]:null; 55 let data2 = list?list[1]:null;
55 let backgroundImage2 = data2.pic; 56 let backgroundImage2 = data2.pic;
56 let linkType2 = data2.linkType; 57 let linkType2 = data2.linkType;
  58 + let showProductInfo2 = data2.showProductInfo;
57 let product2 = data2.product; 59 let product2 = data2.product;
58 let salePrice2 = product2?parseFloat(product2.sales_price):0; 60 let salePrice2 = product2?parseFloat(product2.sales_price):0;
59 let originPrice2 = product2?parseFloat(product2.market_price):0; 61 let originPrice2 = product2?parseFloat(product2.market_price):0;
@@ -70,7 +72,7 @@ export default class DoubleImage extends React.Component { @@ -70,7 +72,7 @@ export default class DoubleImage extends React.Component {
70 url={backgroundImage1} 72 url={backgroundImage1}
71 style={styles.thumbnail} 73 style={styles.thumbnail}
72 ></YH_Image> 74 ></YH_Image>
73 - {linkType1=='1'?<View style={styles.titleView}> 75 + {linkType1=='1'&& showProductInfo1 ?<View style={styles.titleView}>
74 <Text style={styles.title} numberOfLines={1}>{name1}</Text> 76 <Text style={styles.title} numberOfLines={1}>{name1}</Text>
75 <View style={styles.saleView}> 77 <View style={styles.saleView}>
76 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble1?'red':'white',}}>{price1}</Text> 78 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble1?'red':'white',}}>{price1}</Text>
@@ -84,7 +86,7 @@ export default class DoubleImage extends React.Component { @@ -84,7 +86,7 @@ export default class DoubleImage extends React.Component {
84 url={backgroundImage2} 86 url={backgroundImage2}
85 style={styles.thumbnail} 87 style={styles.thumbnail}
86 ></YH_Image> 88 ></YH_Image>
87 - {linkType2=='1'?<View style={styles.titleView}> 89 + {linkType2=='1' && showProductInfo2 ?<View style={styles.titleView}>
88 <Text style={styles.title} numberOfLines={1}>{name2}</Text> 90 <Text style={styles.title} numberOfLines={1}>{name2}</Text>
89 <View style={styles.saleView}> 91 <View style={styles.saleView}>
90 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble2?'red':'white',}}>{price2}</Text> 92 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble2?'red':'white',}}>{price2}</Text>
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +
  6 +const {
  7 + Image,
  8 + View,
  9 + StyleSheet,
  10 + Dimensions,
  11 + Text,
  12 + ListView,
  13 + TouchableOpacity,
  14 + Platform,
  15 +} = ReactNative;
  16 +
  17 +import DeviceInfo from 'react-native-device-info';
  18 +import Immutable, {Map} from 'immutable';
  19 +
  20 +export default class Recommend extends React.Component {
  21 +
  22 + constructor(props) {
  23 + super (props);
  24 + this.renderRow = this.renderRow.bind(this);
  25 + this.dataSource = new ListView.DataSource({
  26 + rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
  27 + });
  28 + }
  29 +
  30 + shouldComponentUpdate(nextProps){
  31 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  32 + return false;
  33 + } else {
  34 + return true;
  35 + }
  36 + }
  37 +
  38 + renderRow(rowData, sectionID, rowID, highlightRow) {
  39 + let rowContainerHeight = itemWidth + 20;
  40 + let {resource} = this.props;
  41 + let list = resource.get('module_data').get('data').toArray();
  42 +
  43 + let bottomStyle ={};
  44 + if (rowID < list.length - 4) {
  45 + rowContainerHeight += 1;
  46 + }else {
  47 + bottomStyle ={borderBottomWidth: 0}
  48 + }
  49 + if (rowData.get('linkType') == 1 && !rowData.get('showProductInfo')) {
  50 + rowContainerHeight -= 20;
  51 + }
  52 + return (
  53 + <TouchableOpacity activeOpacity={0.5} onPress={() => {
  54 + this.props.onPressProduct && this.props.onPressProduct(rowData.get('linkType'), rowData.get('resource'));
  55 + }}>
  56 + <View style={[styles.rowContainer, bottomStyle,{height: rowContainerHeight}]}>
  57 + <Image
  58 + source={{uri: rowData.get('pic')}}
  59 + style={styles.thumbnail}
  60 + >
  61 + </Image>
  62 + {rowData.get('linkType') == 1 && rowData.get('showProductInfo')?
  63 + <View style={styles.itemTitle}>
  64 + <Text style={styles.itemText} numberOfLines={1}>{rowData.get('text')}</Text>
  65 + </View>
  66 + :null
  67 + }
  68 + </View>
  69 + </TouchableOpacity>
  70 +
  71 + );
  72 + }
  73 +
  74 + render() {
  75 + let {resource} = this.props;
  76 + let list = resource.get('module_data').get('data').toArray();
  77 + if (!list || list.length == 0) {
  78 + return null;
  79 + }
  80 +
  81 + let backgroundWidth = width;
  82 + let backgroundHeight = 40 + Math.ceil(list.length / 4) * itemWidth + 15;
  83 + return (
  84 + <View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'#f0f0f0'}}>
  85 + <ListView
  86 + contentContainerStyle={styles.contentContainer}
  87 + dataSource={this.dataSource.cloneWithRows(list)}
  88 + renderRow={this.renderRow}
  89 + enableEmptySections={true}
  90 + pageSize={Math.ceil(list.length/4)}
  91 + scrollEnabled={false}
  92 + scrollsToTop={false}
  93 + />
  94 + </View>
  95 + );
  96 + }
  97 +};
  98 +
  99 +let {width, height} = Dimensions.get('window');
  100 +let itemWidth = (width - 4)/4;
  101 +
  102 +const styles = StyleSheet.create({
  103 + contentContainer: {
  104 + flexDirection: 'row',
  105 + flexWrap: 'wrap',
  106 + backgroundColor: 'white',
  107 + alignItems:'flex-start',
  108 + },
  109 + header: {
  110 +
  111 + },
  112 + rowContainer: {
  113 + width: itemWidth + 1,
  114 + height: itemWidth + 20,
  115 + borderRightWidth: 1,
  116 + borderBottomWidth: 1,
  117 + borderColor: '#e5e5e5',
  118 + backgroundColor: 'white',
  119 +
  120 + },
  121 + thumbnail: {
  122 + width: itemWidth,
  123 + height: itemWidth,
  124 + },
  125 + itemTitle: {
  126 + height: 20,
  127 + width: itemWidth,
  128 + },
  129 + itemText: {
  130 + fontWeight: 'bold',
  131 + textAlign: 'center',
  132 + color: 'gray',
  133 + fontSize: 9,
  134 + },
  135 + text: {
  136 + textAlign: 'center',
  137 + fontSize: 16,
  138 + fontWeight: 'bold',
  139 + color: '#444',
  140 + },
  141 +});
@@ -99,7 +99,7 @@ export default class Header extends React.Component { @@ -99,7 +99,7 @@ export default class Header extends React.Component {
99 } 99 }
100 100
101 render() { 101 render() {
102 - let {resource,launchProfile} = this.props; 102 + let {resource,launchProfile,showShopBanner} = this.props;
103 if (!resource) { 103 if (!resource) {
104 return null; 104 return null;
105 } 105 }
@@ -123,8 +123,12 @@ export default class Header extends React.Component { @@ -123,8 +123,12 @@ export default class Header extends React.Component {
123 let favImage = isFav?require('../../image/btn_gz_h.png'):require('../../image/btn_gz_n.png'); 123 let favImage = isFav?require('../../image/btn_gz_h.png'):require('../../image/btn_gz_n.png');
124 //下拉图标 124 //下拉图标
125 let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png'); 125 let sourceIcon = launchProfile?require('../../image/arrow_ic_up.png'):require('../../image/arrow_ic.png');
  126 + let realContentHeight = launchProfile ? this.state.realContentHeight + 20 : 60;
  127 + if (!showShopBanner) {
  128 + realContentHeight = 0;
  129 + }
126 //计算控件高度，图片＋标题＋简介＋下拉图标＋20空白 130 //计算控件高度，图片＋标题＋简介＋下拉图标＋20空白
127 - let cellHeight = launchProfile ? (imageHeigth + titleHeigth + this.state.realContentHeight + 20 + 20) : (imageHeigth + titleHeigth + 60 + 20); 131 + let cellHeight = launchProfile ? (imageHeigth + titleHeigth + realContentHeight + 20) : (imageHeigth + titleHeigth + realContentHeight + 20);
128 //获取字体 132 //获取字体
129 let fontFamilyStyle = {}; 133 let fontFamilyStyle = {};
130 if (Platform.OS === 'ios') { 134 if (Platform.OS === 'ios') {
@@ -159,26 +163,30 @@ export default class Header extends React.Component { @@ -159,26 +163,30 @@ export default class Header extends React.Component {
159 url={brandIcon} 163 url={brandIcon}
160 style={styles.brandIcon} 164 style={styles.brandIcon}
161 /> 165 />
162 - <TouchableOpacity activeOpacity={0.5} onPress={() => {  
163 - this.props.onPressLaunchProfile && this.props.onPressLaunchProfile(!launchProfile);  
164 - }}>  
165 - {launchProfile ?<View style={{width: width,height: this.state.realContentHeight,backgroundColor: 'white'}}>  
166 - <WebView style={{width: width-40,height: this.state.realContentHeight,backgroundColor: 'white',marginRight: 20,marginLeft: 20}}  
167 - source= {{html: codeInject(htmlText)}}  
168 - scrollEnabled={false}  
169 - javaScriptEnabled={true}  
170 - decelerationRate="normal"  
171 - domStorageEnabled={true}  
172 - onNavigationStateChange={this.handleNavigationChange}  
173 - onShouldStartLoadWithRequest={hasLink?this.shouldStartLoadWithRequest:null}  
174 - >  
175 - </WebView>  
176 - </View>:<Text style={[styles.text, fontFamilyStyle]} numberOfLines={2}>{text}</Text>} 166 + {showShopBanner?
  167 + <TouchableOpacity activeOpacity={0.5} onPress={() => {
  168 + this.props.onPressLaunchProfile && this.props.onPressLaunchProfile(!launchProfile);
  169 + }}>
  170 + {launchProfile ?<View style={{width: width,height: this.state.realContentHeight,backgroundColor: 'white'}}>
  171 + <WebView style={{width: width-40,height: this.state.realContentHeight,backgroundColor: 'white',marginRight: 20,marginLeft: 20}}
  172 + source= {{html: codeInject(htmlText)}}
  173 + scrollEnabled={false}
  174 + javaScriptEnabled={true}
  175 + decelerationRate="normal"
  176 + domStorageEnabled={true}
  177 + onNavigationStateChange={this.handleNavigationChange}
  178 + onShouldStartLoadWithRequest={hasLink?this.shouldStartLoadWithRequest:null}
  179 + >
  180 + </WebView>
  181 + </View>:<Text style={[styles.text, fontFamilyStyle]} numberOfLines={2}>{text}</Text>}
  182 +
  183 + <View style={styles.fliter}>
  184 + <Image source={sourceIcon} style={styles.pullDown}/>
  185 + </View>
  186 + </TouchableOpacity>
  187 + :null
  188 + }
177 189
178 - <View style={styles.fliter}>  
179 - <Image source={sourceIcon} style={styles.pullDown}/>  
180 - </View>  
181 - </TouchableOpacity>  
182 </View> 190 </View>
183 ); 191 );
184 } 192 }
@@ -12,7 +12,7 @@ import { @@ -12,7 +12,7 @@ import {
12 TouchableOpacity, 12 TouchableOpacity,
13 } from 'react-native'; 13 } from 'react-native';
14 14
15 -import {Map} from 'immutable'; 15 +import Immutable,{Map,Record} from 'immutable';
16 import Header from './Header'; 16 import Header from './Header';
17 import RedBrandStoreFilter from './RedBrandStoreFilter'; 17 import RedBrandStoreFilter from './RedBrandStoreFilter';
18 import Title from './Title'; 18 import Title from './Title';
@@ -29,6 +29,9 @@ import BrandProductListCell from '../../../common/components/ListCell/ProductLis @@ -29,6 +29,9 @@ import BrandProductListCell from '../../../common/components/ListCell/ProductLis
29 import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter'; 29 import BrandProductFilter from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/BrandProductFilter';
30 import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell'; 30 import CouponCell from '../../../brandStore/components/brandStore/brandStoreSubView/Cells/CouponCell';
31 import Prompt from '../../../coupon/components/coupon/Prompt'; 31 import Prompt from '../../../coupon/components/coupon/Prompt';
  32 +import FourImages from './FourImages';
  33 +import GoodsGroupList from '../../../guang/components/detail/GoodsGroupList';
  34 +
32 35
33 export default class RedBrand extends Component { 36 export default class RedBrand extends Component {
34 constructor(props) { 37 constructor(props) {
@@ -74,6 +77,7 @@ export default class RedBrand extends Component { @@ -74,6 +77,7 @@ export default class RedBrand extends Component {
74 let {fliter} = this.props; 77 let {fliter} = this.props;
75 78
76 switch(sectionID) { 79 switch(sectionID) {
  80 + case 'newProductList':
77 case 'brandReource': { 81 case 'brandReource': {
78 return(<RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/>); 82 return(<RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/>);
79 } 83 }
@@ -90,7 +94,10 @@ export default class RedBrand extends Component { @@ -90,7 +94,10 @@ export default class RedBrand extends Component {
90 } 94 }
91 return ( 95 return (
92 <View style={styles.brandFilterContainer} onLayout={(evt) => {yPosition = evt.nativeEvent.layout.y;}}> 96 <View style={styles.brandFilterContainer} onLayout={(evt) => {yPosition = evt.nativeEvent.layout.y;}}>
93 - <RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/> 97 + {this.props.fliter == '2' ?
  98 + <RedBrandStoreFilter resource={fliter} onPressStoreFilter={this._onPressFilter}/>
  99 + :null
  100 + }
94 <BrandProductFilter 101 <BrandProductFilter
95 onPressFilter={this._onPressProductFilter} 102 onPressFilter={this._onPressProductFilter}
96 lastSelected={this.props.productList.isFilter} 103 lastSelected={this.props.productList.isFilter}
@@ -108,8 +115,16 @@ export default class RedBrand extends Component { @@ -108,8 +115,16 @@ export default class RedBrand extends Component {
108 115
109 renderRow(rowData, sectionID, rowID, highlightRow) { 116 renderRow(rowData, sectionID, rowID, highlightRow) {
110 if (sectionID == 'ShopBanner') { 117 if (sectionID == 'ShopBanner') {
111 - let {launchProfile} = this.props;  
112 - return(<Header resource={rowData} launchProfile={launchProfile} onPressLaunchProfile={this._onPressLaunchProfile} onPressCollection={this.props.onPressCollection} onPressLink={this.props.onPressLink}/>); 118 + let {launchProfile, shopsdecorator} = this.props;
  119 + let resList = shopsdecorator.modules?shopsdecorator.modules.toArray():[];
  120 + let showShopBanner = false;
  121 + resList.map((item, index) => {
  122 + if (item.get('module_type') == 'ShopBanner') {
  123 + let data = item.get('module_data').get('data').toArray();
  124 + showShopBanner = data[0].get('showShopInfo');
  125 + }
  126 + });
  127 + return(<Header resource={rowData} launchProfile={launchProfile} showShopBanner={showShopBanner} onPressLaunchProfile={this._onPressLaunchProfile} onPressCollection={this.props.onPressCollection} onPressLink={this.props.onPressLink}/>);
113 } else if(sectionID == 'brandReource'){ 128 } else if(sectionID == 'brandReource'){
114 if (rowData.get('module_type') == 'coupon') { 129 if (rowData.get('module_type') == 'coupon') {
115 return(<CouponCell resource={rowData} onPressCoupon={this.props.onPressCoupon}/>); 130 return(<CouponCell resource={rowData} onPressCoupon={this.props.onPressCoupon}/>);
@@ -125,14 +140,18 @@ export default class RedBrand extends Component { @@ -125,14 +140,18 @@ export default class RedBrand extends Component {
125 return(<Video resource={rowData} videoCounts={videoCounts} onPressVideo={this.props.onPressVideo}/>); 140 return(<Video resource={rowData} videoCounts={videoCounts} onPressVideo={this.props.onPressVideo}/>);
126 }else if (rowData.get('module_type') == 'TripleImage') { 141 }else if (rowData.get('module_type') == 'TripleImage') {
127 return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>); 142 return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
  143 + }else if (rowData.get('module_type') == 'FourImage') {
  144 + return(<FourImages resource={rowData} onPressProduct={this.props.onPressProduct}/>);
  145 + }else if (rowData.get('module_type') == 'AppRecommendProduct') {
  146 + return(<GoodsGroupList resource={rowData} onPressProduct={this.props.onPressProductCell}/>);
128 } 147 }
129 - } else if (sectionID == 'productList') { 148 + } else if (sectionID == 'productList' || sectionID == 'newProductList') {
130 let similarIndex = this.props.similarIndex; 149 let similarIndex = this.props.similarIndex;
131 let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal; 150 let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
132 let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft}; 151 let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
133 - let showSimilarGuider = this.props.showSimilarGuider  
134 - && this.state.scrollEnd  
135 - && rowID == this.state.selectedVisibleIndex 152 + let showSimilarGuider = this.props.showSimilarGuider
  153 + && this.state.scrollEnd
  154 + && rowID == this.state.selectedVisibleIndex
136 && rowID != similarIndex; 155 && rowID != similarIndex;
137 return ( 156 return (
138 <BrandProductListCell 157 <BrandProductListCell
@@ -167,7 +186,7 @@ export default class RedBrand extends Component { @@ -167,7 +186,7 @@ export default class RedBrand extends Component {
167 let rowIndexs = Object.keys(visibleRows[targetSection]); 186 let rowIndexs = Object.keys(visibleRows[targetSection]);
168 if (rowIndexs.length > 0) { 187 if (rowIndexs.length > 0) {
169 selectedIndex = rowIndexs[0]; 188 selectedIndex = rowIndexs[0];
170 - } 189 + }
171 if (rowIndexs.length > 3) { 190 if (rowIndexs.length > 3) {
172 selectedIndex = rowIndexs[2]; 191 selectedIndex = rowIndexs[2];
173 } 192 }
@@ -188,6 +207,7 @@ export default class RedBrand extends Component { @@ -188,6 +207,7 @@ export default class RedBrand extends Component {
188 let { 207 let {
189 productList, 208 productList,
190 launchProfile, 209 launchProfile,
  210 + productListForNew,
191 fliter, 211 fliter,
192 categoryFilterList, 212 categoryFilterList,
193 filterCategoryDetailFilterList, 213 filterCategoryDetailFilterList,
@@ -209,10 +229,16 @@ export default class RedBrand extends Component { @@ -209,10 +229,16 @@ export default class RedBrand extends Component {
209 dataSource = { 229 dataSource = {
210 ShopBanner: [shopIntro], 230 ShopBanner: [shopIntro],
211 brandReource: resList, 231 brandReource: resList,
  232 + productList: productList.list.toArray(),
212 }; 233 };
213 } else if (fliter == 1) { 234 } else if (fliter == 1) {
214 dataSource = { 235 dataSource = {
215 ShopBanner: [shopIntro], 236 ShopBanner: [shopIntro],
  237 + newProductList: productListForNew.list.toArray(),
  238 + };
  239 + } else if (fliter == 2) {
  240 + dataSource = {
  241 + ShopBanner: [shopIntro],
216 productList: productList.list.toArray(), 242 productList: productList.list.toArray(),
217 }; 243 };
218 } 244 }
@@ -31,8 +31,11 @@ export default class RedBrandStoreFilter extends React.Component { @@ -31,8 +31,11 @@ export default class RedBrandStoreFilter extends React.Component {
31 key: 'home', 31 key: 'home',
32 name: '首页', 32 name: '首页',
33 isSelect: false, 33 isSelect: false,
34 - },  
35 - { 34 + },{
  35 + key: 'new',
  36 + name: '新品',
  37 + isSelect: false,
  38 + },{
36 key: 'all', 39 key: 'all',
37 name: '全部商品', 40 name: '全部商品',
38 isSelect: false, 41 isSelect: false,
@@ -102,6 +105,7 @@ let {width, height} = Dimensions.get('window'); @@ -102,6 +105,7 @@ let {width, height} = Dimensions.get('window');
102 let styles = StyleSheet.create({ 105 let styles = StyleSheet.create({
103 container: { 106 container: {
104 marginLeft: -1, 107 marginLeft: -1,
  108 + marginRight: -0.5,
105 width: width + 2, 109 width: width + 2,
106 height: 44, 110 height: 44,
107 backgroundColor:'white', 111 backgroundColor:'white',
@@ -113,7 +117,7 @@ let styles = StyleSheet.create({ @@ -113,7 +117,7 @@ let styles = StyleSheet.create({
113 flexDirection: 'row', 117 flexDirection: 'row',
114 justifyContent: 'center', 118 justifyContent: 'center',
115 alignItems: 'center', 119 alignItems: 'center',
116 - width: Math.ceil(width / 2), 120 + width: Math.ceil(width / 3),
117 height: 43, 121 height: 43,
118 backgroundColor:'white', 122 backgroundColor:'white',
119 }, 123 },
@@ -39,9 +39,12 @@ export default class SingleImage extends React.Component { @@ -39,9 +39,12 @@ export default class SingleImage extends React.Component {
39 let data = list?list[0]:null; 39 let data = list?list[0]:null;
40 let backgroundImage = data.pic; 40 let backgroundImage = data.pic;
41 let linkType = data.linkType; 41 let linkType = data.linkType;
  42 + let showProductInfo = data.showProductInfo;
42 let properties = resource.get('module_data').get('properties').toJS(); 43 let properties = resource.get('module_data').get('properties').toJS();
43 let imageW = properties.width; 44 let imageW = properties.width;
44 let imageH = properties.height; 45 let imageH = properties.height;
  46 + imageW = imageW ? imageW : width;
  47 + imageH = imageH ? imageH : 200
45 let isModuleMargin = properties.isModuleMargin; 48 let isModuleMargin = properties.isModuleMargin;
46 let imageHeight = (imageH*width)/(imageW==0?1:imageW);//根据返回信息计算出高度 49 let imageHeight = (imageH*width)/(imageW==0?1:imageW);//根据返回信息计算出高度
47 let backgroundHeight =isModuleMargin?((imageH*width)/(imageW==0?1:imageW)+10):(imageH*width)/(imageW==0?1:imageW); 50 let backgroundHeight =isModuleMargin?((imageH*width)/(imageW==0?1:imageW)+10):(imageH*width)/(imageW==0?1:imageW);
@@ -63,7 +66,7 @@ export default class SingleImage extends React.Component { @@ -63,7 +66,7 @@ export default class SingleImage extends React.Component {
63 url={backgroundImage} 66 url={backgroundImage}
64 style={{width: backgroundWidth, height: imageHeight}} 67 style={{width: backgroundWidth, height: imageHeight}}
65 /> 68 />
66 - {linkType=='1'?<View style={{ width: width, height: 35,position: 'absolute',backgroundColor: 'rgba(0,0,0,0.3)',top: imageHeight-35,flexDirection: 'row',alignItems: 'center',justifyContent: 'space-around'}}> 69 + {linkType=='1' && showProductInfo?<View style={{ width: width, height: 35,position: 'absolute',backgroundColor: 'rgba(0,0,0,0.3)',top: imageHeight-35,flexDirection: 'row',alignItems: 'center',justifyContent: 'space-around'}}>
67 <Text style={styles.text1}>{name}</Text> 70 <Text style={styles.text1}>{name}</Text>
68 <Text style={{marginRight: 10,fontSize: 15,backgroundColor: 'transparent',color: saleAble?'red':'white'}}>{price}</Text> 71 <Text style={{marginRight: 10,fontSize: 15,backgroundColor: 'transparent',color: saleAble?'red':'white'}}>{price}</Text>
69 {saleAble?<Text style={styles.deleteSale}>{sale}</Text>:null} 72 {saleAble?<Text style={styles.deleteSale}>{sale}</Text>:null}
@@ -31,6 +31,7 @@ export default class RedPersonPicThree extends Component{ @@ -31,6 +31,7 @@ export default class RedPersonPicThree extends Component{
31 let data1 = list?list[0]:null; 31 let data1 = list?list[0]:null;
32 let backgroundImage1 = data1?data1.pic:''; 32 let backgroundImage1 = data1?data1.pic:'';
33 let linkType1 = data1.linkType; 33 let linkType1 = data1.linkType;
  34 + let showProductInfo1 = data1.showProductInfo;
34 let product1 = data1.product; 35 let product1 = data1.product;
35 let salePrice1 = product1?parseFloat(product1.sales_price):0; 36 let salePrice1 = product1?parseFloat(product1.sales_price):0;
36 let originPrice1 = product1?parseFloat(product1.market_price):0; 37 let originPrice1 = product1?parseFloat(product1.market_price):0;
@@ -43,6 +44,7 @@ export default class RedPersonPicThree extends Component{ @@ -43,6 +44,7 @@ export default class RedPersonPicThree extends Component{
43 let data2 = list?list[1]:null; 44 let data2 = list?list[1]:null;
44 let backgroundImage2 = data2.pic; 45 let backgroundImage2 = data2.pic;
45 let linkType2 = data2.linkType; 46 let linkType2 = data2.linkType;
  47 + let showProductInfo2 = data2.showProductInfo;
46 let product2 = data2.product; 48 let product2 = data2.product;
47 let salePrice2 = product2?parseFloat(product2.sales_price):0; 49 let salePrice2 = product2?parseFloat(product2.sales_price):0;
48 let originPrice2 = product2?parseFloat(product2.market_price):0; 50 let originPrice2 = product2?parseFloat(product2.market_price):0;
@@ -55,6 +57,7 @@ export default class RedPersonPicThree extends Component{ @@ -55,6 +57,7 @@ export default class RedPersonPicThree extends Component{
55 let data3 = list?list[2]:null; 57 let data3 = list?list[2]:null;
56 let backgroundImage3 = data3.pic; 58 let backgroundImage3 = data3.pic;
57 let linkType3 = data3.linkType; 59 let linkType3 = data3.linkType;
  60 + let showProductInfo3 = data3.showProductInfo;
58 let product3 = data3.product; 61 let product3 = data3.product;
59 let salePrice3 = product3?parseFloat(product3.sales_price):0; 62 let salePrice3 = product3?parseFloat(product3.sales_price):0;
60 let originPrice3= product3?parseFloat(product3.market_price):0; 63 let originPrice3= product3?parseFloat(product3.market_price):0;
@@ -70,7 +73,7 @@ export default class RedPersonPicThree extends Component{ @@ -70,7 +73,7 @@ export default class RedPersonPicThree extends Component{
70 <View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth4+nullHeigth:containerHeigth4,backgroundColor: 'white'}}> 73 <View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth4+nullHeigth:containerHeigth4,backgroundColor: 'white'}}>
71 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} > 74 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType1,linkReource1)}} >
72 <YH_Image url={backgroundImage1} style={styles.imagetype4}/> 75 <YH_Image url={backgroundImage1} style={styles.imagetype4}/>
73 - {linkType1=='1'?<View style={styles.maskContainer4}> 76 + {linkType1=='1' && showProductInfo1 ?<View style={styles.maskContainer4}>
74 <Text style={styles.titleText4} numberOfLines={1}>{name1}</Text> 77 <Text style={styles.titleText4} numberOfLines={1}>{name1}</Text>
75 <View style={styles.saleView}> 78 <View style={styles.saleView}>
76 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble1?'red':'white',}}>{price1}</Text> 79 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble1?'red':'white',}}>{price1}</Text>
@@ -80,7 +83,7 @@ export default class RedPersonPicThree extends Component{ @@ -80,7 +83,7 @@ export default class RedPersonPicThree extends Component{
80 </TouchableOpacity> 83 </TouchableOpacity>
81 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} > 84 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType2,linkReource2)}} >
82 <YH_Image url={backgroundImage2} style={styles.imagetype4}/> 85 <YH_Image url={backgroundImage2} style={styles.imagetype4}/>
83 - {linkType2=='1'?<View style={styles.maskContainer4}> 86 + {linkType2=='1' && showProductInfo2?<View style={styles.maskContainer4}>
84 <Text style={styles.titleText4} numberOfLines={1}>{name2}</Text> 87 <Text style={styles.titleText4} numberOfLines={1}>{name2}</Text>
85 <View style={styles.saleView}> 88 <View style={styles.saleView}>
86 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble2?'red':'white',}}>{price2}</Text> 89 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble2?'red':'white',}}>{price2}</Text>
@@ -90,7 +93,7 @@ export default class RedPersonPicThree extends Component{ @@ -90,7 +93,7 @@ export default class RedPersonPicThree extends Component{
90 </TouchableOpacity> 93 </TouchableOpacity>
91 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} > 94 <TouchableOpacity style={styles.imagetype4} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(linkType3,linkReource3)}} >
92 <YH_Image url={backgroundImage3} style={styles.imagetype4}/> 95 <YH_Image url={backgroundImage3} style={styles.imagetype4}/>
93 - {linkType3=='1'?<View style={styles.maskContainer4}> 96 + {linkType3=='1' && showProductInfo3?<View style={styles.maskContainer4}>
94 <Text style={styles.titleText4} numberOfLines={1}>{name3}</Text> 97 <Text style={styles.titleText4} numberOfLines={1}>{name3}</Text>
95 <View style={styles.saleView}> 98 <View style={styles.saleView}>
96 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble3?'red':'white',}}>{price3}</Text> 99 <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble3?'red':'white',}}>{price3}</Text>
@@ -18,6 +18,10 @@ export default keyMirror({ @@ -18,6 +18,10 @@ export default keyMirror({
18 PRODUCT_LIST_FAILURE: null, 18 PRODUCT_LIST_FAILURE: null,
19 PRODUCT_FILTER_ACTION: null, 19 PRODUCT_FILTER_ACTION: null,
20 20
  21 + PRODUCT_LIST_FOR_NEW_REQUEST: null,
  22 + PRODUCT_LIST_FOR_NEW_SUCCESS: null,
  23 + PRODUCT_LIST_FOR_NEW_FAILURE: null,
  24 +
21 FILTER_LIST_VIEW: null, 25 FILTER_LIST_VIEW: null,
22 FILTER_MORE_VIEW: null, 26 FILTER_MORE_VIEW: null,
23 SET_PRODUCT_LIST_FILTER: null, 27 SET_PRODUCT_LIST_FILTER: null,
@@ -63,6 +63,7 @@ class RedPersonBrandContainer extends Component { @@ -63,6 +63,7 @@ class RedPersonBrandContainer extends Component {
63 this.props.actions.getIntro(); 63 this.props.actions.getIntro();
64 this.props.actions.getRedBrandDecorator(); 64 this.props.actions.getRedBrandDecorator();
65 this.props.actions.getProductList(true); 65 this.props.actions.getProductList(true);
  66 + this.props.actions.getProductListForNew(true);
66 this.props.actions.getShopCouponList(); 67 this.props.actions.getShopCouponList();
67 this.props.actions.getFavoriteCount(); 68 this.props.actions.getFavoriteCount();
68 this.props.actions.getFavoriteState(); 69 this.props.actions.getFavoriteState();
@@ -204,6 +205,7 @@ class RedPersonBrandContainer extends Component { @@ -204,6 +205,7 @@ class RedPersonBrandContainer extends Component {
204 shopIntro, 205 shopIntro,
205 shopsdecorator, 206 shopsdecorator,
206 productList, 207 productList,
  208 + productListForNew,
207 filterFactors, 209 filterFactors,
208 filterNameFactors, 210 filterNameFactors,
209 receiveCouponResult, 211 receiveCouponResult,
@@ -216,6 +218,7 @@ class RedPersonBrandContainer extends Component { @@ -216,6 +218,7 @@ class RedPersonBrandContainer extends Component {
216 <RedBrand 218 <RedBrand
217 similarIndex = {similarIndex} 219 similarIndex = {similarIndex}
218 productList={productList} 220 productList={productList}
  221 + productListForNew={productListForNew}
219 launchProfile={launchProfile} 222 launchProfile={launchProfile}
220 fliter={fliter} 223 fliter={fliter}
221 receiveCouponResult={receiveCouponResult} 224 receiveCouponResult={receiveCouponResult}
@@ -15,6 +15,9 @@ const { @@ -15,6 +15,9 @@ const {
15 PRODUCT_LIST_REQUEST, 15 PRODUCT_LIST_REQUEST,
16 PRODUCT_LIST_SUCCESS, 16 PRODUCT_LIST_SUCCESS,
17 PRODUCT_LIST_FAILURE, 17 PRODUCT_LIST_FAILURE,
  18 + PRODUCT_LIST_FOR_NEW_REQUEST,
  19 + PRODUCT_LIST_FOR_NEW_SUCCESS,
  20 + PRODUCT_LIST_FOR_NEW_FAILURE,
18 PRODUCT_FILTER_ACTION, 21 PRODUCT_FILTER_ACTION,
19 FILTER_LIST_VIEW, 22 FILTER_LIST_VIEW,
20 FILTER_MORE_VIEW, 23 FILTER_MORE_VIEW,
@@ -153,6 +156,26 @@ export function productListFailure(error) { @@ -153,6 +156,26 @@ export function productListFailure(error) {
153 payload: error 156 payload: error
154 } 157 }
155 } 158 }
  159 +
  160 +export function productListForNewRequest() {
  161 + return {
  162 + type: PRODUCT_LIST_FOR_NEW_REQUEST,
  163 + };
  164 +}
  165 +
  166 +export function productListForNewSuccess(json) {
  167 + return {
  168 + type: PRODUCT_LIST_FOR_NEW_SUCCESS,
  169 + payload: json
  170 + }
  171 +}
  172 +
  173 +export function productListForNewFailure(error) {
  174 + return {
  175 + type: PRODUCT_LIST_FOR_NEW_FAILURE,
  176 + payload: error
  177 + }
  178 +}
156 /* 179 /*
157 * 筛选 180 * 筛选
158 */ 181 */
@@ -248,6 +271,41 @@ export function getProductList(reload=false) { @@ -248,6 +271,41 @@ export function getProductList(reload=false) {
248 }; 271 };
249 } 272 }
250 273
  274 +export function getProductListForNew(reload=false) {
  275 + return (dispatch, getState) => {
  276 + let {app, redBrand} = getState();
  277 + let {shopId, productListForNew} = redBrand;
  278 +
  279 + if (reload) {
  280 +
  281 + } else {
  282 + if (productListForNew.isFetching || productListForNew.endReached || productListForNew.error) {
  283 + return;
  284 + }
  285 + }
  286 + let order = productListForNew.order;
  287 + let page = productListForNew.currentPage + 1;
  288 + let pageSize = productListForNew.pageSize;
  289 + let channel = app.channel;
  290 +
  291 + dispatch(productListForNewRequest());
  292 + return new RedBrandService(app.host).productList(shopId, channel, order, page, pageSize)
  293 + .then(json => {
  294 + let payload = parseProductList(json);
  295 + payload.endReached = payload.currentPage == payload.pageCount || payload.list.length < pageSize;
  296 + if (payload.currentPage > 1) {
  297 + let oldList = productList.list.toJS();
  298 + let list = [...oldList, ...payload.list];
  299 + payload.list = list;
  300 + }
  301 + dispatch(productListForNewSuccess(payload));
  302 + })
  303 + .catch(error => {
  304 + dispatch(productListForNewFailure(error));
  305 + });
  306 + };
  307 +}
  308 +
251 function parseProductList(json) { 309 function parseProductList(json) {
252 let currentPage = json && json.page ? json.page : 1; 310 let currentPage = json && json.page ? json.page : 1;
253 let pageCount = json && json.page_total ? json.page_total : 0; 311 let pageCount = json && json.page_total ? json.page_total : 0;
@@ -568,7 +626,10 @@ export function getRedBrandDecorator() { @@ -568,7 +626,10 @@ export function getRedBrandDecorator() {
568 if (rooms) { 626 if (rooms) {
569 dispatch(getVideoLiveCount(rooms)); 627 dispatch(getVideoLiveCount(rooms));
570 } 628 }
  629 + console.log('---->>>>>floor');
  630 + console.log(payload);
571 dispatch(getProduct(payload)); 631 dispatch(getProduct(payload));
  632 +
572 dispatch(getRedBrandDecoratorSuccess(payload)); 633 dispatch(getRedBrandDecoratorSuccess(payload));
573 }) 634 })
574 .catch(error => { 635 .catch(error => {
@@ -626,6 +687,60 @@ export function productFailure(error) { @@ -626,6 +687,60 @@ export function productFailure(error) {
626 } 687 }
627 } 688 }
628 689
  690 +export function appRecommendProduct(dataSource) {
  691 + return (dispatch, getState) => {
  692 + let {app, redBrand} = getState();
  693 +
  694 + let {shopId} = redBrand;
  695 + let channel = app.channel;
  696 + let {shopBanner,json} = dataSource;
  697 + let originJson = json;
  698 + let list = originJson.modules;
  699 + let moduleData = [];
  700 + list.map((item, i) => {
  701 + if (item.module_type == 'AppRecommendProduct') {
  702 + moduleData = item.module_data.data[0];
  703 + if (item.module_data.properties.displayType == 1) {
  704 + let sknList = moduleData.sknList;
  705 + let SKNs = '';
  706 + sknList.map((item, i) => {
  707 + if (i == 0) {
  708 + SKNs = item;
  709 + }else {
  710 + SKNs = SKNs + ',' + item;
  711 + }
  712 + });
  713 + return new RedBrandService(app.host).searchProductBySkn(SKNs)
  714 + .then(json => {
  715 + let product_list = json.product_list;
  716 + console.log('----<<<<<<<<product_list');
  717 + console.log(product_list);
  718 + item.list = product_list;
  719 + dispatch(productSuccess(dataSource));
  720 + })
  721 + .catch(error => {
  722 + });
  723 + }else if (item.module_data.properties.displayType == 0) {
  724 + let pageSize = 2 * moduleData.lineNumber;
  725 + let order = moduleData.order;
  726 +
  727 + return new RedBrandService(app.host).productList(shopId, channel, order, 1, pageSize)
  728 + .then(json => {
  729 + let product_list = json.product_list;
  730 + console.log('----------111111');
  731 + console.log(product_list);
  732 + item.list = product_list;
  733 + dispatch(productSuccess(dataSource));
  734 +
  735 + })
  736 + .catch(error => {
  737 + });
  738 + }
  739 + }
  740 + });
  741 + };
  742 +}
  743 +
629 export function getProduct(dataSource) { 744 export function getProduct(dataSource) {
630 return (dispatch, getState) => { 745 return (dispatch, getState) => {
631 let {app, redBrand} = getState(); 746 let {app, redBrand} = getState();
@@ -633,6 +748,10 @@ export function getProduct(dataSource) { @@ -633,6 +748,10 @@ export function getProduct(dataSource) {
633 let originJson = json; 748 let originJson = json;
634 let list = originJson.modules; 749 let list = originJson.modules;
635 let sknList = []; 750 let sknList = [];
  751 +
  752 + console.log('----originJson');
  753 + console.log(originJson);
  754 +
636 list.map((item, i) => { 755 list.map((item, i) => {
637 if (item.module_type == 'SknList') { 756 if (item.module_type == 'SknList') {
638 sknList = item.module_data.data; 757 sknList = item.module_data.data;
@@ -646,11 +765,17 @@ export function getProduct(dataSource) { @@ -646,11 +765,17 @@ export function getProduct(dataSource) {
646 SKNs = SKNs + ',' + item; 765 SKNs = SKNs + ',' + item;
647 } 766 }
648 }); 767 });
  768 + console.log(SKNs);
  769 + console.log('SKNs');
649 770
650 dispatch(productRequest()); 771 dispatch(productRequest());
651 return new RedBrandService(app.host).searchProductBySkn(SKNs) 772 return new RedBrandService(app.host).searchProductBySkn(SKNs)
652 .then(json => { 773 .then(json => {
653 let product_list = json.product_list; 774 let product_list = json.product_list;
  775 + console.log(json);
  776 + console.log('json');
  777 + console.log(list);
  778 +
654 list.map((item, i) => { 779 list.map((item, i) => {
655 let data = item.module_data.data; 780 let data = item.module_data.data;
656 data.map((m, i) => { 781 data.map((m, i) => {
@@ -665,9 +790,13 @@ export function getProduct(dataSource) { @@ -665,9 +790,13 @@ export function getProduct(dataSource) {
665 }); 790 });
666 let payload = parseRource(originJson); 791 let payload = parseRource(originJson);
667 dispatch(productSuccess(payload)); 792 dispatch(productSuccess(payload));
  793 + dispatch(appRecommendProduct(payload));
668 }) 794 })
669 .catch(error => { 795 .catch(error => {
670 dispatch(productFailure(error)); 796 dispatch(productFailure(error));
  797 + let payload = parseRource(originJson);
  798 + dispatch(appRecommendProduct(payload));
  799 +
671 }); 800 });
672 }; 801 };
673 } 802 }
@@ -50,6 +50,18 @@ let InitialState = Record({ @@ -50,6 +50,18 @@ let InitialState = Record({
50 endReached: false, 50 endReached: false,
51 sourceType: 0, // 0 - 默认，1 - 购，全球2 - 奥莱 51 sourceType: 0, // 0 - 默认，1 - 购，全球2 - 奥莱
52 })), 52 })),
  53 + productListForNew: new (Record({
  54 + isFetching: false,
  55 + error: null,
  56 + list: List(),
  57 + order: 's_t_desc',
  58 + currentPage: 0,
  59 + pageCount: 0,
  60 + pageSize: 60,//60,
  61 + total: 0,
  62 + endReached: false,
  63 + sourceType: 0, // 0 - 默认，1 - 购，全球2 - 奥莱
  64 + })),
53 filterFactors: new (Record({ 65 filterFactors: new (Record({
54 gender: '', //性别 66 gender: '', //性别
55 color: '', //颜色 67 color: '', //颜色
@@ -16,6 +16,10 @@ const { @@ -16,6 +16,10 @@ const {
16 PRODUCT_LIST_FAILURE, 16 PRODUCT_LIST_FAILURE,
17 PRODUCT_FILTER_ACTION, 17 PRODUCT_FILTER_ACTION,
18 18
  19 + PRODUCT_LIST_FOR_NEW_REQUEST,
  20 + PRODUCT_LIST_FOR_NEW_SUCCESS,
  21 + PRODUCT_LIST_FOR_NEW_FAILURE,
  22 +
19 FILTER_LIST_VIEW, 23 FILTER_LIST_VIEW,
20 FILTER_MORE_VIEW, 24 FILTER_MORE_VIEW,
21 SET_PRODUCT_LIST_FILTER, 25 SET_PRODUCT_LIST_FILTER,
@@ -121,6 +125,32 @@ export default function redBrandReducer(state=initialState, action) { @@ -121,6 +125,32 @@ export default function redBrandReducer(state=initialState, action) {
121 125
122 return newState; 126 return newState;
123 } 127 }
  128 + case PRODUCT_LIST_FOR_NEW_REQUEST: {
  129 + return state.setIn(['productListForNew', 'isFetching'], true)
  130 + .setIn(['productListForNew', 'error'], null);
  131 + }
  132 + case PRODUCT_LIST_FOR_NEW_SUCCESS: {
  133 + let {
  134 + list,
  135 + currentPage,
  136 + pageCount,
  137 + total,
  138 + endReached,
  139 + } = action.payload;
  140 + let newState = state.setIn(['productListForNew', 'isFetching'], false)
  141 + .setIn(['productListForNew', 'error'], null)
  142 + .setIn(['productListForNew', 'list'], Immutable.fromJS(list))
  143 + .setIn(['productListForNew', 'currentPage'], currentPage)
  144 + .setIn(['productListForNew', 'pageCount'], pageCount)
  145 + .setIn(['productListForNew', 'total'], total)
  146 + .setIn(['productListForNew', 'endReached'], endReached)
  147 +
  148 + return newState;
  149 + }
  150 + case PRODUCT_LIST_FOR_NEW_FAILURE: {
  151 + return state.setIn(['productListForNew', 'isFetching'], false)
  152 + .setIn(['productListForNew', 'error'], action.payload);
  153 + }
124 case FILTER_LIST_VIEW: { 154 case FILTER_LIST_VIEW: {
125 return state.setIn(['productList', 'isFilter'], action.payload); 155 return state.setIn(['productList', 'isFilter'], action.payload);
126 } 156 }