Sprinkler-app/pages/login/wjpassword.vue

<template>
	<view>
		<u-navbar :is-back="true" title='忘记密码' title-color="#000" :border-bottom="false" :background="bgc" 
			id="navbar">
		</u-navbar>
        <view class="telsele">
        	<view class="tel">
        		<image src="https://api.ccttiot.com/smartmeter/img/static/ucosihVOuRDfyaNn5VzX" mode=""></image> 手机号
        	</view>
        	<view class="" style="display: flex;justify-content: space-between;align-items: center;">
        		<input type="text" v-model="tel" placeholder="请输入您的手机号"/>
        		<image v-if="tel" @click="btnqk" style="width: 32rpx;height: 32rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uE9WtCydr2ISGWek6EkS" mode=""></image>
        	</view>
        </view>
        
        <view class="telsele" style="margin-top: 36rpx;">
        	<view class="tel">
        		<image src="https://api.ccttiot.com/smartmeter/img/static/ufLneWKv1lgtwpap9AIY" mode=""></image> 验证码
        	</view>
        	<view class="yzm">
        		<input type="text" v-model="yzm" placeholder="请输入验证码"/>
        		<view v-if="countdown == 60" class="huoqu" @click="btnhuoqu">
        			获取验证码
        		</view>
        		<view v-else class="huoqus">
        			{{countdown}}秒后重发
        		</view>
        	</view>
        </view>
        
        <view class="telsele" style="margin-top: 36rpx;margin-bottom: 26rpx;">
        	<view class="tel">
        		<image src="https://api.ccttiot.com/smartmeter/img/static/uFiLt1SC4cHdZrIDRxeO" mode=""></image> 新密码	
        	</view>
        	<view class="yzm">
        		<input :type="txt" v-model="password" placeholder="请输入新密码"/>
        		<image v-if="txt == 'password'" src="https://api.ccttiot.com/smartmeter/img/static/uWm6nstWoT5VIJuXvcGu" @click="btn(1)" mode=""></image>
        		<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uyVRL3hjK3JzSxbiIzBA" @click="btn(2)" mode=""></image>
        	</view>
        </view>
		<view class="telsele" style="margin-top: 36rpx;margin-bottom: 26rpx;">
			<view class="tel">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uFiLt1SC4cHdZrIDRxeO" mode=""></image> 确认密码	
			</view>
			<view class="yzm">
				<input :type="txts" v-model="passwords" placeholder="请再次输入新密码"/>
				<image v-if="txts == 'password'" src="https://api.ccttiot.com/smartmeter/img/static/uWm6nstWoT5VIJuXvcGu" @click="btns(1)" mode=""></image>
				<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uyVRL3hjK3JzSxbiIzBA" @click="btns(2)" mode=""></image>
			</view>
		</view>
		
		<view class="quer" @click="btnqr">
			确定
		</view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					txt:'password',
					txts:'password',
					password:'',
					passwords:'',
					tel:'',
					yzm:'',
					countdown: 60, 
					timer: null
				}
			},
			// 分享到好友（会话）
			onShareAppMessage: function() {
				return {
					title: '绿小能',
					path: '/pages/index/index'
				}
			},
			
			// 分享到朋友圈  
			onShareTimeline: function() {
				return {
					title: '绿小能',
					query: '',
					path: '/pages/index/index'
				}
			},
			onLoad() {
				
			},
			onUnload() {
			    // 页面卸载时清除定时器，防止内存泄漏  
			    clearInterval(this.timer);  
			},  
			methods:{
				btn(num){
					if(num == 1){
						this.txt = 'txt'
					}else if(num == 2){
						this.txt = 'password'
					}
				},
				btns(num){
					if(num == 1){
						this.txts = 'txt'
					}else if(num == 2){
						this.txts = 'password'
					}
				},
				// 点击清空手机号
				btnqk(){
					this.tel = ''
				},
				// 验证码倒计时
				startCountdown() {  
				      this.timer = setInterval(() => {  
				        if (this.countdown > 0) {  
				          this.countdown--
				        } else {  
				          clearInterval(this.timer); // 倒计时结束，清除定时器  
				          this.countdown = 60
				      }  
				    }, 1000); // 每秒更新一次  
				},  
				// 如果需要在其他地方停止倒计时，可以添加这个方法  
				stopCountdown() {  
				    clearInterval(this.timer);  
				    this.countdown = 0; // 可选：将倒计时重置为0  
				},
				
				// 点击获取验证码
				btnhuoqu(){
					this.startCountdown()
				},
				// 点击确认忘记密码
				btnqr(){
					console.log(1);
				}
			}
		}
</script>

<style lang="less">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	page{
		width: 100%;
		padding: 20rpx 76rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.quer{
		width: 620rpx;
		height: 92rpx;
		background: #48893B;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		margin-top: 118rpx;
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: 600;
		text-align: center;
		line-height: 92rpx;
	}
	.lofo{
		width: 64rpx;
		height: 64rpx;
		margin: auto;
		margin-top: 30rpx;
	}
	.wxlogo{
		font-size: 32rpx;
		color: #808080;
		margin-top: 98rpx;
	}
	.you{
		font-size: 28rpx;
		color: #50565A;
		margin: auto;
		margin-top: 52rpx;
		text-align: center;
		text{
			color: #48893B;
			border-bottom: 1px solid #48893B;
		}
	}
	.zcbdl{
		width: 620rpx;
		height: 92rpx;
		background: #48893B;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: 600;
		margin: auto;
		margin-top: 98rpx;
		text-align: center;
		line-height: 92rpx;
	}
	.xieyi{
		font-size: 28rpx;
		color: #3D3D3D;
		text{
			color: #48893B;
		}
	}
	.telsele{
		.yzm{
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: center;
			margin-top: 38rpx;
			position: relative;
			z-index: 1;
			input{
				margin-top: 0;
			}
			image{
				width: 38rpx;
				height: 38rpx;
			}
			.huoqu{
				width: 158rpx;
				height: 58rpx;
				background: #48893B;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
			}
			.huoqus{
				width: 158rpx;
				height: 58rpx;
				background: #979797;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
			}
		}
		margin-top: 50rpx;
		border-bottom: 1px solid #50565A;
		padding-bottom: 22rpx;
		box-sizing: border-box;
		input{
			// margin-top: 32rpx;
			padding-left: 10rpx;
			box-sizing: border-box;
		}
		.tel{
			font-size: 32rpx;
			color: #48893B;
			font-weight: 600;
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
			image{
				width: 62rpx;
				height: 62rpx;
				margin-right: 16rpx;
			}
		}
	}
	 .name{
		 font-size: 72rpx;
		 color: #3D3D3D;
		 font-weight: 600;
		 margin-top: 178rpx;
		 position: relative;
		 z-index: 1;
		 text{
			 width: 148rpx;
			 height: 32rpx;
			 background: #90B389;
			 border-radius: 0rpx 0rpx 0rpx 0rpx;
			 display: inline-block;
			 position: absolute;
			 top: 62rpx;
			 left: 0;
			 z-index: -1;
		 }
	 }


</style>