mobile / YH_RNComponent · Commits

Go to a project

Authored by aozhe.zhu
Commit 803f4cdbfc6d50f8150772ba1d5b7dfde9412965 1 parent 3c767838

shareDetail review by 宏勇

Inline Side-by-side
Showing 14 changed files with 95 additions and 67 deletions
... ... @@ -12,6 +12,7 @@ import appInitialState from './reducers/app/appInitialState';
import allianceInitialState from './reducers/alliance/allianceInitialState';
import recommendInitialState from './reducers/recommend/recommendInitialState';
import talentRankInitialState from './reducers/talentRank/talentRankInitialState';
import shareDetailInitialState from './reducers/shareDetail/shareDetailInitialState';
import TabContainer from './containers/TabContainer';
import OrderIncomeContainer from './containers/OrderIncomeContainer';
... ... @@ -34,6 +35,7 @@ function getInitialState() {
alliance: (new allianceInitialState()),
recommend: (new recommendInitialState()),
talentRank: new talentRankInitialState(),
shareDetail: (new shareDetailInitialState()),
};
return _initState;
}
... ...
... ... @@ -121,6 +121,7 @@ export default class Home extends Component {
return (
<Focus
data={rowData.get('data')}
height={140}
resourceJumpWithUrl={this.props.resourceJumpWithUrl}
/>
);
... ...
import React, { Component } from 'react';
import { Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';
import Immutable, { List } from 'immutable';
import Focus from './floor/Focus';
const { width } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
export default class ShareDetail extends Component {
function mapStateToProps(store) {
const { shareDetail } = store;
return {
shareDetail
}
}
class ShareDetail extends Component {
state = { opacity: 0 }
render() {
let productInfo = this.props.shareDetail.get('productInfo').toJS();
let { goodsList: [ goodsInfo = {} ], productPriceBo = {} } = productInfo;
let { goodsImagesList } = goodsInfo;
let imgList = goodsImagesList && goodsImagesList.map(item => ({src: item.imageUrl}));
imgList = Immutable.fromJS(imgList);
return (
<View style={styles.container}>
<View style={[styles.navigatorBackground, {opacity: this.state.opacity}]}>
</View>
<View style={styles.navigatorContainer}>
<View style={[styles.navigatorBtn, {opacity: 0.4 - this.state.opacity}]} />
<View style={[styles.navigatorBtn, styles.center, {opacity: 0.4 - this.state.opacity}]} >
<TouchableOpacity onPress={() => this.props.goBack()}>
<Image source={require('../images/home_drawer_back.png')} />
</TouchableOpacity>
</View>
<View style={styles.navigatorBtnRightContainer}>
<View style={[styles.navigatorBtn,styles.navigatorBtnRight, {opacity: 0.4 - this.state.opacity}]} />
<View style={[styles.navigatorBtn,styles.navigatorBtnRight, {opacity: 0.4 - this.state.opacity}]}>
<TouchableOpacity onPress={() => null}>
<Image source={require('../images/yh_prd_more_icon.png')} />
</TouchableOpacity>
</View>
</View>
</View>
<ScrollView
... ... @@ -22,21 +46,26 @@ export default class ShareDetail extends Component {
showsVerticalScrollIndicator={false}
onScroll={(e) => this.changeOpacity(e)}>
<View style={[styles.imgContainer]}>
<Focus
data={imgList}
height={480}
resourceJumpWithUrl={this.props.resourceJumpWithUrl}
/>
</View>
<View style={styles.infoContainer}>
<Text style={styles.name}>CHRISTINA DADA</Text>
<Text style={styles.name}>{productInfo.productName}</Text>
<View style={styles.priceContainer}>
<View style={styles.alignBottom}>
<Text style={styles.priceUnit}>￥</Text>
<Text style={styles.price}>99.9</Text>
<Text style={styles.price}>{productPriceBo.salesPrice}</Text>
<Text style={styles.origpriceUnit}>￥</Text>
<Text style={styles.origPrice}>2999</Text>
<Text style={styles.origPrice}>{productPriceBo.marketPrice}</Text>
</View>
</View>
</View>
<View style={styles.divider} />
<View style={styles.promContainer}>
<Text style={styles.proDesc}>新客订单返现10%，老客订单返现3%（预计最高返现￥9.9）</Text>
<Text style={styles.proDesc}>{productInfo.phrase}</Text>
</View>
<View style={styles.recommendContainer}>
<View style={styles.solid} />
... ... @@ -46,10 +75,16 @@ export default class ShareDetail extends Component {
</ScrollView>
<View style={styles.bottomBar}>
<View style={[styles.favContainer, styles.center]}>
<TouchableOpacity onPress={() => null} style={styles.favorite} />
<TouchableOpacity onPress={() => null} style={[styles.center]}>
<Image
style={styles.favorite}
resizeMode="center"
source={productInfo.isCollect === 'Y' ? require('../../recorder/images/brand/heart_ic_h.png') : require('../../recorder/images/brand/heart_ic_n.png')} />
<Text style={styles.favText}>收藏</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={() => null}>
<TouchableOpacity onPress={() => this.props.jumpWithUrl()}>
<View style={[styles.button, styles.center]}>
<Text style={styles.btnText}>查看商品详情</Text>
</View>
... ... @@ -66,7 +101,7 @@ export default class ShareDetail extends Component {
}
changeOpacity(e) {
let opacity = 1 - (600 - e.nativeEvent.contentOffset.y) / 600;
let opacity = 1 - (500 - e.nativeEvent.contentOffset.y) / 500;
this.setState({opacity: opacity < 0.4 ? opacity : 0.4});
console.log(e.nativeEvent.contentOffset.y);
}
... ... @@ -82,9 +117,9 @@ const styles = StyleSheet.create({
width,
position: 'absolute',
top: 0,
zIndex: 10
},
navigatorContainer: {
backgroundColor: 'transparent',
height: 44 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
alignItems: 'center',
... ... @@ -139,7 +174,7 @@ const styles = StyleSheet.create({
priceUnit: {
fontSize: 14,
color: '#D0021B',
lineHeight: 14,
lineHeight: 22,
},
price: {
fontSize: 22,
... ... @@ -206,11 +241,12 @@ const styles = StyleSheet.create({
marginHorizontal: 8 * DEVICE_WIDTH_RATIO,
},
favorite: {
height: 24,
width: 24,
borderWidth: 1,
borderRadius: 12,
marginHorizontal: 25
width: 26 * DEVICE_WIDTH_RATIO,
height: 26 * DEVICE_WIDTH_RATIO,
},
favText: {
fontSize: 9,
color: '#B0B0B0'
},
buttonContainer: {
flex: 1,
... ... @@ -232,4 +268,6 @@ const styles = StyleSheet.create({
fontSize: 15,
lineHeight: 21,
}
})
\ No newline at end of file
})
export default connect(mapStateToProps)(ShareDetail);
\ No newline at end of file
... ...
... ... @@ -27,7 +27,7 @@ export default class Focus extends React.Component {
render() {
let {data} = this.props;
let sliderHeight = Math.ceil(this.props.height * DEVICE_WIDTH_RATIO);
return (
<ImageSlider
resource={data}
... ... @@ -42,7 +42,6 @@ export default class Focus extends React.Component {
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let sliderHeight = Math.ceil(140 * DEVICE_WIDTH_RATIO);
let styles = StyleSheet.create({
banner: {},
... ...
... ... @@ -125,4 +125,8 @@ export default keyMirror({
BANNER_INVITECODE_REQUEST: null,
BANNER_INVITECODE_SUCCESS: null,
BANNER_INVITECODE_FAILURE: null,
SHARE_DETAIL_REQUEST: null,
SHARE_DETAIL_SUCCESS: null,
SHARE_DETAIL_FAILURE: null
});
\ No newline at end of file
... ...
import React, { Component } from 'react';
import { StyleSheet, View } from "react-native";
import { StyleSheet, View, NativeModules } from "react-native";
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Map } from 'immutable';
... ... @@ -38,13 +38,24 @@ class ShareDetailContainer extends Component {
render() {
return (
<ShareDetail>
</ShareDetail>
<ShareDetail
goBack={this._goBack}
jumpWithUrl={this._jumpWithUrl}
/>
)
}
componentDidMount() {
this.props.actions.fetchShareDetail({product_skn: 51026744});
this.props.actions.fetchShareDetail({product_skn: this.props.product_skn});
}
_goBack = () => {
NativeModules.YH_CommonHelper.goBack();
}
_jumpWithUrl = () => {
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${this.props.product_skn}"}}`;
NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
}
... ...
... ... @@ -2,7 +2,8 @@ import {combineReducers} from 'redux';
import app from './app/appReducer';
import alliance from './alliance/allianceReducer';
import recommend from './recommend/recommendReducer';
import talentRank from './talentRank/talentRankReducer'
import talentRank from './talentRank/talentRankReducer';
import shareDetail from './shareDetail/shareDetailReducer';
const rootReducer = combineReducers({
... ... @@ -10,6 +11,7 @@ const rootReducer = combineReducers({
alliance,
recommend,
talentRank,
shareDetail,
});
export default rootReducer;
... ...
... ... @@ -33,12 +33,12 @@ export function shareDetailFailue(error) {
export function fetchShareDetail(params) {
return async (dispatch, getState) => {
let { app: { host } } = getState();
let data;
try {
console.log(1);
data = await new Service(host).fetchShareDetail(params);
} catch(error) {
console.log(error);
dispatch(shareDetailFailue(error));
}
console.log(data);
dispatch(shareDetailSuccess(data));
}
}
\ No newline at end of file
... ...
... ... @@ -4,34 +4,9 @@ import {List, Map, Record} from 'immutable';
let InitialState = Record({
isFetching: false,
monthRank: new (Record({
amountStr: '',
image: '',
nickname: '',
rankList: Map({
list: [],
page: 1,
size: 0,
total: 0,
totalPage: 1
}),
rankNum: 0,
uid: 0,
productInfo: new (Record({
goodsList: List()
})),
totalRank: new (Record({
amountStr: '',
image: '',
nickname: '',
rankList: Map({
list: [],
page: 1,
size: 0,
total: 0,
totalPage: 1
}),
rankNum: 0,
uid: 0,
}))
});
export default InitialState;
... ...
... ... @@ -4,10 +4,9 @@ import InitialState from './shareDetailInitialState';
import Immutable, {List} from "immutable";
const {
TALENT_RANK_REQUEST,
MONTH_RANK_SUCCESS,
TOTAL_RANK_SUCCESS,
TALENT_RANK_FAILURE
SHARE_DETAIL_REQUEST,
SHARE_DETAIL_SUCCESS,
SHARE_DETAIL_FAILURE
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ... @@ -16,15 +15,12 @@ export default function appReducer(state = initialState, action) {
if (!(state instanceof InitialState)) return initialState.merge(state);
switch (action.type) {
case TALENT_RANK_REQUEST:
case SHARE_DETAIL_REQUEST:
return state.set('isFetching', true);
case MONTH_RANK_SUCCESS:
case SHARE_DETAIL_SUCCESS:
return state.set('isFetching', false)
.set('monthRank', Immutable.fromJS(action.payload));
case TOTAL_RANK_SUCCESS:
return state.set('isFetching', false)
.set('totalRank', Immutable.fromJS(action.payload));
case TALENT_RANK_FAILURE:
.set('productInfo', Immutable.fromJS(action.payload));
case SHARE_DETAIL_FAILURE:
return state.set('isFetching', false);
}
... ...