|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <headContent>
|
|
|
+ <template #left>
|
|
|
+ <reverse-back />
|
|
|
+ </template>
|
|
|
+ <template #content>
|
|
|
+ <view class="haed-title">
|
|
|
+ 修改登录密码
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </headContent>
|
|
|
+
|
|
|
+ <view class="change-hint">
|
|
|
+ <text class="iconfont"></text>
|
|
|
+ <text>修改登录密码需24小时后才能操作体现</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="form-box">
|
|
|
+ <form class="form-content">
|
|
|
+ <view class="form-item ">
|
|
|
+ <view class="form-item-lable">原密码</view>
|
|
|
+ <input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
|
|
|
+ placeholder-class="form-item-place" :type="showPwd ? 'text' : 'password'" placeholder="请输入原密码">
|
|
|
+ <!-- <input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
|
|
|
+ placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请输入原密码"> -->
|
|
|
+ <view class="form-item-icon" @click.stop="showPwd = !showPwd">
|
|
|
+ <text v-show="showPwd" class="iconfont"></text>
|
|
|
+ <text v-show="!showPwd" class="iconfont"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="err-hint">{{ formError.psdErr }}</view>
|
|
|
+ <view class="form-item ">
|
|
|
+ <view class="form-item-lable">新密码</view>
|
|
|
+ <input class="form-item-input" v-model="formData.newPassword" :maxlength="maxlength"
|
|
|
+ placeholder-class="form-item-place" :type="showNewPsd ? 'text' : 'password'" placeholder="请输入新密码">
|
|
|
+ <view class="form-item-icon" @click.stop="showNewPsd = !showNewPsd">
|
|
|
+ <text v-show="showNewPsd" class="iconfont"></text>
|
|
|
+ <text v-show="!showNewPsd" class="iconfont"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="err-hint">{{ formError.newPsdErr }}</view>
|
|
|
+ <view class="form-item ">
|
|
|
+ <view class="form-item-lable">确认密码</view>
|
|
|
+ <input class="form-item-input" v-model="formData.confirmPassword" :maxlength="maxlength"
|
|
|
+ placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'" placeholder="请再次输入新密码">
|
|
|
+ <view class="form-item-icon" @click.stop="showConfirmPsd = !showConfirmPsd">
|
|
|
+ <text v-show="showConfirmPsd" class="iconfont"></text>
|
|
|
+ <text v-show="!showConfirmPsd" class="iconfont"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="err-hint">{{ formError.confirmPsdErr }}</view>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <view :class="['form-btn' , deblockingSubmitBtn() ? 'active-form-btn' : '' ]"
|
|
|
+ @click.stop="SubmitPassWord()">
|
|
|
+ 确定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ validPassword
|
|
|
+ } from "@/utils/validate.js"
|
|
|
+ export default {
|
|
|
+ name: 'change-password',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ maxlength: 20,
|
|
|
+ showPwd: false,
|
|
|
+ showNewPsd:false,
|
|
|
+ showConfirmPsd:false,
|
|
|
+ formData: {
|
|
|
+ password: '',
|
|
|
+ newPassword: '',
|
|
|
+ confirmPassword: ''
|
|
|
+ },
|
|
|
+ formError: {
|
|
|
+ psdErr: '',
|
|
|
+ newPsdErr: '',
|
|
|
+ confirmPsdErr: ''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'formData.password'(newPsd, oldPsd) {
|
|
|
+ this.validateField('password')
|
|
|
+ },
|
|
|
+ 'formData.newPassword'(newPsd, oldPsd) {
|
|
|
+ this.validateField('newPassword')
|
|
|
+ },
|
|
|
+ 'formData.confirmPassword'(newPsd, oldPsd) {
|
|
|
+ this.validateField('confirmPassword')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ validateField(key) {
|
|
|
+ let validateStatus = false
|
|
|
+ switch (key) {
|
|
|
+ case 'password':
|
|
|
+ if (this.formData[key].trim()) {
|
|
|
+ this.formError.psdErr = '';
|
|
|
+ validateStatus = true;
|
|
|
+ } else {
|
|
|
+ this.formError.psdErr = '请输入原密码';
|
|
|
+ validateStatus = false;
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ case 'newPassword':
|
|
|
+ if (!this.formData[key].trim()) {
|
|
|
+ this.formError.newPsdErr = '请输入新密码'
|
|
|
+ validateStatus = false;
|
|
|
+ } else if (!validPassword(this.formData[key])) {
|
|
|
+ this.formError.newPsdErr = '密码长度为8-20位字符,必须同时包含大写字母、小写字母和数字';
|
|
|
+ validateStatus = false;
|
|
|
+ } else {
|
|
|
+ this.formError.newPsdErr = '';
|
|
|
+ validateStatus = true;
|
|
|
+ };
|
|
|
+ break;
|
|
|
+ case 'confirmPassword':
|
|
|
+ if (!this.formData[key].trim()) {
|
|
|
+ this.formError.confirmPsdErr = '请再次输入新密码';
|
|
|
+ validateStatus = false;
|
|
|
+ } else if (this.formData[key] !== this.formData.newPassword) {
|
|
|
+ this.formError.confirmPsdErr = '确认密码和新密码输入不一致';
|
|
|
+ validateStatus = false;
|
|
|
+ } else {
|
|
|
+ this.formError.confirmPsdErr = '';
|
|
|
+ validateStatus = true;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ validateStatus = false
|
|
|
+
|
|
|
+ };
|
|
|
+ return validateStatus;
|
|
|
+ },
|
|
|
+ confirmValidateField() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let validateStatus = true;
|
|
|
+ for (let key in this.formData) {
|
|
|
+ console.log('SubmitPassWord', key)
|
|
|
+ if (validateStatus) {
|
|
|
+ validateStatus = this.validateField(key)
|
|
|
+ } else {
|
|
|
+ this.validateField(key)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (validateStatus) {
|
|
|
+ resolve()
|
|
|
+ } else {
|
|
|
+ reject()
|
|
|
+ };
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ deblockingSubmitBtn() {
|
|
|
+ for (let key in this.formData) {
|
|
|
+ if (this.formData[key] === '') {
|
|
|
+ return false
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ SubmitPassWord() {
|
|
|
+
|
|
|
+ this.confirmValidateField().then(res => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '修改中',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .change-hint {
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 0 $pages-padding;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: $Theme-Color;
|
|
|
+ border-top: 1rpx solid $border-color;
|
|
|
+ height: 80rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 $pages-padding;
|
|
|
+
|
|
|
+ .form-content {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .form-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-bottom: 1rpx solid $border-color;
|
|
|
+
|
|
|
+ .form-item-lable {
|
|
|
+ width: 180rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-place {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-icon {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .err-hint {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 50rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: red;
|
|
|
+ line-height: 1.2;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-btn {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ccc;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active-form-btn {
|
|
|
+ background-color: $Theme-Color ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|