efunbox-mobile-8/pages/components/Comment.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity
} from "react-native";
import courseDetails from '../services/courseDetails'
export default class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      text: '',
      input: false,
      default: '写评论',
      postsList: [],
      postsId: ''
    };
  }
  componentWillReceiveProps(nextProps) {
    console.log('--------', nextProps)
    this.setState({
      postsList: nextProps.postsList
    })
  }
  render() {
    return (
      <View style={styles.courseComment}>
        <View style={[styles.padding, styles.title]}>
          <Text style={styles.font}>{this.props.title}</Text>
          <TouchableOpacity onPress={() => this.comments()}>
            <View style={[ styles.button, styles.center ]}>
              <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
              <Text>写评论</Text>
            </View>
          </TouchableOpacity>
        </View>
        { 
          this.state.postsList.map((item, index) => 
            this.listRender(item, index) 
          ) 
        }
        {
            this.state.input ?
            <View style={[ styles.input, this.state.fullStyle]}>
            <TextInput
              style={{height: '100%', borderColor: '#DFDFDF', borderWidth: 1, width: '90%', backgroundColor: '#fff', borderRadius: 6, padding: 0, textAlignVertical: 'top', padding: 10}}
              onChangeText={(text) => this.setState({text})}
              value={this.state.text}
              numberOfLines={7}
              multiline = {true}
              autoFocus = {true}
              defaultValue= {this.state.default}
            />
            <Text style={{ color: '#58A8FA', fontSize: 18}} onPress={() => this.send()}>发送</Text>
          </View>
          :
          null
        }
      </View>
    );
  }
  listRender(item, index) {
    return (
      <View style={[ styles.padding ]} key={ index }>
        <View style={[ styles.title ]}>
          <View style={[ styles.center ]}>
              <Image style={[styles.headImg ]}></Image>
              <View>
                <Text style={{ fontSize: 16, color: '#373737' }}>{item.posts.columnNames}</Text>
                <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
              </View>
          </View>
          <TouchableOpacity onPress={() => this.comments(item.posts.id)}>
            <View style={[ styles.center ]}>
              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
              <Text>回复</Text>
            </View>
          </TouchableOpacity>
      </View>
      <View style={ styles.padding }>
        <Text>{item.posts.content}</Text>
      </View>
      { 
        item.replies.map((items, indexs) => 
          this.repliesList(items, indexs) 
        ) 
      }
    </View>
    )
  }
  repliesList (items, indexs) {
    return (
      <View style={[ styles.padding, styles.column ]}  key={ indexs }>
        <Text style={ styles.color }>卡通小熊</Text>
        <Text>{ items.content }</Text>
      </View>
    )
  }
  comments(id) {
    this.setState({
      input: true
    })
    if (id) {
      this.setState({
        postsId: id
      })
    }
  }
  send() {
    const columnId = this.props.courseId;
    const content = this.state.text;
    const postsId = this.state.postsId;
    console.log(postsId)
    if (!content) {
      alert('请输入内容')
      return false
    }
    if (!postsId) {
      courseDetails.addCommentList({
        columnId,
        columnNames: "卡通小熊",
        content
      }).then(res => {
        console.log(res)
        if ( res.code == 200) {
          courseDetails.getPostsList(columnId).success(res => {
            const postsList = res.data.list;
            this.setState({
              input: false,
              postsList,
              text: ''
            })
          }).fail(error => {
            console.log('失败', error)
          })
        }
      }).catch( err => console.log(err))
    }else {
      courseDetails.addReplyList({
        postsId,
        content
      }).then(res => {
        console.log(res)
        if ( res.code == 200) {
          courseDetails.getPostsList(columnId).success(res => {
            const postsList = res.data.list;
            console.log('==========', postsList)
            this.setState({
              input: false,
              postsList,
              text: ''
            })
          }).fail(error => {
            console.log('失败', error)
          })
        }
      }).catch( err => console.log(err))
    }
  }
}

const styles = StyleSheet.create({
  courseComment: {
    width: '100%',
    backgroundColor: '#fff',
    marginTop: 8,
    marginBottom: 60
  },
  padding: {
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 10,
    paddingBottom: 10,
  },
  title: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  font: {
    fontSize: 24,
    color: 'black',
    fontWeight: 'bold',
  },
  center: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    width: 98,
    height: 28,
    fontSize: 20,
    borderRadius: 28,
    color: 'black',
    backgroundColor: '#F0F1F5'
  },
  headImg: {
    width: 40,
    height: 40,
    backgroundColor: "red",
    marginRight: 10,
    borderRadius: 40
  },
  iconSize: {
    width: 20,
    height: 20,
    marginRight: 10
  },
  reply: {
    width: 16,
    height: 15,
    marginRight: 5
  },
  courseFont: {
    color: '#373737',
    fontSize: 16
  },
  column: {
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#F3F6FF'
  },
  color: {
    color: '#518AD1'
  },
  input: {
    width: '100%',
    height: 124,
    backgroundColor: '#F9F9F9',
    paddingLeft: 18,
    paddingTop: 18,
    paddingBottom: 18,
    paddingRight: 24,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  }
});