|
@@ -68,6 +68,35 @@
|
|
|
@blur="isPasswordRepeatInputOver=true"
|
|
@blur="isPasswordRepeatInputOver=true"
|
|
|
>
|
|
>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="form-item form-item-verifi">
|
|
|
|
|
+ <div class="title">
|
|
|
|
|
+ <img
|
|
|
|
|
+ src="@/assets/images/icon-mail.png"
|
|
|
|
|
+ alt=""
|
|
|
|
|
+ draggable="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span>邮箱验证码</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <input
|
|
|
|
|
+ v-model="verifiCode"
|
|
|
|
|
+ placeholder="请输入4位验证码"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ invalid: isVerifiCodeInputOver && !isVerifiCodeValid
|
|
|
|
|
+ }"
|
|
|
|
|
+ @blur="isVerifiCodeInputOver=true"
|
|
|
|
|
+ >
|
|
|
|
|
+ <button
|
|
|
|
|
+ class="get-verifi-code"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ disabled: isVerifiCodeSent
|
|
|
|
|
+ }"
|
|
|
|
|
+ @click="onClickVerifiCode"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ isVerifiCodeSent ? `${verifiCodeCountDown}s` : '发送验证码' }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<button
|
|
<button
|
|
|
class="submit"
|
|
class="submit"
|
|
@@ -88,8 +117,8 @@
|
|
|
import { ref, computed, watch, onMounted } from "vue"
|
|
import { ref, computed, watch, onMounted } from "vue"
|
|
|
import { useRoute, useRouter } from "vue-router"
|
|
import { useRoute, useRouter } from "vue-router"
|
|
|
import { useStore } from "vuex"
|
|
import { useStore } from "vuex"
|
|
|
-import { showDialog } from 'vant'
|
|
|
|
|
-import { changePassword } from '@/api.js'
|
|
|
|
|
|
|
+import { showDialog, showNotify } from 'vant'
|
|
|
|
|
+import { sendEmail, changePassword } from '@/api.js'
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
@@ -103,6 +132,7 @@ const {
|
|
|
const passwordOld = ref('')
|
|
const passwordOld = ref('')
|
|
|
const password = ref('')
|
|
const password = ref('')
|
|
|
const passwordRepeat = ref('')
|
|
const passwordRepeat = ref('')
|
|
|
|
|
+const verifiCode = ref('')
|
|
|
|
|
|
|
|
const passwordOldTrimed = computed(() => {
|
|
const passwordOldTrimed = computed(() => {
|
|
|
return passwordOld.value.trim()
|
|
return passwordOld.value.trim()
|
|
@@ -113,6 +143,9 @@ const passwordTrimed = computed(() => {
|
|
|
const passwordRepeatTrimed = computed(() => {
|
|
const passwordRepeatTrimed = computed(() => {
|
|
|
return passwordRepeat.value.trim()
|
|
return passwordRepeat.value.trim()
|
|
|
})
|
|
})
|
|
|
|
|
+const verifiCodeTrimed = computed(() => {
|
|
|
|
|
+ return verifiCode.value.trim()
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
const isPasswordOldValid = computed(() => {
|
|
const isPasswordOldValid = computed(() => {
|
|
|
return passwordOldTrimed.value.length >= 6 && passwordOldTrimed.value.length <= 10 && passwordTrimed.value.search(/^[0-9a-zA-Z].*$/) === 0
|
|
return passwordOldTrimed.value.length >= 6 && passwordOldTrimed.value.length <= 10 && passwordTrimed.value.search(/^[0-9a-zA-Z].*$/) === 0
|
|
@@ -123,10 +156,45 @@ const isPasswordValid = computed(() => {
|
|
|
const isPasswordRepeatValid = computed(() => {
|
|
const isPasswordRepeatValid = computed(() => {
|
|
|
return passwordTrimed.value === passwordRepeatTrimed.value
|
|
return passwordTrimed.value === passwordRepeatTrimed.value
|
|
|
})
|
|
})
|
|
|
|
|
+const isVerifiCodeValid = computed(() => {
|
|
|
|
|
+ return verifiCodeTrimed.value.length > 0
|
|
|
|
|
+})
|
|
|
|
|
|
|
|
const isPasswordOldInputOver = ref(false)
|
|
const isPasswordOldInputOver = ref(false)
|
|
|
const isPasswordInputOver = ref(false)
|
|
const isPasswordInputOver = ref(false)
|
|
|
const isPasswordRepeatInputOver = ref(false)
|
|
const isPasswordRepeatInputOver = ref(false)
|
|
|
|
|
+const isVerifiCodeInputOver = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+const isVerifiCodeSent = ref(false)
|
|
|
|
|
+const verifiCodeCountDown = ref(60)
|
|
|
|
|
+watch(isVerifiCodeSent, (v) => {
|
|
|
|
|
+ if (v) {
|
|
|
|
|
+ setInterval(() => {
|
|
|
|
|
+ verifiCodeCountDown.value--
|
|
|
|
|
+ if (verifiCodeCountDown.value === 0) {
|
|
|
|
|
+ isVerifiCodeSent.value = false
|
|
|
|
|
+ verifiCodeCountDown.value = 60
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+const onClickVerifiCode = utils.throttle(() => {
|
|
|
|
|
+ if (isVerifiCodeSent.value) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ sendEmail(store.state.userInfo.userName).then(() => {
|
|
|
|
|
+ showNotify({
|
|
|
|
|
+ type: 'success',
|
|
|
|
|
+ message: `验证码已发送至邮箱${store.state.userInfo.userName},请在邮箱中查收`,
|
|
|
|
|
+ })
|
|
|
|
|
+ isVerifiCodeSent.value = true
|
|
|
|
|
+ }).catch((e) => {
|
|
|
|
|
+ showDialog({
|
|
|
|
|
+ message: e,
|
|
|
|
|
+ theme: 'round-button',
|
|
|
|
|
+ })
|
|
|
|
|
+ })
|
|
|
|
|
+}, 333)
|
|
|
|
|
|
|
|
function submit() {
|
|
function submit() {
|
|
|
if (!isPasswordOldValid.value) {
|
|
if (!isPasswordOldValid.value) {
|
|
@@ -154,7 +222,7 @@ function submit() {
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- changePassword(passwordTrimed.value, passwordOldTrimed.value).then(() => {
|
|
|
|
|
|
|
+ changePassword(passwordTrimed.value, passwordOldTrimed.value, verifiCode.value).then(() => {
|
|
|
showDialog({
|
|
showDialog({
|
|
|
message: '密码修改成功',
|
|
message: '密码修改成功',
|
|
|
theme: 'round-button',
|
|
theme: 'round-button',
|
|
@@ -239,6 +307,50 @@ function submit() {
|
|
|
border-bottom: 1px solid red;
|
|
border-bottom: 1px solid red;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ >.form-item{
|
|
|
|
|
+ >div.row{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ margin-top: calc(-11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ >input{
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ border-bottom: 1px solid #D9D9D9;
|
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ &::placeholder {
|
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #B8B8B8;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ >input.invalid{
|
|
|
|
|
+ border-bottom: 1px solid red;
|
|
|
|
|
+ }
|
|
|
|
|
+ >button.get-verifi-code{
|
|
|
|
|
+ width: calc(108 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ height: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ border: 1px solid #D1B489;
|
|
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ color: #D1B489;
|
|
|
|
|
+ line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ &.disabled{
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
>button.submit{
|
|
>button.submit{
|
|
|
width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
width: calc(332 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|