pet_server/pages/mine/password.vue

<template>
	<view class="content">
		<view class="card">
			<u-form :model="form" ref="uForm">
				<u-form-item label="手机号" prop="phone" label-width="150">
					<u-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="150">
					<u-input v-model="form.code" placeholder="请输入验证码" />
					<view slot="right" @click="getCode()">{{codeText}}</view>
				</u-form-item>
				<u-form-item label="密码" prop="password" label-width="150">
					<u-input v-model="form.password" type="password" maxlength="12" placeholder="请输入密码" />
				</u-form-item>
				<u-form-item label="确认密码" prop="password2" label-width="150">
					<u-input v-model="form.password2" type="password" maxlength="12" placeholder="请确认密码" />
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-btn">
			<view class="buttom-dom" @click="push">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 提交信息
				form: {
					phone: '',
					code: '',
					password: '',
					password2: ''
				},
				// 验证规则
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
					password2: [{
						required: true,
						message: '请确认密码',
						trigger: ['change', 'blur'],
					}],
				},
				// 获取验证码
				codeText: '获取验证码'
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 点击获取验证码
			getCode() {
				let _this = this;
				if (this.form.phone === '') {
					this.$u.toast('请先输入手机号')
					return false
				}
				if (this.codeText === '重新获取' || this.codeText === '获取验证码') {

					this.request('/sms/send', {
						mobile: this.form.phone,
						event: 'changepwd'
					}, 'GET').then(res => {
						_this.codeText = 60;
						let time = setInterval(() => {
							if (_this.codeText < 1) {
								_this.codeText = '重新获取'
								clearInterval(time)
							} else {
								_this.codeText = _this.codeText - 1;
							}
						}, 1000)
					})
				}

			},
			//  提交修改信息
			push() {
				let _this = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// console.log('验证通过');
						if (_this.form.password2.length > 12 || _this.form.password2.length > 6) {
							_this.$u.toast('密码长度为6-12位')
							return false
						}
						if (_this.form.password !== _this.form.password2) {
							_this.$u.toast('两次输入密码不一致')
							return false
						}
						let data = {
							mobile: _this.form.phone,
							newpassword: _this.form.password,
							captcha: _this.form.code,
							user_type: 2
						}
						_this.request('/user/resetpwd', data, "POST").then(res => {
							if (res.code === 1) {
								_this.$u.toast('操作成功')
								setTimeout(() => {
									uni.clearStorage()
									getApp().globalData = {
										isAdmin: false
									}
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}, 2000)
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40rpx;
	}

	.card {
		width: 93%;
		margin: 0 auto;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.bottom-btn {
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;

		.buttom-dom {
			height: 80rpx;
			width: 93%;
			background-color: #F6B301;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			border-radius: 80rpx;
		}
	}
</style>