update: TODO#134659 通知 - 全部已讀 api 串接

Mila

2022-01-25 ca96eb6477c35a96f74382850daa93ead30835d2

update: TODO#134659 通知 - 全部已讀 api 串接

 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;
        }
      }
    }
  }


 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 {

 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();