mh_jy_safe_web/src/components/MainPage/GuideCanvas.js

// 核心库
import React, { Component } from "react";
import { connect } from "dva";
import { withRouter } from "dva/router";
import QRCode from "qrcode";
import config from "../../config";

class GuideCanvas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: "none",
      company: "XLK",
    };
  }
  componentDidMount() {
    QRCode.toCanvas(
      config.guideSeverHost,
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        let container = document.getElementById("canvas1");
        if (container) {
          try {
            container.appendChild(canvas);
          } catch (e) { }
        }
      }
    );
    QRCode.toCanvas(
      config.guideH5Host,
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        let container1 = document.getElementById("canvas2");
        if (container1) {
          try {
            container1.appendChild(canvas);
          } catch (e) { }
        }
      }
    );
    QRCode.toCanvas(
      config.h5Web + "#/pages/index/index?OrgId=" + this.props.login.OrgId,  
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        let container1 = document.getElementById("canvas3");
        if (container1) {
          try {
            container1.appendChild(canvas);
          } catch (e) { }
        }
      }
    );

    // 二维码平台
    QRCode.toCanvas(
      config.h5Web+'?OrgId='+this.props.login.OrgId ,
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        let container = document.getElementById("canvas5");
        if (container) {
          try {
            container.appendChild(canvas);
          } catch (e) { }
        }
      }
    );
  }

  render() {
    return (
      <React.Fragment>
        <div style={{ display: "flex", flexDirection: "row", margin: "20px" }}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              marginRight: "30px",
            }}
          >
            <div id="canvas1" ></div>
            <b>APP下载</b>
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <div id="canvas2"></div>
            <b>手机登录</b>
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: "column",
              alignItems: "center",
              marginLeft: "30px",
            }}
          >
            <div id="canvas3"></div>
            <b>新员工注册</b>
          </div>
          
          <div
            style={{
              display: 'none',
              flexDirection: "column",
              alignItems: "center",
              marginLeft: "30px",
            }}
          >
            <div id="canvas5"></div>
            <b>二维码平台</b>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(GuideCanvas));