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: "/api/",
      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() {
      const that = this;
      that.drawObj.show = false;
    },
    //  发送消息
    sendEmail(formName) {
      //  发送email内容
      try {
        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) => {
                console.log(res);
                if (
                  res &&
                  res.data &&
                  res.data.code &&
                  res.data.code === 20000
                ) {
                  that.loading = false;
                  that.$message({
                    message: "邮件发送成功！",
                    type: "success",
                  });
                  that.drawObj.show = false;
                } else {
                  that.loading = false;
                  that.$message({
                    message: "邮件发送失败！",
                    type: "warning",
                  });
                }
              });
            } catch (r) {
              that.loading = false;
              throw Error(r);
            }
          } else {
            that.loading = false;
          }
        });
      } catch (r) {
        that.loading = false;
        throw Error(r);
      }
    },
  },
};
</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>