<template>
	<view class="content">
		<view class="head">
			<image src="/static/image/login26_bg.png" mode="widthFix"></image>
		</view>
		<view class="title">
			<text class="name">Hello!</text>
			<text class="sub-name">欢迎登录云快充</text>
		</view>
		<view class="form-box">
			<button class="login-btn" :disabled="!aloneChecked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键注册登录</button>
			<view class="tip-link" style="display: flex; align-items: center">
				<up-checkbox shape="circle" name="agree" usedAlone @change="change"></up-checkbox>
				我已阅读并同意
				<text @click="toNav('/pages/agreement/agreement?id=9')">用户协议</text>
				和
				<text @click="toNav('/pages/agreement/agreement?id=10')">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { login } from '@/common/js/user.js';

let aloneChecked = ref(false);

let getPhoneNumber = async (e) => {
	if (!aloneChecked.value) {
		return uni.showToast({
			title: '请先阅读并同意用户协议和隐私政策',
			icon: 'none'
		});
	}
	try {
		login(e, 2);
		// let token = uni.getStorageSync('token');

		// if (!token) {
		// 	login(e, 2);
		// } else {
		// 	login();
		// 	uni.navigateBack();
		// }
	} catch (err) {
		uni.showToast({
			title: err,
			icon: 'none'
		});
	}
};

const toNav = (e) => {
	uni.navigateTo({
		url: e
	});
};

const change = (e) => {
	aloneChecked.value = e;
};
</script>

<style lang="scss">
page {
	background-color: #e9edf6;
}

.head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 30vh;
	z-index: -1;

	image {
		width: 100%;
		height: 100%;
	}
}

.title {
	padding-left: 80rpx;
	padding-top: 100rpx;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	height: 30vh;

	.name {
		font-size: 70rpx;
		line-height: 100rpx;
		font-weight: bold;
	}

	.sub-name {
		line-height: 80rpx;
		font-size: 45rpx;
		letter-spacing: 8rpx;
		font-weight: bold;
	}
}

.form-box {
	padding: 0rpx 80rpx;

	.row-input {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin: 50rpx 0rpx;

		image {
			margin: 0 25rpx;
			flex-shrink: 0;
			width: 31rpx;
			height: 35rpx;
		}

		input {
			font-size: 30rpx;
			flex: 1;
		}
	}

	.menu-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
	}

	.login-btn {
		margin-top: 250rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 12rpx;
		background-color: #819682;
		color: #f4f4f4;
		font-size: 30rpx;
		letter-spacing: 5rpx;
		box-shadow: 0rpx 5rpx 20rpx #94ac95;
	}

	.tip-link {
		display: flex;
		justify-content: center;
		letter-spacing: 3rpx;
		line-height: 150rpx;
		font-size: 26rpx;

		text {
			color: #57a2ee;
		}
	}
}
</style>
