mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit bc19d8c672b8bce1470d8d4a72676113960eebb6 1 parent 9bc2a3ac

add guang detail product cell style review by hongmo

Inline Side-by-side
Showing 6 changed files with 315 additions and 69 deletions
... ... @@ -3,7 +3,7 @@
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import GuangDetailProductCell from './GuangDetailProductCell';
const {
AppRegistry,
... ... @@ -46,36 +46,16 @@ export default class GoodsCell extends React.Component {
renderRow(rowData, sectionID, rowID, highlightRow) {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
let product = rowData?rowData.toJS():'';
let prd_id = product.product_id;
let isGlobal = product.is_global=='Y'?true:false;
let is_limitbuy = product.is_limitbuy=='Y'?true:false;
return (
<View style={[styles.listContainer, customStyle]}>
<BrandProductListCell
<GuangDetailProductCell
style={styles.listContainer}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
onPressShopCar={this.props.onPressShopCar}
/>
{is_limitbuy ?
<TouchableOpacity style={styles.type2LookDetail} activeOpacity={0.5} onPress={() => {
let pos_id = 103;
this.props.onPressProduct && this.props.onPressProduct(rowData,rowID,pos_id);
}}>
<Text style={styles.lookDetailText}>查看详情</Text>
<Image source={require('../../../studentCertification/images/right_arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
</TouchableOpacity>
:
<TouchableOpacity style={styles.type2ShopCar} activeOpacity={0.5} onPress={() => {
let pos_id = 106;
this.props.onPressShopCar && this.props.onPressShopCar(product.product_skn,prd_id,pos_id,isGlobal);
}}>
<Image source={require('../../image/jgwc_bt.png')} style={styles.button} resizeMode={'contain'}></Image>
</TouchableOpacity>
}
</View>
);
}
... ... @@ -83,7 +63,7 @@ export default class GoodsCell extends React.Component {
//两列多行的样式
_renderCellType2(list) {
let backgroundWidth = width;
let backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20;
let backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal);
return(
<View style={{width: backgroundWidth, height:backgroundHeight, backgroundColor:'white'}}>
<ListView
... ... @@ -132,7 +112,6 @@ export default class GoodsCell extends React.Component {
}}
>
<View style={styles.content_View}>
<View style={styles.line}/>
<View style={styles.single_View}>
<Image source={{uri: default_images}} style={styles.icon} resizeMode={'contain'}></Image>
<View style={styles.nameView}>
... ... @@ -156,7 +135,7 @@ export default class GoodsCell extends React.Component {
this.props.onPressShopCar && this.props.onPressShopCar(product.product_skn,prd_id,pos_id,isGlobal);
}}
>
<Image source={require('../../image/jgwc_bt.png')} style={styles.button} resizeMode={'contain'}></Image>
<Image source={require('../../image/jrgwc.png')} style={styles.button} resizeMode={'contain'}></Image>
</TouchableOpacity>
}
... ... @@ -177,11 +156,7 @@ export default class GoodsCell extends React.Component {
if (!originList || listSize == 0) {
return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
}
let prudoctLimitRow = 2;
if (display_template == 2) {
prudoctLimitRow = 4;
}
let prudoctLimitRow = 4;
let list = originList;
if (this.state.moreProduct && listSize > prudoctLimitRow) {
list = originList.slice(0,prudoctLimitRow);
... ... @@ -189,11 +164,13 @@ export default class GoodsCell extends React.Component {
let surplusSize = listSize-prudoctLimitRow;
let moreStr = '展开剩余'+ surplusSize + '个商品';
let backgroundWidth = width;
let showMoreViewHeigth = (this.state.moreProduct && listSize > prudoctLimitRow)?60:0;
let moreProductHeigth = Platform.OS === 'ios' ? 22 : 24
let showMoreViewHeigth = (this.state.moreProduct && listSize > prudoctLimitRow)?moreProductHeigth+20:0;
let backgroundHeight = Math.ceil(list.size) * (rowHeight+1) + showMoreViewHeigth;
if (display_template == 2) {
backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + 20 + showMoreViewHeigth;
backgroundHeight = Math.ceil(list.size / 2) * (cellHeight+rowMarginHorizontal) + showMoreViewHeigth;
}
return(
... ... @@ -208,7 +185,7 @@ export default class GoodsCell extends React.Component {
<View style={styles.more}>
<Text style={styles.moreText} numberOfLines={1}>{moreStr}</Text>
<View style={styles.arrowView}>
<Image source={require('../../image/arrow_ic.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
<Image source={require('../../image/up-arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
</View>
</View>
</TouchableOpacity>:null}
... ... @@ -219,11 +196,12 @@ export default class GoodsCell extends React.Component {
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 750;
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
let imageWidth = Math.ceil((rowHeight - 20) * (235/314));
let rowsp = 6;
let rowHeight = Math.ceil(204 * DEVICE_WIDTH_RATIO) + rowsp;
let imageWidth = Math.ceil((rowHeight - rowsp) * (152/204));
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
let cellHeight = Math.ceil(254 * (width / 320));
let cellHeight = Math.ceil(582 * (width / 750));
let styles = StyleSheet.create({
content_View: {
... ... @@ -239,30 +217,33 @@ let styles = StyleSheet.create({
width: width / 2,
},
single_View: {
height: rowHeight,
width:width,
backgroundColor: 'white',
height: rowHeight - rowsp + 1,
width: width-30,
flexDirection: 'row',
marginLeft: 15,
borderColor: '#e0e0e0',
borderWidth: 0.5,
},
icon: {
marginTop: 10,
marginLeft: 20,
height: rowHeight - 20,
height: rowHeight - rowsp,
width: imageWidth,
},
nameView: {
height: rowHeight,
width: width - imageWidth - 20,
height: rowHeight - rowsp,
width: width - imageWidth - 30,
backgroundColor: '#f0f0f0',
},
name: {
marginTop: 30,
marginTop: 13,
marginLeft:15,
fontSize: 13,
width: width - imageWidth - 35,
fontSize: 14,
color: '#444444',
fontWeight:'bold',
width: width - imageWidth - 30 - 35,
},
nowPrice: {
fontSize: 15,
marginTop: 20,
fontSize: 14,
marginTop: 13,
marginLeft:15,
color: '#d0021b',
},
... ... @@ -278,12 +259,12 @@ let styles = StyleSheet.create({
width: 40,
},
more: {
height: 60,
height: Platform.OS === 'ios' ? 22 : 24,
width:width,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'white',
marginTop: 5,
},
moreText: {
height: Platform.OS === 'ios' ? 22 : 24,
... ... @@ -293,19 +274,13 @@ let styles = StyleSheet.create({
paddingBottom: 2,
fontSize: 15,
color: 'white',
backgroundColor: 'rgb(68, 68, 68)',
},
line: {
width: width-20,
height: 1,
marginLeft: 20,
backgroundColor: '#e5e5e5',
backgroundColor: '#b0b0b0',
},
arrowView: {
width: 25,
height: Platform.OS === 'ios' ? 22 : 24,
justifyContent: 'center',
backgroundColor: 'rgb(68, 68, 68)',
backgroundColor: '#b0b0b0',
},
arrow_icon: {
width: 15,
... ... @@ -327,15 +302,6 @@ let styles = StyleSheet.create({
flexDirection: 'row',
alignItems:"center",
},
type2LookDetail: {
position: 'absolute',
bottom: 8,
right: 15,
width: 65,
height: 12,
flexDirection: 'row',
alignItems:"center",
},
lookDetailText: {
width: 50,
height: 12,
... ... @@ -343,5 +309,6 @@ let styles = StyleSheet.create({
color: '#444444',
textAlign: 'right',
fontWeight:'bold',
backgroundColor: '#f0f0f0',
}
});
... ...
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
Platform,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
} from 'react-native';
import Tags from '../../../common/components/ListCell/Tags';
import GPTags from '../../../common/components/ListCell/GPTags';
import YH_Image from '../../../common/components/YH_Image';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';
export default class GuangDetailProductCell extends Component {
constructor(props) {
super(props);
this._renderTags = this._renderTags.bind(this);
this._renderImages = this._renderImages.bind(this);
this._renderPrice = this._renderPrice.bind(this);
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.data, this.props.data)
&& nextProps.similarIndex == this.props.similarIndex
&& nextProps.rowID == this.props.rowID) {
return false;
} else {
return true;
}
}
_renderTags() {
let {data, sourceType} = this.props;
let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
return <Tags items={data.get('tags')}/>;
if (isGlobalProduct) {
let showGPLimitTag = data.get('is_limited') && data.get('is_limited') == 'Y'; // 全球购限量商品
let countryName = data.get('country_name'); // 全球购国家名称
return <GPTags title={countryName} limit={showGPLimitTag}/>;
} else {
return <Tags items={data.get('tags')}/>;
}
}
_renderImages() {
let {data, sourceType, similarIndex, rowID, showSimilarGuider} = this.props;
let url = data.get('default_images', '').replace('{mode}', 2)
.replace(/{width}/g, 290)
.replace(/{height}/g, 386);
let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
if (isGlobalProduct) {
let showGPSoldOut = isGlobalProduct && data.get('is_stock') && data.get('is_stock') == 'Y'; // 全球购售罄
return (
<View style={styles.imageContainer}>
<YH_Image style={styles.image} url={url}>
{showGPSoldOut ? <Image style={styles.gpSoldOutImage} source={require('../../../common/images/tag/gp_tip_SQ.png')}/> : null}
</YH_Image>
</View>
);
} else {
let showAlmostSoldOut = data.get('tags', []).indexOf('is_soon_sold_out') !== -1; // 非全球购的即将售罄
let showSoldOut = data.get('tags', []).indexOf('is_solded') !== -1; // 非全球购的即将售罄
let showOutletSoldOut = sourceType == 2 && data.get('storage_num') && data.get('storage_num') == 0; // 数据源是奥莱才显示
return (
<View style={styles.imageContainer}>
<YH_Image style={styles.image} url={url}>
{showAlmostSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../../common/images/tag/tip_jjsq.png')}/> : null}
{showOutletSoldOut ? <Image style={styles.soldOutImage} source={require('../../../common/images/tag/outlet_sellout_bg.png')}/> : null}
{showSoldOut ? <Image style={styles.almostSoldOutImage} source={require('../../../common/images/tag/tip_ysq.png')}/> : null}
</YH_Image>
</View>
);
}
}
_renderPrice() {
let {data, sourceType, fromPage} = this.props;
let isGlobalProduct = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
let salePrice = 0; // 售卖价
let originPrice = 0; // 原价
let salePriceStr = ''; // 拼接的售卖价
let originPriceStr = ''; // 拼接的原价
if (isGlobalProduct) {
salePrice = parseFloat(data.get('final_price'));
originPrice = parseFloat(data.get('orign_price'));
salePriceStr = data.get('formart_final_price');
originPriceStr = data.get('formart_orign_price');
} else {
salePrice = parseFloat(data.get('sales_price'));
originPrice = parseFloat(data.get('market_price'));
salePriceStr = '¥' + salePrice.toFixed(2);
originPriceStr = '¥' + originPrice.toFixed(2);
}
return (
<View style={styles.priceContainer}>
<Text style={styles.nowPrice} numberOfLines={1}>{salePriceStr}</Text>
</View>
);
}
render() {
let {data, sourceType, similarIndex, rowID} = this.props;
let name = data.get('product_name') ? data.get('product_name') : '';
let yh_exposureData = data.get('yh_exposureData', null);
let prd_id = data.get('product_id') ? data.get('product_id') : '';
let isGlobal = data.get('is_global') && data.get('is_global') == 'Y'; // 是否全球购商品
let is_limitbuy = data.get('is_limitbuy') && data.get('is_limitbuy') == 'Y'; // product.is_limitbuy=='Y'?true:false;
let product_skn = data.get('product_skn') ? data.get('product_skn') : '';
return (
<TouchableOpacity
style={styles.container}
activeOpacity={1}
yh_exposureData={yh_exposureData}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(data, rowID);
}}
>
<View style={{overflow: 'hidden',backgroundColor: '#f0f0f0',height: Platform.OS === 'ios'?rowHeight:rowHeight+4,borderColor: '#e0e0e0',
borderWidth: 0.5}} >
{this._renderImages()}
<View style={styles.nameContainer}>
<Text style={styles.name} numberOfLines={2}>{name}</Text>
</View>
{this._renderPrice()}
{is_limitbuy ?
<TouchableOpacity style={styles.typeLookDetail} activeOpacity={0.5} onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(data, rowID);
}}>
<Text style={styles.lookDetailText}>查看详情</Text>
<Image source={require('../../../studentCertification/images/right_arrow.png')} style={styles.arrow_icon} resizeMode={'contain'}></Image>
</TouchableOpacity>
:
<TouchableOpacity style={styles.typeShopCar} activeOpacity={0.5} onPress={() => {
let pos_id = 106;
this.props.onPressShopCar && this.props.onPressShopCar(product_skn,prd_id,pos_id,isGlobal);
}}>
<Image source={require('../../image/jrgwc.png')} style={styles.button} resizeMode={'contain'}></Image>
</TouchableOpacity>
}
</View>
</TouchableOpacity>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 750;
let rowWidth = Math.ceil(320 * DEVICE_WIDTH_RATIO);
let rowHeight = Math.ceil(582 * DEVICE_WIDTH_RATIO);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);
let imageHeight = Math.ceil(425 * DEVICE_WIDTH_RATIO);
let almostSoldOutImageHeight = Math.ceil(30 * DEVICE_WIDTH_RATIO);
let almostSoldOutImageTop = imageHeight - almostSoldOutImageHeight;
let gpSoldOutImageHeight = Math.ceil(25 * DEVICE_WIDTH_RATIO);
let styles = StyleSheet.create({
container: {
width: rowWidth,
height: Platform.OS === 'ios'?rowHeight + 10:rowHeight+4 + 10,
marginTop: rowMarginTop,
marginBottom: rowMarginBottom,
overflow: 'hidden',
},
rowContainer: {
width: rowWidth,
height: Platform.OS === 'ios'?rowHeight:rowHeight+4,
},
imageContainer: {
width: rowWidth,
height: imageHeight,
backgroundColor: '#f0f0f0',
},
image: {
width: rowWidth,
height: imageHeight,
backgroundColor: '#f0f0f0',
},
soldOutImage: {
position: 'absolute',
top: 0,
left: 0,
width: rowWidth,
height: imageHeight,
},
almostSoldOutImage: {
top: almostSoldOutImageTop,
width: rowWidth,
height: almostSoldOutImageHeight,
backgroundColor: '#ff9e0d',
},
nameContainer: {
marginLeft: 10,
marginTop: 16,
width: rowWidth - 20,
},
name: {
fontFamily: 'STHeitiSC-Light',
fontSize: 12,
color: '#444444',
},
priceContainer: {
position: 'absolute',
marginLeft: 10,
width: 100,
bottom: 16,
},
nowPrice: {
fontSize: 12,
color: '#d10922',
},
gpSoldOutImage: {
position: 'absolute',
top: 5,
right: 5,
width: gpSoldOutImageHeight,
height: gpSoldOutImageHeight,
},
typeLookDetail: {
position: 'absolute',
bottom: 16,
right: 10,
width: 65,
height: 12,
flexDirection: 'row',
alignItems:"center",
},
button: {
height: 23,
width: 40,
},
typeShopCar: {
position: 'absolute',
bottom: 10,
right: 10,
width: 40,
height: 23,
},
lookDetailText: {
width: 50,
height: 12,
fontSize: 12,
color: '#444444',
textAlign: 'right',
fontWeight:'bold',
backgroundColor: '#f0f0f0',
},
arrow_icon: {
width: 15,
height: 7,
},
});
... ...