EveryLike/pages/API/get-univerify-manager/univerify-custom-page.uvue

<template>
  <view class="container">
    <view class="safe_content">
      <text class="close_icon" @click="closePage">{{closeIcon}}</text>
      <text class="title">这是一个普通uvue的dialogPage页面</text>
      <view class="number">
        <text id="number-text" class="number-text" ref="number-text">{{phone}}</text>
        <text id="slogan-text" class="slogan-text">{{slogan}}</text>
      </view>
      <button id="login-button" class="login-button" @click="loginIn">本机号码一键登录</button>
      <view class="privacy">
        <checkbox id="privacy-checkbox" class="privacy-checkbox" ref="privacy-checkbox" :checked="false"></checkbox>
        <text class="privacy-normal-text">登录即同意</text>
        <text id="privacy-text" class="privacy-text" @click="openLink">{{privacyName}}</text>
      </view>
      <text class="other" @click="otherLogin">其他登录方式</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        uniVerifyManager: null as UniVerifyManager | null,
        phone: '',
        slogan: '',
        privacyName: '',
        privacyUrl: '',
        closeIcon: '\uE650',
        isLoading: false //是否正在登录中
      }
    },
    onLoad(options : OnLoadOptions) {
      this.uniVerifyManager = uni.getUniVerifyManager();
      this.phone = options['phone'] as string;
      this.slogan = options['slogan'] as string;
      this.privacyName = options['name'] as string;
      this.privacyUrl = options['link'] as string;
    },
    methods: {
      closePage() {
        uni.closeDialogPage({
          dialogPage: this.$page,
          animationType: 'slide-out-bottom',
          success(res) {
            console.log('closeThisDialog success', res)
          },
          fail(err) {
            console.log('closeThisDialog fail', err)
          }
        })
      },
      openLink() {
        let url = '/pages/API/get-univerify-manager/full-webview-page?url=' + this.privacyUrl + '&title=' + this.privacyName + '&animationType=slide-out-bottom';
        uni.openDialogPage({
          url: url,
          animationType: 'slide-in-bottom',
          success(res) {
            console.log("打开隐私协议");
          },
          fail(err) {
            console.log(err);
          }
        })

      },
      loginIn() {
        if (this.isLoading) {
          uni.showToast({
            title: "正在登录中，请稍后",
            position: "bottom",
            duration: 2000
          })
          return;
        }else{
          this.isLoading = true;
        }
        const numberTextElement = this.$page.getElementById('number-text');
        const sloganTextElement = this.$page.getElementById('slogan-text');
        const loginButtonElement = this.$page.getElementById('login-button');
        const privacyCheckBoxElement = this.$page.getElementById('privacy-checkbox');
        const privacyTextElement = this.$page.getElementById('privacy-text');
        if (numberTextElement != null && sloganTextElement != null && loginButtonElement != null && privacyCheckBoxElement != null && privacyTextElement != null) {
          this.uniVerifyManager?.customLogin({
            numberTextElement: numberTextElement,
            sloganTextElement: sloganTextElement,
            loginButtonElement: loginButtonElement,
            privacyCheckBoxElement: privacyCheckBoxElement,
            privacyTextElement: privacyTextElement,
            success: (res) => {
              console.log(res);
              this.takePhoneNumber(res.accessToken, res.openId);
            },
            fail: (error) => {
              if (error.errCode == 40001) {
                uni.showToast({
                  title: "请同意服务条款",
                  position: "bottom",
                  duration: 2000
                })
              } else if (error.errCode == 40002) {
                uni.showToast({
                  title: "授权页不符合规范",
                  position: "bottom",
                  duration: 2000
                })
              } else {
                const errorMsg = JSON.parseObject(error.cause?.cause?.message ?? "")?.getString("errorDesc") ?? error.errMsg;
                uni.showToast({
                  title: errorMsg,
                  position: "bottom",
                  duration: 2000
                })
              }
            },
            complete: () =>{
              this.isLoading = false;
            }
          })
        } else {
          uni.showToast({
            title: "未获取到页面元素",
            position: "bottom",
            duration: 2000
          })
          this.isLoading = false;
        }

      },
      takePhoneNumber(token : string, openId : string) {
        //云函数取号
        uniCloud.callFunction({
          name: 'univerify',
          data: {
            access_token: token, // 客户端一键登录接口返回的access_token
            openid: openId // 客户端一键登录接口返回的openid
          }
        }).then(res => {
          // 关闭登录页
          this.closePage();
          setTimeout(() => {
            uni.showModal({
              title: '取号成功',
              content: res.result.getJSON("res")?.getString("phoneNumber"),
              showCancel: false
            });
          }, 100);
        }).catch(err => {
          console.error(JSON.stringify(err));
          // 关闭登录页
          this.closePage();
          setTimeout(() => {
            uni.showModal({
              title: '取号失败',
              content: (err as Error).message,
              showCancel: false
            });
          }, 100);
        });
      },
      otherLogin() {
        //此处可实现其他登录方式
        uni.showToast({
          title: "使用其他方式登录",
          position: "bottom"
        })
      }
    }
  }
</script>

<style>
  .container {
    background-color: white;
    flex: 1;
    width: 100%;
  }

  .safe_content {
    padding-top: var(--status-bar-height);
    width: 100%;
    height: 100%;
  }

  .close_icon {
    left: 90%;
    top: 15px;
    font-family: uni-icon;
    font-size: 24px;
    /* font-weight: bold; */
  }

  .title {
    align-self: center;
    top: 20px;
  }

  .number {
    width: 100%;
    top: 25%;
    position: absolute;
    height: 120px;
  }

  .number-text {
    width: 100%;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    align-self: center;
    height: 30px;
  }

  .slogan-text {
    margin-top: 10px;
    width: 100%;
    font-size: 13px;
    text-align: center;
    align-self: center;
    color: gray;
    height: 20px;
  }

  .login-button {
    width: 80%;
    top: 40%;
    position: absolute;
    align-self: center;
    background-color: orangered;
    font-size: 16px;
    color: white;
  }

  .privacy {
    margin-top: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    top: 45%;
    width: 100%;
    justify-content: center;
    align-self: center;
    position: absolute;
  }

  .privacy-checkbox {
    transform: scale(0.65);
  }

  .privacy-text {
    margin-top: 4px;
    color: #007aff;
    font-size: 14px;
  }

  .privacy-normal-text {
    margin-top: 4px;
    color: gray;
    font-size: 14px;
  }

  .other {
    bottom: 7%;
    transform: translateY(50%);
    position: absolute;
    align-self: center;
    font-size: 14px;
  }
</style>