ProAdvanced/pages/login-page/pwd/pwd.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" :title="bModifyPassword?'修改密码':'设置密码'" color="#000000" fixed="true"
			:border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>
			<view slot="right">
				<view class="make-text-bPurple text-regular margin-right" @click="savePassword">保存</view>
			</view>

		</uni-nav-bar>
		<block v-if="bModifyPassword">
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="text" focus clearable v-model="account" placeholder="请输入手机号/邮箱">
				</m-input>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="password" maxlength="16" displayable v-model="oldPassword"
					placeholder="请输入旧密码">
				</m-input>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="password" maxlength="16" displayable v-model="newPassword"
					placeholder="请输入新密码">
				</m-input>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="password" maxlength="16" displayable v-model="confirmPassword"
					placeholder="请再次输入新密码">
				</m-input>
			</view>
		</block>
		<block v-else>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="text" focus clearable v-model="account" placeholder="请输入手机号/邮箱">
				</m-input>
			</view>
			<view class="card-view cu-form-group ">
				<view style="width: 16rpx;"></view>
				<m-input type="number" focus clearable v-model="verificationCode" placeholder="请输入验证码">
				</m-input>
				<button class='cu-btn make-bg-bPurple shadow text-white'>获取验证码</button>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="password" maxlength="16" displayable v-model="newPassword"
					placeholder="请输入新密码">
				</m-input>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input style=" margin-left: 46rpx;" type="password" maxlength="16" displayable v-model="confirmPassword"
					placeholder="请确认新密码">
				</m-input>
			</view>
		</block>
		

		<view class="text-red margin-xl text-regular">密码必须是6-18位字符，数字、字母、特殊字符 (不能是纯数字、字母的组合)</view>

	</view>
</template>

<script>
	import service from '../../../util/util-js/service.js';
	import mInput from '../../../components/m-input.vue';
	import verify from '../../../util/util-js/verify.js'
	

	export default {
		components: {
			mInput
		},
		data() {
			return {
				account: '',
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				verificationCode: '',
				bModifyPassword:true
			}
		},
		onLoad(option) {
			//设置页面状态
			this.bModifyPassword = option.bModify?true:false;
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			savePassword() {
				/**
				 * 同时判断两个类型
				 */
				if (!~this.account.indexOf('@') && !verify.checkPhone(this.account)) {
				
					uni.showToast({
						icon: 'none',
						title: '手机号不合法',
					});
					return;
				}else if(~this.account.indexOf('@') && !verify.checkEMail(this.account))
				{
					uni.showToast({
						icon: 'none',
						title: '邮箱地址不合法',
					});
					return;
				}
				
				if(this.verificationCode == '' 
				|| this.verificationCode == undefined 
				|| this.verificationCode == null){
					uni.showToast({
						icon: 'none',
						title: '输入验证码',
					});
					return;
				}

				if(!verify.checkPassword(this.newPassword)){
					uni.showToast({
						icon: 'none',
						title: '新的密码格式不合法',
					});
					return;
				}
				
				if(!verify.checkPassword(this.confirmPassword)){
					uni.showToast({
						icon: 'none',
						title: '确认的密码格式不合法',
					});
					return;
				}
				
				if(this.confirmPassword != this.newPassword){
					uni.showToast({
						icon: 'none',
						title: '请输入两个相同的密码',
					});
					return;
				}
				
				uni.showToast({
					icon: 'none',
					title: '已发送重置邮件至注册邮箱，请注意查收。',
					duration: 3000
				});
				//todo 处理新密码
			}
		}
	}
</script>

<style>
	.password-item {
		height: 100rpx;
	}
	
	.card-view{
		border-radius: 10px;
	}
</style>