<template>
	<view class="container">
	    <!-- 自定义顶部 -->
	    <view class="custom-header">
			<uni-icons type="left" size="40rpx" class="uni_back" @click="goBack"></uni-icons>
	      <view class="left-icon" @click="goBack">授权</view>
	      <view class="title"></view>
	    </view>
	
	    <!-- 页面内容 -->
	    <view class="content">
	      <view class="meisheng_first_aid">
	      	<image src="../../static/login/logo.png" mode=""></image>
	      </view>
		  <view class="con_btn">
		  	<button type="primary" @click="chooseAvatar">一键登录</button>
			<button type="default"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">暂不登录</button>				
		  </view>
		  <!-- 内部使用 -->
		  <view class="tips">
		  	<uni-icons type="info" size="35rpx" color="#5581FF" style="margin-right: 5rpx;height:30rpx;width: 30rpx;"></uni-icons><text>仅限内部人员使用</text>
		  </view>
	    </view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup_my">
				<view class="popup_my_title">
					<view class="title_name">
						<view class="title_name_icon">
							
						</view>
						智慧院前急救
					</view>
					<view class="title_icon">
						<uni-icons type="info" size="30" color="#A3C7AF"></uni-icons>
					</view>
				</view>
				<view class="popup_my_message">
					获取你的昵称.头像.地区及性别
				</view>
				<view class="popup_my_name">
					<view class="my_name_icon">
						<view class="my_name_img">
							
						</view>
						<view class="my_name_message">
							<view class="my_name_top">
								可可
							</view>
							<view class="my_name_bon">
								微信个人信息
							</view>
						</view>
					</view>
					
					<view class="my_name_ok">
						<uni-icons type="checkmarkempty" size="30" color="#A3C7AF"></uni-icons>
					</view>
				</view>
				<view class="popup_my_other">
					使用其他头像和昵称
				</view>
				<view class="popup_my_btn">
					<button type="default">拒绝</button>
					<button type="primary">允许</button>
				</view>
			</view>
		</uni-popup>
		<!-- <button @click="button">点击跳转首页</button> -->
	  </view>

</template>

<script>
	export default {
		data() {
			return {
				type:'',
				code:'',
				
			};
		},
		onmounted(){
			

		},
		 methods: {
			 button(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			 },
		    goBack() {
		      uni.navigateBack();
		    },
			// 一键登录
			chooseAvatar(){
				this.$refs.popup.open('bottom')
				uni.getUserProfile({
				  desc: '用于完善用户资料', // 授权说明
				  success:(res)=>{
					console.log(res,'res');
					// 在这里可以将用户信息保存到本地或者发送到服务器
					// uni.switchTab({
					// 	url:'/pages/home/index'
					// })
				  },
				  fail:(res)=>{
					console.log('用户拒绝授权获取个人信息');
				  }
				});
			},
			
			getPhoneNumber(e){
				console.log(e,'e');
			},
		  }
	}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  position: relative;
}

.custom-header {
  height: 77rpx;
  background-color: #fff;
  color: black;
  display: flex;
  align-items: center;
  padding-top: 10rpx;
}
.uni_back{
	margin-left: 25rpx;
}
.left-icon {
  font-size: 20rpx;
  color: #141414;
  // width: 59rpx;
  height: 29rpx;
  line-height: 29rpx;
  font-weight: 400;
  font-size: 30rpx;
}
.content{
	position: relative;
	.meisheng_first_aid{
		position: absolute;
		top: 300rpx;
		left: 273rpx;
		width: 205rpx;
		height: 158rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.con_btn{
		width: 447rpx;
		height: 239rpx;
		position: absolute;
		left: 134rpx;
		top: 614rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		button{
			width: 325rpx;
			height: 75rpx;
			border-radius: 35rpx;
			line-height: 75rpx;
			font-size: 20rpx;
			font-style: 400;
		}
	}
	//提示信息
	.tips{
		position: absolute;
		left: 230rpx;
		top:1100rpx;
		width: 250rpx;
		height: 60rpx;
		color: #5581FF;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.popup-content{
	height: 600rpx;
}
//弹出层
.popup_my{
	width: 749rpx;
	height: 701rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0rpx 0rpx ;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
	.popup_my_title{
		width: 669rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title_name{
			display: flex;
			font-weight: 400;
			font-size: 32rpx;
			color: #141414;
			.title_name_icon{
				width: 54rpx;
				height: 54rpx;
				background: #548DEB;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}
	.popup_my_message{
		width: 669rpx;
		height: 80rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #141414;
		border-bottom: 1rpx solid #ccc;
	}
	.popup_my_name{
		width: 669rpx;
		height: 90rpx;
		border-bottom: 1rpx solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 40rpx;
		.my_name_icon{
			display: flex;
			.my_name_img{
				width: 93rpx;
				height: 92rpx;
				background: #A3C7AF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 20rpx;
			}
		}
	}
	.popup_my_other{
		width: 669rpx;
		height: 60rpx;
		color: #548DEB;
		font-weight: 400;
		font-size: 32rpx;
	}
	.popup_my_btn{
		width: 669rpx;
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		button{
			width: 250rpx;
			height: 80rpx;
		}
	}
}
</style>