发现好货添加资源位

reviewed by gaijianqiu

@@ -4,6 +4,7 @@ import React, {Component} from 'react';
 import Immutable, {Map} from 'immutable';
 import LoadingIndicator from '../../../common/components/LoadingIndicator';
 import ListCell from './ListCell';
+import ListBannerSwiper from './ListBannerSwiper';
 
 import ReactNative, {
     View,
@@ -32,7 +33,7 @@ export default class List extends Component {
     renderRow(rowData,sectionID,rowID,highlightRow) {
     	switch (sectionID) {
     		case 'banner': {
-
+          return <ListBannerSwiper resource={rowData} onPressSlideItem={this.props.onJumpWithUrl}/>
     		}
     		break;
     		case 'list': {
@@ -40,40 +41,36 @@ export default class List extends Component {
     		}
     		break;
     	}
-        return null;
+      return null;
     }
 
     render() {
-    	let {products} = this.props.resource;
-    	let isFetching = products.isFetching;
-
-    	if (isFetching) {
-    		return null;
-    	}
+    	let {products, banner} = this.props.resource;
+    	let isFetching = (products.isFetching && products.page == 0) || banner.isFetching;
 
     	let list = products.list && products.list.toJS();
-    	console.log(list);
+      let bannerList = banner.data && banner.data.toJS();
 
     	let dataBlob = {
-    		'banner': [],
+    		'banner': bannerList ? [bannerList] : [],
     		'list': list ? list : [],
     	};
 
-        return (
-            <View style={styles.container}>
-                {!isFetching?
-                    <ListView
-                    contentContainerStyle={styles.contentContainer}
-                    enableEmptySections={true}
-                    showsVerticalScrollIndicator={false}
-                    dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
-                    renderRow={this.renderRow}
-                    />
-                :<LoadingIndicator
-                    isVisible={isFetching}
-                />}
-            </View>
-        );
+      return (
+          <View style={styles.container}>
+              {!isFetching?
+                  <ListView
+                  contentContainerStyle={styles.contentContainer}
+                  enableEmptySections={true}
+                  showsVerticalScrollIndicator={false}
+                  dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
+                  renderRow={this.renderRow}
+                  />
+              :<LoadingIndicator
+                  isVisible={isFetching}
+              />}
+          </View>
+      );
     }
 }
 

+'use strict';
+
+import React from 'react';
+import ReactNative from 'react-native';
+import Swiper from 'react-native-swiper';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import SlicedImage from '../../../common/components/SlicedImage';
+import Immutable, {Map} from 'immutable';
+
+const {
+    View,
+    Image,
+    TouchableOpacity,
+    StyleSheet,
+    Dimensions,
+    Platform,
+} = ReactNative;
+
+export default class ListBannerSwiper extends React.Component {
+
+    constructor(props) {
+        super (props);
+
+        this.dot = <View
+            style={{
+                backgroundColor:'rgba(0,0,0,.2)',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: (Platform.OS === 'ios')?3:23,
+                marginBottom: 0,
+            }}
+        />;
+        this.activeDot = <View
+            style={{
+                backgroundColor:'white',
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                marginLeft: 3,
+                marginRight: 3,
+                marginTop: 3,
+                marginBottom: 0,
+            }}
+        />;
+    }
+
+    render() {
+        let {resource} = this.props;
+
+        return (
+            <View style={styles.container}>
+                <Swiper
+                    style={styles.banner}
+                    showsButtons={false}
+                    loop={true}
+                    autoplay={true}
+                    autoplayTimeout={2}
+                    paginationStyle={{bottom: 8}}
+                    dot={this.dot}
+                    activeDot={(Platform.OS === 'ios')?this.activeDot:null}
+                    width={width}
+                    height={height}
+                >
+                  {resource.map((item, i) => {
+                    let obj = item.data[0];
+
+                      return (
+                          <TouchableOpacity
+                              key={i}
+                              activeOpacity={1}
+                              onPress={() => {
+                              this.props.onPressSlideItem && this.props.onPressSlideItem(obj.url);
+                              }}
+                          >
+                              <SlicedImage source={{uri: obj.src}} style={{width, height}}/>
+                          </TouchableOpacity>
+                      );
+                  })}
+                </Swiper>
+            </View>
+        );
+    }
+}
+
+let {width} = Dimensions.get('window');
+let height = Math.ceil((310 / 640) * width) + 40;
+
+let styles = StyleSheet.create({
+
+    container: {
+        width: width,
+        height: height,
+        backgroundColor:'#f0f0f0',
+    },
+    banner: {
+
+    },
+
+});

@@ -18,9 +18,13 @@ export default keyMirror({
 
     SET_FAVORITE_STATUS: null,
 
-// 列表
+    // 列表
     GET_PRODUCT_LIST_REQUEST: null,
     GET_PRODUCT_LIST_SUCCESS: null,
     GET_PRODUCT_LIST_FAILURE: null,
 
+    // 列表资源位
+    FETCH_BANNER_REQUEST: null,
+    FETCH_BANNER_SUCCESS: null,
+    FETCH_BANNER_FAILURE: null,
 });

@@ -50,6 +50,7 @@ class ListContainer extends Component {
     }
 
     componentDidMount() {
+        this.props.actions.fetchBanner();
         this.props.actions.getProductList();
     }
 

@@ -9,20 +9,19 @@ const {
 	GET_PRODUCT_LIST_REQUEST,
     GET_PRODUCT_LIST_SUCCESS,
     GET_PRODUCT_LIST_FAILURE,
+    FETCH_BANNER_REQUEST,
+    FETCH_BANNER_SUCCESS,
+    FETCH_BANNER_FAILURE,
 } = require('../../constants/actionTypes').default;
 
 export function getProductList() {
 	return (dispatch, getState) => {
-		console.log('getProductList11111');
-
 		let {app, list} = getState();
 		let {products} = list;
 
 		if (products.isFetching || products.endReached || products.error) {
 			return;
 		}
-			console.log('getProductList');
-
 
 		let fetchList = (channel, gender, uid, page, pageSize) => {
 			dispatch(getProductListRequest());
@@ -96,3 +95,43 @@ export function getProductListFailure(error) {
     };
 }
 
+export function fetchBanner() {
+	return (dispatch, getState) => {
+		let {app, list} = getState();
+		let {banner} = list;
+
+		if (banner.isFetching || banner.error) {
+			return;
+		}
+		dispatch(fetchBannerRequest());
+		return new ListService(app.serviceHost).fetchBannerData()
+			.then(json => {
+				console.log('original');
+				console.log(json);
+				dispatch(fetchBannerSuccess(json));
+			})
+			.catch(error => {
+				dispatch(fetchBannerFailure(error));
+			});
+	}
+}
+
+export function fetchBannerRequest() {
+	return {
+		type: FETCH_BANNER_REQUEST
+	};
+}
+
+export function fetchBannerSuccess(json) {
+	return {
+		type: FETCH_BANNER_SUCCESS,
+		payload: json
+	};
+}
+
+export function fetchBannerFailure(error) {
+	return {
+		type: FETCH_BANNER_FAILURE,
+		payload: error
+	};
+}

@@ -7,6 +7,9 @@ const {
 	GET_PRODUCT_LIST_REQUEST,
     GET_PRODUCT_LIST_SUCCESS,
     GET_PRODUCT_LIST_FAILURE,
+    FETCH_BANNER_REQUEST,
+    FETCH_BANNER_SUCCESS,
+    FETCH_BANNER_FAILURE,
 } = require('../../constants/actionTypes').default;
 
 const initialState = new InitialState;
@@ -39,6 +42,17 @@ export default function listReducer(state=initialState, action) {
 			return state.setIn(['products', 'isFetching'], false)
     		.setIn(['products', 'error'], action.payload);
     	}
+        case FETCH_BANNER_REQUEST: {
+            return state.setIn(['banner', 'isFetching'], true);
+        }
+        case FETCH_BANNER_SUCCESS: {
+            return state.setIn(['banner', 'isFetching'], false)
+            .setIn(['banner', 'data'], Immutable.fromJS(action.payload));
+        }
+        case FETCH_BANNER_FAILURE: {
+            return state.setIn(['banner', 'isFetching'], false)
+            .setIn(['banner', 'error'], action.payload);
+        }
     }
 
     return state;

@@ -35,4 +35,25 @@ export default class ListService {
 			throw(error);
 		});
 	}
+
+	async fetchBannerData() {
+		this.api = new Request('http://dev-api.yohops.com:9999');
+
+		let content_code = 'c8dce01a202870415831ac4a553a2da9';
+		let fromPage = '';
+
+		return await this.api.get({
+			url: '/operations/api/v5/resource/get',
+			body: {
+				fromPage,
+				content_code
+			}
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((error) => {
+			throw(error);
+		});
+	}
 }