flossom-miniapp/src/components/popup/popup-privacy.tsx

import classnames from "classnames";
import { Component } from "react";
import Taro from "@tarojs/taro";

import { Block, View, Button, PageMeta } from "@tarojs/components";

import { Popup } from "@antmjs/vantui";

import "./popup.less";

import { go } from "../../utils/traoAPI";

/*** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * isClose            是否显示关闭按钮
 * @closePrivacy           关闭回调
 * ***/

export default class PopupPrivacy extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "隐私组件",
      // isShowPrivacyPopup: true,
    };
  }

  componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount");
  }

  async initData() {}

  // showInit() {
  //   const isFirst = Taro.getStorageSync("isWelcome");
  //   if (isFirst) {
  //     this.checkShowPrivacyPopup();
  //   }
  // }
  // // 检测是否弹出隐私协议
  // checkShowPrivacyPopup() {
  //   Taro.getPrivacySetting({
  //     success: (res) => {
  //       // console.log("检测是否弹出隐私协议", res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
  //       if (res.needAuthorization) {
  //         this.setState({ isShowPrivacyPopup: true });
  //       } else {
  //         // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
  //         this.initData();
  //       }
  //     },
  //     fail: () => {},
  //     complete: () => {
  //       // 授权完成运行页面初始化
  //     },
  //   });
  // }

  onClose = () => {
    this.props.closePrivacy();
  };
  onPrivacyTap = () => {
    // 跳转用户隐私协议
    go("/pages/privacyPolicy/privacyPolicy");
  };
  onDisagreeTap = () => {
    // 关闭小程序
    Taro.exitMiniProgram({
      success: (res) => {
        console.log("exitMiniProgram", res);
      },
      fail: (err) => {
        console.log("exitMiniProgram err", err);
      },
      complete: (res) => {
        console.log("exitMiniProgram complete", res);
        this.onClose();
      },
    });
  };
  handleAgreePrivacyAuthorization = (event) => {
    // Taro.setStorageSync("isPrivacyPopup", "true");
    this.props.closePrivacy(); // 通知父组件关闭
    let isScan = Taro.getStorageSync("isScan");
    if (isScan) {
      go("/pages/register/register");
    }
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  render() {
    let { isShow, isClose, isLarge } = this.props;
    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
        >
          {isClose && (
            <View
              style="color:#fff;"
              className="at-icon at-icon-close common-close"
              onClick={this.onClose}
            ></View>
          )}

          <View className={classnames("common-box", "common-large")} catchMove>
            <View className="common-popup-title">用户隐私保护提示</View>
            <View className="common-popup-content-box">
              <View className="common-popup-content">
                感谢您使用花至FLOSSOM小程序，您使用小程序前应当阅读并同意
              </View>
              <View
                className="common-popup-content is-common"
                onClick={this.onPrivacyTap}
              >
                《用户隐私协议》
              </View>
              <View className="common-popup-content is-last">
                当您点击同意并开始使用小程序服务时，即表示您已理解并同意该条款内容，该条款内容将您产生法律约束力。如您拒绝，将无法使用小程序服务
              </View>
            </View>
            <View className="common-popup-btns">
              <Button
                className="common-popup-btn2"
                onClick={this.onDisagreeTap}
              >
                不同意并退出
              </Button>
              <Button
                className="common-popup-btn2"
                openType="agreePrivacyAuthorization"
                onAgreePrivacyAuthorization={
                  this.handleAgreePrivacyAuthorization
                }
              >
                同意并继续
              </Button>
            </View>
          </View>
        </Popup>
      </Block>
    );
  }
}