adspecs 0.1.12

package/references/web-ui/src/views/login/ForgetPassword.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="login-forget-password">
+    <!-- 忘记密码表单 -->
+    <el-form label-position="top" label-width="80px" :model="resetForm" :rules="resetRules"
+      :validate-on-rule-change="false" ref="resetForm">
+      <!-- 手机号码 -->
+      <el-form-item label prop="toPhone">
+        <!-- 国家区号选项 -->
+        <el-select v-model="resetForm.area" :placeholder="this.$t('otherLang.areaCode')" class="el-input--square-topleft"
+          style="width: 22%;" @change="hanldeChangeArea" disabled>
+          <el-option v-for="item in getAreas" :key="item.value" :label="item.value" :value="item.value">
+            {{ item.label }}
+          </el-option>
+        </el-select>
+        <el-input v-model.trim="resetForm.toPhone" :placeholder="$t('login.enterNum')" class="el-input--square-bottomleft"
+          style="width: 78%;" @input="(value) => (resetForm.toPhone = value.replace(/[^\d]+/g, ''))">
+          <template #prefix>
+            <i class="iconfont1 icon-zhanghao" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 短信校验码 -->
+      <el-form-item label prop="smsVerifyCode">
+        <el-input class="verify-code-input el-input--square-topleft" v-model.trim="resetForm.smsVerifyCode"
+          :placeholder="$t('login.verificationCode')">
+          <template #prefix>
+            <i class="iconfont1 icon-yanzhengma" />
+          </template>
+          <template #append>
+            <el-link :underline="false" @click="showCaptcha" :disabled="!allowSendMsg">
+              {{
+                !allowSendMsg
+                ? counter + $t('login.sendCodeCounterTips')
+                : $t('login.sendCode')
+              }}
+            </el-link>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 新密码 -->
+      <el-form-item label prop="newMagic">
+        <el-input :type="newPasswordType" size="large" autocomplete="new-password" v-model.trim="resetForm.newMagic" clearable
+          :placeholder="$t('login.newPwd')">
+          <template #prefix>
+            <i class="iconfont1 icon-mima" />
+          </template>
+          <template #suffix>
+            <el-icon class="eyes" v-show="showNewPassword" @click="revertStatus('newPwd')"><View /></el-icon>
+            <el-icon class="eyes" v-show="!showNewPassword" @click="revertStatus('newPwd')"><Hide /></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 确认密码 -->
+      <el-form-item label prop="confirmMagic">
+        <el-input size="large" :type="confirmPasswordType" autocomplete="new-password" v-model.trim="resetForm.confirmMagic"
+          :placeholder="$t('login.confirmPassword')" clearable>
+          <template #prefix>
+            <i class="iconfont1 icon-mima" />
+          </template>
+          <template #suffix>
+            <el-icon class="eyes" v-show="showConfirmPassword" @click="revertStatus('confirmPassword')"><View /></el-icon>
+            <el-icon class="eyes" v-show="!showConfirmPassword" @click="revertStatus('confirmPassword')"><Hide /></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 忘记密码表单按钮 -->
+      <el-form-item>
+        <el-button type="primary" size="large" @click="handleReset" :loading="resetLoading" data-login-button="true">{{
+          $t('button.submit') }}</el-button>
+        <el-link :underline="false" style="position: relative;left: 100%;transform: translate(-100%);" @click="goBack">
+          {{
+            $t('login.directLogin')
+          }}
+        </el-link>
+      </el-form-item>
+    </el-form>
+
+    <!-- 验证码弹框 -->
+    <GsDialog class="captcha-dialog" v-model="captchaDialogVisible" :title="$t('login.codeWarning')" width="30%">
+      <!-- 发送验证表单 -->
+      <el-form label-position="top" ref="captchaForm" :model="resetForm" @submit.prevent>
+        <el-form-item class="formItem" prop="captcha" :label="$t('login.smsCode')">
+          <el-input style="width: 100%;" type="text" class="captchaInput" @keyup.enter="sendMsg"
+            v-model="resetForm.captcha">
+            <template #suffix>
+              <el-image class="identify-code-img" :src="identifyCode" :title="$t('login.refreshCode')"
+                @click="refreshCode" />
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <!-- 发送验证表单按钮 -->
+      <template #footer>
+        <div class="footer-btn">
+          <el-button @click="captchaDialogVisible = false" data-login-button="true">{{ $t('button.cancel') }}</el-button>
+          <el-button type="primary" @click="sendMsg" data-login-button="true">{{ $t('button.sure') }}</el-button>
+        </div>
+      </template>
+    </GsDialog>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import { resetPassword, sendCode } from '@/api/reset-password'
+import { validatePhone } from '@/utils/validate'
+import { encode } from '@/utils/base64'
+import { areas } from '@/utils/areas'
+export default {
+  name: 'ForgetPassword',
+  props: {
+    forgetPwd: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      areas,
+      // 忘记密码发送loading
+      resetLoading: false,
+      // 倒数秒数
+      counter: 60,
+      // 图片验证码地址
+      identifyCode: '',
+      // 是否允许点击发送验证码按钮
+      allowSendMsg: true,
+      // 验证码弹框显示标识
+      captchaDialogVisible: false,
+      // 重置密码表达表单
+      resetForm: {
+        areas: '',
+        area: '+86',
+        toPhone: '',
+        smsVerifyCode: '',
+        newMagic: '',
+        confirmMagic: '',
+        captcha: '',
+      },
+      showNewPassword: false, // 是否显示新密码
+      showConfirmPassword: false // 是否显示确认密码
+    }
+  },
+  computed: {
+    newPasswordType() {
+      return this.showNewPassword ? 'text' : 'password'
+    },
+    confirmPasswordType() {
+      return this.showConfirmPassword ? 'text' : 'password'
+    },
+    curLang() {
+      return this.$i18n.locale
+    },
+    getAreas() {
+      const lang = this.curLang
+      return this.areas?.map((item) => {
+        return { label: item[lang] + '(' + item.code + ')', value: item.code }
+      })
+    },
+    // 重置密码验证规则
+    resetRules() {
+      const validateIsPhone = (rule, value, callback) => {
+        if (!value) callback(new Error(this.$t('login.phoneWarning')))
+        else if (!validatePhone(value))
+          callback(new Error(this.$t('login.phoneError')))
+        else callback()
+      }
+      const validatePwd = (rule, value, callback) => {
+        let reg = /^(\w){6,12}$/i
+        if (!reg.test(value))
+          callback(new Error(this.$t('login.passwordWarning')))
+        else callback()
+      }
+      const validatePwdEqual = (rule, value, callback) => {
+        if (value && value !== this.resetForm.newMagic)
+          callback(new Error(this.$t('login.passwordError')))
+        else callback()
+      }
+      return {
+        toPhone: [
+          { required: true, trigger: 'blur', validator: validateIsPhone },
+        ],
+        newMagic: [{ required: true, trigger: 'blur', validator: validatePwd }],
+        confirmMagic: [
+          { required: true, trigger: 'blur', validator: validatePwdEqual },
+        ],
+        smsVerifyCode: [
+          {
+            required: true,
+            message: this.$t('login.verifyCodeWarning'),
+            trigger: 'blur',
+          },
+        ],
+      }
+    },
+  },
+  methods: {
+    revertStatus(type){
+      if(type === 'confirmPassword') {
+        this.showConfirmPassword = !this.showConfirmPassword
+      } else if(type === 'newPwd') {
+        this.showNewPassword = !this.showNewPassword
+      }
+    },
+    hanldeChangeArea() {
+      this.resetForm.area = '+86'
+      this.$message.warning(this.$t('login.notSupportOtherRegions'))
+    },
+    // 发送短信验证码
+    sendMsg() {
+      this.$refs.captchaForm.validate((valid) => {
+        if (valid) {
+          let data = {
+            phone: this.resetForm.toPhone,
+            type: 2, // 发送类型 1:注册；2：通过手机号码找回密码
+            imageCaptcha: this.resetForm.captcha,
+          }
+          sendCode(data).then((res) => {
+            if (this.reqIsSucceed(res)) {
+              this.$message.success(res.msg)
+              this.allowSendMsg = false
+              this.captchaDialogVisible = false
+              let setCounter = setInterval(() => {
+                this.counter--
+                if (this.counter === 0) {
+                  clearInterval(setCounter)
+                  this.allowSendMsg = true
+                  this.counter = 60
+                }
+              }, 1000)
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    },
+    // 刷新图片验证码
+    refreshCode() {
+      this.identifyCode = ''
+      this.getCaptcha()
+    },
+    // 提交重置密码
+    handleReset() {
+      let data = {
+        phone: this.resetForm.toPhone,
+        numberCaptcha: this.resetForm.smsVerifyCode,
+        newMagic: encode(this.resetForm.newMagic),
+        confirmMagic: encode(this.resetForm.confirmMagic),
+      }
+      this.$refs.resetForm.validate((valid) => {
+        if (valid) {
+          this.resetLoading = true
+          resetPassword(data).then((res) => {
+            if (this.reqIsSucceed(res)) {
+              this.$message.success(this.$t('login.updatePwdSuccess'))
+              $emit(this, 'update:forgetPwd', false)
+            }
+            this.resetLoading = false
+          })
+        }
+      })
+    },
+    // 获取验证码图片地址
+    getCaptcha(phone = this.resetForm.toPhone) {
+      this.identifyCode = `${window.VUE_APP_SERVERAPI
+        }${window.getVersionTypeApiUrl(
+          'baseURL'
+        )}/base-pa/imageCaptcha?phone=${phone}&${Math.random()}`
+    },
+    // 打开图片验证弹窗
+    showCaptcha() {
+      if (!validatePhone(this.resetForm.toPhone)) {
+        this.$message.warning(this.$t('login.phoneError'))
+      } else {
+        if (!this.allowSendMsg) return
+        this.resetForm.captcha = ''
+        this.captchaDialogVisible = true
+        this.getCaptcha(this.resetForm.toPhone)
+      }
+    },
+    goBack() {
+      this.$refs.resetForm.clearValidate()
+      $emit(this, 'update:forgetPwd', false)
+    },
+  },
+  emits: ['update:forgetPwd'],
+}
+</script>
+
+<style lang="scss" scoped>
+.captcha-dialog {
+  .identify-code-img {
+    cursor: pointer;
+    height: 40px;
+  }
+}
+
+.formItem {
+  height: 80px;
+  margin: 10px 0;
+}
+
+.captchaInput :deep(.el-input__wrapper) {
+  padding: 0 0 0 15px !important;
+  box-sizing: border-box;
+}
+
+:deep(.el-form-item .el-input__wrapper) {
+  padding: 0 15px;
+}
+
+.login-forget-password {
+  /*// margin: 35px 0 0 0;*/
+  padding: 30px;
+
+  .el-button {
+    width: 100%;
+  }
+
+  .el-form-item {
+    margin: 0 0 18px 0;
+
+    .el-link {
+      float: right;
+    }
+  }
+
+  .verify-code-input {
+    :deep(.el-input__prefix) {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-input__wrapper {
+      border-radius: 0 4px 4px 0;
+      width: 100%;
+      box-shadow: none;
+      border: 1px solid var(--color-border-line);
+      box-sizing: border-box;
+      height: 40px;
+    }
+  }
+
+  ::v-deep {
+    .el-input--square-bottomleft {
+      .el-input__wrapper {
+        border-radius: 0 4px 4px 0;
+        width: 100%;
+        box-shadow: none;
+        border: 1px solid var(--color-border-line);
+        box-sizing: border-box;
+        border-left: none;
+        height: 40px;
+      }
+    }
+
+    .el-input--square-topleft {
+
+      .el-input__wrapper {
+        // position: relative;
+        // right: -1px;
+        border-right: none;
+        border-radius: 4px 0 0 4px;
+        box-shadow: none;
+        border: 1px solid var(--color-border-line);
+        border-right: none;
+        box-sizing: border-box;
+        height: 40px;
+      }
+
+    }
+  }
+}
+.eyes {
+  font-size: 16px;
+  cursor: pointer;
+}
+.footer-btn {
+  display: flex;
+}
+::v-deep {
+  .el-input__suffix {
+    display: flex;
+    right: 0;
+
+    .el-input__suffix-inner {
+      display: flex;
+    }
+  }
+}
+// ::v-deep .el-input__inner {
+//   min-height: 40px !important;
+// }
+::v-deep {
+  .el-input--square-bottomleft {
+    .el-input__wrapper {
+      border-radius: 0 4px 4px 0;
+      // border-left: none;
+      width: 100%;
+      box-shadow: none;
+      // border-color: var(--el-color-border-line);
+      border: 1px solid var(--color-border-line);
+      box-sizing: border-box;
+      height: 40px;
+    }
+  }
+
+  .el-input--square-topleft {
+
+    .el-select__wrapper {
+      position: relative;
+      right: -1px;
+      border-right: none;
+      border-radius: 4px 0 0 4px;
+      box-shadow: none;
+      border: 1px solid var(--color-border-line);
+      border-right: none;
+      box-sizing: border-box;
+      height: 40px;
+      // z-index: 999;
+    }
+  }
+}
+</style>