mobile / YH_RNComponent · Commits

Go to a project

Authored by QC-L
Commit 12617e4f7ad1d12df784250df938be393dc02f40 1 parent 2be657c5

更新有货有赞首页邀请码 Banner review by sunkai

Inline Side-by-side
Showing 2 changed files with 130 additions and 63 deletions
... ... @@ -11,7 +11,7 @@ import ImageFour from "./cell/ImageFour";
import ImageTwo from "./cell/ImageTwo";
import ProductCell from './recommend/ProductCell';
import CategorySelector from './recommend/CategorySelector';
import YH_Image from '../../common/components/YH_Image';
import EditorTalk from './cell/EditorTalk';
let hotRecommend = Immutables.fromJS({
count: "8",
... ... @@ -36,8 +36,7 @@ export default class Home extends Component {
_renderRow(rowData, sectionID, rowID) {
let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};
let sliderHeight = 90 * DEVICE_WIDTH_RATIO;
let imageUrl = YH_Image.getSlicedUrl(this.props.src, width, sliderHeight, 2);
switch (sectionID) {
case 'resourceList': {
return this._floorCellRender(rowData, rowID);
... ... @@ -67,8 +66,6 @@ export default class Home extends Component {
}
case 'categoryList': {
let {productList} = this.props.data;
let selectedCategoryIndex = productList.selectedCategoryIndex;
let categoryList = productList.msort_list.unshift(hotRecommend);
... ... @@ -83,38 +80,6 @@ export default class Home extends Component {
);
}
case 'productBanner': {
const htmlcontent = this.props.data.inviteCode ? this.props.data.inviteCode.toJS() : {};
let mainTitlelist = htmlcontent && htmlcontent.shareMainTitle && htmlcontent.shareMainTitle.textlist ? htmlcontent.shareMainTitle.textlist : [{'text':'"潮流口令"'}];
let subTitlelist = htmlcontent && htmlcontent.shareSubTitle && htmlcontent.shareSubTitle.textlist ? htmlcontent.shareSubTitle.textlist : [];
let contextlist = htmlcontent && htmlcontent.context && htmlcontent.context.textlist ? htmlcontent.context.textlist: [];
let url = htmlcontent && htmlcontent.url ? htmlcontent.url : '';
return (
<TouchableOpacity
activeOpacity={1}
style={{width: width, height: sliderHeight,}}
onPress={() => {
this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(url);
}}
>
<Image source={require('../images/invitecode.png')} style={{width: width, height: sliderHeight,position:'absolute', marginTop: 0, marginBottom:0}}/>
<Text style={styles.bannerMainTitle}>{mainTitlelist.map(item => {
return <Text style={item}>{item.text}</Text>
})}</Text>
<Text style={styles.bannerSubTitle}>
{subTitlelist.map(item => {
return <Text style={item}>{item.text}</Text>
})}
</Text>
<Text style={styles.bannerContext}>
{contextlist.map(item => {
return <Text style={item}>{item.text}</Text>
})}
</Text>
</TouchableOpacity>
)
}
default:
return null;
}
... ... @@ -140,11 +105,11 @@ export default class Home extends Component {
case 'newSingleImage': {
let imageHeight = rowData.get('data').toJS().imageHeight;
return (
<SingleImage
style={imageHeight> 100 ? {marginLeft: 15, marginRight: 15, width: width-30}: {}}
data={rowData.get('data')}
resourceJumpWithUrl={this.props.resourceJumpWithUrl}
/>
<SingleImage
style={imageHeight> 100 ? {marginLeft: 15, marginRight: 15, width: width-30}: {}}
data={rowData.get('data')}
resourceJumpWithUrl={this.props.resourceJumpWithUrl}
/>
);
}
case 'image_list': {
... ... @@ -164,6 +129,15 @@ export default class Home extends Component {
/>
);
}
case 'editorTalk': {
return (
<EditorTalk
htmlcontent={this.props.data.inviteCode}
image={require('../images/invitecode.png')}
resourceJumpWithUrl={this.props.resourceJumpWithUrl}
/>
)
}
default:
return null;
}
... ... @@ -179,7 +153,6 @@ export default class Home extends Component {
let dataSource = {
resourceList: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : [],
productBanner: data.inviteCode ? ['1'] : [],
categoryList: data.productList.msort_list ? ['1'] : [],
productList: data.productList.product_list ? data.productList.product_list.toArray() : [],
};
... ... @@ -212,10 +185,9 @@ export default class Home extends Component {
}
let {width, height} = Dimensions.get('window');
let { width } = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
container: {
... ... @@ -248,23 +220,5 @@ let styles = StyleSheet.create({
listContainer: {
width: width,
},
bannerMainTitle: {
fontSize: 16,
color: '#000000',
textAlign:'center',
marginTop:12,
},
bannerSubTitle: {
fontSize:12,
color: '#000000',
textAlign:'center',
marginTop:19,
},
bannerContext: {
fontSize:9,
color: '#000000',
textAlign:'center',
marginTop:6,
}
})
;
... ...
'use strict';
import ReactNative from 'react-native';
import React, { Component } from 'react'
import Immutable from 'immutable';
const {
TouchableOpacity,
Image,
Text,
Dimensions,
StyleSheet
} = ReactNative;
export default class EditorTalk extends Component {
constructor(props) {
super(props);
this._handleData = this._handleData.bind(this);
}
shouldComponentUpdate(nextProps) {
if (Immutable.is(nextProps.htmlcontent, this.props.htmlcontent)) {
return false;
} else {
return true;
}
}
_handleData() {
const htmlcontent = this.props.htmlcontent ? this.props.htmlcontent.toJS() : {};
let mainTitlelist = htmlcontent && htmlcontent.shareMainTitle && htmlcontent.shareMainTitle.textlist ? htmlcontent.shareMainTitle.textlist : [{'text':'"潮流口令"'}];
let subTitlelist = htmlcontent && htmlcontent.shareSubTitle && htmlcontent.shareSubTitle.textlist ? htmlcontent.shareSubTitle.textlist : [];
let contextlist = htmlcontent && htmlcontent.context && htmlcontent.context.textlist ? htmlcontent.context.textlist: [];
let url = htmlcontent && htmlcontent.url ? htmlcontent.url : '';
return {
mainTitlelist,
subTitlelist,
contextlist,
url
}
}
render() {
let { mainTitlelist, subTitlelist, contextlist, url } = this._handleData();
let image = this.props.image;
return (
<TouchableOpacity
activeOpacity={1}
style={{width: width, height: sliderHeight}}
onPress={() => {
this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(url);
}}
>
<Image
source={image}
style={styles.backgroundImage}
/>
<Text style={styles.bannerMainTitle}>{mainTitlelist.map(item => {
return <Text style={item}>{item.text}</Text>
})}</Text>
<Text style={styles.bannerSubTitle}>
{subTitlelist.map(item => {
let newItem = item;
if (item.text) {
newItem = Object.assign({}, item)
delete newItem['text'];
}
return <Text style={newItem}>{item.text}</Text>
})}
</Text>
<Text style={styles.bannerContext}>
{
contextlist.map(item => {
return <Text style={item}>{item.text}</Text>
})
}
</Text>
</TouchableOpacity>
)
}
}
let { width } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let sliderHeight = 90 * DEVICE_WIDTH_RATIO;
let styles = StyleSheet.create({
backgroundImage: {
width: width,
height: '100%',
position:'absolute',
marginTop: 0,
marginBottom:0
},
bannerMainTitle: {
fontSize: 16,
color: '#000000',
textAlign:'center',
marginTop:12,
},
bannerSubTitle: {
fontSize:12,
color: '#000000',
textAlign:'center',
marginTop:19,
},
bannerContext: {
fontSize:9,
color: '#000000',
textAlign:'center',
marginTop:6,
}
});
... ...