<template>
	<view class="page">
		<view class="icon">
			<image src="../static/logo2.png" mode=""></image>
		</view>
			
		<view class="input">
			<input style="width: 90%;" type="text" value="" v-model="phone" placeholder="输入手机号"/>
			<view class="" style="display: flex;align-items: center;">
				<input type="text" value="" placeholder="输入验证码"/>
				<view class="">
				  	<u-code ref="uCode" @change="codeChange" seconds="60" :changeText="'x'"></u-code>
				  	<u--text :text="tips"  @tap="getCode" size="28" decoration="underline"></u--text>
				</view>
			</view>
		</view>
		
		
		<view class="submit" @click="gohome">
			完成
		</view>
	
		
		<view class="aggre">
			登录即代表您同意我们的
			<text class="underline">用户协议</text>和
			<text class="underline">隐私政策</text>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tips:"获取验证码",
				value: '',
				// 输入的验证码
				code:'1234',
				phone:"",
				verify_key:""
			}
		},
		methods:{
			codeChange(text){
			    this.tips = text;
			},
			 getCode() {
				 console.log("XXXXXXXXX",this.phone)
			    if (this.$refs.uCode.canGetCode) {
					uni.$u.http.post("/api/sms/send",{phone:this.phone}).then((res) => {
						console.log(res)
						uni.showLoading({
						     title: '正在获取验证码'
						})
						setTimeout(() => {
						    uni.hideLoading();
						    // 这里此提示会被this.start()方法中的提示覆盖
						    uni.$u.toast('验证码已发送');
						    // 通知验证码组件内部开始倒计时
						    this.$refs.uCode.start();
						}, 2000);
						this.verify_key=res.verify_key
					}).catch((err) => {
						console.log(err)
						// uni.showToast({
						// 	title: '',
						// 	icon:"none"
						// })
					})
			        // 模拟向后端请求验证码
			        
					
			        
			    } else {
			        uni.$u.toast('倒计时结束后再发送');
			    }
			},
			// 去首页
			gohome(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon:"none"
					})
						return false
				}
			
				uni.login({
					success: (res) => {
						// console.log(res)
					    if (res.code) { //微信登录成功 已拿到code  
							uni.$u.http.post("/api/login/code",{verify_key:this.verify_key,verify_code:this.code,code:res.code}).then((res) => {
								console.log(res)
								uni.setStorageSync('token', res.token)
								uni.setStorageSync('phone',this.phone)
								uni.showToast({
								 	title: '登录成功',
								 	icon:"success",
								 	duration: 1000
								})
								uni.reLaunch({
									url:"/pages/index/index"
								})
							}).catch((err) => {
								console.log(err)
								// uni.showToast({
								// 	title: '',
								// 	icon:"none"
								// })
							})
							console.log(res.code,"WXcode");
						} else {
							console.log('登录失败！' + res.errMsg)
					    }
					}
				})
				
				
			},
			change(e) {
			    console.log('change', e);
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
		color: #333333 ;
	}
	.page{
		margin: 40rpx;
	}
	.icon{
	text-align: center;
	margin: 120rpx auto 93rpx;
		image{
			width: 180rpx;
			height: 166rpx;
		}

	}
	.aggre{
		margin-top: 470rpx;
		text-align: center;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		font-size: 26rpx;
		.underline{
			text-decoration:underline;
			padding: 0 6rpx;
		}
	}
	.input{
		input{
			width: 448rpx;
			height: 72rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			margin: 38rpx 0;
			margin-right: 20rpx;
		}
	}
	.submit{
		margin: 108rpx auto 0;
		text-align: center;
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #1E9F6A;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		color: #ffffff;
	}
	
</style>
