mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit 8cd4859faafb82a893737cbb343f06ae7fb9f662 1 parent c3fce8d9

修改UI review by hongmo

Inline Side-by-side
Showing 5 changed files with 229 additions and 118 deletions
... ... @@ -45,7 +45,7 @@ export default class DoubleImage extends React.Component {
let product1 = data1.product;
let salePrice1 = product1?parseFloat(product1.sales_price):0;
let originPrice1 = product1?parseFloat(product1.market_price):0;
let name1 = product2?product1.product_name:'';
let name1 = product1?product1.product_name:'';
let price1 = '¥' + salePrice1.toFixed(2);
let sale1 = '¥' + originPrice1.toFixed(2);
let saleAble1 = salePrice1>0?true:false;
... ...
... ... @@ -5,6 +5,7 @@ import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import DeviceInfo from 'react-native-device-info';
import {getSlicedUrl} from '../../../classify/utils/Utils';
import {removeHTMLTag} from '../../utils/Helper';
const {
View,
... ... @@ -93,8 +94,9 @@ export default class Header extends React.Component {
return null;
}
let data = resource.toJS();
let text = data.shop_intro;
text = '<html><style type="text/css">img {max-width: 100%;}</style><body>' + text + '</body></html>';
let htmlText = data.shop_intro;
let text = removeHTMLTag(htmlText);
htmlText = '<html><style type="text/css">img {max-width: 100%;}</style><body>' + htmlText + '</body></html>';
let brandName = data.is_show_shop_name?data.shop_name:'';
let num = data.favoriteCount;
let numberOfFav = '粉丝:'+ num;
... ... @@ -141,7 +143,7 @@ export default class Header extends React.Component {
{!launchProfile ? <Text style={[styles.text, fontFamilyStyle]} numberOfLines={2}>{text}</Text>:null}
{launchProfile ?<View style={{width: width,height: this.state.realContentHeight,backgroundColor: 'white'}}>
<WebView style={{width: width-40,height: this.state.realContentHeight,backgroundColor: 'white',marginRight: 20,marginLeft: 20}}
source= {{html: codeInject(text)}}
source= {{html: codeInject(htmlText)}}
scrollEnabled={false}
javaScriptEnabled={true}
decelerationRate="normal"
... ...
... ... @@ -75,20 +75,12 @@ export default class RedBrand extends Component {
noFilterValue = false;
}
});
let productListIsEmpty = !this.props.productList || !this.props.productList.list || this.props.productList.list.size == 0;
if (productListIsEmpty && noFilterValue) {
return null;
}
return (
<View
style={styles.brandFilterContainer}
onLayout={(evt) => {
yPosition = evt.nativeEvent.layout.y;
}}
>
<View style={styles.brandFilterContainer} onLayout={(evt) => {yPosition = evt.nativeEvent.layout.y;}}>
<BrandProductFilter
onPressFilter={this._onPressProductFilter}
lastSelected={this.props.productList.isFilter}
... ... @@ -108,19 +100,9 @@ export default class RedBrand extends Component {
if (sectionID == 'ShopBanner') {
let {launchProfile} = this.props;
return(<Header resource={rowData} launchProfile={launchProfile} onPressLaunchProfile={this._onPressLaunchProfile} onPressCollection={this.props.onPressCollection}/>);
} else if (sectionID == 'productList') {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
/>
);
} else{
} else if (sectionID == 'coupon') {
return(<CouponCell resource={rowData} onPressCoupon={this.props.onPressCoupon}/>);
} else if(sectionID == 'brandReource'){
if (rowData.get('module_type') == 'CarouselImage') {
return(<RedBrandSwiper resource={rowData} onPressSlideItem={this.props.onPressProduct}/>);
}else if (rowData.get('module_type') == 'Title') {
... ... @@ -134,6 +116,17 @@ export default class RedBrand extends Component {
}else if (rowData.get('module_type') == 'TripleImage') {
return(<TripleImage resource={rowData} onPressProduct={this.props.onPressProduct}/>);
}
} else if (sectionID == 'productList') {
let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft} : {paddingLeft};
return (
<BrandProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}/>
);
}
return null;
}
... ... @@ -160,6 +153,7 @@ export default class RedBrand extends Component {
if (fliter == 0) {
dataSource = {
ShopBanner: [shopIntro],
coupon: [coupon],
brandReource: shopsdecorator.modules.toArray(),
};
} else if (fliter == 1) {
... ...
import React, {Component } from 'react'
import { Image ,View, StyleSheet, Text, Dimensions} from 'react-native';
import Immutable, {Map} from 'immutable';
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 pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
let type;
switch (3) {
case 1:
let {resource} = this.props;
if (!resource) {
return null;
}
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;
let data1 = list?list[0]:null;
let backgroundImage1 = data1?data1.pic:'';
let linkType1 = data1.linkType;
let product1 = data1.product;
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 = salePrice1>0?true:false;
let data2 = list?list[1]:null;
let backgroundImage2 = data2.pic;
let linkType2 = data2.linkType;
let product2 = data2.product;
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 = salePrice2>0?true:false;
let data3 = list?list[2]:null;
let backgroundImage3 = data3.pic;
let linkType3 = data3.linkType;
let product3 = data3.product;
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 = salePrice3>0?true:false;
switch (displayType) {
case '1':
return (
<View style={styles.container}>
<View style={styles.container1}>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.image}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS22222222222</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth4+nullHeigth:containerHeigth4,backgroundColor: 'white'}}>
<Image source={{uri: backgroundImage1}} style={styles.imagetype4}>
{saleAble1?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name1}</Text>
<Text style={styles.price4}>{price1}</Text>
</View>:null}
</Image>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.image}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<Image source={{uri: backgroundImage2}} style={styles.imagetype4}>
{saleAble2?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name2}</Text>
<Text style={styles.price4}>{price2}</Text>
</View>:null}
</Image>
</View>
<View style={styles.container1}>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.imageBig}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<Image source={{uri: backgroundImage3}} style={styles.imagetype4}>
{saleAble3?<View style={styles.maskContainer4}>
<Text numberOfLines={1} style={styles.titleText4}>{name3}</Text>
<Text style={styles.price4}>{price3}</Text>
</View>:null}
</Image>
</View>
</View>
)
break;
case 2:
case '2':
return (
<View style={styles.container}>
<View style={styles.container1}>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.imageBig}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth3+nullHeigth:containerHeigth3,backgroundColor: 'white'}}>
<Image source={{uri: backgroundImage1}} style={styles.imagetype3}>
{saleAble1?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price1}</Text>
</View>:null}
</Image>
</View>
<View style={styles.container1}>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.image}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS22222222222</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<Image source={{uri: backgroundImage2}} style={styles.imagetype3}>
{saleAble2?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price2}</Text>
</View>:null}
</Image>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={styles.image}>
<View style={styles.mask}>
<Text numberOfLines={2} style={styles.titleText}>MADNESS</Text>
<Text style={styles.price}>$ 299.0</Text>
</View>
<Image source={{uri: backgroundImage3}} style={styles.imagetype3}>
{saleAble3?<View style={styles.maskContainer3}>
<Text style={styles.price3}>{price3}</Text>
</View>:null}
</Image>
</View>
</View>
)
break;
case 3:
case '3':
return (
<View style={styles.container}>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={{width:width/3 , height:containerHeigth * scale, justifyContent: 'flex-end'}}>
<View style={styles.mask1}>
<Text numberOfLines={2} style={styles.titleText1}>MADNESS</Text>
<Text style={styles.titleText1}>$ 299.0</Text>
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: 'white'}}>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage1}} style={styles.image}>
{saleAble1?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
</View>:null}
</Image>
</View>
<Image source={{uri: backgroundImage3}} style={styles.imageBig}>
{saleAble3?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name3}</Text>
<Text style={styles.price}>{price3}</Text>
</View>:null}
</Image>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={{width:width/3 , height:containerHeigth * scale, justifyContent: 'flex-end'}}>
<View style={styles.mask1}>
<Text numberOfLines={1} style={styles.titleText1}>MADNESS22222222222</Text>
<Text style={styles.titleText1}>$ 299.0</Text>
</View>
)
break;
case '4':
return (
<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: 'white'}}>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage1}} style={styles.imageBig}>
{saleAble1?<View style={styles.maskContainer2}>
<Text numberOfLines={2} style={styles.titleText}>{name1}</Text>
<Text style={styles.price}>{price1}</Text>
</View>:null}
</Image>
<Image source={require('../../../brandStore/image/coupons_l_r.png')} style={{width:width/3 , height:containerHeigth * scale, justifyContent: 'flex-end'}}>
<View style={styles.mask1}>
<Text numberOfLines={1} style={styles.titleText1}>MADNESS</Text>
<Text style={styles.titleText1}>$ 299.0</Text>
</View>
<View style={styles.subContainer}>
<Image source={{uri: backgroundImage2}} style={styles.image}>
{saleAble2?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name2}</Text>
<Text style={styles.price}>{price2}</Text>
</View>:null}
</Image>
<Image source={{uri: backgroundImage3}} style={styles.image}>
{saleAble3?<View style={styles.maskContainer1}>
<Text numberOfLines={2} style={styles.titleText}>{name3}</Text>
<Text style={styles.price}>{price3}</Text>
</View>:null}
</Image>
</View>
</View>
)
break;
default:
return null;
}
}
}
let {width, height} = Dimensions.get('window');
let containerHeigth = 234;
let containerHeigth = Math.ceil((468/750)*width);
let containerHeigth3 = Math.ceil(width/3);
let containerHeigth4 = Math.ceil((333/750)*width);
let maskHeight = 30;
let scale = (width/375.0);
let nullHeigth = 10;
let styles = StyleSheet.create({
container:{
flexDirection: 'row',
width:width,
height: containerHeigth * scale,
},
container1:{
subContainer:{
width:width / 2,
flexDirection: 'column',
},
image:{
height: containerHeigth * scale / 2,
justifyContent: 'flex-end',
maskContainer1: {
width: width/2,
height: maskHeight,
backgroundColor: 'rgba(0,0,0,0.3)',
marginTop: containerHeigth/2-maskHeight,
flexDirection: 'row',
alignItems: 'center',
},
imageBig:{
height: containerHeigth * scale,
justifyContent: 'flex-end',
maskContainer2: {
width: width/2,
height: maskHeight,
backgroundColor: 'rgba(0,0,0,0.3)',
marginTop: containerHeigth-maskHeight,
flexDirection: 'row',
alignItems: 'center',
},
mask:{
backgroundColor: 'black',
opacity:0.3,
height: maskHeight * scale,
maskContainer3:{
width: width/3,
height: 24,
backgroundColor: 'rgba(0,0,0,0.3)',
marginTop: containerHeigth3-24,
flexDirection: 'row',
alignItems: 'center',
// justifyContent: 'space-around',
},
mask1:{
backgroundColor: 'black',
opacity:0.3,
height: maskHeight * scale,
flexDirection: 'column',
justifyContent: 'space-around',
// alignItems: 'center',
maskContainer4: {
width: width/3,
height: 40,
backgroundColor: 'rgba(0,0,0,0.3)',
marginTop: containerHeigth4-40,
},
imagetype3: {
width:width/3 ,
height:containerHeigth3,
},
imagetype4:{
width:width/3,
height:containerHeigth4,
},
image:{
width:width/2,
height: containerHeigth / 2,
},
imageBig:{
width:width/2,
height: containerHeigth,
},
titleText: {
marginLeft: 10,
... ... @@ -145,18 +233,35 @@ let styles = StyleSheet.create({
textAlign :'left',
},
price: {
// marginRight: 10,
color:'white',
width : 80,
fontSize: 12,
textAlign :'right',
},
titleText1: {
price3: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 12,
textAlign :'left',
},
titleText4: {
width:width/3 ,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 12,
textAlign :'left',
marginTop: 4,
},
price4: {
width:width/3 ,
height:maskHeight * scale / 2,
height:maskHeight / 2,
color: 'white',
marginLeft: 10,
fontSize: 12,
textAlign :'left',
marginTop: 2,
},
});
... ...
'use strict';
export function removeHTMLTag(str) {
str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
str=str.replace(/\s/g,''); //将空格去掉
return str;
}
... ...