WECHAT-UNIAPP/pages/authen/identity.vue

<template>
  <view class="container">
    <image src="../../static/icon/login.png" mode="scaleToFill" class="icon"></image>
    <view class="hr"></view>
    <view class="content">
      <text>申请获取以下权限</text>
      <text>获得你的公开信息（昵称、头像、地区等）</text>
    </view>
    <!--  #ifdef  MP-WEIXIN -->
    <button :loading="getUserInfoLoading" :disabled="getUserInfoLoading" @click="getUserInfo">
      授权获取
    </button>
    <!--  #endif -->

    <!--  #ifdef  MP-ALIPAY -->
    <button :loading="getUserInfoLoading" :disabled="getUserInfoLoading" open-type="getAuthorize" scope="userInfo"
      @getAuthorize="getUserInfo" @onError="onAuthError">
      支付宝授权获取
    </button>
    <button  @click="getCode">
      code获取
    </button>
    <button  @click="getCode" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      手机号获取
    </button>
    
    <!--  #endif -->
    

  </view>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";

  export default {
    data() {
      return {
        code: '',
        getUserInfoLoading: false
      }
    },
    created() {
      if (store.state.userInfo.nickName !== undefined) {
        uni.redirectTo({
          url: "/pages/authen/login"
        })
        return
      }
    },
    computed: {
      // ...mapState(["appId", "stationId", "phoneNumber", "countryCode", "purePhoneNumber", "openId", "unionId",
      //   "userInfo"
      // ]),
      // ...mapState({
      //   appId: state => state.appId,
      //   phoneNumber: state => state.user.phoneNumber,
      //   // countryCode: state => state.user.countryCode,
      //   // purePhoneNumber: state => state.user.purePhoneNumber,
      //   openId: state => state.user.openId,
      //   unionId: state => state.user.unionId,
      //   userInfo: state => state.user.userInfo,
      //   stationId: state => state.station.stationId,
      // }),
    },
    async created() {
      let [err, loginData] = await uni.login();
      this.code = loginData.code
    },
    methods: {
      getPhoneNumber(){
        my.getPhoneNumber({
            success: (res) => {
                let encryptedData = res.response;
                  console.log(encryptedData)
            },
            fail: (res) => {
                console.log(res);
                console.log('getPhoneNumber_fail');
            },
        });

      },
      getCode(){
        my.getAuthCode({
          scopes: ['auth_user',"auth_base","auth_zhima"],
         // 主动授权：auth_user，静默授权：auth_base。或者其它scope。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
          success: (res) => {
            console.log(res)
          //   if (res.authCode) {
          //     // 认证成功
          //     // 调用自己的服务端接口，让服务端进行后端的授权认证，并且利用session，需要解决跨域问题
          //     my.request({
          //       url: 'https://isv.com/auth', // 该url是您自己的服务地址，实现的功能是服务端拿到authcode去开放平台进行token验证
          //       data: {
          //         authcode: res.authCode,
          //       },
          //       success: () => {
          //         // 授权成功并且服务器端登录成功
          //       },
          //       fail: () => {
          //         // 根据自己的业务场景来进行错误处理
          //       },
          //     });
          //   }
          },
        });
        
      },
      test(res) {
        console.log("你好")
        console.log(res)
      },
      ...mapMutations({
        updateUserInfo: "updateUserInfo",
        clearUserInfo: "clearUserInfo"
      }),
      async getUserInfo(res) {
        let userInfo = undefined
        //#ifdef MP-WEIXIN
        try {
          this.getUserInfoLoading = true;
          uni.showLoading({
            title: '获取中...',
            mask: true
          });
          const profileData = await wx.getUserProfile({
            lang: "zh_CN",
            desc: "更好的消费推送体验"
          })
          userInfo = profileData.userInfo
  
          userInfo = {
            nickName:userInfo.nickName,
            avatarUrl:userInfo.avatarUrl,
            gender:userInfo.gender
          }
          this.updateUserInfo(userInfo)
          this.getUserInfoLoading = false
          uni.hideLoading();
          const [redirectErr, redirectData] = await uni.redirectTo({
            url: "/pages/authen/login"
          })
        } catch (e) {
          this.getUserInfoLoading = false
          uni.hideLoading();
          uni.showToast({
            title: '请重新授权~',
            icon:"error"
          })
          this.clearUserInfo()
        }
        //#endif
        
        
        //#ifdef MP-ALIPAY
        my.getOpenUserInfo({
          fail: (res) => {},
          success: (res) => {
            let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response0
            console.log(userInfo);
          },
        });
        //#endif
        
        // //#ifndef 
        // uni.showToast({
        //   title: '暂时只支持微信和支付宝小程序'
        // })
        // //#endif
      },

    },
    onLoad() { //默认加载
    }
  }
</script>
<style lang="scss">
  page {
    width: 750rpx;
    background-color: #f0f2f5;
    min-height: 100vh;

    .container {
      text-align: center;

      .icon {
        margin-top: 414rpx;
        width: 508rpx;
        height: 388rpx;
        margin-top: 180rpx;
        display: inline-block;
      }

      .hr {
        margin-top: 120rpx;
        display: inline-block;
        width: 618rpx;
        height: 2rpx;
        box-sizing: border-box;
        border: 1rpx solid rgba(0, 0, 0, 0.1);
      }

      .content {
        margin-top: 90rpx;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;

        width: 616rpx;

        text:nth-child(1) {
          height: 44rpx;
          font-size: 32rpx;
          color: #000000;
          line-height: 44rpx;
          text-align: left;
        }

        text:nth-child(2) {
          height: 44rpx;
          font-size: 28rpx;
          text-align: left;
          color: rgba(0, 0, 0, 0.25);
          line-height: 44rpx;
        }
      }

      button {
        margin-top: 90rpx;
        display: inline-block;
        width: 616rpx;
        height: 76rpx;
        background: linear-gradient(123deg, #12A273 0%, #12A273 100%);
        border-radius: 38rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 76rpx;
      }
    }
  }
</style>