xmhjc-applet/pages/myinfo/login.vue

<template>
	<view class="bg">

        <button
            class="btn"
            hover-class="button-hover"
            @click="login"
            :disabled="disabled"
            v-show="!showGetPhoenBtn"
        >
          微信登录  
        </button>
        <button class="btn" :disabled="disabledPhone" open-type="getPhoneNumber" v-show="showGetPhoenBtn"
        @getphonenumber="getPhoneNumber">授权手机号</button>

    </view>
</template>

<script>
import {
  login,bindphone
} from '@/http/api/common.js'
import env from "@/http/config/config.js"
import * as util from '@/pages/util/util.js'

export default {

data() {
    return {
        showGetPhoenBtn:false,
        disabled:false,
        disabledPhone:false,
    }
},
onLoad(e) {

},

methods: {
    async login(){
        //先去获取微信code
        await this.getWexinCode()
        if (uni.getStorageSync('wxcode')) {
            this.disabled = true
            let res = await login(uni.getStorageSync('wxcode'))
            console.log('获取微信登录',res);
            if (res.data.code == 200) {
                this.disabled = false
                uni.setStorageSync("AppAuthorization",res.data.data.token);
                //成功获取code 然后需要用户点击 获取手机号
                if (res.data.data.hasMobile == false) {
                    util.toastFunc('第一次登录请绑定手机号')
                    //判断是否绑定过手机号 如果false则去绑定
                    this.showGetPhoenBtn = true
                }else{
                    util.toastFunc('登录成功',()=>{
                        // 返回上一级
                        uni.navigateBack({
                            delta: 1
                        });
                    })
                }
            }else{
                this.disabled = false
            }
        }else{
            //先去获取微信code
            await this.getWexinCode()
        }
        
        
    },
    async getWexinCode(){
        let that = this
        uni.login({ 
            "provider": "weixin",
            "onlyAuthorize": true, // 微信登录仅请求授权认证
            success: function(event){
                const {code} = event
                //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
                uni.setStorageSync('wxcode',code)

            }
        })

    },
    // 获取用户手机号
	getPhoneNumber(e){
		console.log(e.detail)
		if(e.detail.errMsg == "getPhoneNumber:ok"){ // 用户允许或去手机号
            this.getphone(e.detail.code)
		}
	},
    async getphone(code){
        this.disabledPhone = true
        let res = await bindphone(code)
        console.log('获取手机号',res);
        if (res.data.code == 200) {
            this.disabledPhone = false
            util.toastFunc('登录成功',()=>{
                // 返回上一级
                uni.navigateBack({
                    delta: 1
                });
            })
        }else{
            this.disabledPhone = false
            util.toastFunc('绑定手机号失败，请重新操作')
        }
    },
			


}
}
</script>

<style lang="scss">
.bg{
    width: 750rpx;
    height: auto;
    min-height: 100vh;
    background: #F1F1F1;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.btn{
    width: 702rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;
    margin-top: 200rpx;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
}
</style>