<!-- 登陆 -->
<template>
	<view class="login-page">
		<view class="header">
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/logo.png" mode="" class="header-logo"></image>
			<view class="header-title">欢迎来到蜜丫妈妈</view>
		</view>
		<view class="phone">
			180****1927
		</view>
		<view class="login-btn">
			<view class="login-phone">本机号码一键登录</view>
			<view class="login-other" @click="otherLogin">其他手机登录</view>
		</view>
		<view class="agreement" @click="agreementClick">
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/select.png" mode="" class="agreement-select" v-if="agreementVisible"></image>
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/select-no.png" mode="" class="agreement-select" v-if="!agreementVisible"></image>
			我已阅读并同意<text class="agreement-txt">中国移动认证服务条款</text>和<text class="agreement-txt">《用户协议》</text>、<text class="agreement-txt">《隐私政策》</text>
		</view>
		<view class="wx-login" @click="login">
			<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/login/wx.png" mode="" class="wx-img"></image>
			<text class="wx-txt">微信登录</text>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/login/index"></page-popup>
	</view>
</template>

<script>
	const app = getApp();

	export default {
		data() {
			return {
				agreementVisible:false,//用户协议
			}
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		mounted() {

		},
		methods: {
			// 是否同意用户协议
			agreementClick(){
				this.agreementVisible = !this.agreementVisible;
			},
			otherLogin(){
				uni.navigateTo({
					url:`/pages/login/login`
				})
			},
			// 登陆
			login() {
				console.log("222")
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res)
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log("loginRes:",loginRes)
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											console.log("infoRes:",infoRes)
											let data = Object.assign(loginRes
												.authResult, infoRes);
										},
										fail: function(err) {
											uni.hideLoading();
											uni.showToast({
												icon: 'none',
												title: err
											})
										}
									});

								}
							})
						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: err
						})
					}
				})
				// uni.getProvider({
				// 	service: 'oauth',
				// 	success: function(res) {
				// 		//支持微信、qq和微博等
				// 		 if (~res.provider.indexOf('weixin')) {

				// 		 }
				// 	}
				// })
				// uni.switchTab({
				// 	url:"/pages/index/index"
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
.login-page{
	.header{
		width: 100%;
		height: 360rpx;
		background-color: #2D2D2D;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 74rpx 0 20rpx 0;
		.header-logo{
			width: 200rpx;
			height: 180rpx;
		}
		.header-title{
			font-size: 48rpx;
			color: #33E1D6;
			margin-top: 20rpx;
		}
	}
	.phone{
		font-size: 36rpx;
		color: #333333;
		font-weight: 800;
		text-align: center;
		margin-top: 152rpx;
	}
	.login-btn{
		margin-top: 136rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.login-phone{
			width: 432rpx;
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #70E3DE;
			border-radius: 52rpx;
			font-size: 36rpx;
			color: #000000;
			font-weight: 800;
		}
		.login-other{
			width: 432rpx;
			height: 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #74E2DB;
			background: #fff;
			border-radius: 52rpx;
			font-size: 36rpx;
			color: #73E2DE;
			font-weight: 800;
			margin-top: 30rpx;
		}
	}
	.agreement{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		padding: 36rpx 54rpx;
		font-size: 24rpx;
		color: #666666;
		.agreement-select{
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		.agreement-txt{
			color: #73E2DE;
		}
	}
	.wx-login{
		width: 100%;
		position: fixed;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.wx-img{
			width: 100rpx;
			height: 100rpx;
		}
		.wx-txt{
			font-size: 28rpx;
			color: #333;
			margin-top: 20rpx;
		}
	}
}
</style>
