pwd-retrieve.vue

<template>
	<view class="content">
		<!-- 顶部文字 -->
		<text class="title">重置密码</text>
		<login-ikonw v-show="isPhone" class="login-iknow" :text="tipText"></login-ikonw>
		<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
		<uni-forms ref="form" :value="formData" :rules="rules">
			<uni-forms-item name="phone">
				<!-- focus规则如果上一页携带来“手机号码”数据就focus验证码输入框，否则focus手机号码输入框 -->
				<uni-easyinput :focus="!formData.phone.length" type="number" class="easyinput" :inputBorder="false"
					v-model="formData.phone" maxlength="11" placeholder="请输入手机号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="code">
				<uni-easyinput :focus="formData.phone.length!=0" type="number" class="easyinput" :inputBorder="false"
					v-model="formData.code" maxlength="6" placeholder="请输入验证码">
					<template slot="right">
						<send-sms-code ref="shortCode" :phone="formData.phone"></send-sms-code>
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="pwd">
				<uni-easyinput type="password" class="easyinput" :inputBorder="false"
					v-model="formData.pwd" placeholder="请输入新密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="pwd2">
				<uni-easyinput type="password" class="easyinput" :inputBorder="false"
					v-model="formData.pwd2" placeholder="请确认新密码"></uni-easyinput>
			</uni-forms-item>
			<button class="send-btn-box" :disabled="!canSubmit" :type="canSubmit?'primary':'default'"
				@click="submit">完成</button>
		</uni-forms>
	</view>
</template>

<script>
import mixin from '../common/loginPage.mixin.js';
	export default {
		mixins:[mixin],
		data() {
			return {
			}
		},
		computed: {
			tipText() {
				return `验证码已通过短信发送至${this.formData.phone}。密码为6 - 20位`
			},
			canSubmit() {
				return this.isPhone && this.isPwd && this.isCode;
			},
			isPhone(){
				let reg_phone = /^1\d{10}$/;
				let isPhone = reg_phone.test(this.formData.phone);
				return isPhone;
			},
			isPwd(){
				let reg_pwd = /^.{6,20}$/;
				let isPwd = reg_pwd.test(this.formData.pwd);
				return isPwd;
			},
			isCode(){
				let reg_code = /^\d{6}$/;
				let isCode = reg_code.test(this.formData.code);
				return isCode;
			}
		},
		onLoad(event) {
			if (event && event.phoneNumber) {
				this.formData.phone = event.phoneNumber;
			}
		},
		onReady() {
			if(this.formData.phone){
				this.$refs.shortCode.start();
			}
		},
		methods: {
			/**
			 * 完成并提交
			 */
			submit(){
				this.$refs.form.submit()
				.then(res=>{
					this.request('user-center/resetPwdBySmsCode',{
						"mobile":this.formData.phone,
						"code":this.formData.code,
						"password":this.formData.pwd
					},result=>{
						console.log(result);
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						if(result.code === 0){
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>

<style>
	@import url("../common/login-page.css");
	.content-top-title{
		margin-bottom: 6px;
	}
</style>