Uniapp obtains login authorization and mobile number authorization (sorting)

<template>
	<view>
		<view class="tx-w">
			<view class="tx">
				<image class="tx-img" :src="info.avatarUrl"></image>
				<view class="zx"></view>
			</view>
			<view class="name">{
    {
    info.nickName}} </view>
			<view class="name-qm"> Natural and beautiful , Yours </view>
		</view>
		
		<button @click="getUserProfile">  Get user information  </button>
		
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="login-but"> Get cell phone number </button>
		
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				info:[]
			}
		},
		onLoad(){
    
			let that = this;
			uni.login({
    
				provider: 'weixin',
				success: function(loginRes) {
    
					//  Get user information 				
					 console.log(loginRes.code)
				}
			});
		},
		methods: {
    
			getUserProfile() {
    
			    let that =this
			    uni.getUserProfile({
    
			        desc:" Used to improve user information ",
			        success: (res1) => {
    
			            that.info = res1.userInfo;
			            console.log(res1)
			            uni.showToast({
    
			                icon:"none",
			                title:' To be successful '
			            })
			        },
			        fail: (err) => {
    
			            console.log(err)
			            uni.showToast({
    
			                icon:"none",
			                title:' User refused to get '
			            })
			        }  
			    })
			},
			getPhoneNumber(e){
    
				console.log(e.detail)
			}

		}
	}
</script>

<style>
	.tx-w{
    
		margin-top:200upx;
	}
	
	.tx{
    
		text-align:center;
	}
	
	.tx image{
    
		width:140upx;
		height:140upx;
		border-radius: 50%;
	}
	
	.name{
    
		text-align:center;
		margin-top:20upx;
	}
	
	.name-qm{
    
		text-align:center;
		margin-top:20upx;
		font-size:30upx;
	}
</style>