From e76c1983b6a229628e9ab9247e0f66d6ceacbd00 Mon Sep 17 00:00:00 2001
From: daonan <91860300+daonan233@users.noreply.github.com>
Date: Sat, 25 Nov 2023 19:36:31 +0800
Subject: [PATCH] feat(mail): add mail system (#181)

* feat(mail): add mail system

* feat(mail): delete mailTest page

* fix(mail): delete mailTest page

* fix(mail): fix mail page

* fix(mail): fix some known network errors

* fix(mail): fix some errors

* fix(mail): change mail routers

* fix(mail): fix mail routers

* Revert "fix(mail): fix mail routers"

This reverts commit d2e884232bfd4a5f5bd085caf3602d7bc0be6f36.

* refactor(mails): reorganize files

* refactor(mails): move mails entrance

* fix(mails): fix APIs

* feat(mail):Added dropdown refresh and pagination functions, modified the format of mail display

* feat(mail):Added dropdown refresh and pagination functions, modified the format of mail display

* fix(mail):fix the error of loading more npotifications

* fix(mail):fix the error of loading more npotifications

* style: format pages.json

* refactor: remove notifications sending

* refactor: remove unused pics

---------

Co-authored-by: sheeplin <1270610465@qq.com>
---
 src/pages.json              |  14 ++-
 src/pages/home.vue          |   8 +-
 src/pages/mails/details.vue | 116 ++++++++++++++++++++
 src/pages/mails/index.vue   | 207 ++++++++++++++++++++++++++++++++++++
 src/pages/mails/send.vue    | 143 +++++++++++++++++++++++++
 src/pages/tools/index.vue   |  10 +-
 src/pages/users/me.vue      |  13 +++
 src/routers/mail.js         |  27 +++++
 src/services/mail.js        |  34 ++++++
 9 files changed, 565 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/mails/details.vue
 create mode 100644 src/pages/mails/index.vue
 create mode 100644 src/pages/mails/send.vue
 create mode 100644 src/routers/mail.js
 create mode 100644 src/services/mail.js

diff --git a/src/pages.json b/src/pages.json
index 33fb62cb..1ef1ca2d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -58,6 +58,18 @@
       "path": "pages/tools/relative",
       "style": {}
     },
+    {
+      "path": "pages/mails/index",
+      "style": {}
+    },
+    {
+      "path": "pages/mails/details",
+      "style": {}
+    },
+    {
+      "path": "pages/mails/send",
+      "style": {}
+    },
     {
       "path": "pages/tools/daily-expression/index",
       "style": {}
@@ -201,4 +213,4 @@
     "navigationBarTitleText": "兴化语记-莆仙方言在线工具"
   },
   "subPackages": []
-}
+}
\ No newline at end of file
diff --git a/src/pages/home.vue b/src/pages/home.vue
index e38dcd2c..ad56eaf3 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -103,7 +103,6 @@
             style="width: 100%"
           />
         </view>
-
         <view class="stand-view" />
       </view>
     </scroll-view>
@@ -116,6 +115,7 @@ import { toSearchPage } from '@/routers';
 import { toWordPage } from '@/routers/word';
 import { toArticlePage } from '@/routers/article';
 import { toLoginPage } from '@/routers/login';
+import { toMailsPage } from '@/routers/mail';
 
 const app = getApp();
 export default {
@@ -140,6 +140,7 @@ export default {
     this.announcements = await getAnnouncements();
   },
   methods: {
+    toMailsPage,
     toLoginPage,
     /**
      * 下拉刷新
@@ -192,19 +193,20 @@ export default {
     search() {
       toSearchPage();
     },
+
   },
 };
 </script>
 <style>
 .welcome-card {
   background-color: #ffffff;
-  border-radius: 20rpx;
+  border-radius: 20 rpx;
   margin: 5vw;
 }
 
 .word-card {
   background-color: #ffffff;
-  border-radius: 20rpx;
+  border-radius: 20 rpx;
   margin-right: 1vw;
 }
 </style>
diff --git a/src/pages/mails/details.vue b/src/pages/mails/details.vue
new file mode 100644
index 00000000..b9388684
--- /dev/null
+++ b/src/pages/mails/details.vue
@@ -0,0 +1,116 @@
+<template>
+  <view>
+    <cu-custom title="我的消息" />
+    <view class="mail-detail">
+      <view class="mail-header">
+        <img
+          :src="email.from.avatar"
+          class="avatar"
+          alt="Avatar"
+        >
+        <view class="sender-info">
+          <view class="nickname">
+            {{ email.from.nickname }}
+          </view>
+          <view class="time">
+            {{ email.time }}
+          </view>
+        </view>
+      </view>
+      <view class="mail-content">
+        <view class="mail-title">
+          {{ email.title }}
+        </view>
+        <view class="mail-text">
+          {{ email.content }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { getMailDetails } from '@/services/mail';
+
+export default {
+  data() {
+    return {
+      email: {
+        from: {
+          nickname: '',
+          avatar: '',
+          id: 0,
+        },
+        to: {
+          nickname: '',
+          avatar: '',
+          id: 0,
+        },
+        time: '',
+        title: '',
+        content: '',
+        public: true,
+        id: 0,
+      },
+    };
+  },
+  async onLoad(options) {
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0,
+    });
+    const { id } = options;
+    await this.getDetails(id);
+  },
+  methods: {
+    async getDetails(id) {
+      const res = await getMailDetails(id);
+      this.email = res;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mail-detail {
+  padding: 20px;
+}
+
+.mail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.sender-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.nickname {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.time {
+  color: #999;
+}
+
+.mail-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.mail-text {
+  font-size: 16px;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/pages/mails/index.vue b/src/pages/mails/index.vue
new file mode 100644
index 00000000..2057ce1c
--- /dev/null
+++ b/src/pages/mails/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <view>
+    <cu-custom title="邮箱列表" />
+    <scroll-view
+      :scroll-y="true"
+      style="height: 85vh"
+      :refresher-enabled="true"
+      refresher-default-style="none"
+      refresher-background="white"
+      :refresher-triggered="triggered"
+      @refresherpulling="onPulling"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="loadMoreEmails"
+    >
+      <view class="email-list">
+        <!--view
+          v-if="emails.length||emails.length === 0"
+          class="empty-message"
+        >
+          当前没有新的消息哦
+        </view-->
+        <view
+          v-for="email in showEmails"
+          :key="email.id"
+          @click="viewEmail(email.id)"
+        >
+          <view class="email-item">
+            <view class="email-title">
+              {{ email.title }}
+            </view>
+            <img
+              :src="email.from.avatar"
+              class="email-avatar"
+              alt="Avatar"
+            >
+            <view class="email-info">
+              <view class="email-nickname">
+                {{ email.from.nickname }}
+              </view>
+              <view class="email-time">
+                {{ email.time }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <!-- 暂时关闭发送通知功能 -->
+    <!-- <view class="send-button">
+      <button @click="sendNotification">
+        发送通知
+      </button>
+    </view> -->
+  </view>
+</template>
+<script>
+import { ref, onMounted } from 'vue';
+import { getAllMails } from '@/services/mail';
+
+const app = getApp();
+
+export default {
+  data() {
+    return {
+      showEmails: [],
+      triggered: false,
+      page: 1,
+      freshing: false,
+    };
+  },
+  async onLoad() {
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 0,
+    });
+    await this.loadEmails();
+  },
+  methods: {
+    async loadEmails() {
+      // console.log(app.globalData.id);
+      // console.log(this.page);
+      const res = await getAllMails(this.page);
+      this.showEmails = res.notifications;
+      this.freshing = false;
+    },
+    viewEmail(id) {
+      uni.navigateTo({
+        url: `./details?id=${id}`,
+      });
+    },
+    async sendNotification() {
+      uni.navigateTo({
+        url: './send',
+      });
+    },
+    onPulling() {
+      this.triggered = true;
+    },
+
+    // 下拉刷新
+    onRefresh() {
+      if (this.freshing) {
+        return;
+      }
+      this.freshing = true;
+      this.loadEmails();
+      setTimeout(() => {
+        this.triggered = false;
+        this.freshing = false;
+      }, 500);
+    },
+
+    // 加载更多邮件
+    loadMoreEmails() {
+      uni.showLoading();
+      const { page } = this;
+      const originEmails = this.showEmails;
+      getAllMails(this.page + 1).then((res) => {
+        this.showEmails = originEmails.concat(res.notifications);
+        this.page += 1;
+        /* console.log('showEmails:', this.showEmails);
+        console.log('page:', this.page); */
+        setTimeout(() => {
+          uni.hideLoading();
+        }, 500);
+      });
+      // 打印一下当前page和showEmails
+    },
+  },
+};
+</script>
+
+<style scoped>
+.email-list {
+  padding: 20px;
+}
+
+.email-item {
+  border-radius: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.email-item:hover {
+  background-color: #f4f4f4;
+}
+
+.email-title {
+  font-weight: bold;
+  font-size: 24px;
+}
+
+.email-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+  color: #666;
+}
+
+.email-nickname {
+  font-size: 14px;
+}
+
+.email-time {
+  font-size: 12px;
+}
+
+.email-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+
+.empty-message {
+  text-align: center;
+  font-size: 16px;
+  color: #999;
+  margin-top: 20px;
+}
+
+.send-button {
+  text-align: center;
+  position: fixed;
+  bottom: 20px;
+  left: 15%;
+  width: 70%;
+}
+
+.send-button button {
+  background-color: #39C5BB;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+}
+
+.send-button button:hover {
+  background-color: #2fa299;
+}
+</style>
diff --git a/src/pages/mails/send.vue b/src/pages/mails/send.vue
new file mode 100644
index 00000000..ce162fc6
--- /dev/null
+++ b/src/pages/mails/send.vue
@@ -0,0 +1,143 @@
+<template>
+  <view>
+    <cu-custom title="发送邮件" />
+    <view class="send-email">
+      <view class="email-form">
+        <label class="input-label">接收者ID</label>
+        <input
+          v-model="Notification.recipients[0]"
+          placeholder="请输入接收者ID"
+          class="input-field input-field-tall"
+        >
+        <label class="input-label">邮件标题</label>
+        <input
+          v-model="Notification.title"
+          placeholder="请输入邮件标题"
+          class="input-field input-field-tall"
+        >
+
+        <label class="input-label">邮件内容</label>
+        <textarea
+          v-model="Notification.content"
+          placeholder="请输入邮件内容"
+          class="input-field"
+        />
+
+        <button
+          class="submit-button"
+          @click="sendEmail"
+        >
+          提交
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { postMail } from '@/services/mail';
+
+export default {
+  data() {
+    return {
+      Notification: {
+        recipients: [],
+        title: '',
+        content: '',
+      },
+    };
+  },
+  methods: {
+    async sendEmail() {
+      postMail(this.Notification).then((response) => {
+        uni.showToast({
+          title: '邮件发送成功！',
+          icon: 'success',
+        });
+        // 清空表单
+        this.receiverId = '';
+        this.emailTitle = '';
+        this.emailContent = '';
+      }).catch((err) => {
+        uni.showToast({
+          title: '邮件发送失败!',
+          icon: 'none',
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.input-label {
+  font-size: 14px;
+  margin-bottom: 5px;
+  color: #333;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
+}
+
+.send-email {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+}
+
+.email-form {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+}
+
+.input-field {
+  width: 100%;
+  padding: 12px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+textarea {
+  resize: vertical;
+  height: 150px;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.submit-button {
+  background-color: #39c5bb;
+  color: white;
+  padding: 12px 0;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  width: 100%;
+  transition: background-color 0.3s;
+}
+
+.submit-button:hover {
+  background-color: #2e9e95;
+}
+
+@media screen and (max-width: 768px) {
+  .email-form {
+    padding: 20px;
+  }
+}
+
+/* 调整输入框高度 */
+.input-field-tall {
+  height: 40px;
+}
+</style>
diff --git a/src/pages/tools/index.vue b/src/pages/tools/index.vue
index 429a018c..0c2043db 100644
--- a/src/pages/tools/index.vue
+++ b/src/pages/tools/index.vue
@@ -63,6 +63,10 @@ export default {
           img: 'https://cos.edialect.top/website/亲戚计算.png',
           url: '/tools/relative',
         },
+        {
+          img: 'https://pic.imgdb.cn/item/64d45b0e1ddac507ccef0460.png',
+          url: '/wordlists/details',
+        },
       ],
     };
   },
@@ -88,11 +92,11 @@ export default {
 <style>
 .cardTitle {
   color: #fff;
-  padding: 90rpx 60rpx;
-  font-size: 40rpx;
+  padding: 90 rpx 60 rpx;
+  font-size: 40 rpx;
   font-weight: 300;
   transform: skew(-10deg, 0deg);
   position: relative;
-  text-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.3);
+  text-shadow: 0px 0px 6 rpx rgba(0, 0, 0, 0.3);
 }
 </style>
diff --git a/src/pages/users/me.vue b/src/pages/users/me.vue
index 2380528c..748ee5c9 100644
--- a/src/pages/users/me.vue
+++ b/src/pages/users/me.vue
@@ -60,6 +60,17 @@
         </view>
       </view>
       <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
+        <view
+          class="cu-item arrow"
+          @tap="toMailsPage"
+        >
+          <view class="content">
+            <text class="cuIcon-mail text-grey" />
+            <text class="text-grey">
+              我的邮箱
+            </text>
+          </view>
+        </view>
         <view class="cu-item arrow">
           <navigator
             class="content"
@@ -168,6 +179,7 @@ import {
 import {
   toChangePasswordPage, toPronunciationsPage, toUserInfoPage, toUserWordsPage,
 } from '@/routers/user';
+import { toMailsPage } from '@/routers/mail';
 
 const app = getApp();
 export default {
@@ -185,6 +197,7 @@ export default {
     this.getInfo();
   },
   methods: {
+    toMailsPage,
     toUserWordsPage,
     toChangePasswordPage,
     toUserInfoPage,
diff --git a/src/routers/mail.js b/src/routers/mail.js
new file mode 100644
index 00000000..1f33665a
--- /dev/null
+++ b/src/routers/mail.js
@@ -0,0 +1,27 @@
+/**
+ * 前往邮件详情界面
+ */
+
+export function toMailDetailsPage(id) {
+  uni.navigateTo({
+    url: `/pages/mails/details?id=${id}`,
+  });
+}
+
+/**
+ * 前往发送邮件界面
+ */
+export function toMailsSendingPage() {
+  uni.navigateTo({
+    url: '/pages/mails/send',
+  });
+}
+
+/**
+ * 前往邮件主界面
+ */
+export function toMailsPage() {
+  uni.navigateTo({
+    url: '/pages/mails/index',
+  });
+}
diff --git a/src/services/mail.js b/src/services/mail.js
new file mode 100644
index 00000000..998b665c
--- /dev/null
+++ b/src/services/mail.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request';
+
+export async function postMail(notification) {
+  try {
+    const response = await request.post('/website/notifications', notification);
+    // 请求成功时显示成功提示框
+    uni.showToast({
+      title: '请求成功',
+      icon: 'success',
+      duration: 2000,
+    });
+    return response.data; // 可根据需要返回响应数据
+  } catch (error) {
+    // 请求失败时显示失败提示框
+    uni.showToast({
+      title: '请求失败',
+      icon: 'none',
+      duration: 2000,
+    });
+    throw error; // 抛出错误以便上层处理
+  }
+}
+
+/* 获取用户所有的通知
+*/
+export async function getAllMails(page) {
+  return request.get(`/website/notifications?page=${page}`);
+}
+
+/* 获取某个通知的详情
+*/
+export async function getMailDetails(id) {
+  return request.get(`/website/notifications/${id}`);
+}