From 036d717107a5d2aab362c335bbff781472137ad3 Mon Sep 17 00:00:00 2001
From: 于良 <yl3016@126.com>
Date: Tue, 21 Mar 2017 15:04:33 +0800
Subject: [PATCH] 浏览记录 review by 草莓
---
js/home/components/floor/AppIconList.js | 2 +-
js/recorder/components/browse/Browse.js | 3 +++
js/recorder/components/browse/ProductCell.js | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------
js/recorder/containers/BrowseContainer.js | 36 ++++++++++++++++++++++++++++++++++++
js/recorder/images/browse/mine_goods_low_icon@2x.png | Bin 0 -> 1679 bytes
js/recorder/images/browse/mine_goods_low_icon@3x.png | Bin 0 -> 2161 bytes
js/recorder/images/browse/shared_next_icon@2x.png | Bin 0 -> 1332 bytes
js/recorder/images/browse/shared_next_icon@3x.png | Bin 0 -> 1473 bytes
js/recorder/images/browse/shopcart_findResemblance@2x.png | Bin 0 -> 2118 bytes
js/recorder/images/browse/shopcart_findResemblance@3x.png | Bin 0 -> 2828 bytes
10 files changed, 185 insertions(+), 22 deletions(-)
create mode 100755 js/recorder/images/browse/mine_goods_low_icon@2x.png
create mode 100755 js/recorder/images/browse/mine_goods_low_icon@3x.png
create mode 100755 js/recorder/images/browse/shared_next_icon@2x.png
create mode 100755 js/recorder/images/browse/shared_next_icon@3x.png
create mode 100644 js/recorder/images/browse/shopcart_findResemblance@2x.png
create mode 100644 js/recorder/images/browse/shopcart_findResemblance@3x.png
diff --git a/js/home/components/floor/AppIconList.js b/js/home/components/floor/AppIconList.js
index 7e55417..0f20578 100644
--- a/js/home/components/floor/AppIconList.js
+++ b/js/home/components/floor/AppIconList.js
@@ -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>
);
diff --git a/js/recorder/components/browse/Browse.js b/js/recorder/components/browse/Browse.js
index 201da58..39e3c78 100644
--- a/js/recorder/components/browse/Browse.js
+++ b/js/recorder/components/browse/Browse.js
@@ -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}
/>
);
}
diff --git a/js/recorder/components/browse/ProductCell.js b/js/recorder/components/browse/ProductCell.js
index ed0e3ce..2625ac8 100644
--- a/js/recorder/components/browse/ProductCell.js
+++ b/js/recorder/components/browse/ProductCell.js
@@ -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,
+ },
});
diff --git a/js/recorder/containers/BrowseContainer.js b/js/recorder/containers/BrowseContainer.js
index c2951fe..810aac8 100644
--- a/js/recorder/containers/BrowseContainer.js
+++ b/js/recorder/containers/BrowseContainer.js
@@ -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}
/>
);
}
diff --git a/js/recorder/images/browse/mine_goods_low_icon@2x.png b/js/recorder/images/browse/mine_goods_low_icon@2x.png
new file mode 100755
index 0000000..bf3744b
Binary files /dev/null and b/js/recorder/images/browse/mine_goods_low_icon@2x.png differ
diff --git a/js/recorder/images/browse/mine_goods_low_icon@3x.png b/js/recorder/images/browse/mine_goods_low_icon@3x.png
new file mode 100755
index 0000000..39d6297
Binary files /dev/null and b/js/recorder/images/browse/mine_goods_low_icon@3x.png differ
diff --git a/js/recorder/images/browse/shared_next_icon@2x.png b/js/recorder/images/browse/shared_next_icon@2x.png
new file mode 100755
index 0000000..d5834dd
Binary files /dev/null and b/js/recorder/images/browse/shared_next_icon@2x.png differ
diff --git a/js/recorder/images/browse/shared_next_icon@3x.png b/js/recorder/images/browse/shared_next_icon@3x.png
new file mode 100755
index 0000000..64c4a81
Binary files /dev/null and b/js/recorder/images/browse/shared_next_icon@3x.png differ
diff --git a/js/recorder/images/browse/shopcart_findResemblance@2x.png b/js/recorder/images/browse/shopcart_findResemblance@2x.png
new file mode 100644
index 0000000..f280fb0
Binary files /dev/null and b/js/recorder/images/browse/shopcart_findResemblance@2x.png differ
diff --git a/js/recorder/images/browse/shopcart_findResemblance@3x.png b/js/recorder/images/browse/shopcart_findResemblance@3x.png
new file mode 100644
index 0000000..38a0d66
Binary files /dev/null and b/js/recorder/images/browse/shopcart_findResemblance@3x.png differ
--
libgit2 0.24.0