mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 219d6022828ac0b804d510bbfc3969f14efeeb1f 1 parent 7bc7f39e

红人店铺优化，review by Redding

Inline Side-by-side
Showing 3 changed files with 102 additions and 401 deletions
... ... @@ -4,8 +4,7 @@ import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
import TripleImageSquare from './TripleImageSquare';
import TripleImageRectangle from './TripleImageRectangle';
import TripleImageBigRightSide from './TripleImageBigRightSide';
import TripleImageBigLeftSide from './TripleImageBigLeftSide';
import TripleImageOneBigSide from './TripleImageOneBigSide';
export default class TripleImage extends Component{
constructor(props) {
... ... @@ -47,17 +46,9 @@ export default class TripleImage extends Component{
)
break;
case '3':
return (
<TripleImageBigRightSide
yh_exposureData={this.props.yh_exposureData}
resource={resource}
onPressProduct={this.props.onPressProduct}
/>
)
break;
case '4':
return (
<TripleImageBigLeftSide
<TripleImageOneBigSide
yh_exposureData={this.props.yh_exposureData}
resource={resource}
onPressProduct={this.props.onPressProduct}
... ...
import React, {Component } from 'react'
import {View, StyleSheet, Text, Dimensions,TouchableOpacity} from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
export default class RedPersonPicThree extends Component{
constructor(props) {
super(props);
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource)) {
return false;
} else {
return true;
}
}
render() {
let {resource} = this.props;
if (!resource) {
return (<View style={{height:0,width:width,backgroundColor:'white'}}/>);
}
let list = resource.get('module_data').get('data').toJS();
let properties = resource.get('module_data').get('properties').toJS();
let isModuleMargin = properties.isModuleMargin;
let displayType = properties.displayType;
if (!displayType) {
return (<View style={{height:0,width:width,backgroundColor:'red'}}/>);
};
let data1 = list?list[0]:null;
let backgroundImage1 = data1?data1.pic:'';
let linkType1 = data1.linkType;
let showProductInfo1 = data1.showProductInfo?data1.showProductInfo:false;
let product1 = data1.product;
if (!product1) {
showProductInfo1 = false;
}
let title1 = data1.text?data1.text:'';
let salePrice1 = product1?parseFloat(product1.sales_price):0;
let originPrice1 = product1?parseFloat(product1.market_price):0;
let name1 = product1?product1.product_name:'';
let price1 = '¥' + salePrice1.toFixed(2);
let sale1 = '¥' + originPrice1.toFixed(2);
let saleAble1 = false;//salePrice1>0?true:false;
let linkReource1 = data1.resource;
let data2 = list?list[1]:null;
let backgroundImage2 = data2.pic;
let linkType2 = data2.linkType;
let showProductInfo2 = data2.showProductInfo?data2.showProductInfo:false;
let product2 = data2.product;
if (!product2) {
showProductInfo2 = false;
}
let title2 = data2.text?data2.text:'';
let salePrice2 = product2?parseFloat(product2.sales_price):0;
let originPrice2 = product2?parseFloat(product2.market_price):0;
let name2 = product2?product2.product_name:'';
let price2 = '¥' + salePrice2.toFixed(2);
let sale2 = '¥' + originPrice2.toFixed(2);
let saleAble2 = false;//salePrice2>0?true:false;
let linkReource2 = data2.resource;
let data3 = list?list[2]:null;
let backgroundImage3 = data3.pic;
let linkType3 = data3.linkType;
let showProductInfo3 = data3.showProductInfo?data3.showProductInfo:false;
let product3 = data3.product;
if (!product3) {
showProductInfo3 = false;
}
let showProductInfo = showProductInfo1 & showProductInfo2 & showProductInfo3;
let title3 = data3.text?data3.text:'';
let salePrice3 = product3?parseFloat(product3.sales_price):0;
let originPrice3= product3?parseFloat(product3.market_price):0;
let name3 = product3?product3.product_name:'';
let price3 = '¥' + salePrice3.toFixed(2);
let sale3 = '¥' + originPrice3.toFixed(2);
let saleAble3 = false;//salePrice3>0?true:false;
let linkReource3 = data3.resource;
let moduleOrder = resource.get('module_order') + 1;
let moduleType = resource.get('module_type');
let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
let yh_exposureData0 = null;
let yh_exposureData1 = null;
let yh_exposureData2 = null;
let url1 = '';
if (linkType1 == '0') {
url1 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource1}","title":"${title1}"}}`;
} else if (linkType1 == '1') {
url1 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource1}"}}`;
} else if (linkType1 == '2') {
url1 = linkReource1;
}
if (yh_exposureData) {
yh_exposureData0 = {
I_INDEX: 0,
ACTION_URL: url1,
...yh_exposureData,
};
}
let url2 = '';
if (linkType2 == '0') {
url2 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource2}","title":"${title2}"}}`;
} else if (linkType2 == '1') {
url2 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource2}"}}`;
} else if (linkType2 == '2') {
url2 = linkReource2;
}
if (yh_exposureData) {
yh_exposureData1 = {
I_INDEX: 1,
ACTION_URL: url2,
...yh_exposureData,
};
}
let url3 = '';
if (linkType3 == '0') {
url3 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource3}","title":"${title3}"}}`;
} else if (linkType3 == '1') {
url3 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource3}"}}`;
} else if (linkType3 == '2') {
url3 = linkReource3;
}
if (yh_exposureData) {
yh_exposureData2 = {
I_INDEX: 2,
ACTION_URL: url3,
...yh_exposureData,
};
}
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: '#f0f0f0'}}>
<TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
<View style={styles.subContainer}>
<YH_Image url={backgroundImage1} style={[styles.imageBig,{resizeMode: 'contain'}]}/>
{linkType1=='1' && showProductInfo?<View style={styles.maskContainer2}>
<Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row'}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble1?'red':'white'}}>{price1}</Text>
{saleAble1?<Text style={styles.deleteSale3}>{sale1}</Text>:null}
</View>
</View>:null}
</View>
</TouchableOpacity>
<View style={styles.subContainer}>
<TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
<YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row',marginRight: 10}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble2?'red':'white'}}>{price2}</Text>
{saleAble2?<Text style={styles.deleteSale3}>{sale2}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
<TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
<YH_Image url={backgroundImage3} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType3=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row',marginRight: 10}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble3?'red':'white'}}>{price3}</Text>
{saleAble3?<Text style={styles.deleteSale3}>{sale3}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
</View>
</View>
)
}
}
let {width, height} = Dimensions.get('window');
let containerHeigth = Math.ceil((468/750)*width);
let containerHeigth3 = Math.ceil(width/3);
let containerHeigth4 = Math.ceil((333/750)*width);
let maskHeight = 30;
let nullHeigth = 10;
let styles = StyleSheet.create({
subContainer:{
width:width / 2,
flexDirection: 'column',
},
maskContainer1: {
position: 'absolute',
width: width/2,
height: maskHeight,
backgroundColor: 'rgba(0,0,0,0.3)',
top: containerHeigth/2-maskHeight,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
maskContainer2: {
position: 'absolute',
width: width/2,
height: maskHeight,
backgroundColor: 'rgba(0,0,0,0.3)',
top: containerHeigth-maskHeight,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
},
image:{
width:width/2,
height: containerHeigth / 2,
backgroundColor: '#f5f7f6',
},
imageBig:{
width:width/2,
height: containerHeigth,
backgroundColor: '#f5f7f6',
},
titleText: {
color:'white',
width : 80,
fontSize: 11,
textAlign :'left',
backgroundColor: 'transparent',
fontWeight: 'bold',
marginLeft: 10,
},
price: {
color:'white',
width : 80,
fontSize: 11,
textAlign :'right',
},
price3: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign :'left',
},
titleText4: {
width:width/3 -10,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign :'left',
marginTop: 4,
fontWeight: 'bold',
},
price4: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign : 'left',
marginTop: 2,
},
deleteSale: {
marginLeft: 2,
marginTop: 4,
fontSize: 11,
backgroundColor: 'transparent',
color: 'white',
textDecorationLine: 'line-through',
},
deleteSale3: {
marginLeft: 2,
marginTop: 4,
fontSize: 11,
backgroundColor: 'transparent',
color: 'white',
textDecorationLine: 'line-through',
},
saleView:{
flexDirection: 'row',
},
});
... ... @@ -3,7 +3,7 @@ import {View, StyleSheet, Text, Dimensions,TouchableOpacity} from 'react-native'
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
export default class TripleImageBigRightSide extends Component{
export default class TripleImageOneBigSide extends Component{
constructor(props) {
super(props);
}
... ... @@ -137,42 +137,95 @@ export default class TripleImageBigRightSide extends Component{
...yh_exposureData,
};
}
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: '#f0f0f0'}}>
<View style={styles.subContainer}>
<TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0} style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
<YH_Image url={backgroundImage1} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType1=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row',marginRight: 10}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble1?'red':'white'}}>{price1}</Text>
{saleAble1?<Text style={styles.deleteSale3}>{sale1}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
<TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
<YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row',marginRight: 10}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble2?'red':'white'}}>{price2}</Text>
{saleAble2?<Text style={styles.deleteSale3}>{sale2}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
</View>
<TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.imageBig} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
<YH_Image url={backgroundImage3} style={[styles.imageBig,{resizeMode: 'contain'}]}/>
{linkType3=='1' && showProductInfo?<View style={styles.maskContainer2}>
<Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
<View style={{backgroundColor: 'transparent',flexDirection: 'row'}}>
<Text style={{fontSize: 12,backgroundColor: 'transparent',color: saleAble3?'red':'white'}}>{price3}</Text>
{saleAble3?<Text style={styles.deleteSale3}>{sale3}</Text>:null}
let actuallyHeight = isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth;
switch (displayType) {
case '3':
return (
<View style={[styles.container,{height:actuallyHeight}]}>
<View style={styles.subContainer}>
<TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0} style={styles.image}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
<YH_Image url={backgroundImage1} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType1=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
<View style={[styles.priceContainer,{marginRight: 10}]}>
<Text style={[styles.price,{color: saleAble1?'red':'white'}]}>{price1}</Text>
{saleAble1?<Text style={styles.deleteSale3}>{sale1}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
<TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
<YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
<View style={[styles.priceContainer,{marginRight: 10}]}>
<Text style={[styles.price,{color: saleAble2?'red':'white'}]}>{price2}</Text>
{saleAble2?<Text style={styles.deleteSale3}>{sale2}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
</View>
</View>:null}
</TouchableOpacity>
</View>
)
<TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.imageBig}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
<YH_Image url={backgroundImage3} style={[styles.imageBig,{resizeMode: 'contain'}]}/>
{linkType3=='1' && showProductInfo?<View style={styles.maskContainer2}>
<Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
<View style={styles.priceContainer}>
<Text style={[styles.price,{color: saleAble3?'red':'white'}]}>{price3}</Text>
{saleAble3?<Text style={styles.deleteSale3}>{sale3}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
</View>
)
break;
case '4':
return (
<View style={[styles.container, {height:actuallyHeight}]}>
<TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
<View style={styles.subContainer}>
<YH_Image url={backgroundImage1} style={[styles.imageBig,{resizeMode: 'contain'}]}/>
{linkType1=='1' && showProductInfo?<View style={styles.maskContainer2}>
<Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
<View style={styles.priceContainer}>
<Text style={[styles.price, {color: saleAble1?'red':'white'}]}>{price1}</Text>
{saleAble1?<Text style={styles.deleteSale}>{sale1}</Text>:null}
</View>
</View>:null}
</View>
</TouchableOpacity>
<View style={styles.subContainer}>
<TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
<YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
<View style={[styles.priceContainer,{marginRight: 10}]}>
<Text style={[styles.price,{color: saleAble2?'red':'white'}]}>{price2}</Text>
{saleAble2?<Text style={styles.deleteSale}>{sale2}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
<TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.image}
onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
<YH_Image url={backgroundImage3} style={[styles.image,{resizeMode: 'contain'}]}/>
{linkType3=='1' && showProductInfo?<View style={styles.maskContainer1}>
<Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
<View style={[styles.priceContainer, {marginRight: 10}]}>
<Text style={[styles.price, {color: saleAble3?'red':'white'}]}>{price3}</Text>
{saleAble3?<Text style={styles.deleteSale}>{sale3}</Text>:null}
</View>
</View>:null}
</TouchableOpacity>
</View>
</View>
)
break;
default:
return null;
}
}
}
... ... @@ -184,6 +237,11 @@ let maskHeight = 30;
let nullHeigth = 10;
let styles = StyleSheet.create({
container:{
flexDirection: 'row',
width:width,
backgroundColor: '#f0f0f0'
},
subContainer:{
width:width / 2,
flexDirection: 'column',
... ... @@ -208,33 +266,6 @@ let styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'space-around',
},
maskContainer3:{
position: 'absolute',
width: width/3,
height: 24,
backgroundColor: 'rgba(0,0,0,0.3)',
top: containerHeigth3-24,
flexDirection: 'row',
alignItems: 'center',
flexDirection: 'row',
},
maskContainer4: {
position: 'absolute',
width: width/3,
height: 40,
backgroundColor: 'rgba(0,0,0,0.3)',
top: containerHeigth4-40,
},
imagetype3: {
width:width/3 ,
height:containerHeigth3,
backgroundColor: '#f5f7f6',
},
imagetype4:{
width:width/3,
height:containerHeigth4,
backgroundColor: '#f5f7f6',
},
image:{
width:width/2,
height: containerHeigth / 2,
... ... @@ -254,49 +285,15 @@ let styles = StyleSheet.create({
fontWeight: 'bold',
marginLeft: 10,
},
price: {
color:'white',
width : 80,
fontSize: 11,
textAlign :'right',
},
price3: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign :'left',
},
titleText4: {
width:width/3 -10,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign :'left',
marginTop: 4,
fontWeight: 'bold',
},
price4: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 11,
textAlign : 'left',
marginTop: 2,
priceContainer: {
backgroundColor: 'transparent',
flexDirection: 'row'
},
deleteSale: {
marginLeft: 2,
marginTop: 4,
fontSize: 11,
price: {
fontSize: 12,
backgroundColor: 'transparent',
color: 'white',
textDecorationLine: 'line-through',
},
deleteSale3: {
deleteSale: {
marginLeft: 2,
marginTop: 4,
fontSize: 11,
... ... @@ -304,7 +301,6 @@ let styles = StyleSheet.create({
color: 'white',
textDecorationLine: 'line-through',
},
saleView:{
flexDirection: 'row',
},
... ...