customer / shanghai-railway-rnapp

import React, { Component } from "react";
import {
  ActivityIndicator,
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import { width, zoomH, zoomW } from "../../utils/getSize";
import { xnToast } from "../../utils/utils";
import AppService from "../../service/AppService";

export default class QuestionHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      freshing: false,
        isAll:false
    };
  }

  componentWillMount() {
    this.getList();
  }

  // 获取关注的人的列表
  getList() {
    if (!global.isConnected) {
      xnToast("暂无网络连接，请稍后重试");
      return;
    }
      if(this.state.isAll){
          return;
      }
    this.setState({
      data: [],
      freshing: true
    });
    let pageSize = 20;
    let length  = this.state.data.length;
    let params = {
      threadType: 3,
      pageNumber: length / pageSize + 1,
      pageSize: pageSize,
      searchType: "HAS_PUBLISH",
      isActive: true,
        sourceFrom:'APP',
      keyword: this.props.triData
    };
    AppService.queryList(params)
      .then(data => {
        this.setState({
          freshing: false
        });
        if (data.message) {
          xnToast(data.message);
          return;
        }
        if (data.errors.length > 0) {
          xnToast(data.errors[0].message);
          return;
        }
        this.dataHandle(data);
        if(this.state.data.length == data.totalCount){
            this.setState({
                isAll:true
            });
        }
      })
      .catch(error => {
        this.setState({
          loading: false
        });
        xnToast(error);
      });
  }

  /**
   * 接口返回数据处理
   * @param {*} data
   */
  dataHandle(data) {
    if (!!!data) {
      // xnToast("暂无数据!!!");
      return;
    }
    let resultStr = data.result;
    let dataList = [];
    for (let i = 0; i < resultStr.length; i++) {
      let attachmentList = [];
      let singleItem = {
        name: "",
        attachment: [],
        commentNum: 0,
        userId: '',
        id: ''
      };
      if (resultStr[i].attachmentList) {
        for (let j = 0; j < resultStr[i].attachmentList.length; j++) {
          if (j > 2) {
            break;
          }
          let urls = {
            url: ""
          };
          urls.url = resultStr[i].attachmentList[j].filePath;
          attachmentList.push(urls);
        }
      }
      singleItem.id = resultStr[i].id;
      singleItem.userId = resultStr.user ? resultStr.user.id : 0;
      singleItem.name = resultStr[i].title;
      singleItem.attachment = attachmentList;
      singleItem.commentNum = resultStr[i].threadStatistics.commentNum;
      dataList.push(singleItem);
    }
    this.setState({
      data: dataList
    });
  }

  _detailClick = (item) => {
    //详情
    this.props.navigation.navigate("QuestionList", {
      id: item.id,
      userId: item.userId
    });
  };

  //渲染item
  keyExtractor = (item, index) => index;
  renderItem({ item, index }) {
    return (
      <TouchableOpacity
        style={styles.itemBackground}
        activeOpacity={0.8}
        onPress={() => {
          this._detailClick(item);
        }}
      >
        <View>
          {/*文字*/}
          <Text
            style={{
              width: "100%",
              fontSize: 18,
              color: "#000",
              fontWeight: "bold"
            }}
            numberOfLines={2}
          >
            {item.name}
          </Text>

          {/*图片*/}
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "wrap",
              marginTop: 14
            }}
          >
            {item.attachment
              ? item.attachment.map((v, i) => this.renderImageItem(v, i, index))
              : null}
          </View>
        </View>
        <TouchableOpacity activeOpacity={0.8} style={styles.starItem}>
          <Text
            style={{
              fontSize: 12,
              color: "#000000",
              marginTop: 10,
              opacity: 0.45
            }}
          >
            {item.commentNum + " 回答"}
          </Text>
        </TouchableOpacity>
      </TouchableOpacity>
    );
  }
  //渲染图片列表item
  renderImageItem(item, i, index) {
    return (
      <View
        key={i}
        style={[
          i < 2 ? { marginRight: 10 } : null,
          {
            width: (width - 48) * 0.33,
            height: 74,
            backgroundColor: "#FFFFFF"
          }
        ]}
      >
        <Image
          style={{ width: "100%", height: "100%" }}
          source={{
            uri: item.url,
            cache: "force-cache"
          }}
          resizeMode="cover"
        />
      </View>
    );
  }

  _separator = () => {
    return <View style={{ height: 5, backgroundColor: "#eeeeee" }} />;
  };
  render() {
    return (
      <View style={styles.background}>
        {this.state.data && (
          <FlatList
            style={{ flex: 1 }}
            refreshing={false}
            keyExtractor={this.keyExtractor}
            data={this.state.data}
            ItemSeparatorComponent={this._separator}
            renderItem={this.renderItem.bind(this)}
            showsVerticalScrollIndicator={false}
            onRefresh={() => {
              this.setState(
                {
                  data: [],
                  freshing: true,
                    isAll:false
                },
                function() {
                  this.getList();
                }
              );
            }}
          />
        )}
        {this.state.freshing && (
          <View style={styles.loadingBg}>
            <View style={styles.loadingBox}>
              <ActivityIndicator size="large" color="#fff" />
              <Text
                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
              >
                加载中...
              </Text>
            </View>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: "#ececf1",
    display: "flex"
  },

  itemBackground: {
    backgroundColor: "#FFFFFF",
    padding: 14
  },

  topSearchView: {
    flex: 1,
    width: "100%",
    height: 40 / zoomH,
    backgroundColor: "#FFFFFF",
    borderRadius: 2,
    display: "flex",
    marginLeft: 15 / zoomW,
    marginRight: 15 / zoomW
  },
  tabStyle: {
    height: 34 / zoomH,
    backgroundColor: "#fff",
    elevation: 0,
    borderWidth: StyleSheet.hairlineWidth
  },

  starItem: {
    flex: 1,
    justifyContent: "flex-start",
    flexDirection: "row"
  },
  forwardingBg: {
    borderWidth: 1,
    borderColor: "#eeeeee"
  },
  loadingBg: {
    position: "absolute",
    top: 0,
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  loadingBox: {
    width: 100 / zoomW,
    height: 120 / zoomH,
    backgroundColor: "rgba(0,0,0,.5)",
    borderRadius: 8,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});