flossom-miniapp/src/pages/register/register.tsx

import { Component, PropsWithChildren, useEffect, useState } from "react";

import Taro from "@tarojs/taro";
// 引入 Swiper, SwiperItem 组件
import {
  View,
  Text,
  Image,
  Button,
  Video,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "./register.less";

import {
  UserAgreement,
  WCUserLogin,
  UserPrivacyAgreement,
  GetUserMobile,
  UserInfoRegister,
  MpLoginDetail,
} from "../../utils/Interface";
import { compareVersion, formatRichText } from "../../utils/util";
import { go, loading, msg } from "../../utils/traoAPI";

const app = Taro.getApp();

export default class Register extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "注册",
      style:
        "width:calc(100% - 100rpx);background:#fff;border-radius: 20rpx;box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.1); height: 800rpx; padding: 30rpx;",
      titleHeight: "",
      menu: {},
      isChecked: false,
      isRegister: false,
      isShow: false,
      userAgreement: "",
      policy: "",
      bg: "",
      showPrivacyPopup: false,
      showPrivacyContent: false,
      skipby: "",
      fromUrl: "",
    };
  }

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // this.checkPrivacy();
    // if(options.fromUrl) {
    //     this.setData({
    //         fromUrl: options.fromUrl
    //     })
    // }
    // if (options.skipby) {
    //     this.setData({
    //         skipby: options.skipby
    //     })
    // }
    // if (!app.globalData.token) {
    //     await this.WCUserLogin();
    // }
    // that = this;
    // const menu = wx.getMenuButtonBoundingClientRect();
    // const titleHeight = 'height:' + (Number(menu.top) + Number(menu.height) + 10) + 'px;';
    // this.setData({titleHeight, menu});
    // await this.getBg()
  }

  onSkip() {
    Taro.switchTab({
      url: "/pages/index/index",
    });
  }

  onSkipTap() {
    app.globalData.bindCodeSkipRegister = true;
    this.onSkip();
  }

  checkPrivacy() {
    const res = compareVersion("2.32.3");
    const that = this;
    if (res >= 0) {
      // 弹出弹窗
      Taro.getPrivacySetting({
        success: (res) => {
          if (res.needAuthorization) {
            that.setState({
              showPrivacyPopup: true,
            });
            app.globalData.needAuthorization = true;
          }
        },
        fail: (err) => {},
        complete: (res) => {},
      });
    }
  }

  onDisagreeTap() {
    // 关闭小程序
    Taro.exitMiniProgram({
      success: (res) => {},
      fail: (err) => {},
      complete: (res) => {},
    });
  }
  async onPrivacyTap() {
    // 打开隐私协议
    go("/pages/xieyi1/xieyi1");
  }
  onClosePrivacyContentPopup() {
    this.setState({
      showPrivacyContent: false,
    });
  }
  handleAgreePrivacyAuthorization() {
    this.setState({
      showPrivacyPopup: false,
    });
    app.globalData.needAuthorization = false;
  }

  async getBg() {
    const { data } = await MpLoginDetail();
    if (data.code === 200) {
      this.setState({ bg: data.data.data.image });
    }
  }

  onCheck() {
    const { isChecked } = this.state;
    this.setState({ isChecked: !isChecked });
  }

  onSubmit(event) {
    // if (event.detail.errMsg !== 'getPhoneNumber:ok') return msg('获取失败');
    const { encryptedData, iv } = event.detail;
    Taro.login({
      success: ({ code }) => {
        this.onUpdateMobile({ encryptedData, iv, code });
      },
    });
  }

  onUpdateMobile(data) {
    // GetUserMobile(data).then((res) => {
    //   msg("授权成功");
    //   const mobile = res.data.data.list.phoneNumber;
    //   loading("注册中");
    //   UserInfoRegister({ mobile }).then((res) => {
    //     if (res.data.code === 200) {
    //       this.setState({ isRegister: true });
    //       setTimeout(() => {
    //         this.onCloseRegister();
    //       }, 2000);
    //     }
    //   });
    // });
  }

  onCloseRegister() {
    if (!this.state.isRegister) return;
    this.setState({ isRegister: false });
    if (this.state.fromUrl) {
      const url = this.state.fromUrl;
      this.setState({
        fromUrl: "",
      });
      Taro.redirectTo({
        url: decodeURIComponent(url),
      });
    } else {
      go("/pages/userInfo/userInfo");
    }
  }

  onClosePopup() {
    this.setState({ isShow: false, userAgreement: null, policy: null });
  }

  async onPopup(event) {
    const { type } = event.target.dataset;
    const request =
      type === "agreement"
        ? await UserAgreement()
        : await UserPrivacyAgreement();
    const { data } = request;
    if (data.code === 200) {
      this.setState({
        userAgreement: data.data.data?.user_agreement?.value
          ? formatRichText(data.data.data?.user_agreement?.value)
          : null,
        policy: data.data.data?.user_privacy_agreement?.value
          ? formatRichText(data.data.data?.user_privacy_agreement?.value)
          : null,
        isShow: true,
      });
    }
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {}

  render() {
    let { name } = this.state;
    let bg = "";
    let skipby = "";
    let isChecked = false;
    return (
      <View>
        <View style="background:#fff;" className="nav">
          <View className="nav_box">
            <View className="logo">
              <Image src="https://oss.flossom.com/logo2.png" mode="widthFix" />
            </View>
          </View>
        </View>
        <View></View>
        <View className="main">
          <Image className="bg" src={bg} mode="aspectFill"></Image>
        </View>
        <View className="footer">
          <View className="title">注册登录</View>
          <View className="content">
            请自行阅读花至小程序
            <Text onClick={this.onPopup} data-type="agreement">
              《用户协议》
            </Text>
            、
            <Text onClick={this.onPopup} data-type="policy">
              《隐私政策》
            </Text>
            ，并完成注册登录
          </View>
          <Button
            style={{ opacity: isChecked ? 1 : 0.6 }}
            type="primary"
            disabled={!isChecked}
            open-type="getPhoneNumber"
            className="btn_login"
            onGetPhoneNumber={this.onSubmit}
          >
            快速登录
          </Button>
          {skipby !== "bindCode" ? (
            <View className="checked_box">
              <Image
                onClick={this.onCheck}
                className="icon"
                src={require("../../img/welcome/checked.png")}
              ></Image>
              <View className="tips">
                我已阅读并同意《用户协议》和《隐私政策》
              </View>
            </View>
          ) : (
            ""
          )}

          <Image
            className="close"
            mode="widthFix"
            src={require("../../img/close.png")}
            onClick={this.onSkip}
          ></Image>
        </View>

        {skipby == "bindCode" ? (
          <View className="skip_footer_box">
            <View className="checked_box">
              {isChecked ? (
                <Image
                  onClick={this.onCheck}
                  className="icon"
                  src={require("../../img/welcome/checked.png")}
                ></Image>
              ) : (
                <Image
                  onClick={this.onCheck}
                  className="icon"
                  src={require("../../img/welcome/unchecked.png")}
                ></Image>
              )}

              <View className="tips">
                我已阅读并同意《用户协议》和《隐私政策》
              </View>
            </View>
            <View className="skip_footer">
              <Button
                style="opacity: {{ isChecked ? 1 : .6 }}"
                type="primary"
                disabled={!isChecked}
                open-type="getPhoneNumber"
                className="skip_foorer_autoBtn"
                onGetPhoneNumber={this.onSubmit}
              >
                快速登录
              </Button>
              <View className="skip_foorer_btn" onClick={this.onSkipTap}>
                跳过{" "}
              </View>
            </View>
          </View>
        ) : (
          ""
        )}
      </View>
    );
  }
}