BLi/pages/user/password.vue

<template>
	<view class="password">
		<u-toast ref="uToast" />
		<view class="con">
			<view class="form">
				<view class="input flex">
					<view class="label">手机号</view>
					<u-input v-model="phone" maxlength="11" :clearable="false" type="number" :border="border" placeholder="请输入手机号" />
				</view>
				<view class="input sms flex">
					<view class="label">验证码</view>
					<u-input v-model="ver_code" :clearable="false" type="text" :border="border" placeholder="请输入验证码" />
					<view class="wrap" >
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" start-text="发送验证码" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-verification-code>
						<view class="tips" @tap="getCode" >{{tips}}</view>
					</view>
				</view>
				<view class="input flex">
					<view class="label">密码</view>
					<u-input v-model="password" :clearable="false" type="password" :border="border" placeholder="请输入密码" />
				</view>
				<view class="input flex">
					<view class="label">确认密码</view>
					<u-input v-model="confirm_password" :clearable="false" type="password" :border="border" placeholder="请重新输入密码" />
				</view>
			</view>
			
		</view>
		<view class="btn" @click="ForgetPassword()">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				ver_code:'',
				password:'',
				confirm_password:"",
				checked:true,
				seconds: 60,
				tips: '获取验证码',
			}
		},
		onLoad(option) {
			this.getUserInfo()
		},
		methods: {
			agreement(){
				uni.navigateTo({
				  url: '/pages/login/agreement',
				})
			},
			checkboxGroupChange(e) {
				console.log(this.checked);
			},
			codeChange(text) {
					this.tips = text;
				},
				// 获取短信
				getCode() {
					
					console.log('发送验证码')
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						// uni.showLoading({
						// 	title: '正在获取验证码'
						// })
						console.log(this.phone)
						if(this.phone==''){
							this.$refs.uToast.show({
								title: '请输入手机号',
								type: 'error ',
							})
							return;
						}
						if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
							this.$refs.uToast.show({
								title: '请输入正确的手机号格式',
								type: 'warning ',
							})
							return;
						}
						this.$http.smsSend({phone:this.phone,event:'forgetpwd'})
						.then(res=>{
							if(res.data.code==200){
								this.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							}else{
								this.$refs.uToast.show({
									title: res.data.msg,
									type: 'error ',
								})
							}
						})
						// setTimeout(() => {
						// 	uni.hideLoading();
						// 	// 这里此提示会被this.start()方法中的提示覆盖
						// 	this.$u.toast('验证码已发送');
						// 	// 通知验证码组件内部开始倒计时
						// 	this.$refs.uCode.start();
						// }, 2000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				},
			// 登录
			ForgetPassword(){
				if(this.phone==''){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error ',
					})
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					this.$refs.uToast.show({
						title: '请输入正确的手机号格式',
						type: 'warning ',
					})
					return;
				}
				if(this.ver_code==''){
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error ',
					})
					return;
				}
				if(this.password==''){
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error ',
					})
					return;
				}
				if(this.confirm_password==''){
					this.$refs.uToast.show({
						title: '请输入确认密码',
						type: 'error ',
					})
					return;
				}
				if(this.confirm_password!=this.password){
					this.$refs.uToast.show({
						title: '两次输入密码不一致',
						type: 'error ',
					})
					return;
				}
				this.$http.ForgetPassword({
				  confirm_password: this.confirm_password,
				  password: this.password,
				  phone: this.phone,
				  ver_code: this.ver_code
				})
				.then(res=>{
					console.log(res)
					if(res.data.code==200){
						this.$refs.uToast.show({
							title: '修改成功',
						})
						uni.navigateTo({
						  url: '/pages/index/my',
						})
					}else{
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error ',
						})
					}
				})
			},
			getUserInfo(){
				this.$http.getUserInfo()
				.then(res=>{
					if(res.data.code==200){
						// 是否信息完整
						if(res.data.result.completeInformation != 2){
							uni.navigateTo({
							  url: '/pages/login/perfect',
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.password{
		position: relative;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		.bgc{
			position: absolute;
			left:0;
			top:0;
			width: 100%;
			height: 100%;
		}
		.con{
			position: relative;
			height: 100%;
			color: #000;
			background-color: #fff;
			.h2{
				font-size: 56rpx;
				padding-top: 80rpx;
			}
			.form{
				margin-top: 20rpx;
			}
			.u-scroll-box{
				display: block;
				.u-tab-item{
					margin-right: 60rpx;
				}
			}
		}
			.btn{
				width: 570rpx;
				margin: 100rpx auto 0;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: $color;
				border-radius: 40rpx;
				font-size: 28rpx;
				color:#fff;
			}
		.input{
			padding: 26rpx 32rpx;
			.label{
				width: 200rpx;
				color: rgba(0,0,0,0.8);
			}
			u-input{
				flex: 1;
			}
		}
		.agreement{
			position: absolute;
			bottom:70rpx;
			text-align: center;
			font-size: 24rpx;
			text{
				color: $color;
			}
		}
	}
</style>