From 85d0cec16f68c95ca006cd9ec550982eb17e516f Mon Sep 17 00:00:00 2001
From: yma16 <17685043634@163.com>
Date: Sat, 9 Jul 2022 14:05:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=8F=8D=E9=A6=88=E9=82=AE=E4=BB=B6?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Article.vue     | 308 +++++++++++++++++----------------
 src/components/email/Email.vue | 184 ++++++++++++++++++++
 2 files changed, 346 insertions(+), 146 deletions(-)
 create mode 100644 src/components/email/Email.vue

diff --git a/src/components/Article.vue b/src/components/Article.vue
index b96da78..a472017 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -197,7 +197,7 @@
               type="info"
               icon="el-icon-message"
               circle
-              @click="open_message"
+              @click="openDraw"
               style="background: rgb(255, 94, 0); border: none"
             >
             </el-button>
@@ -206,44 +206,54 @@
         </el-card>
       </div>
     </div>
+    <template>
+        <Email v-if="drawObj.show" :drawObj="drawObj"></Email>
+    </template>
   </div>
 </template>
 
 <script>
-import VueMarkdown from 'vue-markdown'
-import ArticleComment from '@/comment/ArticleComment'
-import EchartWeather from '@/weather/EchartWeather'
-import axios from 'axios'
+  import Email from '@/components/email/Email'
+import VueMarkdown from "vue-markdown";
+import ArticleComment from "@/comment/ArticleComment";
+import EchartWeather from "@/weather/EchartWeather";
+import axios from "axios";
 export default {
   components: {
     VueMarkdown, // 显示markdown的组件
     ArticleComment, // 子组件评论
-    EchartWeather // 天气
+    EchartWeather, // 天气
+    Email
   },
-  name: 'Article',
-  data () {
+  name: "Article",
+  data() {
     return {
+      msgDrawTitle:'~邮件沟通~',
+      direction:'rtl',
+      drawObj: {
+        show:false
+      },
       // baseurl: '/api/',
-      baseurl: '/api/',
+      baseurl: "/api/",
       // baseurl: "http://yongma16.xyz/",
-      msg: '内容',
-      commmentSlogan: '评论区',
-      day_challenge: '训练营',
+      msg: "内容",
+      commmentSlogan: "评论区",
+      day_challenge: "训练营",
       challenge_data: [
-        'css挑战',
-        'websocket聊天',
-        'echarts地图配置',
-        'vue3测试平台',
-        '更新中'
+        "css挑战",
+        "websocket聊天",
+        "echarts地图配置",
+        "vue3测试平台",
+        "更新中",
       ],
       md_data: [],
       md_title: [],
-      the_title: '',
+      the_title: "",
       sear_page: 0,
       index_page: 0,
-      data: ['threejs加载模型'],
-      slogan: '记忆碎片',
-      tabPosition: 'left',
+      data: ["threejs加载模型"],
+      slogan: "记忆碎片",
+      tabPosition: "left",
       weather_title: [],
       weather_high: [],
       weather_low: [],
@@ -251,9 +261,9 @@ export default {
       article_loc: 0,
       challenge_loc: -1,
       topshow: false,
-      userImg: '',
-      username: '匿名',
-      articleCommit: '评论区',
+      userImg: "",
+      username: "匿名",
+      articleCommit: "评论区",
       // 分页实现 page1 page2 指向数组
       pageAnalys: {},
       currentPage: 1,
@@ -263,225 +273,231 @@ export default {
       pageArray: [6, 8, 10],
       postcomment: {
         articleId: undefined,
-        articleCommit: null
+        articleCommit: null,
       },
-      articleId: [] // 文章的id
-    }
+      articleId: [], // 文章的id
+    };
   },
   watch: {
     topshow: function (newvalue, oldvalue) {
       if (newvalue === true) {
-        document.getElementById('topiconid').style.display = 'none'
+        document.getElementById("topiconid").style.display = "none";
       } else {
-        document.getElementById('topiconid').style.display = 'block'
+        document.getElementById("topiconid").style.display = "block";
       }
-    }
+    },
   },
-  beforeDestroy () {
-    window.removeEventListener('onload', this.topvisible())
+  beforeDestroy() {
+    window.removeEventListener("onload", this.topvisible());
   },
-  mounted () {
-    this.initPageSpliteFun()
-    window.addEventListener('onload', this.topvisible())
+  mounted() {
+    this.initPageSpliteFun();
+    window.addEventListener("onload", this.topvisible());
   },
   methods: {
-    initPageSpliteFun () {
-      this.splitLength = this.pageArray[0]
+    initPageSpliteFun() {
+      this.splitLength = this.pageArray[0];
     },
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       // 转到第一页md_title
-      let that = this
-      that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
+      let that = this;
+      that.pageAnalysFun(that.pageAnalys.allTitle, val); // 触发修改
     },
-    handleCurrentChange (val) {
-      let that = this
+    handleCurrentChange(val) {
+      let that = this;
       // 触发md_title的修改
-      that.currentPage = val
-      that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
+      that.currentPage = val;
+      that.pageAnalysFun(that.pageAnalys.allTitle); // 触发修改
     },
-    pageAnalysFun (allTitleArray, selectListLength) {
-      let that = this
-      that.total = allTitleArray.length // 总数
-      let splitLength = that.splitLength
+    pageAnalysFun(allTitleArray, selectListLength) {
+      let that = this;
+      that.total = allTitleArray.length; // 总数
+      let splitLength = that.splitLength;
       if (!selectListLength) {
-        that.splitLength = that.splitLength
+        that.splitLength = that.splitLength;
       } else {
-        this.currentPage = 1
-        that.splitLength = selectListLength // 划分长度
+        this.currentPage = 1;
+        that.splitLength = selectListLength; // 划分长度
       }
-      splitLength = that.splitLength
-      let splitNum = Math.ceil(that.total / splitLength) // 向上取整
-      that.pageAnalys.childNum = splitNum // 子数组个数
-      that.pageAnalys.allTitle = allTitleArray // 所有标题
-      that.pageAnalys.titleArray = new Array() // 子数组个数
-      let locSplit = 0
-      let locLength = splitLength // 每一页的条数
+      splitLength = that.splitLength;
+      let splitNum = Math.ceil(that.total / splitLength); // 向上取整
+      that.pageAnalys.childNum = splitNum; // 子数组个数
+      that.pageAnalys.allTitle = allTitleArray; // 所有标题
+      that.pageAnalys.titleArray = new Array(); // 子数组个数
+      let locSplit = 0;
+      let locLength = splitLength; // 每一页的条数
       while (splitNum--) {
         // 循环获取子数组
         if (splitNum >= 1) {
-          let childArray = []
+          let childArray = [];
           for (
             let temp = locSplit;
             temp < locLength && temp < that.total;
             ++temp, ++locSplit
           ) {
-            childArray.push(that.pageAnalys.allTitle[temp])
+            childArray.push(that.pageAnalys.allTitle[temp]);
           }
-          that.pageAnalys.titleArray.push(childArray)
-          locLength += splitLength // 分割数组长度后移
+          that.pageAnalys.titleArray.push(childArray);
+          locLength += splitLength; // 分割数组长度后移
         } else {
           // 最后一个数组
-          let childArray = []
+          let childArray = [];
           for (let temp = locSplit; temp < that.total; ++temp) {
-            childArray.push(that.pageAnalys.allTitle[temp])
+            childArray.push(that.pageAnalys.allTitle[temp]);
           }
-          that.pageAnalys.titleArray.push(childArray)
-          break
+          that.pageAnalys.titleArray.push(childArray);
+          break;
         }
       }
       try {
-        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
+        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
       } catch (e) {
-        throw Error(e)
+        throw Error(e);
       }
     },
     increment: function () {
-      this.$store.commit('increment')
+      this.$store.commit("increment");
     },
     topvisible: function () {
-      let dom = document.getElementById('hometitle')
-      this.topshow = this.elementIsVisibleInViewport(dom)
-      setTimeout(this.topvisible)
+      let dom = document.getElementById("hometitle");
+      this.topshow = this.elementIsVisibleInViewport(dom);
+      setTimeout(this.topvisible);
     },
     elementIsVisibleInViewport: function (el, partiallyVisible = false) {
       try {
-        const { top, left, bottom, right } = el.getBoundingClientRect()
-        return partiallyVisible
-          ? ((top > 0 && top < innerHeight) ||
-              (bottom > 0 && bottom < innerHeight)) &&
-              ((left > 0 && left < innerWidth) ||
-                (right > 0 && right < innerWidth))
-          : top >= 0 &&
-              left >= 0 &&
-              bottom <= innerHeight &&
-              right <= innerWidth
+        if (el && el.getBoundingClientRect instanceof Function) {
+          const { top, left, bottom, right } = el.getBoundingClientRect();
+          return partiallyVisible
+            ? ((top > 0 && top < innerHeight) ||
+                (bottom > 0 && bottom < innerHeight)) &&
+                ((left > 0 && left < innerWidth) ||
+                  (right > 0 && right < innerWidth))
+            : top >= 0 &&
+                left >= 0 &&
+                bottom <= innerHeight &&
+                right <= innerWidth;
+        }
       } catch (r) {
-        throw Error(r)
+        throw Error(r);
       }
     },
     li_errorClass: function () {},
     cssPage: function (index) {
-      this.challenge_loc = index
-      let name = this.challenge_data[index]
+      this.challenge_loc = index;
+      let name = this.challenge_data[index];
       switch (name) {
-        case 'css挑战':
+        case "css挑战":
           this.$router
             .push({
-              path: '/css'
+              path: "/css",
             })
             .catch((error) => {
-              throw Error(error)
-            })
-          break
-        case 'echarts地图配置':
+              throw Error(error);
+            });
+          break;
+        case "echarts地图配置":
           this.$router
             .push({
-              path: '/home'
+              path: "/home",
             })
             .catch((error) => {
-              throw Error(error)
-            })
-          break
-        case 'websocket聊天':
+              throw Error(error);
+            });
+          break;
+        case "websocket聊天":
           this.$router
             .push({
-              path: '/onlinewebsocket'
+              path: "/onlinewebsocket",
             })
             .catch((error) => {
-              throw Error(error)
-            })
-          break
-        case 'vue3测试平台':
-          window.open('http://yongma16.xyz/emoji_api/')
-          break
+              throw Error(error);
+            });
+          break;
+        case "vue3测试平台":
+          window.open("http://yongma16.xyz/emoji_api/");
+          break;
         default:
-          break
+          break;
       }
     },
     open_message: function () {
       this.$notify({
-        title: '欢迎合作',
-        message: '邮箱：1432448610@qq.com',
-        position: 'bottom-right'
-      })
+        title: "欢迎合作",
+        message: "邮箱：1432448610@qq.com",
+        position: "bottom-right",
+      });
     },
+    openDraw() {
+      this.drawObj.show = true;
+    },
+
     toTop: function () {
-      location.href = '#home' // 定位
-      document.getElementById('mainappid').scrollTop = 0
+      location.href = "#home"; // 定位
+      document.getElementById("mainappid").scrollTop = 0;
     }, // 返回天气相当于返回顶部
-    getCommentsFromArticle (id) {
-      this.$refs.commentRef.getComments(id) // 触发子组件的方法
+    getCommentsFromArticle(id) {
+      this.$refs.commentRef.getComments(id); // 触发子组件的方法
     },
     getArticles: function (page) {
-      let that = this // this指向转化
-      that.article_loc = page
+      let that = this; // this指向转化
+      that.article_loc = page;
       // 查找文章id 从1开始
       that.postcomment.articleId =
         that.articleId[
           parseInt(page + (that.currentPage - 1) * that.splitLength)
-        ]
+        ];
       // 提交数据 page从0开始
       axios
-        .post(that.baseurl + 'article/index/', {
-          value: page + (that.currentPage - 1) * that.splitLength
+        .post(that.baseurl + "article/index/", {
+          value: page + (that.currentPage - 1) * that.splitLength,
           // 传入索引
         })
         .then((res) => {
           if (res.data.code === 1) {
-            let respdata = res.data
-            let content = respdata.article
-            that.md_data = [] // 清空
+            let respdata = res.data;
+            let content = respdata.article;
+            that.md_data = []; // 清空
             content.map((o) => {
-              that.md_data.push(o) // 传入一个文章
-            })
-            that.the_title = respdata.the_title
+              that.md_data.push(o); // 传入一个文章
+            });
+            that.the_title = respdata.the_title;
           } else if (res.data.code === 0) {
             // alter("失败！")
-            that.$message.error('失败')
+            that.$message.error("失败");
           }
         })
         .catch((error) => {
-          throw Error(error)
-        })
-      that.getCommentsFromArticle(that.postcomment.articleId)
-    }
+          throw Error(error);
+        });
+      that.getCommentsFromArticle(that.postcomment.articleId);
+    },
   },
   created: function () {
     // 初始化
-    let that = this
+    let that = this;
     axios
-      .get(that.baseurl + 'article/index/')
+      .get(that.baseurl + "article/index/")
       .then((res) => {
-        let resdata = res.data
-        let content = resdata.article // 传递过来的文章 进行处理
-        let title = resdata.title
-        that.articleId = resdata.articleObjectId
-        that.postcomment.articleId = resdata.articleId
-        this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
+        let resdata = res.data;
+        let content = resdata.article; // 传递过来的文章 进行处理
+        let title = resdata.title;
+        that.articleId = resdata.articleObjectId;
+        that.postcomment.articleId = resdata.articleId;
+        this.$refs.commentRef.getComments(that.postcomment.articleId); // 触发子组件的方法
         content.map((o) => {
-          that.md_data.push(o)
-        })
+          that.md_data.push(o);
+        });
         let titleAllArray = title.map((o) => {
-          return o
-        })
-        that.the_title = resdata.the_title
-        this.pageAnalysFun(titleAllArray) // 分页
+          return o;
+        });
+        that.the_title = resdata.the_title;
+        this.pageAnalysFun(titleAllArray); // 分页
       })
       .catch((r) => {
-        throw Error(r)
-      }) // get log
-  }
-}
+        throw Error(r);
+      }); // get log
+  },
+};
 </script>
 
 <style scoped>
diff --git a/src/components/email/Email.vue b/src/components/email/Email.vue
new file mode 100644
index 0000000..5718466
--- /dev/null
+++ b/src/components/email/Email.vue
@@ -0,0 +1,184 @@
+<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>
-- 
GitLab