<template>
	<view class="login_content">
		<view class="login_content_bg" />
		<u-navbar :autoBack="true" bgColor="transparent" :safeAreaInsetTop="true" :placeholder="true" />
		<view class="login_content_body">
			<view class="login_title">手机验证码登录</view>
			<view class="login_tips">未注册的手机验证后自动创建账户</view>
			<view class="login_mobile">
				<u-input type="number" placeholder="请输入手机号码" border="node" clearable fontSize="44rpx" v-model="mobile">
					<template #prefix>
						<text class="login_mobile_tips">+86</text>
					</template>
				</u-input>
			</view>
			<view :class="[`login_mobile_Code`, mobile.length == 11 ? '' : 'active']" @tap="handelLoginCode">
				<text>获取验证码</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: "",
			};
		},
		methods: {
			handelLoginCode() {
				const mobile = this.mobile;
				if (mobile.length >= 11) {
					const data = {
						phone: mobile,
					}
					uni.showLoading({
						title: '加载中...'
					});
					// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
					uni.$u.http.post('/SendCode', data).then((res) => {
						uni.hideLoading();
						if (res.status == 1) {
							uni.navigateTo({
								url: `/pages/loginMobile/loginMobile?phone=${mobile}`
							})
						}
					}).catch((err) => {
						cosnole.log(err, "========")
						uni.hideLoading();
					})
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	// ::v-deep.u-input__content {
	/deep/.u-input__content {
		height: 116rpx;
		background-color: #fff;
		border-radius: 58rpx;
	}

	// ::v-deep.u-input--square {
	/deep/.u-input--square {
		padding: 0 !important;
	}

	.login_content {
		width: 100%;
		height: 100%;

		.login_content_bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 1056rpx;
			background: url("/static/images/login_bg.png") no-repeat;
			background-size: 100% 100%;
		}

		.login_content_body {
			position: relative;
			z-index: 2;
			width: 100%;
			padding: 40rpx 32rpx;
			box-sizing: border-box;

			.login_title {
				font-size: 56rpx;
				color: #1d242c;
				line-height: 1;
			}

			.login_tips {
				font-size: 28rpx;
				color: #524e5c;
				line-height: 1;
				margin-top: 32rpx;
			}

			.login_mobile {
				margin-top: 90rpx;

				.login_mobile_tips {
					margin: 0 32rpx;
					font-size: 44rpx;
					color: #1d242c;
				}
			}

			.login_mobile_Code {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 116rpx;
				line-height: 1;
				background: linear-gradient(to left, #f27e49, #f25a14);
				color: #fff;
				font-size: 40rpx;
				margin-top: 64rpx;
				border-radius: 58rpx;
			}

			.login_mobile_Code.active {
				background: #999999;
			}
		}
	}
</style>