lcoco/pages/login/localPhoneLogin.vue

<template>
  <view>
    <en-nav @navHeight="setNavHeight" ></en-nav>
    <view class="login-box" v-show="false" :style="{'height':'calc(100vh - '+navHeight+'px)'}">
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">登录/注册</text>
          <text class="title-item title-two sys-color-black sys-weight-600">更精彩</text>
        </view>
        <view class="local-txt sys-color-gray-9">本机号码登录</view>
        <view class="local-phone sys-color-black sys-weight-400">188****4188</view>
        <view class="login-but sys-color-white sys-background-black" @click="login">一键登录</view>
        <view @click="goToOther" class="other-phone sys-color-gray-6">其他手机号登录</view>
      </view>
      <view class="login-bottom">
        <other-login></other-login>
        <login-agreement :type="2"></login-agreement>
      </view>
    </view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import LoginAgreement from "@/pages/login/model/loginAgreement";
import OtherLogin from "@/pages/login/model/otherLogin";
import tools from "@/service/tools";
export default {
  name:'localPhoneLogin',
  components: {OtherLogin, LoginAgreement, EnNav},
  data() {
    return {
      navHeight:40
    }
  },
  onLoad(query) {
    this.getPhoneNum()
  },
  methods: {
    getPhoneNum(){
      let that=this
      uni.login({
        provider: 'univerify',
        univerifyStyle: {
          "fullScreen": true, // 是否全屏显示，默认值： false
          "backgroundColor": "#ffffff",  // 授权页面背景颜色，默认值：#ffffff
          "backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）
          "icon": {
            "path": "static/xxx.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
          },
          "closeIcon": {
            "path": "static/xxx.png" // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持
          },
          "phoneNum": {
            "color": "#202020"  // 手机号文字颜色 默认值：#202020
          },
          "slogan": {
            "color": "#BBBBBB"  //  slogan 字体颜色 默认值：#BBBBBB
          },
          "authButton": {
            "normalColor": "#141414", // 授权按钮正常状态背景颜色 默认值：#3479f5
            "highlightColor": "#141414",  // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
            "disabledColor": "#141414",  // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
            "textColor": "#ffffff",  // 授权按钮文字颜色 默认值：#ffffff
            "title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”
            "borderRadius": "24px"	// 授权按钮圆角 默认值："24px" （按钮高度的一半）
          },
          "otherLoginButton": {
            "visible": true, // 是否显示其他登录按钮，默认值：true
            "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
            "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
            "textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565
            "title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”
            "borderColor": "",  //边框颜色 默认值：透明（仅iOS支持）
            "borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
          },
          "privacyTerms": {
            "defaultCheckBoxState":true, // 条款勾选框初始状态 默认值： true
            "isCenterHint":false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
            "uncheckedImage":"", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
            "checkedImage":"", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
            "checkBoxSize":12, // 可选 条款勾选框大小，仅android支持
            "textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
            "termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3
            "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
            "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
            "privacyItems": [  // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
              {
                "url": "https://", // 点击跳转的协议详情页面
                "title": "用户服务协议" // 协议名称
              }
            ]
          }
        },
        success(res){ // 登录成功
          console.log(res.authResult);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
          that.cloudGetPhoneNum(res.authResult)
        },
        fail(res){  // 登录失败
          console.log(res)
          console.log(res.errCode)
          console.log(res.errMsg)
          that.goToOther()
        }
      })

    },
    cloudGetPhoneNum(authResult){
      tools.showLoading()
      uniCloud.callFunction({
        name: 'getPhoneNumber', // 你的云函数名称
        data: {
          'access_token': authResult.access_token,
          'openid': authResult.openid
        }
      }).then(res => {
        tools.hideLoading()
        console.log(res)
      }).catch(err=>{
        tools.hideLoading()
       tools.error('手机号码获取失败')
        setTimeout(()=>{
            this.goToOther()
        },1500)
      })
    },
    setNavHeight(navHeight){
      console.log('navHeight:'+navHeight)
      this.navHeight=navHeight
    },
    login(){
      uni.navigateTo({
        'url':'/pages/perfect/sexAndAge'
      })
    },
    goToOther(){
      uni.redirectTo({
        'url':'/pages/login/otherPhoneLogin'
      })
    }
  }
}
</script>

<style scoped lang="scss">

.login-box{
  padding: 82rpx 80rpx 0 80rpx;
  box-sizing: border-box;
  position: relative;
  .login-top{
    .login-title{
      padding-bottom: 60rpx;
      .title-item{
        font-size: 48rpx;
      }
      .title-two{
        margin-left: 30rpx;
      }

    }
    .local-txt{
      padding-bottom: 40rpx;
      font-size: 24rpx;
    }
    .local-phone{
      padding-bottom: 120rpx;
      font-size: 48rpx;
    }
    .login-but{
      border-radius: 200rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
    }
    .other-phone{
      padding-top: 60rpx;
     font-size: 28rpx;
      text-align: center;
    }
  }
  .login-bottom{
    padding-bottom: calc(62rpx + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0;
    left: 80rpx;
    width:calc(100vw - 160rpx);
  }


}

</style>