From ca96eb6477c35a96f74382850daa93ead30835d2 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 25 一月 2022 14:34:57 +0800
Subject: [PATCH] update: TODO#134659 通知 - 全部已讀 api 串接
---
PAMapp/components/NavBar.vue | 27 +++++++++++++++++++++++++--
PAMapp/shared/services/reviews.service.ts | 5 +++++
PAMapp/pages/notification/index.vue | 28 ++++------------------------
3 files changed, 34 insertions(+), 26 deletions(-)
diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index af197ad..75290c0 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -9,9 +9,12 @@
<div class="pam-header__action-bar">
<i
v-if="isShowNotification"
- class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
+ class="icon-bell text--dark-blue cursor--pointer"
@click="$router.push('/notification')"
- ></i>
+ >
+ <span :class="{'newNotification': isNewNotification}"></span>
+ </i>
+
<el-dropdown :class="{'is-open':isOpenDropdown}"
ref="dropdown"
trigger="click"
@@ -180,6 +183,12 @@
}
}
+ get isNewNotification() {
+ if (this.currentRole) {
+ return this.notificationList.filter(item => !item.readDate).length;
+ }
+ }
+
}
</script>
@@ -245,6 +254,7 @@
i {
padding: 0px 15px;
+ @extend .fix-chrome-click--issue;
@media screen and (max-width: 352px) {
padding: 0px 10px;
@@ -257,6 +267,19 @@
margin: 0px 10px;
}
}
+
+ .icon-bell {
+ position: relative;
+ .newNotification {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ top: 0;
+ right: 15px;
+ border-radius: 50px;
+ background: $PRIMARY_RED;
+ }
+ }
}
}
diff --git a/PAMapp/pages/notification/index.vue b/PAMapp/pages/notification/index.vue
index f79907c..0dd2509 100644
--- a/PAMapp/pages/notification/index.vue
+++ b/PAMapp/pages/notification/index.vue
@@ -1,9 +1,5 @@
<template>
<div>
- <!-- TODO: ��撌脰�/���� ���摰����瘙�Ⅱ隤� ����� -->
- <!-- <div class="text--right mb-10" @click="showNotificationHint = true">
- <i class="satisfaction-icon icon-edit"></i>
- </div> -->
<div
v-if="isUserLogin && unReviewLogList.length"
class="satisfaction-banner my-10 cursor--pointer"
@@ -19,8 +15,7 @@
align="middle"
class="notification-card"
>
- <!-- TODO: ��撌脰�/���� ���摰����瘙�Ⅱ隤� ����� -->
- <!-- <el-col class="unRead" :span="3" v-if="!item.readDate"></el-col> -->
+ <el-col class="unRead" :span="3" v-if="!item.readDate"></el-col>
<el-col :span="18">
<p class="text">{{item.content}}</p>
</el-col>
@@ -40,22 +35,6 @@
</el-col>
</el-row>
-
- <PopUpFrame
- :isOpen.sync="showNotificationHint"
- >
- <div class="text--center mdTxt">
- <p class="mb-30">�</p>
- <div class="mb-20 cursor--pointer">��撌脰�</div>
- <div class="cursor--pointer">����</div>
- <div class="text--center mt-30">
- <el-button
- type="primary"
- @click="showNotificationHint = false"
- >蝣箏��</el-button>
- </div>
- </div>
- </PopUpFrame>
</div>
</template>
@@ -64,6 +43,7 @@
import { AppointmentLog } from "~/shared/models/appointment.model";
import { NotificationList } from "~/shared/models/reviews.model";
import authService from "~/shared/services/auth.service";
+import reviewsService from "~/shared/services/reviews.service";
@Component
export default class Notification extends Vue {
@@ -74,13 +54,13 @@
@State
notificationList!: NotificationList[];
- showNotificationHint = false;
isUserLogin = false;
////////////////////////////////////////////////////////////
mounted() {
this.isUserLogin = authService.isUserLogin();
+ reviewsService.readAllMyNotification().then(res => res);
}
}
@@ -121,7 +101,7 @@
width: 10px;
height: 10px;
border-radius: 50px;
- background-color: $YELLOW;
+ background-color: $PRIMARY_RED;
}
.notification-period {
diff --git a/PAMapp/shared/services/reviews.service.ts b/PAMapp/shared/services/reviews.service.ts
index 4bd81df..a4dcbb4 100644
--- a/PAMapp/shared/services/reviews.service.ts
+++ b/PAMapp/shared/services/reviews.service.ts
@@ -30,6 +30,11 @@
getMyPersonalNotification(): Promise<NotificationList[]> {
return http.get('/personal_notification/getMyPersonalNotification').then(res => res.data);
}
+
+ // ������������閮剖�撌脰�
+ readAllMyNotification() {
+ return http.post('/personal_notification/readAllMyNotification')
+ }
}
export default new ReviewsService();
--
Gitblit v1.8.0