✨ 设置-账户安全模块: 1.换绑邮箱 2.修改密码功能

pages/user/settings.vue

@@ -18,7 +18,7 @@
             <i class="el-icon-unlock"></i>
             <span slot="title">账户安全</span>
           </el-menu-item>
-          <el-menu-item index="notification">
+          <el-menu-item v-show="false" index="notification">
             <i class="el-icon-bell"></i>
             <span slot="title">通知方式</span>
           </el-menu-item>

pages/user/settings/security.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-row>
+    <el-col>
+      <h1>账户安全</h1>
+    </el-col>
+    <el-col>
+      <el-form :model="user" ref="user" label-width="100px">
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="user.email" disabled>
+            <el-button slot="append" @click="changeEmail">更换邮箱</el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
+          <el-input type="password" v-model="user.password" placeholder="请输入新密码" autocomplete="off" show-password></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请输入确认密码', trigger: 'blur' }]">
+          <el-input type="password" v-model="user.confirmPassword" placeholder="请再次输入新密码" autocomplete="off" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" round plain @click="updatePassword">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <el-dialog
+      title="更换邮箱"
+      :visible.sync="dialogVisible"
+      width="475px"
+      :before-close="hideChangeEmailDialog"
+      center>
+      <el-form :model="emailForm" ref="emailForm" status-icon label-width="100px"
+               style="align-items: center;max-width: 375px;">
+        <el-form-item label="邮箱" prop="email"
+                      :rules="[
+                  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+                  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]">
+          <el-input v-model="emailForm.email" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
+          <el-input v-model="emailForm.code" maxlength="6" autocomplete="off">
+            <el-button type="email" size="small" slot="append" @click="sendEmailCode" :loading="loading" plain>
+              {{ loadText }}
+            </el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item style="text-align: center;">
+          <el-button :loading="btnLoading" @click.native="submitChangeEmail" type="success" plain>提交</el-button>
+          <el-button :loading="btnLoading" @click.native="hideChangeEmailDialog" plain>取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+
+export default {
+  name: "security",
+  computed: {
+    ...mapState({
+      idUser: state => state.oauth.idUser
+    })
+  },
+  data() {
+    return {
+      user: {},
+      rules: {},
+      password: '',
+      confirmPassword: '',
+      emailForm: {
+        email: '',
+        code: ''
+      },
+      dialogVisible: false,
+      loading: false,
+      loadText: '发送验证码',
+      btnLoading: false
+    }
+  },
+  methods: {
+    changeEmail() {
+      this.$set(this, 'dialogVisible', true);
+    },
+    getData() {
+      let _ts = this;
+      _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
+        if (res) {
+          if (res.message) {
+            _ts.$message.error(res.message);
+          } else {
+            _ts.$set(_ts, 'user', res.user);
+          }
+        }
+      })
+    },
+    hideChangeEmailDialog() {
+      this.$set(this, 'dialogVisible', false);
+    },
+    sendEmailCode() {
+      let _ts = this;
+      _ts.timerHandler();
+      let email = _ts.emailForm.email;
+      if (!email) {
+        return false
+      }
+      let data = {
+        email: email
+      }
+      _ts.$axios.$get('/api/console/get-email-code', {
+        params: data
+      }).then(response => {
+        if (response.message) {
+          _ts.$message(response.message);
+        }
+      }).catch(error => {
+        console.log(error);
+        _ts.$message("邮件发送失败,请检查邮箱是否正确!");
+      })
+    },
+    timerHandler() {
+      let _ts = this;
+      _ts.$set(_ts, 'loading', true);
+      let times = 30;
+      _ts.timeClock = setInterval(function () {
+        times--;
+        _ts.$set(_ts, 'loadText', times + ' s');
+        if (times == 0) {
+          clearInterval(_ts.timeClock);
+          _ts.$set(_ts, 'loading', false);
+          _ts.$set(_ts, 'loadText', '发送验证码');
+        }
+      }, 1000)
+    },
+    submitChangeEmail() {
+      let _ts = this;
+      _ts.$refs.emailForm.validate((valid) => {
+        if (valid) {
+          _ts.$set(_ts, 'btnLoading', true);
+          let data = {
+            idUser: _ts.idUser,
+            email: _ts.emailForm.email,
+            code: _ts.emailForm.code
+          }
+          _ts.$axios.$patch('/api/user-info/update-email', data).then(function (res) {
+            _ts.$set(_ts, 'btnLoading', false);
+            if (res) {
+              if (res.email) {
+                let user = _ts.user;
+                user.email = res.email;
+                _ts.$set(_ts, 'user', user);
+                _ts.$message(res.message);
+                _ts.$set(this, 'dialogVisible', false);
+              } else {
+                _ts.$message(res.message);
+              }
+            }
+          })
+
+        }
+      })
+    },
+    updatePassword() {
+      let _ts = this;
+      _ts.$refs.user.validate((valid) => {
+        if (valid) {
+          let password = _ts.user.password;
+          let confirmPassword = _ts.user.confirmPassword;
+          if (password === confirmPassword) {
+            _ts.$axios.$patch('/api/user-info/update-password', {
+              idUser: _ts.idUser,
+              password: password
+            }).then(function (res) {
+              if (res) {
+                _ts.$message(res.message);
+                let user = _ts.user;
+                user.password = '';
+                user.confirmPassword = '';
+                _ts.$set(_ts, 'user', user);
+              }
+            })
+          } else {
+            _ts.$message("两次输入的密码不一致!");
+          }
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'security');
+    this.getData();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>