保存

mail-vue/src/views/setting/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="box">
+    <div class="pass">
+      <div class="title">账户与密码</div>
+      <div class="pass-item">
+        <div>邮箱</div>
+        <div>{{ userStore.user.email }}</div>
+      </div>
+      <div class="pass-item">
+        <div>密码</div>
+        <div>
+          <el-button type="primary"  @click="pwdShow = true">修改密码</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="del-email">
+      <div class="title">删除账户</div>
+      <div style="color: #585d69;">
+        此操作将永久删除您的账户及其所有数据，无法恢复
+      </div>
+      <div>
+        <el-button type="primary" @click="deleteConfirm">删除账户</el-button>
+      </div>
+    </div>
+    <el-dialog v-model="pwdShow" title="修改密码" width="340">
+      <form>
+        <div class="update-pwd">
+          <el-input type="password"  placeholder="新的密码" v-model="form.password"/>
+          <el-input type="password"  placeholder="确认密码" v-model="form.newPwd"/>
+          <el-button type="primary" :loading="setPwdLoading"  @click="submitPwd">保存</el-button>
+        </div>
+      </form>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import {defineOptions} from "vue";
+import {reactive, ref} from 'vue'
+import {resetPassword, userDelete} from "@/request/user.js";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useUserStore} from "@/store/user.js";
+import router from "@/router/index.js";
+const userStore = useUserStore();
+const setPwdLoading = ref(false)
+
+defineOptions({
+  name: 'setting'
+})
+
+const pwdShow = ref(false)
+const form = reactive({
+  password: '',
+  newPwd: '',
+})
+
+const deleteConfirm = () => {
+  ElMessageBox.confirm('确认删除当前账号及所有数据吗?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userDelete().then(() => {
+      localStorage.removeItem('token');
+      router.replace('/login');
+      ElMessage({
+        message: '删除成功',
+        type: 'success',
+        plain: true,
+      })
+    })
+  })
+}
+
+
+function submitPwd() {
+
+  if (!form.password) {
+    ElMessage({
+      message: '密码不能为空',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (form.password.length < 6) {
+    ElMessage({
+      message: '密码不能小于6位',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  if (form.password !== form.newPwd) {
+    ElMessage({
+      message: '两次密码输入不一致',
+      type: 'error',
+      plain: true,
+    })
+    return
+  }
+
+  setPwdLoading.value = true
+  resetPassword(form.password).then(() => {
+    ElMessage({
+      message: '修改成功',
+      type: 'success',
+      plain: true,
+    })
+    pwdShow.value = false
+    setPwdLoading.value = false
+    form.password = ''
+    form.newPwd = ''
+  }).catch(() => {
+    setPwdLoading.value = false
+  })
+
+}
+
+</script>
+<style scoped lang="scss">
+.box {
+  padding: 40px 40px;
+
+  .update-pwd {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .pass {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 40px;
+
+    .pass-item {
+      display: grid;
+      grid-template-columns: 50px 1fr;
+      gap: 140px;
+      @media (max-width: 767px) {
+        gap: 80px;
+      }
+      div:first-child {
+        font-weight: bold;
+      }
+      div:last-child {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .del-email {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+</style>