<template>
	<view>
		<image src="@/static/bg.png" mode="widthFix" class="bg" style="width: 100%;height: 928rpx;"></image>
		<view class="top" @click="previous" :style="{'padding-top': top+'px'}">
			<view class="xuzou">
				<uni-icons type="left" size="22" style="margin-left: 25rpx;"></uni-icons>
				<text class="title">登录</text>
			</view>
			<image src="@/static/bg.png" mode="widthFix" class="hs"></image>
		</view>
		<view class="content" :style="{'top': (top+44)+'px'}">
			<image class="img" mode="widthFix" src="@/static/logo.png" ></image>
			<view class="store">运动湾24小时自助健身</view>
			<!-- <button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button> -->
			<!-- <button class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button> -->
			<view class="btn">手机号快捷登录
				<button v-if="isSelct" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
				<button v-else @click="login()"></button>
			</view>
			<view class="xieyi">
				<checkbox-group v-model="checkboxValue1" @change='change' >
					<label class="radio">
						<checkbox value="r1" color="#F8A617" />
						已阅读并同意
						<text class="xy" @click="yhxy('yonghu')">《服务协议》</text>
						与
						<text class="xy" @click="yhxy('yinsi')">《隐私协议》</text>

					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1:[],
				checked: false,
				wxcode: '',
				isSelct:false,
				top: 0
			}
		},
		onReady() {
			//新的标题
			uni.setNavigationBarTitle({
				title: '登录'
			})
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#fff',
			})
		},
		onLoad() {
			const that = this;
			that.top = uni.getSystemInfoSync().statusBarHeight
			uni.login({
				success(res) {
					console.log(787, res)
					that.wxcode = res.code
				}
			})

		},

		methods: {
			previous() {
				uni.navigateBack()
			},
			getUserInfo(e) {
				console.log(11111,e);
			    if (e.detail.userInfo) {
			      // 用户同意授权登录
			      const userInfo = e.detail.userInfo;
			      this.avatarUrl = userInfo.avatarUrl;
			      this.nickName = userInfo.nickName;
			      // 此处可以将用户信息发送到后端服务器保存
			    } else {
			      // 用户拒绝授权登录
			    }
			  },
			getPhoneNumber(e) {
				console.log(123, e);
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.request({
						url:this.ymurl+'/api/wxMinLogin',
						method: 'post',
						data: {
							code: this.wxcode,
							mobile_code: e.detail.code,
							avatar:''
						},
						success: (res) => {
							console.log(7871, res)
							if( res.data.code==200){
								// 获得token完成登录
								uni.setStorageSync('token', res.data.data.userToken)
								uni.navigateTo({
									url: "/pages/face/face"
								})
							}else{
								uni.showToast({
									icon: "none",
									title: res.data.msg,
									duration: 3000
								});
								const that = this;
								uni.login({
									success(res) {
										console.log(787, res)
										that.wxcode = res.code
									}
								})
							}
						},
					})
				}else{
					const that = this;
					uni.login({
						success(res) {
							console.log(787, res)
							that.wxcode = res.code
						}
					})
				}

			},
			yhxy(e) {
				uni.navigateTo({
					url: '/pages/user/userxy/userxy?xy=' + e
				})
			},
			change(e) {
				console.log(e);
				if(e.detail.value.length!=0){
					console.log(123);
					this.isSelct=true
				}else{
					this.isSelct=false
				}
			},
			login() {
				if (!this.isSelct) {
					uni.showToast({
						icon: "none",
						title: "请勾选用户协议"
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.bg{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		background: #f5f5f5;
	}
	.content{
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
		z-index: 2;
	}
	.top {
		width: 100%;
		left: 0;
		z-index: 22;
		top: 0;
		height: 88rpx;
		overflow: hidden;
		position: fixed;
	}
	.top .xuzou{
		width: 100%;
		height: 88rpx;
		display: flex;
		position: fixed;
		align-items: center;
		position: relative;
		z-index: 23;
	}
	.top .hs{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.xy {
		color: #F8A617;
	}

	.xieyi {
		text-align: center;
		margin-top: 67rpx;
		font-size: 26rpx;
		color: #666;
	}

	.img {
		width: 210rpx;
		height: 210rpx;
		margin: 250rpx auto 0;
		border-radius: 20rpx;
		display: block;
	}
	.store{
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		margin-top: 30rpx;
	}
	.btn {
		width: 630rpx;
		height: 98rpx;
		background: #F8A617;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(14, 94, 157, 0.4);
		border-radius: 49rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		position: relative;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		letter-spacing: 1px;
		margin: 0 auto;
		text-align: center;
		margin-top: 120rpx;
		button {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			opacity: 0;
		}
	}
</style>