mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 91b97b583f4b23820a27fdcf442e5d9720ebf382 1 parent 341f6928

add 新品到着 样式 改版 review by zhanglixia

Inline Side-by-side
Showing 1 changed file with 193 additions and 23 deletions
@@ -38,37 +38,91 @@ export default class ProductListCell extends Component { @@ -38,37 +38,91 @@ export default class ProductListCell extends Component {
38 let new_product_num = data.get('new_product_num'); 38 let new_product_num = data.get('new_product_num');
39 let yh_exposureData = data.get('yh_exposureData')?data.get('yh_exposureData').toJS():null; 39 let yh_exposureData = data.get('yh_exposureData')?data.get('yh_exposureData').toJS():null;
40 40
41 - if (!shop_logo||!shop_name) {  
42 - return null;  
43 - } 41 + let productList = data.get('product_list')?data.get('product_list'):[];
  42 + let show_type = data.get('show_type')?data.get('show_type'):0;
  43 +
  44 + if (show_type == 0) {//老板 店铺样式
  45 + return (
  46 + <TouchableOpacity
  47 + style={[styles.container, style]}
  48 + activeOpacity={1}
  49 + yh_exposureData={yh_exposureData}
  50 + onPress={() => {
  51 + this.props.onPressShop && this.props.onPressShop(data, rowID);
  52 + }}
  53 + >
  54 + <View style={{flex:1}}>
  55 + <View style={styles.imageContainer}>
  56 + <Image style={styles.image} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
  57 + <Text style={styles.name}>{shop_name}</Text>
  58 + <Text style={styles.text}>
  59 + 上新
  60 + <Text style={{color:'red'}}>{new_product_num}</Text>
  61 + 件 <Text style={{color:'red'}}>{favorite_num}</Text>
  62 + 人收藏
  63 + </Text>
  64 + <View style={styles.tag}>
  65 + <Text style={styles.tagName}>进入店铺</Text>
  66 + </View>
  67 + </View>
44 68
45 - return (  
46 - <TouchableOpacity  
47 - style={[styles.container, style]}  
48 - activeOpacity={1}  
49 - yh_exposureData={yh_exposureData}  
50 - onPress={() => {  
51 - this.props.onPressShop && this.props.onPressShop(data, rowID);  
52 - }}  
53 - >  
54 - <View style={{flex:1}}>  
55 - <View style={styles.imageContainer}>  
56 - <Image style={styles.image} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>  
57 - <Text style={styles.name}>{shop_name}</Text>  
58 - <Text style={styles.text}> 69 + </View>
  70 + </TouchableOpacity>
  71 + );
  72 + }else if (show_type == 1) {//新版 店铺样式
  73 + return (
  74 + <TouchableOpacity
  75 + style={[styles.container, style]}
  76 + activeOpacity={1}
  77 + yh_exposureData={yh_exposureData}
  78 + onPress={() => {
  79 + this.props.onPressShop && this.props.onPressShop(data, rowID);
  80 + }}
  81 + >
  82 + <View style={styles.shopContainer}>
  83 + <Image style={styles.shopImage} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
  84 + <Text style={styles.shopText}>
59 上新 85 上新
60 <Text style={{color:'red'}}>{new_product_num}</Text> 86 <Text style={{color:'red'}}>{new_product_num}</Text>
61 件 <Text style={{color:'red'}}>{favorite_num}</Text> 87 件 <Text style={{color:'red'}}>{favorite_num}</Text>
62 人收藏 88 人收藏
63 </Text> 89 </Text>
64 - <View style={styles.tag}>  
65 - <Text style={styles.tagName}>进入店铺</Text> 90 + <View style={styles.shopTag}>
  91 + <Text style={styles.shopTagName}>进入店铺</Text>
  92 + </View>
  93 + <View style={styles.line}/>
  94 + <View style={styles.bottomView}>
  95 + <View style={styles.leftImage}>
  96 + </View>
  97 + <View style={styles.rigthImage}>
  98 + </View>
66 </View> 99 </View>
67 </View> 100 </View>
68 -  
69 - </View>  
70 - </TouchableOpacity>  
71 - ); 101 + </TouchableOpacity>
  102 + );
  103 + }else if (show_type == 2) {//新版 店铺活动样式
  104 + return (
  105 + <TouchableOpacity
  106 + style={[styles.container, style]}
  107 + activeOpacity={1}
  108 + yh_exposureData={yh_exposureData}
  109 + onPress={() => {
  110 + this.props.onPressShop && this.props.onPressShop(data, rowID);
  111 + }}
  112 + >
  113 + <View style={styles.activityContainer}>
  114 + <Image style={styles.activityImage} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
  115 + <View style={styles.activityBottom}>
  116 + <Text style={styles.activityName}>－ Stully －</Text>
  117 + <Text style={styles.activityDetail}>hahahahahaah</Text>
  118 + </View>
  119 + <View style={styles.activityButton}>
  120 + <Text style={styles.buttonText}>进入店铺</Text>
  121 + </View>
  122 + </View>
  123 + </TouchableOpacity>
  124 + );
  125 + }
72 } 126 }
73 } 127 }
74 128
@@ -79,6 +133,11 @@ let rowWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO); @@ -79,6 +133,11 @@ let rowWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO);
79 let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO); 133 let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
80 let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO); 134 let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
81 let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO); 135 let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);
  136 +let bottomViewH = Math.ceil(80 * DEVICE_WIDTH_RATIO);
  137 +const IMAGE_WIDTH = 145;
  138 +const IMAGE_HEIGHT = 193;
  139 +const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
  140 +let imageHeight = rowWidth * IMAGE_RATIO;
82 141
83 let tagHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO); 142 let tagHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
84 143
@@ -146,4 +205,115 @@ let styles = StyleSheet.create({ @@ -146,4 +205,115 @@ let styles = StyleSheet.create({
146 width: 63, 205 width: 63,
147 }, 206 },
148 207
  208 + shopContainer: {
  209 + width: rowWidth,
  210 + height: Platform.OS === 'ios'?rowHeight-tagHeight:rowHeight+4-tagHeight,
  211 + backgroundColor: 'white',
  212 + marginTop: tagHeight,
  213 + flexDirection: 'column',
  214 + alignItems: 'center',
  215 + borderColor: 'black',
  216 + borderWidth: 1,
  217 + },
  218 + shopImage: {
  219 + width: 240*width/750,
  220 + height: 100*width/750,
  221 + marginTop: rowMarginTop + rowMarginBottom,
  222 + backgroundColor: 'gray',
  223 + marginBottom: 0,
  224 + resizeMode: 'contain',
  225 + },
  226 + shopText: {
  227 + fontFamily: 'STHeitiSC-Light',
  228 + fontSize: 11,
  229 + color: '#444444',
  230 + marginTop: rowMarginTop + rowMarginBottom,
  231 + marginBottom: 0,
  232 + },
  233 + shopTag: {
  234 + backgroundColor: 'white',
  235 + width: 80,
  236 + height: 50*width/750,
  237 + marginTop: rowMarginTop + rowMarginBottom,
  238 + marginBottom: 0,
  239 + borderRadius: 25,
  240 + borderColor: '#e0e0e0',
  241 + borderWidth: 1,
  242 + justifyContent: 'center',
  243 + alignItems: 'center',
  244 + },
  245 + shopTagName: {
  246 + fontFamily: 'STHeitiSC-Light',
  247 + fontSize: 12,
  248 + color: '#444444',
  249 + textAlign: 'center',
  250 + width: 63,
  251 + },
  252 + line: {
  253 + marginTop: 20,
  254 + width: rowWidth - 2,
  255 + height: 1,
  256 + backgroundColor: '#e0e0e0',
  257 + },
  258 + bottomView: {
  259 + marginTop: 20,
  260 + width: rowWidth - 2,
  261 + height: bottomViewH,
  262 + backgroundColor: 'white',
  263 + flexDirection: 'row',
  264 + },
  265 + leftImage: {
  266 + width: Math.ceil(rowWidth/2-21),
  267 + height: bottomViewH,
  268 + backgroundColor: '#444444',
  269 + marginLeft: 10,
  270 + },
  271 + rigthImage: {
  272 + width: Math.ceil(rowWidth/2-21),
  273 + height: bottomViewH,
  274 + backgroundColor: '#444444',
  275 + marginLeft: 20,
  276 + },
  277 + activityContainer: {
  278 + width: rowWidth,
  279 + height: Platform.OS === 'ios'?rowHeight:rowHeight+4,
  280 + backgroundColor: 'red',
  281 + marginTop: tagHeight,
  282 + },
  283 + activityImage: {
  284 + width: rowWidth,
  285 + height: imageHeight,
  286 + backgroundColor: '#f0f0f0',
  287 + },
  288 + activityBottom: {
  289 + width: rowWidth,
  290 + height: Platform.OS === 'ios'?rowHeight-imageHeight:rowHeight+4 -imageHeight,
  291 + backgroundColor: 'rgb(68,68,68)',
  292 + justifyContent: 'center',
  293 + alignItems: 'center',
  294 + },
  295 + activityButton: {
  296 + position: 'absolute',
  297 + top: imageHeight - 15,
  298 + left: rowWidth/4,
  299 + width: rowWidth/2,
  300 + height: 30,
  301 + backgroundColor: 'rgb(211,10,35)',
  302 + justifyContent: 'center',
  303 + alignItems: 'center',
  304 + },
  305 + buttonText: {
  306 + fontSize: 15,
  307 + color: 'white',
  308 + fontWeight: 'bold',
  309 + },
  310 + activityName: {
  311 + fontSize: 20,
  312 + color: 'white',
  313 + },
  314 + activityDetail: {
  315 + fontSize: 15,
  316 + color: 'white',
  317 + marginTop: 5,
  318 + },
149 }); 319 });