addEdit.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { InputItem,Toast} from 'antd-mobile';
import { Upload, Icon, message } from 'antd';
import shareHide from "../../utils/shareHide";
import {getCardName} from '../../utils/dataFilter'
import request from '../../utils/request'
import css from './css.less';
import styles from '../../routes/GovernorTraining/css.less'

function beforeUpload(file) {
  const isJPG = (file.type === 'image/jpeg'||file.type === 'image/png');
  if (!isJPG) {
    message.error('只能上传jpg和png格式的图片!');
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    message.error('图片大小不能大于5MB!');
  }
  return isJPG && isLt5M;
}
class AddCardEditor extends Component{
  constructor(props) {
    super(props);
    let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
    this.state = {
      cardInfo:cardInfo,
      headUrl:cardInfo.headUrl || "",//头像
      name: cardInfo.name || "",//名字
      postName: getCardName(cardInfo.roleId) || "",//职位
      Orgwork:cardInfo.orgName || "",//机构
      phone:cardInfo.number || "",//手机号
      qrcode: cardInfo.qrcode || "",//微信二维码
      loading: false,//头像的
      loading2: false,//二维码的
      userId:cardInfo.id || JSON.parse(localStorage.getItem("id")),//用户ID
    }
  }

  componentDidMount() {
    document.title = '我的信息';
    let _this = this;
    shareHide();
  }
  componentWillUnmount(){
    Toast.hide();
  }
   handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      this.setState({
          loading: false,
      })
    }
  }
  handleChange2 = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading2: true });
      return;
    }
    if (info.file.status === 'done') {
      this.setState({
          loading2: false,
      })
    }
  }
  saveHandle=()=>{
    let _this = this;
    this.props.dispatch({
      type: 'BusinessCard/UpdateBusinessCardInfo',
      payload: {
        "id":this.state.userId,
        "qrcode":this.state.qrcode,
        "headUrl":this.state.headUrl,
      },
      callback(res) {
        //保存卡片数据
        Toast.info("保存成功",2)
        setTimeout(function(){
          _this.props.history.go(-1);
        },2000)
      }
    })
  }
  render() {
    let {fileList,qrcode,headUrl} = this.state;
    const uploadButton2 = (
      <div className={css.qrcodeSection}>
        <div className={css.text}>
        {this.state.loading2 ? <Icon type="loading" /> : <div style={{fontSize:".24rem"}}>+</div>}
        </div>
      </div>
    );
    const uploadButton = (
        this.state.loading ? <Icon type="loading" /> : <img src={require("../../assets/image/defaultHead.png")} alt="avatar" />
    );
    const propsUpload1 = {
      listType:"picture-card",
      className:"avatar-uploader",
      showUploadList:false,
      beforeUpload:beforeUpload,
      customRequest:(files)=>{
          let file = files.file;
          let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
          let userId = this.state.userId;
          let formData = new FormData();
          formData.append('file', file);
          formData.append('fileType', "head");
          formData.append('functionType', 'businessCard');
          formData.append('userId', userId);
          request(`/o2o/ai/fileUpload`, {
            method: 'POST',
            body: formData
          }).then((res) => {
            if (res.data.status) {
              this.setState({
                headUrl:res.data.data.fileAddress,
                loading: false,
              })
            }
          })
      },
      onChange:this.handleChange
    };
    const propsUpload2 = {
      listType:"picture-card",
      className:"avatar-uploader",
      showUploadList:false,
      beforeUpload:beforeUpload,
      customRequest:(files)=>{
          let file = files.file;
          let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
          let userId = this.state.userId;
          let formData = new FormData();
          formData.append('file', file);
          formData.append('fileType', "QRcode");
          formData.append('functionType', 'businessCard');
          formData.append('userId', userId);
          request(`/o2o/ai/fileUpload`, {
            method: 'POST',
            body: formData
          }).then((res) => {
            if (res.data.status) {
              this.setState({
                qrcode:res.data.data.fileAddress,
                loading2: false,
              })
            }
          })
      },
      onChange:this.handleChange2
    };
    return (
          <div className={css.businessCardEditWrap} style={{ background: '#fff' }}>
            <div className={styles.ac_wrap}>
              <div id="scrollSection">
                <ul>
                  <li className={css.headsection}>
                      <label className={css.headText}>头像</label>
                      <div className={css.uploadHeadImg}>
                        <Upload {...propsUpload1}>
                          {headUrl ? (this.state.loading ? <Icon type="loading" /> : <img src={headUrl} alt="avatar" /> ) : uploadButton }
                        </Upload>
                      </div>
                  </li>
                  <li className={styles.require}>
                    <InputItem
                      type="text"
                      disabled={true}
                      value={this.state.name}
                      placeholder = {this.state.disabled?'':"请输入姓名"}
                    >姓名</InputItem>
                  </li>
                  <li className={styles.require}>
                    <InputItem
                      type="text"
                      disabled={true}
                      value={this.state.postName}
                    >职务</InputItem>
                  </li>
                  <li className={styles.require}>
                    <InputItem
                      type="text"
                      disabled={true}
                      value={this.state.Orgwork}
                    >机构</InputItem>
                  </li>
                  <li className={styles.require}>
                    <InputItem
                      type="text"
                      disabled={true}
                      value={this.state.phone}
                    >手机号</InputItem>
                  </li>
                  <div className={css.QRcode}>
                    <div className={css.codeText}>上传二维码</div>
                    <div className={css.code}>
                      <Upload {...propsUpload2}>
                        {qrcode ?  (this.state.loading2 ? <Icon type="loading" /> : <img src={qrcode} alt="avatar" /> ) : uploadButton2 }
                      </Upload>
                    </div>
                  </div>
                  <div className={css.saveBtn} onClick={()=>{this.saveHandle()}}>
                    <img src={require("../../assets/image/baocun.png")} alt="" />
                  </div>
                </ul>
              </div>
            </div>
          </div>
      )
  }
}

export default connect(({BusinessCard})=>({BusinessCard}))(AddCardEditor);