mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 036d717107a5d2aab362c335bbff781472137ad3 1 parent ca2a18d0

浏览记录 review by 草莓

Inline Side-by-side
Showing 10 changed files with 185 additions and 22 deletions
... ... @@ -56,7 +56,7 @@ export default class AppIconList extends React.Component {
yh_exposureData={yh_exposureData}
onPress={()=>{this.props.onPressAppIconItem && this.props.onPressAppIconItem(url, src, rowID)}}
>
<YH_Image style={imgStyle} url={src} />
<YH_Image key={src} style={imgStyle} url={src} />
<Text style={titleStyle}>{title}</Text>
</TouchableOpacity>
);
... ...
... ... @@ -30,7 +30,10 @@ export default class Browse extends Component {
return (
<ProductCell
key={'row' + rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
onPressFindSimilar={this.props.onPressFindSimilar}
/>
);
}
... ...
... ... @@ -17,16 +17,38 @@ import DeleteLineText from '../../../common/components/DeleteLineText';
export default class ProductCell extends Component{
constructor(props) {
constructor(props) {
super(props);
}
this.renderReduce = this.renderReduce.bind(this);
}
renderReduce() {
let data = this.props.data;
let showReduce = data.get('price_down', 0) == 0 ? false : true;
if (!showReduce) {
return null;
}
let reduceStr = '¥' + (parseFloat(data.get('price_down'))).toFixed(2);
return (
<View style={styles.reduceContainer}>
<Image style={styles.reduceImage} source={require('../../images/browse/mine_goods_low_icon.png')}/>
<Text style={styles.reduceText} numberOfLines={1}>
{'比收藏时下降了'}
<Text style={{color: '#d0021b'}}>{reduceStr}</Text>
</Text>
</View>
);
}
render() {
render() {
let data = this.props.data;
let prdImage = YH_Image.getSlicedUrl(data.get('image', ''), 113, 150, 2);
let prdImage = YH_Image.getSlicedUrl(data.get('image', ''), 76, 102, 2);
let salePrice = 0; // 售卖价
let originPrice = 0; // 原价
... ... @@ -45,11 +67,27 @@ export default class ProductCell extends Component{
salePriceColor = '#444444';
}
return (
<View style={styles.container}>
<YH_Image style={styles.prdImage} url={prdImage} />
<View style={styles.leftContainer}>
<Text>{data.get('product_name', '')}</Text>
let showSoldOut = data.get('storage', 0) == 0 ? true : false;
return (
<TouchableOpacity
activeOpacity={1}
style={styles.container}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(data);
}}
>
<View style={styles.container}>
<View style={styles.leftContainer}>
<YH_Image style={styles.prdImage} url={prdImage} />
<View>
<Text style={styles.prdName} numberOfLines={2}>{data.get('product_name', '')}</Text>
{this.renderReduce()}
</View>
</View>
<Image style={styles.arrow} source={require('../../images/browse/shared_next_icon.png')}/>
<View style={styles.priceContainer}>
<Text style={[styles.nowPrice, {color: salePriceColor}]} numberOfLines={1}>{salePriceStr}</Text>
{showOriginPrice ? <DeleteLineText
... ... @@ -59,10 +97,23 @@ export default class ProductCell extends Component{
text={originPriceStr}
/> : null}
</View>
{showSoldOut ? <View style={styles.soldOutContainer}><Text style={styles.soldOut}>{'已售罄'}</Text></View> : null}
<TouchableOpacity
activeOpacity={1}
style={styles.similar}
onPress={() => {
this.props.onPressFindSimilar && this.props.onPressFindSimilar(data);
}}
>
<Image style={styles.similar} source={require('../../images/browse/shopcart_findResemblance.png')}/>
</TouchableOpacity>
<View style={styles.separator} />
</View>
</View>
</TouchableOpacity>
);
}
}
};
let {width} = Dimensions.get('window');
... ... @@ -71,43 +122,116 @@ const DEVICE_WIDTH_RATIO = width / 320;
let imageWidth = Math.floor(width / 2);
let imageHeight = Math.floor(imageWidth * 180 / 375);
let topRightWidth = Math.ceil(80 * DEVICE_WIDTH_RATIO);
let nameWidth = width - 15 - 76 - 10 - 55;
let topLeftWidth = width - Math.ceil(84 * DEVICE_WIDTH_RATIO);
let styles = StyleSheet.create({
container: {
flexDirection: 'column',
container: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: width,
backgroundColor: 'white',
},
leftContainer: {
flexDirection: 'row',
},
prdImage: {
width: 113,
height: 150,
marginLeft: 15,
marginTop: 10,
marginBottom: 10,
width: 76,
height: 102,
},
prdName: {
fontFamily: 'HelveticaNeue-Light',
fontSize: 12,
marginTop: 22,
marginLeft: 10,
width: nameWidth,
},
reduceContainer: {
flexDirection: 'row',
marginTop: 2,
marginLeft: 10,
},
reduceImage: {
width: 15,
height: 15,
},
reduceText: {
marginLeft: 2,
fontSize: 12,
color: '#b0b0b0',
width: nameWidth - 15 - 2,
},
priceContainer: {
position: 'absolute',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 10,
marginTop: 20,
left: 91,
bottom: 30,
},
nowPrice: {
fontSize: 10,
fontSize: 14,
color: '#d0021b',
marginLeft: 10,
},
oldPriceContainer: {
flexDirection: 'row',
marginLeft: 5,
marginTop: 2,
},
oldPrice: {
fontSize: 10,
fontSize: 12,
color: '#b0b0b0',
height: 16,
},
deleteLine: {
position: 'absolute',
top: (16 / 2) - 2,
top: (16 / 2) - 1,
left: 0,
right: 0,
height: 1,
backgroundColor: '#b0b0b0',
},
soldOutContainer: {
position: 'absolute',
width: 45,
height: 15,
left: 100,
bottom: 15,
borderRadius: 7.5,
backgroundColor: 'gray',
justifyContent: 'center',
},
soldOut: {
fontSize: 12,
color: 'white',
textAlign: 'center',
width: 45,
height: 15,
paddingTop: 1.5,
backgroundColor: 'transparent',
},
similar: {
position: 'absolute',
width: 56,
height: 25,
right: 15,
bottom: 15,
},
separator: {
position: 'absolute',
bottom: 0,
left: 96,
width,
height: 1,
backgroundColor: '#f0f0f0',
},
arrow: {
marginRight: 15,
width: 9,
height: 15,
},
});
... ...
... ... @@ -48,6 +48,9 @@ class BrowseContainer extends Component {
constructor(props) {
super(props);
this.onPressCategory = this.onPressCategory.bind(this);
this.onPressProduct = this.onPressProduct.bind(this);
this.onPressFindSimilar = this.onPressFindSimilar.bind(this);
}
componentDidMount() {
... ... @@ -58,11 +61,44 @@ class BrowseContainer extends Component {
}
onPressCategory(data) {
}
onPressProduct(data) {
let productSkn = data.get('product_skn', 0);
if (!productSkn) {
return;
}
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
onPressFindSimilar(data) {
if (!data) {
return;
}
let product = {
product_name: data.get('product_name', ''),
product_id: data.get('product_id', 0),
product_skn: data.get('product_skn', 0),
default_images: data.get('image', ''),
market_price: data.get('market_price', 0),
sales_price: data.get('sales_price', 0),
};
ReactNative.NativeModules.YH_CommonHelper.jumpFindSimilar(product);
// ReactNative.NativeModules.YH_CommonHelper.setSimilarGuiderVisible(false);
}
render() {
return (
<Browse
data={this.props.browse}
onPressCategory={this.onPressCategory}
onPressProduct={this.onPressProduct}
onPressFindSimilar={this.onPressFindSimilar}
/>
);
}
... ...