mobile / YH_RNComponent · Commits

Go to a project

Authored by 鹿亮亮
Commit 6f4e7b0a7f8452af57bd13d8598481b827790bbc 1 parent c8c98f72

VIP专享楼层和activityProductFloor复合楼层 review by 陈林

Inline Side-by-side
Showing 6 changed files with 379 additions and 185 deletions
'use strict';
/**
* Description:
* activityProductFloor： 添加活动+商品推荐楼层(内含 1 VIP 专享 2 新人专享 3 学生专享 4 新品到着)
* Author: Bruce.Lu
* Version: 1.0
* Created on 2017/2/14.
*/
import React, {Component} from 'react';
import SlicedImage from '../../../common/components/SlicedImage';
import ReactNative, {
View,
Text,
Image,
ListView,
Text,
StyleSheet,
Dimensions,
ListView,
View,
TouchableOpacity,
Dimensions,
} from 'react-native';
import Swiper from 'react-native-swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Immutable from 'immutable';
/**
* 这个楼层还没有做，涉及到几个组合的，后面再做
*
**/
export default class ActivityProductFloor extends Component{
constructor(props) {
super(props);
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => !Immutable.is(r1, r2)});
this.renderHeader = this.renderHeader.bind(this);
this.renderRow = this.renderRow.bind(this);
}
renderHeader(){
let {title} = this.props;
return(
<View style={styles.headerContainer}>
<Text style={styles.headerText}>{title}</Text>
<TouchableOpacity style={styles.headerMore} activeOpacity={1} onPress={() => this.props.onPressCategoryBMore && this.props.onPressCategoryBMore()}>
<Text style={styles.headerMoreText}>MORE</Text>
<Image style={styles.headerMoreArrow} source={require("../../images/category_b_arrow.png")}/>
</TouchableOpacity>
<View style={styles.headerLine}/>
</View>
);
}
renderRow(rowData, sectionID, rowID, highlightRow){
if (!rowData || rowData.length == 0) {
return null;
}
let imageUrl = SlicedImage.getSlicedUrl(rowData.get("default_images"), 98, 128, 2);
// let categoryName = rowData.get("category_name");
//数据类型，纯文字型和图片型，列表中会出现纯文本的情况,比如MORE
let dataType = rowData.get("data_type");
if(dataType && dataType == 'text')
return (
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
<View style={styles.rowContainer}>
<Text style={styles.rowText} numberOfLines={1}>{rowData.get("show_category_name")}</Text>
</View>
</TouchableOpacity>
);
else{
return (
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressHotCategoryItem && this.props.onPressHotCategoryItem(rowData.toJS(),rowID)}>
<View style={styles.rowContainer}>
<Image style={styles.rowThumbnail} source={{uri: imageUrl}}/>
<View style={styles.rowTextContainer}><Text style={styles.rowText} numberOfLines={2}>{rowData.get("category_name")}</Text></View>
</View>
</TouchableOpacity>
);
}
}
render(){
let {data} = this.props;
return(
<View style={styles.container}>
<ListView
pageSize={3}
contentContainerStyle={styles.contentContainer}
dataSource={this.dataSource.cloneWithRows(data)}
enableEmptySections={true}
renderRow={this.renderRow}
renderHeader={this.renderHeader}
/>
</View>
import SlicedImage from '../../../common/components/SlicedImage';
import HeadTitleCell from '../cell/HeadTitleCell';
import Banner from '../../../common/components/Banner'
export default class ActivityProductFloor extends Component {
constructor(props) {
super(props);
this.onPressBanner = this.onPressBanner.bind(this);
this.renderRow = this.renderRow.bind(this);
this.onPressBuy = this.onPressBuy.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
}
onPressBanner() {
console.log("banner on press");
}
_getImageUrl(rowId) {
return {uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'};
}
_isShowVip(type){
if (type == TYPE_STUDENT){
return false;
} else {
return true;
}
}
_isShowOrignPrice(type){
if (type == TYPE_VIP || type == TYPE_STUDENT){
return true;
} else {
return false;
}
}
renderRow(rowData, sectionID, rowID, highlightRow) {
let productName = '商品名称';
let productPrice = '888.88';
let orginPrice = '999.999';
return (
<View style={styles.row}>
<Image style={styles.image}
source={this._getImageUrl(rowID)}
resizeMode={'cover'}/>
<Text style={styles.vipText} numberOfLines={1}>{productPrice}</Text>
{
this._isShowOrignPrice(type) ?
<View style={styles.vipContainer}>
<Text style={styles.discountText} numberOfLines={1}>{orginPrice}</Text>
{
this._isShowVip(type) ? <Image style={{width:33,height:12,marginLeft:2}}
source={require('../../images/ic_vip_red.png')}/> : null
}
</View> : null
}
</View>);
}
onPressBuy() {
console.log('buy');
}
render() {
let bannerData = Immutable.fromJS(
[{
"src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
"title": "",
"url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
}
,
{
"src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
"title": "",
"url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
}
]
);
}
};
let data = [1, 1, 1, 1, 1, 1];
let visible = true;
let cellH = this._isShowOrignPrice(type) ? cellHeight : cellHeight - 20;
return (
<View style={styles.container}>
<HeadTitleCell title={'VIP专享'}/>
<Banner
data={bannerData}
duration={8}
width={width}
height={bannerHeight}
onPress={this.onPressBanner}
/>
<View style={styles.listContianer,{height:cellH}}>
{visible ?
<Image style={styles.listBg,{height:cellH}}
source={{uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'}}
resizeMode={'cover'}/> : null}
<ListView
style={{position:'absolute',left:0,top:5,paddingTop:12,paddingBottom:12}}
contentContainerStyle={styles.listContent}
horizontal={true}
dataSource={this.dataSource.cloneWithRows(data)}
renderRow={this.renderRow}
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let styles = StyleSheet.create({
container: {
flexWrap: 'wrap',
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 95;
let cellHeight = 210;
//1 VIP 专享 2 新人专享 3 学生专享 4 新品到着
const TYPE_VIP = 1;
const TYPE_NEW_USER = 2;
const TYPE_STUDENT = 3;
const TYPE_NEW_PRODUCT = 4;
const type = TYPE_VIP;
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems:'center',
backgroundColor: '#f5f7f6',
},
headerContainer:{
width: 210 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#ffffff',
},
headerText:{
position: 'absolute',
left: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
},
headerMore:{
position: 'absolute',
right: 5 * DEVICE_WIDTH_RATIO,
bottom: 11 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
headerMoreText:{
fontSize: 10 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
marginRight: 5 * DEVICE_WIDTH_RATIO,
},
headerMoreArrow: {
width: 4 * DEVICE_WIDTH_RATIO,
height: 7 * DEVICE_WIDTH_RATIO,
listContianer: {
alignItems: 'center',
},
listBg: {
width: width,
position: 'absolute',
top: 0,
left: 0,
},
listContent: {
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
paddingHorizontal: 5,
},
row: {
flexDirection: 'column',
width: cellWidth,
backgroundColor: 'white',
borderRadius: 3,
justifyContent: 'center',
marginLeft: 6,
marginRight: 6
},
vipContainer: {
width: cellWidth,
height: 18,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10
},
discountText: {
fontSize: 10,
textAlign: 'center',
color: '#b0b0b0',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
textDecorationColor: '#d0021b'
},
vipText: {
color: '#d0021b',
flex: 1,
marginTop: 7,
marginBottom: 7,
textAlign: 'center',
fontSize: 12,
},
image: {
width: cellWidth,
height: 120,
},
headerLine:{
width: 200 * DEVICE_WIDTH_RATIO,
height: 0.5 * DEVICE_WIDTH_RATIO,
backgroundColor: '#E0E0E0',
left: 0,
top: 35 * DEVICE_WIDTH_RATIO,
},
rowContainer:{
width: 70 * DEVICE_WIDTH_RATIO,
height: 93 * DEVICE_WIDTH_RATIO,
paddingLeft: 5 * DEVICE_WIDTH_RATIO,
paddingRight: 5 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f7f6',
},
rowThumbnail:{
width: 48 * DEVICE_WIDTH_RATIO,
height: 65 * DEVICE_WIDTH_RATIO,
},
rowTextContainer:{
width: 53 * DEVICE_WIDTH_RATIO,
height: 28 * DEVICE_WIDTH_RATIO,
marginTop: 2 * DEVICE_WIDTH_RATIO,
},
rowText:{
fontSize: 9 * DEVICE_WIDTH_RATIO,
color: '#B0B0B0',
textAlign: 'center',
},
});
... ...
... ... @@ -137,7 +137,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingTop: 15,
paddingBottom: 15,
backgroundColor: 'green'
},
listBg: {
width: width,
... ...
/**
* Description:
* vipUse：VIP专享
* Author: Bruce.Lu
* Version: 1.0
* Created on 2017/2/14.
*/
import React, {Component} from 'react';
import ReactNative, {
Image,
Text,
StyleSheet,
ListView,
View,
TouchableOpacity,
Dimensions,
} from 'react-native';
import Swiper from 'react-native-swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Immutable from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import HeadTitleCell from '../cell/HeadTitleCell';
import Banner from '../../../common/components/Banner'
export default class VipUserFloor extends Component {
constructor(props) {
super(props);
this.onPressBanner = this.onPressBanner.bind(this);
this.renderRow = this.renderRow.bind(this);
this.onPressBuy = this.onPressBuy.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
});
}
onPressBanner() {
console.log("banner on press");
}
_getImageUrl(rowId) {
return {uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'};
}
renderRow(rowData, sectionID, rowID, highlightRow) {
let productName = '商品名称';
let productPrice = '888.88';
let orginPrice = '999.999';
return (
<View style={styles.row}>
<Image style={styles.image}
source={this._getImageUrl(rowID)}
resizeMode={'cover'}/>
<Text style={styles.vipText} numberOfLines={1}>{productPrice}</Text>
<View style={styles.vipContainer}>
<Text style={styles.discountText} numberOfLines={1}>{orginPrice}</Text>
<Image style={{width:33,height:12,marginLeft:2}}
source={require('../../images/ic_vip_red.png')}/>
</View>
</View>);
}
onPressBuy() {
console.log('buy');
}
render() {
let bannerData = Immutable.fromJS(
[{
"src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
"title": "",
"url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
}
,
{
"src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
"title": "",
"url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
}
]
);
let data = [1, 1, 1, 1, 1, 1];
let visible = false;
return (
<View style={styles.container}>
<HeadTitleCell title={'VIP专享'}/>
<Banner
data={bannerData}
duration={8}
width={width}
height={bannerHeight}
onPress={this.onPressBanner}
/>
<View style={styles.listContianer}>
{visible ?
<Image style={styles.listBg}
source={{uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'}}
resizeMode={'cover'}/> : null}
<ListView
style={{position:'absolute',left:0,top:5,paddingTop:12,paddingBottom:12}}
contentContainerStyle={styles.listContent}
horizontal={true}
dataSource={this.dataSource.cloneWithRows(data)}
renderRow={this.renderRow}
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
);
}
}
let {width, height} = Dimensions.get('window');
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 95;
let cellHeight = 210;
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1
},
listContianer: {
height: cellHeight,
alignItems: 'center',
paddingTop: 16,
paddingBottom: 12,
},
listBg: {
width: width,
height: cellHeight,
position: 'absolute',
top: 0,
left: 0,
},
listContent: {
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
paddingHorizontal: 5,
},
row: {
flexDirection: 'column',
width: cellWidth,
backgroundColor: 'white',
borderRadius: 3,
justifyContent: 'center',
marginLeft: 6,
marginRight: 6
},
vipContainer: {
width: cellWidth,
height: 18,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10
},
discountText: {
fontSize: 10,
textAlign: 'center',
color: '#b0b0b0',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
textDecorationColor: '#d0021b'
},
vipText: {
color: '#d0021b',
flex: 1,
marginTop: 7,
marginBottom: 7,
textAlign: 'center',
fontSize: 12,
},
image: {
width: cellWidth,
height: 120,
},
});
... ...
... ... @@ -18,7 +18,7 @@ import Focus from './Focus';
import AppIconList from './AppIconList'
import AppHotBrands from './AppHotBrands'
import TrendsetterCollocation from '../floor/TrendsetterCollocation'
import KidsBrandCell from '../floor/KidsBrandsCell';
import KidsBrandCell from '../floor/KidsBrandsFloor';
import NewUserFloor from '../floor/NewUserFloor';
export default class Home extends Component {
... ...
... ... @@ -19,8 +19,10 @@ import * as homeActions from '../reducers/home/homeActions';
import * as appActions from '../reducers/app/appActions';
import Home from '../components/home/Home';
import KidsBrandsCell from '../components/floor/KidsBrandsCell';
import KidsBrandsCell from '../components/floor/KidsBrandsFloor';
import NewUserFloor from '../components/floor/NewUserFloor';
import VipUserFloor from '../components/floor/VipUserFloor';
import ActivityProductFloor from '../components/floor/ActivityProductFloor';
const actions = [
homeActions,
... ... @@ -90,7 +92,7 @@ class HomeContainer extends Component {
let {app, home} = this.props;
return (
// <View style={styles.container}>
<NewUserFloor />
<ActivityProductFloor />
// <Home
// ref={(c) => {
// this.home = c;
... ...