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 {
let new_product_num = data.get('new_product_num');
let yh_exposureData = data.get('yh_exposureData')?data.get('yh_exposureData').toJS():null;
if (!shop_logo||!shop_name) {
return null;
}
let productList = data.get('product_list')?data.get('product_list'):[];
let show_type = data.get('show_type')?data.get('show_type'):0;
if (show_type == 0) {//老板 店铺样式
return (
<TouchableOpacity
style={[styles.container, style]}
activeOpacity={1}
yh_exposureData={yh_exposureData}
onPress={() => {
this.props.onPressShop && this.props.onPressShop(data, rowID);
}}
>
<View style={{flex:1}}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
<Text style={styles.name}>{shop_name}</Text>
<Text style={styles.text}>
上新
<Text style={{color:'red'}}>{new_product_num}</Text>
件 <Text style={{color:'red'}}>{favorite_num}</Text>
人收藏
</Text>
<View style={styles.tag}>
<Text style={styles.tagName}>进入店铺</Text>
</View>
</View>
return (
<TouchableOpacity
style={[styles.container, style]}
activeOpacity={1}
yh_exposureData={yh_exposureData}
onPress={() => {
this.props.onPressShop && this.props.onPressShop(data, rowID);
}}
>
<View style={{flex:1}}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
<Text style={styles.name}>{shop_name}</Text>
<Text style={styles.text}>
</View>
</TouchableOpacity>
);
}else if (show_type == 1) {//新版 店铺样式
return (
<TouchableOpacity
style={[styles.container, style]}
activeOpacity={1}
yh_exposureData={yh_exposureData}
onPress={() => {
this.props.onPressShop && this.props.onPressShop(data, rowID);
}}
>
<View style={styles.shopContainer}>
<Image style={styles.shopImage} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
<Text style={styles.shopText}>
上新
<Text style={{color:'red'}}>{new_product_num}</Text>
件 <Text style={{color:'red'}}>{favorite_num}</Text>
人收藏
</Text>
<View style={styles.tag}>
<Text style={styles.tagName}>进入店铺</Text>
<View style={styles.shopTag}>
<Text style={styles.shopTagName}>进入店铺</Text>
</View>
<View style={styles.line}/>
<View style={styles.bottomView}>
<View style={styles.leftImage}>
</View>
<View style={styles.rigthImage}>
</View>
</View>
</View>
</View>
</TouchableOpacity>
);
</TouchableOpacity>
);
}else if (show_type == 2) {//新版 店铺活动样式
return (
<TouchableOpacity
style={[styles.container, style]}
activeOpacity={1}
yh_exposureData={yh_exposureData}
onPress={() => {
this.props.onPressShop && this.props.onPressShop(data, rowID);
}}
>
<View style={styles.activityContainer}>
<Image style={styles.activityImage} source={{uri: shop_logo.replace('{width}', 240).replace('{height}', 100)}}/>
<View style={styles.activityBottom}>
<Text style={styles.activityName}>－ Stully －</Text>
<Text style={styles.activityDetail}>hahahahahaah</Text>
</View>
<View style={styles.activityButton}>
<Text style={styles.buttonText}>进入店铺</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
}
... ... @@ -79,6 +133,11 @@ let rowWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO);
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);
let bottomViewH = Math.ceil(80 * DEVICE_WIDTH_RATIO);
const IMAGE_WIDTH = 145;
const IMAGE_HEIGHT = 193;
const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
let imageHeight = rowWidth * IMAGE_RATIO;
let tagHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
... ... @@ -146,4 +205,115 @@ let styles = StyleSheet.create({
width: 63,
},
shopContainer: {
width: rowWidth,
height: Platform.OS === 'ios'?rowHeight-tagHeight:rowHeight+4-tagHeight,
backgroundColor: 'white',
marginTop: tagHeight,
flexDirection: 'column',
alignItems: 'center',
borderColor: 'black',
borderWidth: 1,
},
shopImage: {
width: 240*width/750,
height: 100*width/750,
marginTop: rowMarginTop + rowMarginBottom,
backgroundColor: 'gray',
marginBottom: 0,
resizeMode: 'contain',
},
shopText: {
fontFamily: 'STHeitiSC-Light',
fontSize: 11,
color: '#444444',
marginTop: rowMarginTop + rowMarginBottom,
marginBottom: 0,
},
shopTag: {
backgroundColor: 'white',
width: 80,
height: 50*width/750,
marginTop: rowMarginTop + rowMarginBottom,
marginBottom: 0,
borderRadius: 25,
borderColor: '#e0e0e0',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
},
shopTagName: {
fontFamily: 'STHeitiSC-Light',
fontSize: 12,
color: '#444444',
textAlign: 'center',
width: 63,
},
line: {
marginTop: 20,
width: rowWidth - 2,
height: 1,
backgroundColor: '#e0e0e0',
},
bottomView: {
marginTop: 20,
width: rowWidth - 2,
height: bottomViewH,
backgroundColor: 'white',
flexDirection: 'row',
},
leftImage: {
width: Math.ceil(rowWidth/2-21),
height: bottomViewH,
backgroundColor: '#444444',
marginLeft: 10,
},
rigthImage: {
width: Math.ceil(rowWidth/2-21),
height: bottomViewH,
backgroundColor: '#444444',
marginLeft: 20,
},
activityContainer: {
width: rowWidth,
height: Platform.OS === 'ios'?rowHeight:rowHeight+4,
backgroundColor: 'red',
marginTop: tagHeight,
},
activityImage: {
width: rowWidth,
height: imageHeight,
backgroundColor: '#f0f0f0',
},
activityBottom: {
width: rowWidth,
height: Platform.OS === 'ios'?rowHeight-imageHeight:rowHeight+4 -imageHeight,
backgroundColor: 'rgb(68,68,68)',
justifyContent: 'center',
alignItems: 'center',
},
activityButton: {
position: 'absolute',
top: imageHeight - 15,
left: rowWidth/4,
width: rowWidth/2,
height: 30,
backgroundColor: 'rgb(211,10,35)',
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
fontSize: 15,
color: 'white',
fontWeight: 'bold',
},
activityName: {
fontSize: 20,
color: 'white',
},
activityDetail: {
fontSize: 15,
color: 'white',
marginTop: 5,
},
});
... ...