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"
    :wrapperClosable="false"
    class="email-drawer"
  >
    <template v-if="drawObj.show">
      <div class="email-container">
        <div class="email-content">
          <el-form
            ref="emailForm"
            :model="emailForm"
            :rules="emailForm.rules"
            label-width="60px"
          >
            <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>
    </template>
  </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 =
                    /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                  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;
      that.emailForm.title = "";
      that.emailForm.email = "";
      that.emailForm.content = "";
    },
    //  发送消息
    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) => {
                  if (
                    res &&
                    res.data &&
                    res.data.code &&
                    res.data.code === 20000
                  ) {
                    that.loading = false;
                    that.$message({
                      message: "邮件发送成功！",
                      type: "success",
                    });
                    that.handleDrawClose()
                  } else {
                    that.loading = false;
                    that.$message({
                      message: "邮件发送失败！",
                      type: "warning",
                    });
                  }
                })
                .catch((r) => {
                  that.loading = false;
                  that.$message({
                    message: "邮件发送失败！",
                    type: "warning",
                  });
                  throw Error(r);
                });
            } catch (r) {
              that.loading = false;
              that.$message({
                message: "邮件发送失败！",
                type: "warning",
              });
              throw Error(r);
            }
          } else {
            that.loading = false;
          }
        });
      } catch (r) {
        that.loading = false;
        throw Error(r);
      }
    },
  },
};
</script>
<style>
.el-drawer__open .el-drawer.rtl {
  background: rgba(212, 190, 180, 1); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to left,
    rgba(212, 190, 180, 1),
    rgba(255, 255, 255, 1)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to left,
    rgba(212, 190, 180, 1),
    rgba(255, 255, 255, 1)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*overflow: hidden;*/
}
.el-drawer__body {
  overflow: hidden;
}
.email-container {
  padding: 10px;
}
.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>