WECHAT-UNIAPP/pages/authen/login.vue

<template>
  <view class="container">
    {{error}}
    <image src="../../static/icon/login.png" mode="scaleToFill" class="icon"></image>
    <view class="content">
      <!--  #ifdef  MP-WEIXIN -->
      <button 
        open-type='getPhoneNumber' 
        @getphonenumber="getPhoneNumber"
        :loading="getPhoneNumberLoading"
        :disabled="getPhoneNumberLoading"
      >
        授权登录
      </button>
      <!--  #endif -->
      
      <!--  #ifdef  MP-ALIPAY -->
      <button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        授权登录
      </button>
      <!--  #endif -->
      <button type="default">手机登录</button>
      <text>登录即代表同意《隐私政策》和《用户服务协议》</text>
    </view>
  </view>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";


  export default {
    data() {
      return {
        code: '',
        getPhoneNumberLoading:false,
        error:''
      }
    },
    async onShow() {
      // 获得code有效码
      let [err, loginData] = await uni.login();
      this.code = loginData.code
    },
    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() {
      if(this.phoneNumber !== '' && this.openId !== '' && this.unionId !== '' ){
          uni.redirectTo({
            url:"/pages/index/index"
          })
          return 
      }
    },
    methods: {
      ...mapMutations({
        updateOpenId: "updateOpenId",
        updateUnionId: "updateUnionId",
        updateUserInfo: "updateUserInfo",
        updatePhoneNumber: "updatePhoneNumber",
        updateCountryCode: "updateCountryCode",
        updatePurePhoneNumber: "updatePurePhoneNumber",
        resetApplet: "resetApplet",
        clearUserAuthen:"clearUserAuthen"
      }),
      //#ifdef MP-ALIPAY
      getPhoneNumber(){
        this.getPhoneNumberLoading  = true;
        uni.showLoading({
          title: '获取中...',
          mask: true
        });
        my.getPhoneNumber({
            success:async (res) => {
                let encryptedData = res.response;
                const phoneStringData = await this.$Request({
                  url: "/alipayEncryptUserPhone",
                  method: "POST",
                  data:JSON.parse(encryptedData)
                })
                console.log('phoneString',phoneStringData)
                const phoneInfo = JSON.parse(phoneStringData.data)
                const phone = phoneInfo.mobile
                console.log(this.userInfo)
                this.updateUserInfo({
                  ...this.userInfo,
                  nickName:phone,
                })
                this.updatePhoneNumber(phone)
                console.log('userInfo',this.userInfo)
                uni.hideLoading();
                this.getPhoneNumberLoading  = false;
                uni.navigateBack({
                  delta:1
                }) 
            },
            fail: (e) => {
                uni.showToast({
                  // title: '请重新授权',
                  title: e.message,
                  icon:"error"
                })
                uni.hideLoading();
                this.getPhoneNumberLoading  = false;
            },
        });
      },
      //#endif
      //#ifdef MP-WEIXIN
      async getPhoneNumber(info) {
        this.getPhoneNumberLoading  = true;
        uni.showLoading({
          title: '获取中...',
          mask: true
        });
        
        if (info.detail.errMsg === "getPhoneNumber:ok") {
          try {
            // throw new Error("你好")
            // let loginDataArr = await uni.login();
            // this.code = loginDataArr[1].code
            const iv = info.detail.iv
            const encryptedData = info.detail.encryptedData
            const keyData = await this.$Request({
              url: "/getSessionKeyAndOpenID",
              method: "GET",
              data: {
                code: this.code,
                stationId: this.stationId
              }
            })
            console.log("keyData", keyData)
            if(keyData.retCode !== 0){
              throw new Error("获取加密数据失败")
            }
            const openId = keyData.data.openId
            this.updateOpenId(openId)
            const unionId = keyData.data.unionId
            this.updateUnionId(unionId)
            const sessionKey = keyData.data.sessionKey
            console.log(encryptedData,iv)
            const decryptData = await this.$Request({
              url: "/decryptEncryptedData",
              method: "POST",
              data: {
                sessionKey,
                encryptedData,
                iv
              }
            })
            console.log("decryptData", decryptData)
            if(decryptData.retCode !== 0){
              throw new Error("获取解密数据失败")
            }
            const phoneNumber = decryptData.data.phoneNumber // 全手机号
            // const countryCode = decryptData.data.countryCode // 区号
            // const purePhoneNumber = decryptData.data.purePhoneNumber // 不带区号的手机号
            
            this.updatePhoneNumber(phoneNumber)
            // this.updateCountryCode(countryCode)
            // this.updatePhoneNumber(purePhoneNumber)
            
            const AppUserInfoData = await this.$Request({
              url: "/addAppUserInfo",
              method: "POST",
              data: {
                "userType": "1",
                "openId": this.openId,
                "blogNickName": this.userInfo.nickName,
                "sexFlag": this.userInfo.gender === 1 ? 'M' : 'F',
                "blogProfilePhoto": this.userInfo.avatarUrl,
                "mobilePhone": this.phoneNumber,
                "stationId": this.stationId, //油站Id
                "unionId": this.unionId
              }
            })
            if (AppUserInfoData.retCode !== 0) {
              throw new Error("存入用户失败")
            }
            this.getPhoneNumberLoading = false
            uni.hideLoading();
            uni.navigateBack({
              delta:1
            })            
            // console.log(redirectData)
          } catch (e) {
            this.getPhoneNumberLoading = false
            uni.hideLoading();
            this.error = e.message;
            uni.showToast({
              // title: '请重新授权',
              title: e.message,
              icon:"error"
            })
            let [err, loginData] = await uni.login();
            this.code = loginData.code
            this.clearUserAuthen();            
          }
        } else {
          this.getPhoneNumberLoading = false
          uni.hideLoading();
          uni.showToast({
            title: '请授权登录~',
            icon:"error"
          })
        }
      },
      //#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;
      }

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

        button:nth-child(1) {
          width: 616rpx;
          height: 76rpx;
          background: linear-gradient(123deg, #12A273 0%, #12A273 100%);
          border-radius: 38rpx;
          font-size: 32rpx;
          color: #FFFFFF;
          line-height: 76rpx;
        }

        button:nth-child(2) {
          width: 616rpx;
          height: 76rpx;
          background-color: #f0f2f5;
          border-radius: 38rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.25);
          line-height: 76rpx;
        }

        text {
          margin-top: 42rpx;
          height: 36rpx;
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.5);
          line-height: 36rpx;
        }
      }
    }
  }
</style>