新增 邮箱配置功能

src/apis/fetch.js

@@ -479,4 +479,14 @@ export default {
   updateShippingCompanyExpiredTime(data) {
     return $http("/shipping/updateExpiredTime", data);
   },
+
+  // 修改邮箱配置
+  updateEmailConfig(data) {
+    return $http("/mail/change/account", data);
+  },
+
+  // 获取邮箱配置
+  getEmailConfig() {
+    return $http("/mail/get/account");
+  },
 };

src/components/Aside.vue

@@ -138,6 +138,10 @@ export default {
             path: "/urls",
             name: "项目集成",
           },
+          {
+            path: "/emailConfig",
+            name: "邮箱配置",
+          },
         ],
       },
     ];

src/router/index.js

@@ -208,6 +208,14 @@ const router = createRouter({
       },
       component: () => import("../views/toolManage/urls.vue"),
     },
+    {
+      path: "/emailConfig",
+      name: "emailConfig",
+      meta: {
+        title: "邮箱配置",
+      },
+      component: () => import("../views/toolManage/emailConfig.vue"),
+    },
   ],
 });
 

src/views/toolManage/emailConfig.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="full-container-p24">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleFormRef"
+      label-width="100px"
+    >
+      <el-form-item label="邮箱名称" prop="username">
+        <el-input
+          class="w500"
+          v-model="ruleForm.username"
+          placeholder="请输入用户名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-input
+          class="w500"
+          v-model="ruleForm.newPassword"
+          placeholder="请输入新密码"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="发件人名称" prop="from">
+        <el-input
+          class="w500"
+          v-model="ruleForm.from"
+          placeholder="请输入邮箱地址"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="SMTP服务器" prop="smtpHost">
+        <el-input
+          class="w500"
+          v-model="ruleForm.smtpHost"
+          placeholder="请输入SMTP服务器"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="SMTP端口" prop="smtpPort">
+        <el-input
+          class="w500"
+          v-model="ruleForm.smtpPort"
+          placeholder="请输入SMTP端口"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="开启SSL加密" prop="enableSsl">
+        <el-switch
+          v-model="ruleForm.enableSsl"
+          active-text="开启"
+          :active-value="1"
+          inactive-text="关闭"
+          :inactive-value="0"
+        />
+      </el-form-item>
+      <el-button
+        style="margin-left: 480px"
+        type="primary"
+        @click="updateEmailConfig()"
+      >
+        更新邮箱配置
+      </el-button>
+    </el-form>
+  </div>
+</template>
+<script setup>
+import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+import md5 from "md5";
+import api from "../../apis/fetch";
+
+const ruleFormRef = ref(null);
+const ruleForm = ref({
+  username: "",
+  from: "",
+  newPassword: "",
+  password: "",
+  smtpHost: "",
+  smtpPort: 0,
+  enableSsl: 0,
+});
+const rules = ref({});
+async function getEmailConfig() {
+  let { data } = await api.getEmailConfig();
+  ruleForm.value = data.result;
+  console.log(data);
+}
+async function updateEmailConfig() {
+  ElMessageBox.confirm("确认更新邮箱配置", "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    if (
+      md5(md5(ruleForm.value.newPassword)) === ruleForm.value.password ||
+      ruleForm.value.newPassword === ""
+    ) {
+      delete ruleForm.value.password;
+      delete ruleForm.value.newPassword;
+    } else {
+      ruleForm.value.password = md5(md5(ruleForm.value.newPassword));
+      delete ruleForm.value.newPassword;
+    }
+    let { data } = await api.updateEmailConfig({
+      ...ruleForm.value,
+    });
+    console.log(data);
+  });
+}
+
+onMounted(() => {
+  getEmailConfig();
+});
+</script>
+<style scoped>
+.title {
+  width: 140px;
+}
+
+.w500 {
+  width: 500px;
+}
+</style>