joywok-material-components/components/shareQrcode/index.js

<h1 align="center"> Joywok Material Components </h1>

import React,{ Component }from 'react';
import { connect } from 'dva';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import copy from "copy-to-clipboard";
require('./style/index.css');

class ShareQrCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isCopyed: false
    };
  }
  handleCancel(){
    typeof(this.props.onClose)=='function'&&this.props.onClose()
  }
  // 复制链接
  // copyLink(datas){
  //   let self = this;
  //   console.log("11111111::::",datas.href)
  //   let oInput = document.createElement("input");
  //   oInput.value = datas.href;
  //   document.body.appendChild(oInput);
  //   oInput.select(); // 选择对象;
  //   document.execCommand("Copy"); // 执行浏览器复制命令
  //   console.log("22222222")
  //   this.setState({
  //     isCopyed: true
  //   })
  //   // oInput.remove();
  // }
  // 下载图片
  downloadImg(datas){
    var a = document.createElement('a');          // 创建一个a节点插入的document
    var url = datas.qrcode+'&down_flag=1&access_token='+window.jw_sid;  // 获取图片地址
    a.download = this.props.from + '-'+ this.props.name+'.png';
    // var event = new MouseEvent('click')           // 模拟鼠标click点击事件
    a.style.display = 'none';
    a.href = url;                                 // 将图片的src赋值给a节点的href
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  // onClick={(datas)=>this.copyLink(data)}
  render(){
    let data = this.props.data!=undefined&&this.props.data;
    let self = this;
    let clipboard = new ClipboardJS("#copy")
    clipboard.on("success", function(e) {
      self.setState({
        isCopyed: true
      })
    })
    clipboard.on("error", function(e) {
      console.log(e)
    })
    return(
      <Dialog
        open={this.props.open}
        onClose={() => this.handleCancel()}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        className="jw-share-qrcode-dialog"
        PaperProps={{
          style: {
            minWidth: '620px'
          }
        }}
      >
        <DialogTitle id="alert-dialog-title">
          {this.props.title || i18n('label.chorus.share.qrcode')}
          <i className="icon-close-export-list" onClick={() => this.handleCancel()}></i>
        </DialogTitle>
        <DialogContent className="jw-share-qrcode-content">
          <div className="jw-share-qrcode-link">
             <p className="title">{i18n('label.liveshow.share-link')}</p>
             <div className="link">
               <div className="left">
                 <span className="link-title">{i18n('label.link')}</span>
                 <span id="link-address" className={"link-address " +(this.state.isCopyed ? 'link-address-selected' : '')}>{data.href}</span>
               </div>
               <button id="copy" className={this.state.isCopyed ? 'copyed-btn' : ''} data-clipboard-target="#link-address" >{this.state.isCopyed ? i18n('label.liveshow.copy-succ') : i18n('label.liveshow.copy-link')}</button>
             </div>
             <p className="link-desc">{i18n('label.form.survey.share.link.desc').replace('{name}',data.client_name)}</p>
           </div>
           <div className="share-code-w">
             <p className="title">{i18n('label.liveshow.share-qrcode')}</p>
             <div className="share-code" id="share-code">
               <img className="share-code-img" src={data.qrcode+'&access_token='+window.jw_sid} />
               <p className="share-code-desc">{i18n('label.form.survey.share.qrcode.desc').replace('{name}',data.client_name)}</p>
             </div>
             <div className="download-btn" onClick={(datas)=>this.downloadImg(data)}>
               <i className="icon-download"></i>
             </div>
           </div>
        </DialogContent>
      </Dialog>
    )
  }
}

export default connect(function(state){ return state })(ShareQrCode);