uniapp用户登录的功能

效果图:

 

当用户点击了拒绝按钮后的弹窗:

 

 当用户点击了允许按钮后, 就跳转到用户登录成功的页面:

代码 :

<template>
    <div class="notlogin-wrap">
        <view class="notlogin">
            <view>
                <button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击登录</button>
            </view>
        </view>
    </div>
</template>

<script>
import { login } from '@/api/user'
export default {
    name: 'my-login',
    data() {
        return {
            avatar: '',
            mobile: '',
            nickname: '',
            token: '',
            username: ''
        }
    },
    methods: {
        getPhoneNumber(e) {
            var that = this
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                wx.login({
                    success(res) {
                        login({
                            encryptedData: encodeURIComponent(e.detail.encryptedData),
                            iv: encodeURIComponent(e.detail.iv),
                            code: uni.getStorageSync('code')
                        }).then(function (res) {
							console.log(res,'119192329ii49');
                            const data = res.data
                            console.log(data)
                            const { userinfo } = data
                            uni.setStorageSync('token', userinfo.token)
                            uni.setStorageSync('avatar', userinfo.avatar)
                            uni.setStorageSync('mobile', userinfo.mobile)
                            uni.setStorageSync('nickname', userinfo.nickname)
                            uni.setStorageSync('username', userinfo.username)
							 uni.setStorageSync('userId', userinfo.user_id)
                            that.$store.commit('saveUserInfo')
                            uni.reLaunch({
                                url: '/pages/my/my'
                            })
                        })
                    }
                })
            } else {
                //用户按了拒绝按钮
                wx.showModal({
                    title: '授权失败',
                    content: '您已拒绝获取绑定手机号登录授权,  请授权',
                    showCancel: true,
                    confirmText: '确定',
                    cancelText: '返回',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击了“返回授权”')
                        }
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss">
.notlogin-wrap {
    height: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.button {
    background-color: #df3535;
    width: 320rpx;
    // height: 88rpx;
    border-radius: 44rpx;
    border: 4rpx solid #fafafa;
    line-height: 88rpx;
    font-size: 44rpx;
    font-weight: bold;
    color: #ffffff;
}
</style>