index.js

import React, { Component } from 'react';
import {findDomNode}  from 'react-dom'
import { connect } from 'dva';
import request from '../../utils/request'
import { Tabs, Toast ,SearchBar,Button,TextareaItem,ImagePicker,Icon,PullToRefresh} from 'antd-mobile';
import {GetLength,urlGetParams} from '../../utils/dataFilter';
import css from './css.less';
import shareHide from "../../utils/shareHide";
import Iscroll from "../../components/Iscroll";
import NoData from "../../components/NoData";
import $ from "jquery"

function beforeUpload(file) {
  const isJPG = (file.type === 'image/jpeg'||file.type === 'image/png');
  if (!isJPG) {
    Toast.info('只能上传jpg和png格式的图片!');
  }
  const isLt5M = file.size / 1024 / 1024 < 4;
  if (!isLt5M) {
    Toast.info('图片大小不能大于5MB!');
  }
  return isJPG && isLt5M;
}
class Index extends Component{
  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      allQuestionList:[],//所有问题
      myQuestionText:'',//我的问题
      totalCount:0,//问题的总条数
      loadingFlag:true,//进入页面时的加载圈圈
      current:null,//当前回复的问题编号
      answers:"",//回复的回答内容
      keyTab:"",
      files:[],//问题上传图片列表
      uploadImgList:[],//上传图片的地址
      loading:false,//上传图片的loading
      currentUserInfo:null,//当前用户的信息
      currentPage:1,//当前查询的页码
      pageSize:10,//查询每页的条数
      scrollH: document.documentElement.clientHeight-(1.6*100),//可以滚动的区域高度
      answerFlag:false,
      dataEnd:false,//数据加载完成后的标志，即没有数据了
    };
    this.scrollPullUpHandle =  this.scrollPullUpHandle.bind(this);
  }
  componentWillMount(){
    document.title = '互动社区';
    Toast.loading('loading...',0);
    let _this = this;
    let url = window.location.href;
    let urlParams = urlGetParams(url);
    //获取当前用户的信息
    this.props.dispatch({
      type: 'exchangeCommunity/getLoginUserInfo',
      payload: {
        id:urlParams.id
      },
      callback(res) {
        _this.setState({currentUserInfo:res})
        sessionStorage.setItem("currentUserInfo",JSON.stringify(res));
      },
      error(message){
        Toast.info(message,2);
        Toast.hide();
      }
    })
  }
  componentDidMount() {
    shareHide();
    const _this = this;
    let data = {};
    let userinfo = JSON.parse(sessionStorage.getItem("currentUserInfo"));
    if(sessionStorage.getItem("key_exchange")=="2"){
          data.requestType = "question";
          data.weixinId = userinfo.openid;
     }
    if(sessionStorage.getItem("key_exchange")=="3"){
          data.requestType = "answer";
          data.weixinId = userinfo.openid;
     }
    this.getQuestionList(data);
  }

  componentWillUnmount() {
    document.title = '';
  }
  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)
  }
  //下拉刷新数据
  scrollPullDownHandle=()=>{
    this.setState({currentPage:1,dataEnd:false});
    let data = {};
    if(sessionStorage.getItem("key_exchange")=="2"){
          data.requestType = "question";
          data.weixinId = this.state.currentUserInfo.openid || "";
     }
    if(sessionStorage.getItem("key_exchange")=="3"){
          data.requestType = "answer";
           data.weixinId = this.state.currentUserInfo.openid || "";
     }
    this.getQuestionList(data);
  }
  //上拉加载更多数据
  scrollPullUpHandle(){
      let _this = this;
      let data = {};
      if(sessionStorage.getItem("key_exchange")=="2"){
            data.requestType = "question";
            data.weixinId = this.state.currentUserInfo.openid || "";
       }
      if(sessionStorage.getItem("key_exchange")=="3"){
            data.requestType = "answer";
             data.weixinId = this.state.currentUserInfo.openid || "";
       }
      data.pageNo = this.state.currentPage +1;
      data.question = this.state.searchValue;
      data.pageSize = this.state.pageSize;
      this.props.dispatch({
        type: 'exchangeCommunity/getAllQuestionList',
        payload: data,
        callback(res) {
          Toast.hide();
          let allQuestionList = _this.state.allQuestionList;
          let currentPage = _this.state.currentPage;
          let dataEnd = _this.state.dataEnd;
          if(res.data && res.data.length>0){
            allQuestionList = allQuestionList.concat(res.data);
            currentPage = currentPage +1;
            dataEnd = false;
          }else{
            dataEnd = true;
          }
          _this.setState({
              allQuestionList:allQuestionList,
              currentPage:currentPage,
              loadingFlag:false,
              current:null,
              files:[],
              uploadImgList:[],
              dataEnd:dataEnd
            })
        },
        error(message){
          Toast.info(message,2);
          _this.setState({ 
            loadingFlag:false,
            current:null,
            files:[],
            uploadImgList:[],
            })
        }
      })
  }
  //获取问题列表
  getQuestionList(param){
    let _this = this;
    let params = param ? param : {};
    params.pageNo = this.state.currentPage;
    params.question = this.state.searchValue;
    params.pageSize = this.state.pageSize;
    this.props.dispatch({
      type: 'exchangeCommunity/getAllQuestionList',
      payload: params,
      callback(res) {
        _this.setState({ 
          allQuestionList:res.data || [],
          loadingFlag:false,
          current:null,
          files:[],
          uploadImgList:[],
          answers:'',
          totalCount:res.totalCount
          })
         Toast.hide();
      },
      error(message){
        Toast.info(message,2);
        _this.setState({ allQuestionList:[] })
      }
    })
  }
  //提交回复答案
  addAnswerConfirm=(param)=>{
    let _this = this;
    this.props.dispatch({
      type: 'exchangeCommunity/addAnswer',
      payload: param,
      callback(res) {
         Toast.info("提交成功",2);
         //刷新一下页面数据
         let data = {};
         if(sessionStorage.getItem("key_exchange")=="2"){
              data.requestType = "question";
              data.weixinId = _this.state.currentUserInfo.openid || "";
         }
         if(sessionStorage.getItem("key_exchange")=="3"){
              data.requestType = "answer";
               data.weixinId = _this.state.currentUserInfo.openid || "";
         }
         _this.getQuestionList(data);
      },
      error(message){
        Toast.info(message.message);
      }
    })
  }
  onChangeValue = (itm) => {
    this.setState({searchValue:itm})
  }
  //搜索问题，模糊查询
  searchQuestion=(itm)=>{
    let _this = this;
    console.log('searchQuestion----->',itm)
     //刷新一下页面数据
     let data = {};
     if(sessionStorage.getItem("key_exchange")=="2"){
          data.requestType = "question";
          data.weixinId = _this.state.currentUserInfo.openid || "";
     }
     if(sessionStorage.getItem("key_exchange")=="3"){
          data.requestType = "answer";
           data.weixinId = _this.state.currentUserInfo.openid || "";
       }
    this.getQuestionList(data);
  }
  //跳转问题详情页面
  gotoDetail=(item)=>{
    this.props.history.push({ pathname: "/exchangeCommunity/questionDetail"});
    sessionStorage.setItem("questionDetail",JSON.stringify(item));
    this.clickQuestionHandle(item.id);//更新点击率
  }
  //点击回复消息按钮
  addAnswerClick=(index)=>{
    console.log('click-->',index,this.state.answerFlag)
    let answerFlag = this.state.answerFlag
    if(index == this.state.current){
      answerFlag = !answerFlag;
    }else{
      answerFlag = true;
    }
    this.setState({
      current:index,
      answerFlag:answerFlag,
      answers:''
    })
  }
  //提交回答按钮
  addAnswerHandle=(item)=>{
     let answer = this.state.answers;
     console.log('addAnswerHandle-----',item,answer)
     if(answer == ""){
      Toast.info("回复内容不能为空",2)
      return;
     }
     if(GetLength(answer)>200){
      Toast.info("评论字数不能大于100个",2)
      return;
     }
     let params = {
        "questionId":item.id,
        "answer":answer,
        "beAnswered": item.weixinName,//被回复人的名字
        "initAnswerId": item.id,
        "weixinId":this.state.currentUserInfo.openid,
        "weChatName": this.state.currentUserInfo.nickname,
        "weChatImage": this.state.currentUserInfo.headImgUrl,
     }
    this.addAnswerConfirm(params);
    this.clickQuestionHandle(item.id);//更新点击率
  }
  addAnswerChange=(val)=>{
    this.setState({ answers:val})
  }
  //发布问题
  addQuestionHandle=()=>{
    console.log('addQuestionHandle-----',this.state.files,this.addQuestionTextarea.state.value)
    let _this = this;
    let question = this.addQuestionTextarea.state.value;
    if(question == ""){
      return Toast.info("提问的问题不能为空",2)
    } 
    if(GetLength(question)>100){
      return Toast.info("问题字数不能超过50个！",2)
    }
    this.props.dispatch({
      type: 'exchangeCommunity/AddQuestion',
      payload: {
        "question":question,
        "questionImageList":this.state.uploadImgList,
        "weixinId":this.state.currentUserInfo.openid,
        "weChatName": this.state.currentUserInfo.nickname,
        "weChatImage": this.state.currentUserInfo.headImgUrl,
      },
      callback(res) {
        Toast.info("发布成功",2);
        _this.addQuestionTextarea.state.value = "";
         //刷新一下页面数据
         let data = {};
         if(sessionStorage.getItem("key_exchange")=="2"){
              data.requestType = "question";
              data.weixinId = _this.state.currentUserInfo.openid || "";
         }
         if(sessionStorage.getItem("key_exchange")=="3"){
              data.requestType = "answer";
               data.weixinId = _this.state.currentUserInfo.openid || "";
         }
         _this.getQuestionList(data);
      },
      error(mess){
        Toast.info(mess.message,2);
      }
    })
  }
  clickTabHandle=(key)=>{
    Toast.loading('loading...',0);
    let params = {};
    sessionStorage.setItem( "key_exchange", key);
    switch (key) {
      case "1":
        this.setState({keyTab:"",currentPage:1,searchValue:"",dataEnd:false},()=>{
          setTimeout(()=>{
            this.getQuestionList();
          },1000)
        });
        break;
      case "2":
        params.requestType = "question";
        params.weixinId = this.state.currentUserInfo.openid || "";
        this.setState({keyTab:"question",currentPage:1,searchValue:"",dataEnd:false},()=>{
          setTimeout(()=>{
            this.getQuestionList(params);
          },1000)
        });
        break;
      case "3":
        params.requestType = "answer";
        params.weixinId = this.state.currentUserInfo.openid || "";
        this.setState({keyTab:"answer",currentPage:1,searchValue:"",dataEnd:false},()=>{
          setTimeout(()=>{
            this.getQuestionList(params);
          },1000)
        });
        break;
      default:
        break;
    }

  }
  //上传文件时的事件
  onChangeImage = (files, type, index) => {
    console.log('onChangeImage---->>>',files, type, index);
    if(type == "add"){
      //上传前校验格式
      let file = files[files.length-1].file;
      if(beforeUpload(file)){
        this.setState({
            loading:true
          },()=>{
            this.uploadFile(files);
          });
      }
    }
    if(type == "remove"){
      let imglist = this.state.uploadImgList;
      imglist.splice(index,1);
      this.setState({
        files,
        uploadImgList:imglist,
      });
    }
  }
   //文件上传接口
  uploadFile(files){
    Toast.loading('上传中...',0);
    let _this = this;
    let userId = this.state.currentUserInfo.id;
    let file = files[files.length-1].file;
    let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
    let formData = new FormData();
    formData.append('file', file);
    formData.append('fileType', "filesImg");
    formData.append('functionType', 'exchangeCommunity');
    formData.append('userId', userId);
    request('/o2o/ai/fileUpload', {
              method: 'POST',
              body: formData
          }).then((res) => {
            if (res.data.status) {
              Toast.info('上传成功！',1);
              _this.setState({
                files,
                uploadImgList:_this.state.uploadImgList.concat([{imageUrl:res.data.data.fileAddress}]),
                loading:false,
              });
            }else{
              Toast.info('上传失败！');
            }
          })
  }
  //更新问题的点击率
  clickQuestionHandle=(id)=>{
    this.props.dispatch({
      type: 'exchangeCommunity/updateClickNum',
      payload: {
        questionId:id
      },
      callback(res) {
         console.log("添加点击率成功");
      },
      error(message){
        console.log("添加点击率出错");
      }
    })
  }
  _quesrionItem(list,nameKey){
    if(list.length>0){
       return list.map((item,idx)=>{
          return(
              <div className={css.questionItem} key={nameKey + idx}>
                <div onClick={()=>{this.gotoDetail(item)}}>
                  <div className={css.question_Content}>{item.question}</div>
                  <div className={css.question_img}>
                    {item.questionImageList.length>0 && item.questionImageList.map((itm,index1)=>{
                      return <img key={itm.id} src={itm.imageUrl}/>
                    })}
                  </div>
                </div>
                <div className={css.question_userInfo}>
                  <div className={css.img_esction}><img src={item.weixinImageurl ? item.weixinImageurl :  require("../../assets/image/myUser.png")}/></div>
                  <div className={css.name}>{item.weixinName || "***"}</div>
                  <div className={css.date}>{item.createTime}</div>
                </div>
                <div className={css.question_answer}>
                  {
                    item.answers && item.answers.map((item2,index2)=>{
                      return (
                          <div className={css.question_answer_list} key={item2.id}>
                            <div className={css.question_answer_name}>{item2.weixinName + "："}</div>
                            <div className={css.question_answer_text}  dangerouslySetInnerHTML = {{__html:item2.answer.replace(/(\r\n)|(\n)/g,'<br>')}}></div>
                          </div>
                        )
                    })
                  }
                </div>
                <div className={css.question_footer}>
                  <div onClick={()=>{this.gotoDetail(item)}}><span className={css.question_num}>{item.answerCount}</span>个回答</div>
                  <div onClick={()=>{this.addAnswerClick(idx)}}><img style={{width: '.2rem'}} src={require("../../assets/image/addquestion.png")}/></div>
                </div>
                <div className={(this.state.current == idx && this.state.answerFlag) ? css.question_add_answer : css.question_no_answer}>
                  <TextareaItem
                      placeholder="请输入您的回答"
                      rows={2}
                      value={this.state.answers}
                      onBlur={::this.blur}
                      onChange={this.addAnswerChange}
                    />
                  <div className={css.addquestion_btn2}>
                    <button className={css.btn} onClick={()=>{this.addAnswerHandle(item)}}>提交</button>
                  </div>
                </div>
              </div>
            )
      })
    }else{
      return <NoData />
    }
  }
  removeImageHandle(idx){
      console.log('item-remove--->>',idx)
      let files = this.state.files;
      files.splice(idx,1);
      //this.onChangeImage(files,'remove',idx);
  }
  componentDidUpdate(){
    // let _this = this;
    // $('.am-image-picker').find('.am-image-picker-item-remove').each( function(i) {
    //     console.log('-----------click------>',i)
    //     $(this).on('click',function(event){
    //       event.stopPropagation();
    //       _this.removeImageHandle(i);
    //     })
    //   });

  }
  render() {
    let {allQuestionList,currentUserInfo,files,uploadImgList,scrollH} = this.state;
    let check = sessionStorage.getItem("key_exchange")-1;
    let totalCount = this.state.totalCount || 0;
    if(this.state.loadingFlag){
      return <div></div>
    }
    const SearchBtn = (props) => (
        <div style={{color:'black'}}>搜索</div>
    )
    return (
        <div className={css.exchangeCommunityWrap}>
          <Tabs
              tabs={[{ title: '全部', sub: '1' }, { title: '提问', sub: '2' }, { title: '回答', sub: '3' }]}
              initialPage ={check}
              swipeable={false}
              onChange={(t, i) => {
              this.clickTabHandle(t.sub)
            }}
          >
            {/**  问题部分**/}
            <div className="scrollSection">
              <div className={css.splitline}></div>
              <div className={css.header_section}>
                <div className={css.search}>
                  <input
                    onChange={(e) => {
                      this.onChangeValue(e.target.value);
                    }}
                    value={this.state.searchValue}
                    type="search"
                    id="inputElem1"
                    placeholder={"请输入搜索内容"} />
                    <div className={css.cancelButton} onClick={()=>{this.searchQuestion()}}>搜索</div>
                </div>
                <div className={css.questionText}>
                  所有问题<span className={css.questionNum}>{"（" + totalCount + "个）"}</span>
                </div>
              </div>
              <div className={css.questionList} style={{height: this.state.scrollH}}>
                  <Iscroll key="0"
                          id="community1"
                          iscrollOptions={{
                            preventDefault: true,
                          }}
                          onPullDownLoadMore={() => this.scrollPullDownHandle()}
                          onPullUpLoadMore={() => this.scrollPullUpHandle()}
                          hasUp={true}
                          hasDown={true}
                          dataEnd={this.state.dataEnd}
                          haveBackTop={true}
                          noUpStr={'已全部加载完毕'}>
                    {this._quesrionItem(allQuestionList,'allquestion')}
                  </Iscroll>
              </div>
            </div>
            {/**  提问部分**/}
            <div className="scrollSection">
              <div className={css.splitline}></div>
              <div className={css.header_section}>
                {/*<SearchBar  placeholder="请输入搜索内容"
                          onClear={value => console.log(value, 'onClear')}
                          onChange={this.onChangeValue}
                          value={this.state.searchValue}
                          cancelText={<SearchBtn />}
                          onCancel={this.searchQuestion}
                         />*/}
                <div className={css.search}>
                  <input
                    onChange={(e) => {
                      this.onChangeValue(e.target.value);
                    }}
                    value={this.state.searchValue}
                    type="search"
                    id="inputElem1"
                    placeholder={"请输入搜索内容"} />
                    <div className={css.cancelButton} onClick={()=>{this.searchQuestion()}}>搜索</div>
                </div>
                <div className={css.questionText}>
                  我的提问<span className={css.questionNum}>{"（" + totalCount + "个）"}</span>
                </div>
              </div>
              <div className={css.questionList} style={{height: this.state.scrollH}}>
                  <Iscroll key="0"
                          id="community2"
                          iscrollOptions={{
                            preventDefault: true,
                          }}
                          onPullDownLoadMore={() => this.scrollPullDownHandle()}
                          onPullUpLoadMore={() => this.scrollPullUpHandle()}
                          hasUp={true}
                          hasDown={true}
                          dataEnd={this.state.dataEnd}
                          haveBackTop={true}
                          noUpStr='已全部加载完毕'>
                          <div className={css.addquestion_section} id="addquestion_section">
                            <div className={css.addquestion_text}>
                              <TextareaItem
                                placeholder="请输入您的问题"
                                onBlur={::this.blur}
                                autoHeight
                                ref={el => this.addQuestionTextarea = el}
                              />
                            </div>
                            <div className={css.addquestion_img}>
                              <ImagePicker
                                  className={css.backgroundUploadImg}
                                  files={files}
                                  onChange={this.onChangeImage}
                                  selectable={files.length < 9}
                                  disableDelete={true}
                                />
                            </div>
                            <button className={css.addquestion_btn} onClick={()=>{this.addQuestionHandle()}}>发布</button>
                          </div>
                          <div style={{position:'relative',minHeight:(this.state.scrollH-187)}}>
                            {this._quesrionItem(allQuestionList,'allquestion')}
                          </div>
                  </Iscroll>
              </div>
            </div>
            {/**  回答部分**/}
            <div className="scrollSection">
              <div className={css.splitline}></div>
              <div className={css.header_section}>
               {/* <SearchBar  placeholder="请输入搜索内容"
                          onClear={value => console.log(value, 'onClear')}
                          onChange={this.onChangeValue}
                          value={this.state.searchValue}
                          cancelText={<SearchBtn />}
                          onCancel={this.searchQuestion}
                         />*/}
                <div className={css.search}>
                  <input
                    onChange={(e) => {
                      this.onChangeValue(e.target.value);
                    }}
                    value={this.state.searchValue}
                    type="search"
                    id="inputElem1"
                    placeholder={"请输入搜索内容"} />
                    <div className={css.cancelButton} onClick={()=>{this.searchQuestion()}}>搜索</div>
                </div>
                <div className={css.questionText}>
                  我的回答<span className={css.questionNum}>{"（" + totalCount + "个）"}</span>
                </div>
              </div>
              <div className={css.questionList} style={{height: this.state.scrollH}}>
                  <Iscroll key="0"
                          id="community3"
                          iscrollOptions={{
                            preventDefault: true,
                          }}
                          onPullDownLoadMore={() => this.scrollPullDownHandle()}
                          onPullUpLoadMore={() => this.scrollPullUpHandle()}
                          hasUp={true}
                          hasDown={true}
                          dataEnd={this.state.dataEnd}
                          haveBackTop={true}
                          noUpStr='已全部加载完毕'>
                          {this._quesrionItem(allQuestionList,'myanswer')}
                  </Iscroll>
              </div>
            </div>
          </Tabs>
        </div>
      )
  }
}

export default connect()(Index);