mobile / YH_RNComponent · Commits

Go to a project

Authored by 张丽霞
Commit 22282a279ccbc166f1add039f963c12f2fefb986 2 parents 504a728a a93c0faf

merge

Inline Side-by-side
Showing 7 changed files with 395 additions and 3 deletions
... ... @@ -4,6 +4,8 @@ import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import DetailBrand from './DetailBrand';
import OtherArticle from './OtherArticle';
import SingleImage from './SingleImage';
import DetailText from './DetailText';
import ReactNative, {
View,
... ... @@ -43,9 +45,33 @@ export default class Detail extends Component {
renderRow(rowData,sectionID,rowID,highlightRow) {
if (sectionID == 'detailList') {
return (
<Text>aaaaaa</Text>
);
let template_name = rowData.get('template_name');
if (template_name == 'text') {
return (
<DetailText resource={rowData}/>
);
}else if (template_name == 'single_image') {
return (
<SingleImage resource={rowData}/>
);
}else if (template_name == 'small_image') {
return (
<Text>small_image</Text>
);
}else if (template_name == 'weixinPublic') {
return (
<Text>weixinPublic</Text>
);
}else if (template_name == 'collocation') {
return (
<Text>collocation</Text>
);
}else if (template_name == 'moreLink') {
return (
<Text>moreLink</Text>
);
}
}else if (sectionID == 'detailBrand') {
return (
<DetailBrand resource={rowData}/>
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
StyleSheet,
View,
Dimensions,
TouchableOpacity,
WebView,
} = ReactNative;
const BODY_TAG_PATTERN = /\<\/ *body\>/;
var script = `
;(function() {
var wrapper = document.createElement("div");
wrapper.id = "height-wrapper";
while (document.body.firstChild) {
wrapper.appendChild(document.body.firstChild);
}
document.body.appendChild(wrapper);
var i = 0;
function updateHeight() {
document.title = wrapper.clientHeight;
window.location.hash = ++i;
}
updateHeight();
window.addEventListener("load", function() {
updateHeight();
setTimeout(updateHeight, 1000);
});
window.addEventListener("resize", updateHeight);
}());
`;
const style = `
<style>
body, html, #height-wrapper {
margin: 0;
padding: 0;
}
#height-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
<script>
${script}
</script>
`;
const codeInject = (html) => html.replace(BODY_TAG_PATTERN, style + "</body>");
export default class DetailText extends React.Component {
constructor(props) {
super(props);
this.handleNavigationChange = this.handleNavigationChange.bind(this);
this.state = {
realContentHeight : 10,
};
}
handleNavigationChange(navState) {
let heightT = parseInt(navState.title, 10) || 0; // turn NaN to 0
this.setState({
realContentHeight: heightT,
});
}
render() {
let {resource} = this.props;
let template_name = resource.get('data');
let text = template_name.get('text');
text = '<html><body>' + text + '</body></html>';
return (
<View style={{width: width,height: this.state.realContentHeight}}>
<WebView style={{width: width,height: this.state.realContentHeight}}
source= {{html: codeInject(text)}}
scrollEnabled={false}
onNavigationStateChange={this.handleNavigationChange}
>
</WebView>
</View>
);
return null;
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
webview_style: {
backgroundColor: 'red',
height: 100,
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class SingleImage extends React.Component {
constructor(props) {
super(props);
this.state = {
width: Dimensions.get('window').width,
height: 0,
};
}
shouldComponentUpdate(nextProps){
if (Immutable.is(nextProps.resource, this.props.resource && this.state.height != 0)) {
return false;
} else {
return true;
}
}
componentDidMount() {
let {resource} = this.props;
let template_name = resource.get('data');
let src = template_name.get('src');
Image.getSize(src, (width, height) => {
this.setState({width, height});
});
}
render() {
let {resource} = this.props;
let template_name = resource.get('data');
let src = template_name.get('src');
return (
<View style={{width: Dimensions.get('window').width,height: (this.state.height/this.state.width)*Dimensions.get('window').width}}>
<Image
source={{uri: src}}
style={{width: Dimensions.get('window').width,height: (this.state.height/this.state.width)*Dimensions.get('window').width}}
>
</Image>
</View>
);
return null;
}
};
let styles = StyleSheet.create({
});
... ...
... ... @@ -33,4 +33,8 @@ export default keyMirror({
GET_WEIXIN_PUBLIC_SUCCESS: null,
GET_WEIXIN_PUBLIC_FAILURE: null,
PRODUCT_BY_SKNS_REQUEST: null,
PRODUCT_BY_SKNS_SUCCESS: null,
PRODUCT_BY_SKNS_FAILURE: null,
});
... ...
... ... @@ -33,6 +33,10 @@ const {
GET_WEIXIN_PUBLIC_SUCCESS,
GET_WEIXIN_PUBLIC_FAILURE,
PRODUCT_BY_SKNS_REQUEST,
PRODUCT_BY_SKNS_SUCCESS,
PRODUCT_BY_SKNS_FAILURE,
} = require('../../constants/actionTypes').default;
export function setArticleId(id) {
... ... @@ -181,6 +185,14 @@ export function getArticleContent(reload = false) {
.then(json => {
let payload = parseArticleContent(json);
payload.map((item, i) => {
if (item.template_name == 'goods') {
dispatch(goodsProductBySkns(item, i));
} else if (item.template_name == 'goods_group') {
dispatch(goodsGroupProductBySkns(item, i));
}
});
dispatch(getArticleContentSuccess(payload));
// dispatch(dataExposure(payload.logFloors));
})
... ... @@ -192,6 +204,8 @@ export function getArticleContent(reload = false) {
function parseArticleContent(json) {
let contents = [];
let goodsSkns = [];
let groupGoodsSkns = [];
json && json.map((item, i) => {
for (let i in item) {
... ... @@ -230,6 +244,152 @@ function parseArticleContent(json) {
return contents;
}
/**
* [获取商品的ICON]
* @param {[int]} type [类型]
* @return {[type]}
*/
function getProductIcon(type) {
const icons = {
1: 'cloth',
3: 'pants',
4: 'dress',
6: 'shoe',
7: 'bag',
10: 'lamp',
241: 'headset',
8: 'watch',
360: 'swim-suit',
308: 'under'
};
return icons[type] || '';
}
function productBySknsRequest() {
return {
type: PRODUCT_BY_SKNS_REQUEST,
};
}
function productBySknsSuccess(json) {
return {
type: PRODUCT_BY_SKNS_SUCCESS,
payload: json
};
}
function productBySknsFailure(error) {
return {
type: PRODUCT_BY_SKNS_FAILURE,
payload: error
};
}
export function goodsProductBySkns(item, contentIndex) {
return (dispatch, getState) => {
let skns = [];
let productImages = {};
// 遍历取得SKN
item.data.map((item2) => {
skns.push(item2.id);
productImages[item2.id] = item2.src;
});
if (!skns) {
return;
}
let {app, detail} = getState();
dispatch(productBySknsRequest());
return new DetailService(app.host).productInfoBySkns(skns)
.then(json => {
let productList = [];
let result = json.product_list.slice(0, 3);
result.map((item3, i3) => {
let src = productImages[item3.product_skn];
if (src) {
item3.tags = [];
item3.default_images = helper.image(src, 235, 314);
productList.push(item3);
}
});
dispatch(productBySknsSuccess({
productList,
contentIndex,
}));
})
.catch(error => {
dispatch(productBySknsFailure(error));
});
};
}
export function goodsGroupProductBySkns(item, contentIndex) {
return (dispatch, getState) => {
let skns = [];
let productImages = {};
// 遍历取得SKN
item.data.map((item2) => {
item2.list.map((item3) => {
skns.push(item3.id);
productImages[item3.id] = item3.src;
});
});
if (!skns) {
return;
}
let {app, detail} = getState();
dispatch(productBySknsRequest());
return new DetailService(app.host).productInfoBySkns(skns)
.then(json => {
let products = {};
let result = json.product_list;
result.map((item4) => {
let src = productImages[item4.product_skn];
if (src) {
item4.tags = [];
item4.default_images = helper.image(src, 235, 314);
products[item4.product_skn] = item4;
}
});
let productList = []
item.data.map((item5) => {
let good = {
thumb: item5.cover ? helper.image(item5.cover.cover, 235, 314) : '',
type: item5.cover ? getProductIcon(item5.cover.maxSortId) : '',
list: [],
};
item5.list.map((item6) => {
let product = products[item6.id];
if (product) {
good.list.push(product);
}
});
productList.push(good);
});
dispatch(productBySknsSuccess({
productList,
contentIndex,
}));
})
.catch(error => {
dispatch(productBySknsFailure(error));
});
};
}
function getBrandRequest() {
return {
type: GET_BRAND_REQUEST,
... ...
... ... @@ -30,6 +30,8 @@ const {
GET_WEIXIN_PUBLIC_SUCCESS,
GET_WEIXIN_PUBLIC_FAILURE,
PRODUCT_BY_SKNS_SUCCESS,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
... ... @@ -135,6 +137,14 @@ export default function detailReducer(state=initialState, action) {
return state.setIn(['weixin', 'isFetching'], false)
.setIn(['weixin', 'error'], action.payload);
}
case PRODUCT_BY_SKNS_SUCCESS: {
let {
productList,
contentIndex
} = action.payload;
return state.setIn(['content', 'data', contentIndex, 'productList'], Immutable.fromJS(productList));
}
}
return state;
... ...
... ... @@ -112,4 +112,22 @@ export default class DetailService {
});
}
async productInfoBySkns(skns) {
return await this.api.get({
url: '',
body: {
method: 'app.search.li',
query: skns.join(' '),
limit: skns.length,
order: 's_t_desc',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
}
... ...