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) { }
        }
      }
    );
    if (this.props.login.OrgId == "b043b28b-bbc3-c452-6052-4fba1457abfa") {
      this.setState({ visible: "flex" })
      this.state.company = "XLK";
    } else if (this.props.login.OrgId == "d9871ba8-0eec-9e4a-bb87-7d5a540d8913") {
      this.state.company = "LYYL";
    } else if (this.props.login.OrgId == "8b3c41aa-51b1-7ce9-1879-248a038c1b5c") {
      this.state.company = "DCJD";
    } else if (this.props.login.OrgId == "8f1cf418-8bf3-ea3f-7a6d-fc5d61247008") {
      this.state.company = "LYXT";
    } else if (this.props.login.OrgId == "3efd5276-632b-e379-9ff3-7a7546591fca") {
      this.state.company = "GXBB";
    }
    QRCode.toCanvas(
      config.h5Web + "#/pages/apply/index?Company=" + this.state.company,  
      { 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: this.state.visible,
              flexDirection: "column",
              alignItems: "center",
              marginLeft: "30px",
            }}
          >
            <div id="canvas3"></div>
            <b>新员工注册</b>
          </div>
          
          <div
            style={{
              display: this.state.visible,
              flexDirection: "column",
              alignItems: "center",
              marginLeft: "30px",
            }}
          >
            <div id="canvas5"></div>
            <b>二维码平台</b>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

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