<template>
	<view class="login-page">
		<HeaderCom></HeaderCom>
		<view class="app-name">妙趣盲盒</view>
		<view class="main">
			<view class="item">
				<input type="text" placeholder="请输入您的手机号" class="input" placeholder-class="input-place" v-model="phone">
			</view>
			<view class="item">
				<input type="text" placeholder="请输入验证码" class="input" placeholder-class="input-place" v-model="code">
				<view class="code" @click="getCode">{{ countTime === 0 ? '获取验证码' : countTime + 's' }}</view>
			</view>
		</view>
		<view class="login" @click="loginSubmit">绑定手机号</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/login/bindPhone"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		smsSend,
		smsCheck,
		loginApi,
		loginCode,
		loginWechat,
		wechatAppid,
		phoneWechat,
		bindPhoneApi
	} from '@/API/login.js'
	import HeaderCom from '@/pages/components/header.vue'
	export default {
	mixins: [myMixins],
		data(){
			return{
				countTime: 0,//倒计时
				phone:'',
				code:'',
			}
		},
		components:{HeaderCom},
		methods:{
			// 获取验证码
			getCode() {
				if (this.countTime > 0) {
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				uni.showLoading()
				smsSend({
					username: this.phone
				}).then(res => {
					if (res.code === 200) {
						this.$api.msg('获取成功');
						this.countTime = 60;
						var id = setInterval(() => {
							this.countTime--;
							if (this.countTime === 0) {
								clearInterval(id);
							}
						}, 1000);
					} else {
						this.$api.msg(res.message);
					}
					console.log(res)
				}).catch(err => {
					this.$api.msg(err)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 登录
			loginSubmit() {
				if(!this.phone){
					this.$api.msg('请输入手机号');
					return;
				}
				if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
					this.$api.msg('请输入正确的手机号');
					return;
				}
				if (this.loginType === 'code' && !this.code) {
					this.$api.msg('请输入验证码');
					return;
				}
				uni.showLoading({
					title: "绑定中"
				})
				bindPhoneApi({
					phone: this.phone,
					code: this.code
				}).then(res => {
					console.log(res)
					this.$api.msg(res.message)
					if (res.code === 200) {
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack()
						},500)
					}else{
						uni.hideLoading()
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		
	}
	.login-page{
		background-image: url('@/static/new/login/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 200rpx;
		height: 100vh;
		.app-name{
			width: 320rpx;
			height: 128rpx;
			border-radius: 69%;
			border: 6rpx solid #000000;
			font-size: 64rpx;
			color: #000000;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main{
			width: 670rpx;
			margin: 120rpx 40rpx 0 40rpx;
			border-radius: 24rpx;
			padding: 0 32rpx;
			background-color: #fff;
			.item{
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F2F2F2;
				.input{
					font-size: 32rpx;
					color: #000;
				}
				.input-place{
					font-size: 32rpx;
					color: #CCCCCC;
				}
				.code{
					font-size: 32rpx;
					color: #0080FF;
				}
			}
			.border-none{
				border: none;
			}
		}
		.login{
			margin:48rpx 40rpx 0 40rpx;
			width: 670rpx;
			height: 96rpx;
			background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.agreement{
			margin: 40rpx;
			width: 670rpx;
			font-size: 24rpx;
			color: #666666;
			.agreement-icon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				vertical-align: middle;
			}
			.agreement-color{
				color: #0080FF;
			}
		}
		.wechat{
			position: fixed;
			bottom: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.wx-icon{
				width: 72rpx;
				height: 72rpx;
			}
			.wx{
				font-size: 24rpx;
				color: #000000;
				margin-top: 8rpx;
			}
		}
	}
</style>