questionDetail.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Toast ,SearchBar,InputItem,TextareaItem,Button} from 'antd-mobile';
import { Icon, Modal } from 'antd';
import shareHide from "../../utils/shareHide";
import {GetLength} from '../../utils/dataFilter';
import Iscroll from "../../components/Iscroll";

import css from './css.less';
class Index extends Component{
  constructor(props) {
    super(props);
    let questionInfo = JSON.parse(sessionStorage.getItem("questionDetail"));
    let currentUserInfo = JSON.parse(sessionStorage.getItem("currentUserInfo"));
    this.state = {
      questionInfo:questionInfo || null,//问题数据
      currentUserInfo:currentUserInfo,//当前用户
      questionAnswerList:[],
      textarea:"",
      textarea2:"",
      weixinId:"25",//当前用户的微信ID
      publicId:"18",//当前用户的公众号ID
      answerCurrent:null,//当前回复的那一条回答
      answerFlag : false,
      previewImage:'',//图片预览
      previewVisible: false,
    }
  }

  componentDidMount() {
    document.title = '问题详情';
    shareHide();
    this.getQuestionInfo();
  }
  blur =()=>{
    setTimeout(function(){
      // alert(1);
      if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
        return
      }
      let result = 'pc';
      if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
        result = 'ios'
      }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
        result = 'android'
      }
      if( result = 'ios' ){
        document.querySelector('body').scrollIntoView();
      }
    },10)
  }
  handlePreview = async url => {
    this.setState({
      previewImage: url,
      previewVisible: true,
    });
  };
  handleCancel = () => {
    this.setState({ previewVisible: false });
  };
  getQuestionInfo(){
    let _this = this;
    let questionInfo = this.state.questionInfo;
    this.props.dispatch({
      type: 'exchangeCommunity/getQuestionInfo',
      payload: {
        "id": questionInfo.id,
      },
      callback(res) {
        _this.setState({ 
          questionAnswerList:res.discussList,
          answerCurrent:null,
          textarea:'',
          textarea2:'',
        })
      }
    })
  }
  addAnswerChange = (value)=>{
    this.setState({textarea:value})
  }
  addAnswerChange2 = (value)=>{
    this.setState({textarea2:value})
  }
  //点击回复消息按钮
  addAnswerClick1=(index)=>{
    console.log('click-->',index,this.state.answerFlag)
    let answerFlag = this.state.answerFlag
    if(index == this.state.answerCurrent){
      answerFlag = !answerFlag;
    }else{
      answerFlag = true;
    }
    this.setState({
      answerCurrent:index,
      answerFlag:answerFlag,
      textarea2:''
    })
  }
  //提交回答按钮
  addAnswerHandle=(key,itm)=>{
     let _this = this;
     let answer = this.state.textarea;//评论的内容;
     let answer2 = this.state.textarea2;//评论回答的内容;
     let questionInfo = this.state.questionInfo;
     console.log('addAnswerHandle-----',answer);
     if(key=='question'){
        if(answer==""){
          return Toast.info("评论内容不能为空",2)
        }
        if(GetLength(answer)>200){
          Toast.info("评论字数不能大于100个",2)
          return;
        }
     }
     if(key == 'answer'){
      if(answer2==""){
          return Toast.info("回复内容不能为空",2)
        }
      if(GetLength(answer2)>200){
        Toast.info("回复字数不能大于100个",2)
        return;
       }
     }
     let params = {
        initAnswerId: questionInfo.id,
        weixinId:this.state.currentUserInfo.openid,
        weChatName: this.state.currentUserInfo.nickname,
        weChatImage: this.state.currentUserInfo.headImgUrl,
     }
     if(key=="answer"){
        params.answerId = itm.id;
        params.beAnswered = itm.weixinName;
        params.answer = answer2;
     }else {
        params.questionId = questionInfo.id;
        params.beAnswered = questionInfo.weixinName;
        params.answer = answer;
     }
    this.props.dispatch({
      type: 'exchangeCommunity/addAnswer',
      payload: params,
      callback(res) {
         Toast.info("提交成功",2);
         //刷新一下页面数据
         _this.getQuestionInfo();
      },
      error(mes){
        Toast.info(mes.message,2);
      }
    })
  }
  _answerCompoent(item){
    let answer = item.answer ? item.answer.replace(/(\r\n)|(\n)/g,'<br>') : item.answer;
    return(
        <div>回复<span style={{color:"#FF9D5C"}}>{item.beAnswered+'：'}</span><span dangerouslySetInnerHTML = {{__html:answer}}></span></div>
      )
  }
  _answerCompoent2(itm){
    let answer = itm ? itm.replace(/(\r\n)|(\n)/g,'<br>') : itm;
    return(
        <span dangerouslySetInnerHTML = {{__html:answer}}></span>
      )
  }
  //问题的回答部分组件
  _answerContent(AnswerList,answerCurrent){
    let _this = this;
    if(AnswerList.length>0){
        return AnswerList.map((item,index2)=>{
          return (
              <div className={css.question_answer_Item} key={item.id}>
                <div className={css.usersection}>
                  <img src={item.weixinImageurl ? item.weixinImageurl : require("../../assets/image/myUser.png")}/>
                  <span className={css.name}>{item.weixinName}</span>
                </div>
                <div className={css.answersection}>
                  {item.beAnswered ? this._answerCompoent(item) : this._answerCompoent2(item.answer) }
                </div>
                <div className={css.answerfooter}>
                  <div className={css.date}>{item.createTime}</div>
                  <div  onClick={()=>{this.addAnswerClick1(index2)}}><img style={{width: '.2rem'}} src={require("../../assets/image/addquestion.png")}/></div>
                </div>
                <div className={(answerCurrent == index2 && this.state.answerFlag) ? css.question_add_answer : css.question_no_answer}>
                  <TextareaItem
                      placeholder="请输入您的回答"
                      onBlur={::this.blur}
                      rows={2}
                      value={this.state.textarea2}
                      onChange={this.addAnswerChange2}
                    />
                  <div className={css.addquestion_btn2}>
                    <button className={css.btn} onClick={()=>{this.addAnswerHandle("answer",item)}}>提交</button>
                  </div>
                </div>
              </div>
            )
        })
    }else{
      return <div></div>
    }
  }
  render() {
    let {questionInfo,questionAnswerList,answerCurrent,previewImage,previewVisible} = this.state;
    if(!questionInfo){
      return <div></div>
    }
    return (
          <div className={css.exchangeCommunityWrap}>
            <Iscroll id="communityDetail" 
                      iscrollOptions={{
                        probeType:2
                      }} 
                      haveBackTop={true}>
                 <div>
                  <div className={css.questionList}>
                    <div className={css.questionItem}>
                      <div className={css.question_Content}>{questionInfo.question}</div>
                      <div className={css.question_img}>
                      {
                        questionInfo.questionImageList.length>0 && questionInfo.questionImageList.map((itm,index1)=>{
                            return <img key={itm.id} onClick={()=>{this.handlePreview(itm.imageUrl)}} src={itm.imageUrl}/>
                          })
                      }
                      </div>
                      <div className={css.question_userInfo}>
                        <div className={css.img_esction}><img src={questionInfo.weixinImageurl ? questionInfo.weixinImageurl : require("../../assets/image/myUser.png")}/></div>
                        <div className={css.name}>{questionInfo.weixinName || "***"}</div>
                        <div className={css.date}>{questionInfo.createTime}</div>
                      </div>
                      <div className={css.question_footer}>
                        <div><span className={css.question_num}>{questionAnswerList.length}</span>个回答</div>
                      </div>
                    </div>
                    <div style={previewVisible ? {display:'block'} : {display:'none'}}
                          className={css.modalImg}>
                      <div className={css.modalSection}>
                        <div className={css.close} onClick={this.handleCancel}>×</div>
                        <div className={css.imgsection}><img alt="" className={css.imgPreview} src={previewImage} /></div>
                      </div>
                    </div>
                  </div>
                  <div className={css.questionDetailWrap}>
                    {this._answerContent(questionAnswerList,answerCurrent)}
                  </div>
                </div>
            </Iscroll>
            <div className={css.answerFooterSection}>
              <div style={{width:"100%"}}>
                <TextareaItem
                      placeholder="评论一下..."
                      onBlur={::this.blur}
                      value={this.state.textarea}
                      rows={1}
                      onChange={this.addAnswerChange}
                    />
              </div>
              {/*<div className={css.btntijiao}><Button className={css.btn} activeStyle={false}  size="small" inline onClick={()=>{this.addAnswerHandle("question")}}>提交</Button></div>*/}
              <div className={css.btntijiao}><button className={css.btn} onClick={()=>{this.addAnswerHandle("question")}}>提交</button></div>
            </div>
          </div>
      )
  }
}

export default connect()(Index);