Email.vue

<template>
  <!--  测试-->
  <!--      抽屉-->
  <el-drawer
    :title="msgDrawTitle"
    :visible.sync="drawObj.show"
    :direction="direction"
    v-loading="loading"
    element-loading-text="正在发送邮件..."
    element-loading-spinner="el-icon-loading"
    :before-close="handleDrawClose"
  >
    <div class="email-container">
      <div class="email-content">
        <el-form
          ref="emailForm"
          :model="emailForm"
          :rules="emailForm.rules"
          label-width="80px"
        >
          <el-form-item label="标题" prop="title">
            <el-input placeholder="标题" v-model="emailForm.title" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="邮箱" v-model="emailForm.email" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入邮件内容"
              v-model="emailForm.content"
              clearable
            >
            </el-input>
          </el-form-item>
          <div class="email-submit">
            <el-button type="primary" @click="sendEmail('emailForm')"
              >发送</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="email-footer">
        <p>联系邮箱</p>
        <p>1432448610@qq.com</p>
      </div>
    </div>
  </el-drawer>
</template>
<script>
//
import axios from "axios";
export default {
  props: {
    drawObj: Object,
  },
  data() {
    return {
      msgDrawTitle: "~邮件沟通~",
      direction: "rtl",
      msgDraw: false,
      baseUrl: "http://localhost:8006/",
      basePath: "send-email/",
      loading: false,
      emailForm: {
        title: "",
        email: "",
        content: "",
        rules: {
          title: [
            {
              type: "string",
              required: true,
              message: "标题不能为空",
              trigger: "blur",
            },
          ],
          email: [
            {
              type: "string",
              required: true,
              message: "邮件不能为空",
              trigger: "blur",
            },
            {
              validator: (callback, value) => {
                if (value) {
                  //  验证邮箱
                  let patter =
                    /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/;
                  let testEmail = patter.test(value);
                  if (!testEmail) {
                    return Promise.reject("请输入正确的邮箱格式");
                  }
                }
                return Promise.resolve();
              },
              trigger: "blur",
            },
          ],
          content: [
            {
              type: "string",
              required: true,
              message: "内容不能为空",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  methods: {
    //关闭抽屉
    handleDrawClose(done) {
      const that = this;
      that.drawObj.show = false;
    },
    //  发送消息
    sendEmail(formName) {
      //  发送email内容
      const that = this;
      that.loading = true;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            title: that.emailForm.title,
            email: that.emailForm.email,
            content: that.emailForm.content,
          };
          try {
            axios.post(that.baseUrl + that.basePath, params).then((res) => {
              if (res && res.code && res.code === 20000) {
                that.loading = false;
                that.$message({
                  message: "邮件发送成功！",
                  type: "success",
                });
                that.drawObj.show = false;
              }else{
                that.$message({
                  message: "邮件发送失败！",
                  type: "warning",
                });
              }
            });
          } catch (r) {
            that.loading = false;
            throw Error(r);
          }
        } else {
          that.loading = false;
        }
      });
    },
  },
};
</script>
<style>
.email-container {
}
.email-content {
  margin: 10px;
}
.email-submit {
  float: right;
}
.email-title,
.email-email {
  width: 50%;
  margin: 10px;
  display: block;
}
.email-footer {
  float: left;
  width: 100%;
  margin-left: 30px;
  text-align: left;
  font-size: 12px;
}
</style>