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 inputmode="email" 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 inputmode="text" 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 inputmode="text" 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 inputmode="text" 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 inputmode="email" 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 inputmode="numeric" type="number" focus clearable v-model="verificationCode" placeholder="请输入验证码">
				</m-input>
				<button v-if="bCodeDisabled" class="cu-btn make-bg-bPurple shadow text-white"
					style="background-color: rgb(0,0,0);opacity: 0.5;">
					重新获取({{count}})</button>
				<button v-else class="cu-btn make-bg-bPurple shadow text-white" @tap="onGetCode">获取验证码</button>
			</view>
			<view class="card-view password-item flex justify-center ">
				<m-input inputmode="text" 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 inputmode="text" 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'
	import config from '@/common/config.js';
	import reqUtil from "@/util/util-js/requstUtil.js";
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				account: '',
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				verificationCode: '',
				bModifyPassword: true,
				bModifying: false,
			}
		},
		computed: mapState(['bCodeDisabled', 'count']),
		onLoad(option) {
			if (option.bModify) {
				//设置页面状态
				this.bModifyPassword = JSON.parse(option.bModify);
			}
		},
		methods: {
			...mapMutations(['countDown', 'resetCountDown']),

			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onGetCode() {
				//置灰状态
				if (this.bCodeDisabled) return;

				if (!~this.account.indexOf('@')) {
					if (!verify.checkPhone(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确手机号'
						});
						return;
					}

					//调用store 倒计时
					this.countDown({
						account: this.account,
						type: 0
					});
				} else {
					if (!verify.checkEMail(this.account)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确邮箱号'
						});
						return;
					}

					//调用store 倒计时
					this.countDown({
						account: this.account,
						type: 1
					});
				}



			},
			savePassword() {
				if (this.bModifying) return;
				/**
				 * 同时判断两个类型
				 */
				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.bModifyPassword) {
					//如果是修改密码，不需要验证码
					if (!verify.checkPassword(this.oldPassword)) {
						uni.showToast({
							icon: 'none',
							title: '旧的密码格式不合法',
						});
						return;
					}
					if (!verify.checkPassword(this.newPassword)) {
						uni.showToast({
							icon: 'none',
							title: '新的密码格式不合法',
						});
						return;
					}

				} else {
					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;
				}

				this.bModifying = true;

				uni.showToast({
					icon: 'loading',
					title: '',
					duration: 10000
				});

				//todo 处理新密码
				if (this.bModifyPassword) {
					//如果是修改密码，不需要验证码
					reqUtil.requestData(config.URL.MODIFYPASSWORDFROMACCOUNT, {
						"account": this.account,
						"type": !~this.account.indexOf('@') ? 0 : 1,
						"oldPassword": this.oldPassword,
						"newPassword": this.newPassword
					}).then(res => {
							uni.hideToast();

							console.log("MODIFYPASSWORDFROMACCOUNT" + JSON.stringify(res));
							if (res.code == 0) {
								uni.showToast({
									icon: 'success',
									title: '设置密码成功',
									duration: 2000,
									mask: true
								});
								this.$store.state.setPasswordFirstTime = false;
								setTimeout(() => {
									this.onBack();
								}, 2000);
							} else {
								uni.showToast({
									title: '修改密码失败',
									duration: 2000
								});
							}
							this.resetCountDown();
							this.bModifying = false;

						},
						e => {
							console.log(e);
							this.bModifying = false;
						});
				} else {
					reqUtil.requestData(config.URL.MODIFYPASSWORDFROMSMS, {
						"account": this.account,
						"type": !~this.account.indexOf('@') ? 0 : 1,
						"code": this.verificationCode,
						"password": this.newPassword
					}).then(res => {
							console.log("MODIFYPASSWORDFROMSMS" + JSON.stringify(res));
							uni.hideToast();

							if (res.code == 0) {
								uni.showToast({
									icon: 'success',
									title: '修改密码成功',
									duration: 2000,
									mask: true
								});
								this.$store.state.setPasswordFirstTime = false;
								setTimeout(() => {
									this.onBack();
								}, 2000);
							} else {
								uni.showToast({
									title: '修改密码失败',
									duration: 2000
								});
							}
							this.resetCountDown();
							this.bModifying = false;
						},
						e => {
							console.log(e);
							this.bModifying = false;
						});
				}
			}
		}
	}
</script>

<style>
	.password-item {
		height: 100rpx;
	}

	.card-view {
		border-radius: 10px;
	}
</style>