达人排行榜

@@ -20,6 +20,8 @@ import WithdrawalRecordContainer from './containers/WithdrawalRecordContainer';
 import BankCardContainer from './containers/BankCardContainer';
 import BankListContainer from './containers/BankListContainer';
 import RecommendContainer from './containers/RecommendContainer';
+import TalentRankContainer from './containers/TalentRankContainer';
+import ShareDetailContainer from './containers/ShareDetailContainer';
 
 import {setChannel, setHost, setPlatform, setServiceHost} from './reducers/app/appActions';
 import {setOrderCode, setActivityId} from './reducers/alliance/allianceActions';
@@ -94,6 +96,18 @@ export default function native(platform) {
                         <BankListContainer/>
                     </Provider>
                 );
+            } else if (type === 'talentRank') {
+                return (
+                    <Provider store={store}>
+                        <TalentRankContainer />
+                    </Provider>
+                );
+            } else if (type === 'shareDetail') {
+                return (
+                    <Provider store={store}>
+                        <ShareDetailContainer />
+                    </Provider>
+                );
             } else if (type === 'recommendProduct') {
                 return (
                     <Provider store={store}>

+import React, { Component, PureComponent } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, VirtualizedList } from 'react-native';
+
+export default class RankBody extends Component {
+  // state = { dataSource: this.props.dataSource }
+  // componentDidMount() {
+  //   this.setState({dataSource: this.props.dataSource})
+  // }
+  render() {
+    return (
+      <View style={this.props.style}>
+        <Text style={styles.title}>{this.props.title}</Text>
+        <VirtualizedList
+          renderItem={({item, index}) => this._renderItem(item, index)}
+          getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})}
+          getItemCount={(data) => data.size}
+          getItem={(data, index) => data.get(index)}
+          data={this.props.dataSource}
+          showsVerticalScrollIndicator={false}>
+        </VirtualizedList>
+      </View>
+    );
+  }
+
+  _renderItem(item, index) {
+    return <RankItem key={index} item={{...item, index}}/>
+  }
+}
+
+class RankItem extends PureComponent {
+  render() {
+    const { item, monthRank } = this.props;
+    const { name, amount, rank, index } = item;
+    return (
+      <View style={styles.itemContainer}>
+        <TouchableOpacity style={styles.row} onPress={() => null}>
+          <View style={styles.avatar}>
+          </View>
+          <Text style={styles.name}>{name}</Text>
+          <Text style={styles.amount}>{`${monthRank ? '本月' : '总'}预估收入：￥ ${amount}`}</Text>
+          <Text style={styles.rank}>{index + 1}</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 15,
+  },
+  itemContainer: {
+    height: 50,
+    flex: 1,
+    paddingVertical: 2,
+  },
+  row: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    flex: 1,
+    alignItems: 'center',
+  },
+  avatar: {
+    height: 24,
+    width: 24,
+    borderWidth: 1,
+    borderRadius: 12,
+    marginLeft: 18,
+  },
+  name: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginLeft: 12
+  },
+  amount: {
+    flex: 1,
+    fontSize: 12,
+    color: '#909090',
+    textAlign: 'center'
+  },
+  rank: {
+    fontSize: 20,
+    fontWeight: '500',
+    marginRight: 8,
+  }
+})
\ No newline at end of file

+import React, { Component, PureComponent } from 'react';
+import { Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+export default class ShareDetail extends Component {
+  state = { opacity: 0 }
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={{backgroundColor: 'black', height: 42, width, opacity: this.state.opacity, position: 'absolute', top: 0, zIndex: 10}}>
+        </View>
+        <View style={{backgroundColor: 'black', height: 24, width: 24, opacity: 0.5 - this.state.opacity, borderWidth: 1, borderColor: 'transparent', borderRadius: 12, position: 'absolute', top: 9, left: 20}} />
+        <ScrollView
+          style={styles.container}
+          contentContainerStyle={styles.contentContainerStyle}
+          showsVerticalScrollIndicator={false}
+          onScroll={(e) => this.changeOpacity(e)}>
+          <View style={[styles.imgContainer]}>
+          </View>
+          <View style={styles.nameContainer}>
+            <Text style={styles.name}>HUMAN MADE 字母印花圆领T恤</Text>
+          </View>
+          <View style={[styles.priceContainer, styles.border]}>
+            <Text style={styles.price}>￥ 99.9</Text>
+            <Text style={styles.origPrice}>￥ 239</Text>
+          </View>
+          <View style={[styles.promContainer, styles.border]}>
+            <Text style={styles.proDesc}>新客订单返现10%，老客订单返现3%（预计最高返现￥9.9）</Text>
+          </View>
+          <View style={[styles.recommendContainer, styles.border]}>
+            <TouchableOpacity onPress={() => null}>
+              <Text style={styles.recommendText}>查看其它推荐商品</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+        <View style={[styles.bottomBar, styles.border]}>
+          <View style={[styles.favContainer, styles.center]}>
+            <TouchableOpacity onPress={() => null} style={styles.favorite} />
+          </View>
+          <View style={styles.buttonContainer}>
+            <TouchableOpacity onPress={() => null}>
+              <View style={[styles.button, styles.center]}>
+                <Text style={styles.btnText}>查看商品详情</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => null}>
+              <View style={[styles.button, styles.center, styles.red]}>
+                <Text style={styles.btnText}>分享可赚￥9.9</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  changeOpacity(e) {
+    let opacity = 1 - (600 - e.nativeEvent.contentOffset.y) / 600;
+    this.setState({opacity: opacity < 0.5 ? opacity : 0.5});
+    console.log(e.nativeEvent.contentOffset.y);
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainerStyle: {
+    height: 1000,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imgContainer: {
+    flex: 1,
+  },
+  nameContainer: {
+    height: 46,
+    paddingLeft: 20,
+    backgroundColor: '#393939',
+    justifyContent: 'center',
+  },
+  name: {
+    color: '#fff',
+  },
+  border: {
+    borderTopWidth: 1,
+    borderColor: '#5d5d5d'
+  },
+  priceContainer: {
+    height: 46,
+    paddingLeft: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  price: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#D0021B'
+  },
+  origPrice: {
+    color: '#909090',
+    marginLeft: 12
+  },
+  promContainer: {
+    height: 46,
+    paddingLeft: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  proDesc: {
+    color: '#909090',
+    fontSize: 10,
+  },
+  recommendContainer: {
+    height: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  recommendText: {
+    fontWeight: '500',
+    fontSize: 12,
+  },
+  bottomBar: {
+    flexDirection: 'row',
+    height: 64,
+    alignItems: 'center',
+  },
+  favContainer: {
+    width: width / 5,
+  },
+  favorite: {
+    height: 24,
+    width: 24,
+    borderWidth: 1,
+    borderRadius: 12,
+    marginHorizontal: 25
+  },
+  buttonContainer: {
+    flex: 1,
+    marginRight: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  button: {
+    backgroundColor: 'black',
+    borderRadius: 3,
+    height: 50,
+    width: width / 3,
+  },
+  red: {
+    backgroundColor: '#D0021B'
+  },
+  btnText: {
+    color: '#fff',
+    fontSize: 13,
+  }
+})
\ No newline at end of file

+import React, { Component } from 'react';
+import { Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import RankBody from './RankBody';
+import { List } from 'immutable';
+
+let monthUpperData = List([{name: '昵称', amount: 99, rank: 354}]);
+let monthLowerData = List([
+  {name: '昵称', amount: 9999999, rank: 1},
+  {name: '昵称', amount: 9999999, rank: 2},
+  {name: '昵称', amount: 9999999, rank: 3},
+]);
+let totalUpperData = List([{name: '昵称', amount: 99, rank: 354}]);
+let totalLowerData = List([
+  {name: '昵称', amount: 9999999, rank: 1},
+  {name: '昵称', amount: 9999999, rank: 2},
+  {name: '昵称', amount: 9999999, rank: 3},
+  {name: '昵称', amount: 9999999, rank: 4},
+  {name: '昵称', amount: 9999999, rank: 5},
+  {name: '昵称', amount: 9999999, rank: 6},
+  {name: '昵称', amount: 9999999, rank: 7},
+  {name: '昵称', amount: 9999999, rank: 8},
+  {name: '昵称', amount: 9999999, rank: 9},
+  {name: '昵称', amount: 9999999, rank: 10},
+  {name: '昵称', amount: 9999999, rank: 11},
+  {name: '昵称', amount: 9999999, rank: 12},
+]);
+// let arr1 = [
+//   {name: '昵称', amount: 9999999, rank: 1},
+//   {name: '昵称', amount: 9999999, rank: 2},
+//   {name: '昵称', amount: 9999999, rank: 3},
+//   {name: '昵称', amount: 9999999, rank: 4},
+//   {name: '昵称', amount: 9999999, rank: 5},
+//   {name: '昵称', amount: 9999999, rank: 6},
+//   {name: '昵称', amount: 9999999, rank: 7},
+//   {name: '昵称', amount: 9999999, rank: 8},
+//   {name: '昵称', amount: 9999999, rank: 9},
+//   {name: '昵称', amount: 9999999, rank: 10},
+//   {name: '昵称', amount: 9999999, rank: 11},
+//   {name: '昵称', amount: 9999999, rank: 12},
+// ];
+// let arr2 = arr1.concat(arr1).concat(arr1).concat(arr1).concat(arr1).concat(arr1).concat(arr1).concat(arr1).concat(arr1).concat(arr1);
+// let arr3 = arr2.concat(arr2).concat(arr2).concat(arr2).concat(arr2).concat(arr2).concat(arr2).concat(arr2).concat(arr2).concat(arr2);
+// totalLowerData = List(arr3);
+
+const { width } = Dimensions.get('window');
+
+export default class TalentRank extends Component {
+  state = { monthRank: true }
+  render() {
+    const { monthRank } = this.state;
+    return (
+      <View style={styles.container}>
+        <View style={[styles.topContainer, styles.center]}>
+          <View style={styles.btnWrapper}>
+            <TouchableOpacity onPress={() => this._toggleRank(true)}>
+              <View style={[styles.rankBtn, styles.center, monthRank ? styles.btnChoose : null]}>
+                <Text style={[styles.rankBtnFont, monthRank ? styles.btnTextChoose : null]}>本月排行</Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.positionFixed} onPress={() => this._toggleRank(false)}>
+              <View style={[styles.rankBtn, styles.center, !monthRank ? styles.btnChoose : null]}>
+                <Text style={[styles.rankBtnFont, !monthRank ? styles.btnTextChoose : null]}>总排行</Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <ScrollView ref="scrollView" style={styles.container}
+          contentContainerStyle={styles.contentContainerStyle}
+          horizontal={true}
+          scrollEnabled={false} showsHorizontalScrollIndicator={false}>
+          <View style={styles.bodyContainer}>
+            <RankBody title="我的排名" monthRank={true} dataSource={monthUpperData} style={{height: 80}}/>
+            <RankBody title="全部排名" monthRank={true} dataSource={monthLowerData} style={{flex: 1, marginTop: 20}}/>
+          </View>
+          <View style={styles.bodyContainer}>
+            <RankBody title="我的排名" dataSource={totalUpperData} style={{height: 80}}/>
+            <RankBody title="全部排名" dataSource={totalLowerData} style={{flex: 1, marginTop: 20}}/>
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+  
+  _toggleRank(monthRank) {
+    // this.setState({height: 400});
+    this.setState({monthRank: monthRank});
+    const { scrollView } = this.refs;
+    scrollView && (monthRank ? scrollView.scrollTo({x: 0, y: 0}) : scrollView.scrollToEnd())
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  topContainer: {
+    height: 67,
+  },
+  btnWrapper: {
+    width: 178,
+    borderColor: '#444444',
+    borderWidth: 1,
+    borderRadius: 4,
+    flexDirection: 'row',
+  },
+  rankBtn: {
+    width: 92,
+    height: 36,
+    borderRadius: 3,
+  },
+  rankBtnFont: {
+    fontSize: 14,
+    fontFamily: 'PingFang-SC-Regular',
+    color: '#444444',
+  },
+  btnChoose: {
+    backgroundColor: '#444444',
+  },
+  btnTextChoose: {
+    color: 'white'
+  },
+  positionFixed: {
+    position: 'absolute',
+    right: 0,
+  },
+  bodyContainer: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  contentContainerStyle: {
+    width: 2 * width,
+  }
+});
\ No newline at end of file

+import React, { Component } from 'react';
+import { StyleSheet, View } from "react-native";
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Map } from 'immutable';
+
+import * as allianceActions from '../reducers/alliance/allianceActions';
+import ShareDetail from '../components/ShareDetail';
+
+const actions = [
+  allianceActions,
+];
+
+function mapStateToProps(state) {
+  return {
+      ...state
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const creators = Map()
+      .merge(...actions)
+      .filter(value => typeof value === 'function')
+      .toObject();
+
+  return {
+      actions: bindActionCreators(creators, dispatch),
+      dispatch
+  };
+}
+
+class ShareDetailContainer extends Component {
+  constructor(props) {
+    super(props);
+  
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <ShareDetail>
+      </ShareDetail>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  }
+})
+
+export default connect(mapDispatchToProps, mapStateToProps)(ShareDetailContainer)
\ No newline at end of file

+import React, { Component } from 'react';
+import { StyleSheet, View } from "react-native";
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Map } from 'immutable';
+
+import * as allianceActions from '../reducers/alliance/allianceActions';
+import TalentRank from '../components/TalentRank';
+
+const actions = [
+  allianceActions,
+];
+
+function mapStateToProps(state) {
+  return {
+      ...state
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const creators = Map()
+      .merge(...actions)
+      .filter(value => typeof value === 'function')
+      .toObject();
+
+  return {
+      actions: bindActionCreators(creators, dispatch),
+      dispatch
+  };
+}
+
+class TalentRankContainer extends Component {
+  constructor(props) {
+    super(props);
+  
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <TalentRank />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  }
+})
+
+export default connect(mapDispatchToProps, mapStateToProps)(TalentRankContainer);
\ No newline at end of file