<template>
	<view class="content">
		<image class="logo" src="../../static/logo@3x.png"></image>
		
		<!-- <button v-show="!hasProfile" @click="getUserProfile">微信用户一键登录</button> -->
		<button v-show="hasProfile" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
	</view>
</template>
<script>
	import {weixin} from '../../../utils/weixin.js';
	export default {
		data(){
			return{
				hasProfile: true,
				openid: '',
				session_key: '',
				userInfo: {}
			}
		},
		onLoad(options) {
			this.getSessionKey()
		},
		methods: {
		  getUserProfile() {
			weixin.getUserProfile((userInfo) => {
				this.userInfo = userInfo
			    this.hasProfile = true
			})
		  },
		  getPhoneNumber(e) {
			if (e.detail.iv) {
			  weixin.getOpenidInfo(user_info => {
				  uni.request({
					url: this.baseUrl + '/api/member/get-phone-by-openid',
					method: 'POST',
					data: {
					  sessionKey: user_info.session_key,
					  iv: e.detail.iv,
					  encryptedData: e.detail.encryptedData,
					  openid: user_info.wechat_openid,
					},
					success: (r) => {
						if (r.data.status == 1) {
							uni.setStorageSync('phone_token', {phone: r.data.data.user_info.phone, token: r.data.data.access_token})
							uni.navigateBack()
						} else {
						  uni.showToast({title: r.data.msg, duration: 2000, icon: 'none'})
						}
					}
				  })
			  })
			}
		  },
		  getSessionKey() {
			wx.checkSession({
			  success () {
			  },
			  fail () {
				// session_key 已经失效，需要重新执行登录流程
				weixin.getOpenidInfo(openidInfo => {}, true)
			  }
			})
		  }
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo{
		display: block;
		width:250rpx;
		height:250rpx;
		margin:100rpx auto 0 auto;
	}
	.title{
		display: block;
		width:333rpx;
		height:44rpx;
		margin:40rpx auto 110rpx auto;
	}	
	button{
		width: 520rpx;
		height: 90rpx;
		background: #FF578A;
		font-size: 30rpx;
		line-height:90rpx;
		font-weight: bold;
		color: #FFFFFF;	
		margin-top:35rpx;
		border-radius:45rpx;
		vertical-align: middle;
	}
	button:active{
		background: #FF578A;
		color: #FFFFFF;	
	}
</style>
