<template>
	<view class="wrap">
		<view class="title">用户{{user}}您好！</view>
		<view class="inp">
		    <view class="tel">
		        <view class="iconfont tel_icon"></view>
		        <input type="number" placeholder="输入您的手机号码" placeholder-class="tel_place" v-model="phone"></input>
		    </view>
		    <view class="ma">
		        <view class="iconfont ma_icon"></view>
		        <input type="number" placeholder="输入验证码" placeholder-class="tel_place" v-model="code"></input>
		        <!-- 获取验证码 -->
		        <view :class="['getma',phone !== ''?'show':'hidden']" @tap="getsession">{{text}}</view>
		        <view :class="['session_time',timeShow === 1?'show':'hidden']">已发送{{session_time}}秒</view>
		    </view>
		</view>
		<button class="submit" @tap="submit">提交</button>
	</view>
</template>

<script>
	import api from "../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				user:'123',//用户昵称
				text:'获取验证码',//发送验证码按钮文字
				isShow: 0,//是否出现按钮
				timeShow:0,//是否出现验证码倒计时
				flag:true,//避免重复点击
				phone:'',//手机号
				code:'',//验证码
				sessionId:'',//验证码秘钥
				roleType:'',//用户身份  服务商  经销商
				session_time:60,//验证码倒计时
				timer:'',//清除定制器
				exist:'',//用户状态  入驻还是认领店铺
			}
		},
		onLoad(options) {
			this.roleType = options.roleType
		},
		/**
		   * 生命周期函数--监听页面隐藏
		   */
		onHide() {
		    clearInterval(this.timer)
		},
		
		  /**
		   * 生命周期函数--监听页面卸载
		   */
		onUnload() {
		    clearInterval(this.timer)
		},
		methods: {
			//点击发送验证码
			getsession(){
				let data = {
					phone:this.phone
				}
				if(this.flag){
					this.flag = false;
					api.getCode(data).then((res)=>{
						console.log(res);
						if(res.data.is){
							this.sessionId = res.data.data;
							this.isShow = 0;
							this.timeShow = 1;
							this.getSessionTime();
						}else{
							uni.showToast({
								title:res.data.data.msg
							})
							this.flag = true;
						}
					})
				}
			},
			//验证码60s倒计时
			getSessionTime(){
			    let session_time = this.session_time
			    this.timer = setInterval((res)=>{
			        session_time --;
					this.session_time = session_time;
			        if (session_time <= 0){
			          clearInterval(this.timer);
					  this.timeShow = 0;
					  this.isShow = 1;
					  this.session_time = 60;
					  this.text = '重新发送';
					  this.flag = true;
			        }
			    },1000)
			},
			//提交按钮
			submit(){
				let data={
				    phone:this.phone,
				    code:this.code,
				    sessionId: this.sessionId,
				    token: app.globalData.token,
				    roleType: this.roleType
				}
				if(data.phone == '' || data.code == ''){
					uni.showModal({
					    title: '不能为空',
					    content: '请补全信息',
					})
				}else{
					api.bindPhone(data).then((res)=>{
						console.log(res);
						if(res.is){
							let exist = res.data.data.exist;
							let phone = res.data.data.userInfo.phone;
							let roleType = this.roleType;
							if(exist == 1){
								console.log('认领店铺');
							}else{
								
							}
						}else{
							uni.showModal({
							    title: '绑定失败',
							    content:res.data.data.msg,
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	}
	.wrap{
	  width:100%;
	  height:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	}
	.title{
	  font-size: 36rpx;
	  color:#000000;
	  font-weight: bold;
	  margin:148rpx 0 0 48rpx;
	}
	.inp{
	  width:100%;
	  padding:0 44rpx 0 46rpx;
	  box-sizing: border-box;
	}
	.tel,.ma{
	  width:100%;
	  height:100rpx;
	  margin-top:82rpx;
	  border-bottom: 1px solid #f2f2f2;
	  box-sizing: border-box;
	  line-height: 100rpx;
	  position: relative;
	}
	.tel_icon,.ma_icon{
	  color:#C5C5C5;
	  font-size: 42rpx;
	  line-height: 100rpx;
	  float:left;
	}
	.tel input,.ma input{
	  display: inline-block;
	  width:60%;
	  height:100%;
	  padding-left:30rpx;
	  box-sizing: border-box;
	}
	.tel_place{
	  font-size: 30rpx;
	  color:#999999;
	}
	.ma{
	  margin-top:50rpx;
	}
	.getma{
	  width:180rpx;
	  height:70rpx;
	  background:rgba(242,242,242,1);
	  border-radius:36rpx;
	  text-align: center;
	  line-height: 70rpx;
	  color:#F08300;
	  font-size: 28rpx;
	  position: absolute;
	  right:0;
	  bottom:12rpx;
	  z-index:100;
	}
	.session_time{
	  width:180rpx;
	  height:70rpx;
	  background:rgba(242,242,242,1);
	  border-radius:36rpx;
	  text-align: center;
	  line-height: 70rpx;
	  color:#F08300;
	  font-size: 28rpx;
	  position: absolute;
	  right:0;
	  bottom:12rpx;
	  z-index:100;
	}
	.submit{
	  width:100%;
	  height:90rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:46rpx;
	  font-size: 32rpx;
	  color:#ffffff;
	  text-align: center;
	  line-height: 90rpx;
	  margin-top:120rpx;
	}
	.show{
	  display: block;
	}
	.hidden{
	  display: none
	}
</style>
