eoss-ui 0.3.97

package/packages/login/src/resetPassword.vue

@@ -0,0 +1,332 @@
+<!-- 
+/**
+	* 忘记密码 
+	*@desc 忘记密码填写表单(通过手机号获取验证码)
+	*
+**/ 
+ -->
+<template>
+  <div class="rest-password-box" :class="{ 'rest-password-cut': show }">
+    <el-menu
+      v-if="show"
+      :default-active="activeIndex"
+      class="rest-menu-cut"
+      mode="horizontal"
+      @select="handleSelect"
+    >
+      <el-menu-item index="6">短信验证</el-menu-item>
+      <el-menu-item index="11">邮箱验证</el-menu-item>
+    </el-menu>
+    <es-form
+      ref="pwdForm"
+      v-loading.fullscreen.lock="submit"
+      element-loading-text="修改中..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.65)"
+      :model="formData"
+      :contents="page"
+      class="es-user-info"
+      @submit="handleSubmit"
+    >
+    </es-form>
+  </div>
+</template>
+
+<script>
+import {
+  initModifyPassword,
+  getModifyPassCode,
+  codeModifyPass
+} from 'eoss-ui/src/config/api.js';
+import rules from 'eoss-ui/src/utils/rules.js';
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'resetPassword',
+  props: {
+    secret: String,
+    isEncrypt: Boolean,
+    type: String
+  },
+  computed: {
+    page() {
+      return [
+        this.activeIndex == '6'
+          ? {
+              type: 'text',
+              name: 'target',
+              label: '手机号',
+              placeholder: '请输入手机号',
+              rules: [
+                {
+                  required: true,
+                  message: '请输入手机号',
+                  trigger: 'blur'
+                },
+                {
+                  ...rules.phone,
+                  trigger: 'blur'
+                }
+              ]
+            }
+          : {
+              type: 'text',
+              name: 'target',
+              label: '邮箱地址',
+              placeholder: '请输入邮箱地址',
+              rules: [
+                {
+                  required: true,
+                  message: '请输入邮箱地址',
+                  trigger: 'blur'
+                },
+                {
+                  type: 'email',
+                  message: '请输入正确的邮箱地址',
+                  trigger: 'blur'
+                }
+              ]
+            },
+        {
+          type: 'password',
+          name: 'password',
+          label: '新密码',
+          placeholder: '请输入新密码',
+          showPassword: true,
+          rules: [
+            this.checkPassword
+              ? {
+                  pattern: this.checkPassword,
+                  message: this.checkPasswordMsg
+                    ? this.checkPasswordMsg
+                    : '密码格式不合法',
+                  trigger: 'blur'
+                }
+              : {},
+            {
+              required: true,
+              message: '请输入新密码',
+              trigger: 'blur'
+            }
+          ]
+        },
+        {
+          type: 'password',
+          name: 'repassword',
+          placeholder: '请确认新密码',
+          label: '确认新密码',
+          showPassword: true,
+          rules: [
+            this.checkPassword
+              ? {
+                  pattern: this.checkPassword,
+                  message: this.checkPasswordMsg
+                    ? this.checkPasswordMsg
+                    : '密码格式不合法',
+                  trigger: 'blur'
+                }
+              : {},
+            {
+              required: true,
+              message: '请输入新密码',
+              trigger: 'blur'
+            },
+            { validator: this.reregExpValidate, trigger: 'blur' }
+          ]
+        },
+        {
+          type: 'text',
+          name: 'verificationCode',
+          placeholder: '请输入验证码',
+          label: '验证码',
+          append: {
+            text: this.btnText,
+            attrs: { disabled: this.disabled },
+            event: this.getVerificationCode
+          },
+          rules: [
+            {
+              required: true,
+              message: '请输入验证码',
+              trigger: 'blur'
+            }
+          ]
+        },
+        {
+          type: 'submit',
+          contents: [
+            {
+              type: 'primary',
+              text: '提交',
+              event: 'confirm'
+            }
+          ]
+        }
+      ];
+    },
+    show() {
+      if (this.type) {
+        let types = this.type.split(',');
+        return types.length > 1;
+      }
+      return false;
+    }
+  },
+  data() {
+    return {
+      activeIndex: '6',
+      checkPassword: null,
+      checkPasswordMsg: null,
+      btnText: '获取验证码',
+      timer: '',
+      countdown: 0,
+      disabled: false,
+      submit: false,
+      formData: {}
+    };
+  },
+  created() {
+    this.getInitModifyPassword();
+    if (this.type) {
+      let types = this.type.split(',');
+      if (types.length) {
+        this.activeIndex = types[0];
+      }
+    }
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    // 密码再次验证
+    reregExpValidate(rule, value, callback) {
+      if (value != this.formData.password) {
+        callback(new Error('两次密码不一致'));
+      } else {
+        callback();
+      }
+    },
+    getInitModifyPassword() {
+      util
+        .ajax({
+          url: initModifyPassword
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            const results = JSON.parse(JSON.stringify(res.results));
+            if (results.checkPassword) {
+              this.checkPassword = new RegExp(results.checkPassword);
+            }
+            if (results.checkPasswordMsg) {
+              this.checkPasswordMsg = new RegExp(results.checkPasswordMsg);
+            }
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    getVerificationCode() {
+      if (this.countdown) {
+        return false;
+      }
+      if (!this.formData.target) {
+        this.$refs.pwdForm.validateField('target');
+        return false;
+      } else {
+        let flag = false;
+        this.$refs.pwdForm.validateField('target', res => {
+          flag = res != '';
+        });
+        if (flag) {
+          return false;
+        }
+        let data = {
+          target: this.formData.target,
+          targetType: this.activeIndex == '6' ? 'SMS' : 'EMAIL'
+        };
+        this.countdown = 60;
+        this.getCode(data);
+        this.timer = setInterval(() => {
+          if (this.countdown > 0) {
+            this.countdown--;
+            this.disabled = true;
+            this.btnText = '重新获取' + this.countdown + 's';
+          } else {
+            this.btnText = '获取验证码';
+            this.disabled = false;
+            clearInterval(this.timer);
+          }
+        }, 1000);
+      }
+    },
+    getCode(params) {
+      util
+        .ajax({
+          url: getModifyPassCode,
+          params: params
+        })
+        .then(res => {
+          if (res.rCode === 0) {
+            this.$message.success(res.msg);
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleSubmit(res) {
+      this.submit = true;
+      let { repassword, ...data } = res;
+      if (this.secret && this.isEncrypt) {
+        data.password = util.esmEncrypt({
+          data: data.password,
+          key: this.secret
+        });
+      }
+      if (this.activeIndex == '6') {
+        data.targetType = 'SMS';
+      } else {
+        data.targetType = 'EMAIL';
+      }
+      util
+        .ajax({
+          method: 'post',
+          url: codeModifyPass,
+          data: data
+        })
+        .then(res => {
+          this.submit = false;
+          if (res.rCode === 0) {
+            this.$message.success(res.msg);
+            this.$emit('success');
+          } else {
+            let msg = res.msg || '系统错误，请联系管理员！';
+            this.$message.error(msg);
+          }
+        })
+        .catch(err => {
+          if (err.message && err.message !== 'canceled') {
+            this.$message.error(err.message);
+          }
+        });
+    },
+    handleSelect(res) {
+      this.$refs.pwdForm.resetFields();
+      this.activeIndex = res;
+      this.btnText = '获取验证码';
+      this.disabled = false;
+      clearInterval(this.timer);
+    }
+  }
+};
+</script>

package/packages/main/index.js

@@ -0,0 +1,5 @@
+import EsMain from './src/main';
+
+EsMain.install = Vue => Vue.component(EsMain.name, EsMain);
+
+export default EsMain;