<template>
	<view class="page">
		<u-navbar :title="txts" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
        <view class="" v-if="flagedit">
        	<view class="phone">
        		当前绑定的手机号码为 <text style="font-weight: 600;">+86 158****1231</text>
        	</view>
        	<view class="val" style="margin-top: 64rpx;">
        		<view class="lt">
        			+86
        		</view>
        		<input type="text" placeholder="输入新的手机号" />
        	</view>
        	<view class="val" style="display: flex;justify-content: space-between;">
        		<input type="text" placeholder="输入验证码" />
        		<view class="rt" v-if="countdown == 60" @click="btnhuoqu">
        			获取验证码
        		</view>
        		<view v-else class="rt">
        			{{countdown}}秒后重发
        		</view>
        	</view>
        	<view class="btn" @click="btnqd">
        		确定
        	</view>
        </view>
		<view class="" v-if="flagbang">
			<view class="" style="font-weight: 600;font-size: 60rpx;color: #3D3D3D;margin-top: 64rpx;padding-left: 50rpx;box-sizing: border-box;">
				绑定您的手机号码
			</view>
			<view class="phone" style="padding-left: 50rpx;box-sizing: border-box;text-align: left;">
				输入您的手机号码以便重置密码
			</view>
			<view class="val" style="margin-top: 64rpx;">
				<view class="lt">
					+86
				</view>
				<input type="text" placeholder="输入新的手机号" />
			</view>
			<view class="val" style="display: flex;justify-content: space-between;">
				<input type="text" placeholder="输入验证码" />
				<view class="rt" v-if="countdown == 60" @click="btnhuoqu">
					获取验证码
				</view>
				<view v-else class="rt">
					{{countdown}}秒后重发
				</view>
			</view>
			<view class="btn" @click="btnbangqd">
				确定
			</view>
		</view>
		<!-- 更换手机号成功 -->
		<view class="mask" v-if="flagcg">
			<image src="https://api.ccttiot.com/smartmeter/img/static/ubM8WKM9v1sb9v7sdumx" mode="aspectFit"></image>
			<view class="ghcg">
				更换成功!
			</view>
			<view class="wzd" @click="btnwzdl">
				我知道了
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #8883F0",
				},
				countdown: 60, 
				timer: null,
				flagbang:false,
				flagedit:false,
				flagcg:false,
				txts:''
			}
		},
		onLoad(option) {
             if(option.txt == '未绑定'){
				 this.flagbang = true
				 this.txts = '绑定手机号'
			 }else{
				 this.flagedit = true
				  this.txts = '更换手机号'
			 }
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		onShow() {
			
		},
		onUnload() {
		    // 页面卸载时清除定时器，防止内存泄漏  
		    clearInterval(this.timer);  
		},  
		methods: {
			getlist(){
				this.$u.get('/app/abnormal/list?pageNum=' + this.pagenum + '&pageSize='+this.pagesize + '&keyword='+this.keyword).then((res) => {
					if (res.code == 200) {
						
					}
				})
			},
			// 验证码倒计时
			startCountdown() {
			      this.timer = setInterval(() => {  
			        if (this.countdown > 0) {  
			          this.countdown--
			        } else {  
			          clearInterval(this.timer); // 倒计时结束，清除定时器  
			          this.countdown = 60
			      }  
			    }, 1000); // 每秒更新一次  
			}, 
			// 点击获取验证码
			btnhuoqu(){
				this.startCountdown()
			},
			// 点击更改确定
			btnqd(){
				this.flagedit = false
				this.flagcg = true
			},
			// 点击我知道了进行返回
			btnwzdl(){
				uni.navigateBack({delta:2})
			},
			// 点击绑定手机号确定
			btnbangqd(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		padding-bottom: 22rpx;
	}
	.mask{
		margin: auto;
		text-align: center;
		margin-top: 154rpx;
		image{
			width: 210rpx;
			height: 224rpx;
		}
		.ghcg{
			font-size: 40rpx;
			color: #3D3D3D;
			font-weight: 600;
			margin-top: 44rpx;
		}
		.wzd{
			width: 652rpx;
			height: 94rpx;
			background: #4C97E7;
			border-radius: 50rpx;
			margin: auto;
			line-height: 94rpx;
			margin-top: 144rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 600;
		}
	}
	.btn{
		width: 652rpx;
		height: 94rpx;
		background: #4C97E7;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 0.5;
		text-align: center;
		line-height: 94rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 600;
		margin: auto;
		margin-top: 64rpx;
	}
	.val{
		width: 652rpx;
		height: 94rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: 2rpx solid #808080;
		margin: auto;
		margin-top: 24rpx;
	    display: flex;
		align-items: center;
		.lt{
			font-size: 32rpx;
			color: #4C97E7;
			font-weight: 600;
			border-right: 1rpx solid #D8D8D8;
			height: 66rpx;
			line-height: 66rpx;
			padding-right: 22rpx;
			padding-left: 26rpx;
			box-sizing: border-box;
		}
		.rt{
			font-size: 32rpx;
			color: #4C97E7;
			border-left: 1px solid #D8D8D8;
			padding-left: 16rpx;
			box-sizing: border-box;
			height: 66rpx;
			line-height: 66rpx;
			padding-right: 18rpx;
		}
		input{
			margin-left: 22rpx;
		}
	}
	page {
		// background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
		background: #F4F5F7;
	}

	.page {
		width: 750rpx;
	}
	.phone{
		font-size: 30rpx;
		color: #3D3D3D;
		text-align: center;
		width: 100%;
		margin-top: 64rpx;
	}

	
	
</style>