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>
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 {
                            this.$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>