react-app-shell/activity/src/views/feedback-report/component/share-btn.js

react打包脚本和example, 这里的版本请忽略

// 功能方法>>>引用:
import React, { Component } from 'react';

// 公用方法 配置项 接口 枚举>>>引用:
import * as tools from '@mmears/mmears-tools';
import { monitor } from '../../../utils';

// 样式>>>引用:
import styles from '../index.less';
/**
 * 分享按钮组件
 * */
export default class ShareBtn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mask: false
    };
  }

  /**
   * 根据url feedbacksharing字段判断是否是微信分享
   */
  renderSharePage = () => {
    const { qrCode } = this.props;
    const isShare = tools.getQueryString('feedbacksharing');
    const isWechat = tools.isWeChat();
    // 不是微信浏览器, 直接返回;
    if (!isWechat) return;
    if (isShare) {
      return (
        <div className={styles.content}>
          <img src={qrCode} title="课程反馈二维码" className={styles.qrcode} />
        </div>
      );
    }
    return (
      <div onClick={this.handleClickByOpenShare} className={styles.btn}>
        分享宝贝表现
      </div>
    );
  };

  /**
   * 渲染提示用户分享
   */
  renderShareBlock = () => {
    const { mask } = this.state;
    if (mask) {
      return (
        <div className={styles.mask} onClick={this.handleClickByCloseShare}>
          <span className={styles.icon}></span>
        </div>
      );
    }
    return null;
  };

  /**
   * 提示用户分享开启
   */
  handleClickByOpenShare = () => {
    monitor.log('', 'feedback >> 点击分享宝贝按钮');
    this.setState({
      mask: true
    });
    // 遮罩层显示不让页面滚动
    const scrY = window.scrollY;
    this.scroH = scrY;
    document.body.style.position = 'fixed';
    document.body.style.top = -scrY + 'px';
  };

  /**
   * 提示用户分享关闭
   */
  handleClickByCloseShare = () => {
    this.setState({
      mask: false
    });
    // 遮罩层消失页面可以滚动
    document.body.style.position = '';
    window.scrollTo(0, this.scroH);
  };

  render() {
    return (
      <div className={styles.shareContent}>
        {this.renderSharePage()}
        {this.renderShareBlock()}
      </div>
    );
  }
}