Skip to content

Commit

Permalink
feat(mail): add mail system (#181)
Browse files Browse the repository at this point in the history
* 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 d2e8842.

* 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 <[email protected]>
  • Loading branch information
daonan233 and lin594 authored Nov 25, 2023
1 parent 04d1283 commit e76c198
Show file tree
Hide file tree
Showing 9 changed files with 565 additions and 7 deletions.
14 changes: 13 additions & 1 deletion src/pages.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {}
Expand Down Expand Up @@ -201,4 +213,4 @@
"navigationBarTitleText": "兴化语记-莆仙方言在线工具"
},
"subPackages": []
}
}
8 changes: 5 additions & 3 deletions src/pages/home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@
style="width: 100%"
/>
</view>

<view class="stand-view" />
</view>
</scroll-view>
Expand All @@ -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 {
Expand All @@ -140,6 +140,7 @@ export default {
this.announcements = await getAnnouncements();
},
methods: {
toMailsPage,
toLoginPage,
/**
* 下拉刷新
Expand Down Expand Up @@ -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>
116 changes: 116 additions & 0 deletions src/pages/mails/details.vue
Original file line number Diff line number Diff line change
@@ -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>
207 changes: 207 additions & 0 deletions src/pages/mails/index.vue
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit e76c198

Please sign in to comment.