新增 忘记密码;修改密码;修改邮箱功能

src/apis/fetch.js

@@ -245,4 +245,24 @@ export default {
   updateSaleStatus(data) {
     return $http("/wuchan/update/voyageSaleStatus", data);
   },
+
+  // 发送验证码
+  sendEmailVerifyCode(data) {
+    return $http("/mail/send/verification", data);
+  },
+
+  // 修改密码(已登录)
+  changePassword(data) {
+    return $http("/user/change/password", data);
+  },
+
+  // 忘记密码(未登录)
+  forgetPassword(data) {
+    return $http("/user/forget/password", data);
+  },
+
+  // 修改登录子账户邮箱
+  changeSubAccountEmail(data) {
+    return $http("/user/cargo/update/email", data);
+  },
 };

src/components/Header.vue

@@ -28,7 +28,103 @@
     </div>
     <div class="right">
       <img class="user-icon" src="../assets/user.png" alt="" />
-      <div class="user">{{ contactName }}</div>
+      <el-dropdown>
+        <span class="user">
+          {{ contactName }}
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              @click="(changeModelVisible = true), (modelType = 'password')"
+            >
+              修改密码
+            </el-dropdown-item>
+            <el-dropdown-item
+              @click="(changeModelVisible = true), (modelType = 'email')"
+            >
+              修改邮箱
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <el-dialog
+        v-model="changeModelVisible"
+        :title="modelType == 'email' ? '修改邮箱' : '修改密码'"
+        width="500px"
+        @close="reset()"
+      >
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+        >
+          <el-form-item label="当前邮箱">
+            {{ email }}
+          </el-form-item>
+          <el-form-item v-if="modelType == 'email'" label="新邮箱" prop="email">
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.email"
+              placeholder="请输入新邮箱"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            v-if="modelType == 'password'"
+            label="验证码"
+            prop="verificationCode"
+          >
+            <el-input
+              style="width: 160px"
+              v-model="ruleForm.verificationCode"
+              placeholder="请输入验证码"
+            ></el-input>
+            <el-button
+              style="width: 120px"
+              class="ml20"
+              size="small"
+              type="primary"
+              @click="getCode"
+              :disabled="send"
+              :loading="send"
+            >
+              {{ send ? seconds + "秒后重发" : "获取验证码" }}
+            </el-button>
+          </el-form-item>
+          <el-form-item
+            v-if="modelType == 'password'"
+            label="新密码"
+            prop="newPassword"
+          >
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.newPassword"
+              placeholder="请输入新密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            v-if="modelType == 'password'"
+            label="确认新密码"
+            prop="password2"
+          >
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.password2"
+              placeholder="请确认新密码"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="df aic jcc">
+          <el-button
+            class="mr20"
+            type="primary"
+            @click="changeModelVisible = false"
+          >
+            取消
+          </el-button>
+          <el-button type="primary" @click="submitForm()">确定</el-button>
+        </div>
+      </el-dialog>
       <el-popover placement="bottom" trigger="hover" :width="280">
         <div
           style="
@@ -75,6 +171,10 @@ import store from "../store";
 import router from "../router";
 import { onMounted, ref } from "vue";
 import { AnonymousLogin, tcb } from "../apis/cloudLogin";
+import { ElMessage, ElNotification } from "element-plus";
+import api from "../apis/fetch";
+import md5 from "md5";
+
 const db = tcb.database();
 const v = db.collection("huihenduo_versions");
 const __ = db.command;
@@ -111,6 +211,112 @@ async function cloudLogin() {
   getAbledVersions();
 }
 
+let changeModelVisible = ref(false);
+const email = localStorage.email;
+const ruleFormRef = ref(null);
+const ruleForm = ref({
+  email: "",
+  verificationCode: "",
+  newPassword: "",
+});
+const rules = {
+  email: [
+    { required: true, message: "请输入邮箱地址", trigger: "blur" },
+    {
+      type: "email",
+      message: "请输入正确的邮箱地址",
+      trigger: ["blur", "change"],
+    },
+  ],
+  newPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  password2: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  verificationCode: [
+    { required: true, message: "请输入验证码", trigger: "blur" },
+  ],
+};
+function submitForm() {
+  ruleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      if (modelType.value == "email") {
+        let { data } = await api.changeSubAccountEmail({
+          email: ruleForm.value.email,
+        });
+        if (data.status === 0) {
+          ElNotification({
+            title: "提示",
+            message: "重置成功！",
+            type: "success",
+          });
+          changeModelVisible.value = false;
+        } else {
+          ElMessage({
+            title: "提示",
+            message: data.msg,
+            type: "warning",
+          });
+        }
+      } else if (modelType.value == "password") {
+        if (ruleForm.value.newPassword !== ruleForm.value.password2) {
+          ElMessage({
+            title: "提示",
+            message: "两次密码不一致",
+            type: "warning",
+          });
+          return;
+        }
+        let { data } = await api.changePassword({
+          verificationCode: ruleForm.value.verificationCode,
+          newPassword: md5(md5(ruleForm.value.newPassword)),
+        });
+        if (data.status === 0) {
+          ElNotification({
+            title: "提示",
+            message: data.msg,
+            type: "success",
+          });
+          changeModelVisible.value = false;
+
+          quit();
+        } else {
+          ElMessage({
+            title: "提示",
+            message: data.msg,
+            type: "warning",
+          });
+        }
+      }
+    }
+  });
+}
+function reset() {
+  ruleForm.value = {};
+}
+const modelType = ref("");
+
+const send = ref(false);
+const seconds = ref(10);
+async function getCode() {
+  send.value = true;
+  let { data } = await api.sendEmailVerifyCode({
+    email: localStorage.email,
+    verificationType: 2,
+  });
+  if (data.status === 0) {
+    ElMessage({
+      title: "提示",
+      message: "验证码已发送，请注意查收",
+      type: "success",
+    });
+    let timer = setInterval(() => {
+      seconds.value--;
+      if (seconds.value <= 0) {
+        clearInterval(timer);
+        send.value = false;
+        seconds.value = 10;
+      }
+    }, 1000);
+  }
+}
 onMounted(() => {
   cloudLogin();
   // logoUrl.value = localStorage.logoUrl || "../assets/white-logo.png";

src/main.js

@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => {
     }
   } else {
     store.commit("changeLogin", false);
-    if (to.path == "/login") {
+    if (to.path == "/login" || to.path == "/forgetPassword") {
       next();
     } else {
       next("/login");

src/router/index.js

@@ -19,6 +19,14 @@ const router = createRouter({
       },
       component: Index,
     },
+    {
+      path: "/forgetPassword",
+      name: "forgetPassword",
+      meta: {
+        title: "忘记密码",
+      },
+      component: () => import("../views/index/forgetPassword.vue"),
+    },
     {
       path: "/login",
       name: "login",

src/views/index/Login.vue

@@ -50,6 +50,19 @@
                 登录
               </el-button>
             </el-form-item>
+
+            <div
+              style="
+                text-align: center;
+                text-decoration: underline;
+                color: #999;
+                font-size: 14px;
+                cursor: pointer;
+              "
+              @click="router.push('/forgetPassword')"
+            >
+              忘记密码
+            </div>
           </el-form>
         </div>
         <div class="df aic jcc" style="margin-top: 55px">
@@ -196,7 +209,7 @@ function login() {
       let res = await api.staffLogin({
         phone,
         // password: md5(password).toUpperCase(),
-        password,
+        password: md5(md5(password)),
         ...postData,
       });
       if (res.data.status == 0) {
@@ -207,6 +220,7 @@ function login() {
           contactName,
           loginAccountId,
           rolePermission,
+          email,
         } = res.data.result;
         if (!rolePermission.length) {
           ElNotification.error({
@@ -228,6 +242,7 @@ function login() {
         localStorage.setItem("phone", phone);
         localStorage.setItem("contactName", contactName);
         localStorage.setItem("userType", 1);
+        localStorage.setItem("email", email);
         localStorage.setItem("loginAccountId", loginAccountId);
         localStorage.setItem(
           "logoUrl",

src/views/index/forgetPassword.vue

@@ -0,0 +1,187 @@
+<template>
+  <div style="background: #f2f2f2; height: 100vh">
+    <div
+      style="
+        background: #fff;
+        height: 60px;
+        line-height: 60px;
+        font-size: 24px;
+        color: #0094fe;
+        padding-left: 60px;
+      "
+    >
+      汇很多科技 |
+      <span style="font-size: 20px">忘记密码</span>
+    </div>
+    <el-card style="width: 620px; margin: 100px auto">
+      <template #header>
+        <div class="card-header">
+          <span>忘记密码</span>
+        </div>
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+        >
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.email"
+              placeholder="请输入邮箱"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="验证码" prop="verificationCode">
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.verificationCode"
+              placeholder="请输入验证码"
+            ></el-input>
+            <el-button
+              style="width: 120px"
+              class="ml20"
+              size="small"
+              type="primary"
+              @click="getCode"
+              :disabled="send"
+              :loading="send"
+            >
+              {{ send ? seconds + "秒后重发" : "获取验证码" }}
+            </el-button>
+          </el-form-item>
+          <el-form-item label="新密码" prop="newPassword">
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.newPassword"
+              placeholder="请输入新密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="password2">
+            <el-input
+              style="width: 300px"
+              v-model="ruleForm.password2"
+              placeholder="请输入确认密码"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="df aic jcc">
+          <el-button
+            style="width: 120px; margin-right: 50px"
+            size="small"
+            type="primary"
+            @click="goBack()"
+          >
+            返回
+          </el-button>
+          <el-button
+            style="width: 120px"
+            size="small"
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-card>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, toRefs, computed, onMounted, inject } from "vue";
+import { ElMessage, ElNotification } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+
+import md5 from "md5";
+import api from "../../apis/fetch";
+import downloadBlobFile from "../../utils/downloadBlobFile";
+import url from "../../apis/config";
+const ruleFormRef = ref(null);
+const ruleForm = ref({});
+const rules = ref({
+  email: [
+    { required: true, message: "请输入邮箱", trigger: "blur" },
+    {
+      type: "email",
+      message: "请输入正确的邮箱地址",
+      trigger: ["blur", "change"],
+    },
+  ],
+  verificationCode: [
+    { required: true, message: "请输入验证码", trigger: "blur" },
+  ],
+  newPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  password2: [{ required: true, message: "请输入确认密码", trigger: "blur" }],
+});
+const send = ref(false);
+const seconds = ref(10);
+async function getCode() {
+  if (!ruleForm.value.email) {
+    ElMessage({
+      title: "提示",
+      message: "请输入邮箱",
+      type: "warning",
+    });
+    return;
+  }
+  send.value = true;
+
+  let { data } = await api.sendEmailVerifyCode({
+    email: ruleForm.value.email,
+    verificationType: 1,
+  });
+  if (data.status === 0) {
+    ElMessage({
+      title: "提示",
+      message: "验证码已发送，请注意查收",
+      type: "success",
+    });
+    let timer = setInterval(() => {
+      seconds.value--;
+      if (seconds.value <= 0) {
+        clearInterval(timer);
+        send.value = false;
+        seconds.value = 10;
+      }
+    }, 1000);
+  }
+}
+function goBack() {
+  router.push("/login");
+}
+function submitForm() {
+  ruleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      if (ruleForm.value.newPassword !== ruleForm.value.password2) {
+        ElMessage({
+          title: "提示",
+          message: "两次密码不一致",
+          type: "warning",
+        });
+        return;
+      }
+      let { data } = await api.forgetPassword({
+        email: ruleForm.value.email,
+        verificationCode: ruleForm.value.verificationCode,
+        newPassword: md5(md5(ruleForm.value.newPassword)),
+      });
+      if (data.status === 0) {
+        ElNotification({
+          title: "提示",
+          message: "重置成功,请重新登录！",
+          type: "success",
+        });
+        router.replace("/login");
+      } else {
+        ElMessage({
+          title: "提示",
+          message: data.msg,
+          type: "warning",
+        });
+      }
+    }
+  });
+}
+</script>
+
+<style scoped></style>