XLJK-web/xinlijiankang-uniapp-main/pages/login/updatePwd.vue

<template>
	<view class="page">
		<!-- <cus-head title='' bg='#fff' back></cus-head> -->
		<view class="title">
			修改密码
		</view>

		<view class="input-box">
			<input type="number" maxlength="11" class="input" v-model="phone" placeholder="请输入手机号码">
		</view>

		<view class="input-box">
			<input type="text" v-model="code" class="input" style="width: 400rpx;"  placeholder="请输入验证码">
			<view class="vcode" @click="getVcode" v-if="countdown <= 0">
				获取验证码
			</view>
			<view class="vcode" v-else>
				{{countdown}}
			</view>
		</view>

		<view class="input-box">
			<input type="password" class="input" v-model="password" placeholder="输入新密码">
		</view>

		<view class="input-box">
			<input type="password" class="input" v-model="pwd2" placeholder="再次输入新密码">
		</view>

		<view class="submit" @click="login">
			确认
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				pwd2: '',
				phone: '',
				code: '',
				checked: false,
				key: '',
				countdown: 0
			}
		},
		methods: {
			login() {
				let tip = ''
				if (!this.phone) {
					tip = '请输入手机号码'
				} else if (!this.code) {
					tip = '请输入验证码'
				} else if (!this.password) {
					tip = '请输入密码'
				} else if (!this.pwd2) {
					tip = '请正常输入密码'
				}
				if (tip) {
					uni.showToast({
						title: tip,
						icon: "none"
					})
					return
				}
				this.$post({
					data:{
						do:'UpdatePwd',
						data:{
							phone:this.phone,
							password:this.password,
							code:this.code
						}
					}
				}).then(res=>{
					console.log(res,'+++')
					uni.showToast({
						title:'重置成功',
						mask:true
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			getVcode() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
					})
					return
				} 
				this.$post({
					data:{
						do:'GetPhoneCode',
						data:{
							phone:this.phone
						}
					}
				}).then(res=>{
					console.log(res,'++++++++')
					if(res.errno==2004){
						uni.showToast({
							title: '短信已发送',
							icon: "none",
							duration: 5000
						})
						this.key = res.key;
						if (this.countdown <= 0) {
							this.countdown = 60
							let timer = setInterval(() => {
								this.countdown--;
								if (this.countdown < 1) {
									clearInterval(timer);
									this.countdown = 0
								}
							}, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0 32rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.vcode {
		width: 180rpx;
		height: 70rpx;
		border-radius: 4rpx;
		border: 2rpx solid #57BD37;
		text-align: center;
		line-height: 70rpx;
		font-size: 32rpx;
		color: #57BD37;
		position: absolute;
		right: 0;
		bottom: 14rpx;
	}

	.title {
		height: 72rpx;
		font-size: 52rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		padding-top: 54rpx;
		margin-bottom: 74rpx;
	}

	.tab {
		display: flex;
		align-items: center;
		margin-bottom: 114rpx;

		.item {
			height: 50rpx;
			margin-right: 86rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;

			&.active {
				color: #57BD37;
				position: relative;

				&:after {
					display: block;
					position: absolute;
					content: '';
					left: 50%;
					transform: translateX(-50%);
					width: 56rpx;
					height: 6rpx;
					background-color: #57BD37;
					bottom: -10rpx;
				}
			}
		}
	}

	.input-box {
		padding-bottom: 26rpx;
		border-bottom: 2rpx solid #E4E4E4;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		margin-bottom: 88rpx;
		width: 100%;
		position: relative;
	}

	.submit {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(180deg, #6AD449 0%, #4EB32F 100%);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 142rpx;
	}

	.b-btn {
		display: flex;
		width: 100%;
		justify-content: space-between;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 44rpx;

		.r {
			color: #57BD37;
		}
	}

	.radio {
		width: 30rpx;
		height: 30rpx;
		display: inline-block;
		margin-right: 16rpx;
	}

	.xieyi {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

		.c {
			color: #57BD37;
		}
	}
</style>