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'
      }
    },
    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() {
        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');

        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
               })

            }
          }
        })
      },
      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>