<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 v-model="mobileCode" type="number" placeholder="请输入手机验证码" border="node" clearable
					fontSize="44rpx">
					<template #prefix>
						<text class="login_mobile_tips"></text>
					</template>
				</u-input>
			</view>
			<view class="login_mobile_Code" @tap="confirmLogin">
				<text>确认登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mySetStorage
	} from '@/utils/storage/index.js'
	export default {
		data() {
			return {
				mobileCode: '',
				bookTitle: '',
				bookSid: '',
				chapterorder: '',
				bookId: ''
			}
		},
		onLoad(options) {
			this.phone = options.phone;
			// this.bookTitle = options.t;
			this.bookSid = options.sid;
			this.chapterorder = options.c;
			this.bookId = options.i;
			this.toPath = options.to;
		},
		methods: {
			confirmLogin() {
				const bookSid = this.bookSid;
				const chapterorder = this.chapterorder;
				const bookId = this.bookId;
				const toPath = this.toPath;
				let toPathUrl = ''
				const toPathObj = {
					'1': `/pages/novelReading/novelReading?sid=${bookSid}&id=${bookId}&c=${chapterorder}`,
					'2':`/pages/myInfo/myInfo/index`
				}
				if (toPathObj[toPath]) {
					toPathUrl = `${toPathObj[toPath]}`
				} else {
					toPathUrl = `/pages/bookCity/bookCity/index`
				}

				const data = {
					phone: this.phone,
					code: this.mobileCode
				}
				uni.showLoading({
					title: '加载中...'
				});
				uni.$u.http.post('/Login', data).then((res) => {
					uni.hideLoading();
					const {
						token,
						uid
					} = res.data;
					if (res.status == 1) {
						mySetStorage('token', token);
						mySetStorage('uid', uid);
						uni.reLaunch({
							url: toPathUrl
						})
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			}
		}
	}
</script>

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

	// ::v-deep
	/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-color: #999999;
			}
		}
	}
</style>