From 3f9c0fdef820bb459126026cd47e7e7686db12a8 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期五, 19 十一月 2021 17:17:44 +0800
Subject: [PATCH] add: 滿意度評分頁面切版、通知列表頁面切版
---
PAMapp/pages/notification/index.vue | 267 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 263 insertions(+), 4 deletions(-)
diff --git a/PAMapp/pages/notification/index.vue b/PAMapp/pages/notification/index.vue
index 6d66b10..2f49631 100644
--- a/PAMapp/pages/notification/index.vue
+++ b/PAMapp/pages/notification/index.vue
@@ -1,5 +1,264 @@
<template>
- <div>���
- <el-button @click="$router.push('/notification/detail')">�蝝啁�</el-button>
- </div>
-</template>
\ No newline at end of file
+<div class="notification-page">
+
+ <section class="notification-header">
+ <div>
+ <i class="icon-edit icon"
+ style="color:#1B365D"
+ @click="showNotification = true"
+ ></i>
+ </div>
+ </section>
+
+ <section class="notification-reviews"
+ @click="$router.push('/userReviews')">
+ <div class="reviews-txt">
+ 隢‵撖急遛��漲隤踵
+ </div>
+ </section>
+
+ <section class="notification-content">
+ <div class="notification-container">
+ <div
+ v-for="(item,index) in notificationList"
+ :key="index"
+ class="notification-card"
+ @click="readNotification(index)"
+
+
+ >
+ <div class="notification-card__aside">
+ <span
+ v-if="!item.hasRead"
+ class="notification-card__aside-unread-indicator"></span>
+ </div>
+ <div class="notification-card__content">{{ item.content }}</div>
+ <div class="notification-card__time-stamp">{{ item.time }}</div>
+ </div>
+ </div>
+ </section>
+
+ <PopUpFrame :isOpen.sync="showNotification" >
+ <div class="popup-txt">
+ <div>�</div>
+ <el-radio-group class="pam-radio-group--col" >
+ <el-radio-button class="mt-30" label="��撌脰�" @click.native="readNotification"></el-radio-button>
+ <el-radio-button class="mt-30" label="����" @click.native="deleteNotification"></el-radio-button>
+ </el-radio-group>
+ </div>
+ </PopUpFrame>
+
+</div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component
+export default class Notification extends Vue{
+ notificationList: NotificationIF[] = [
+ {
+ content:'撠10/30 02:00-14:00�脰��嚗�����董...',
+ time:'隞予 10:00',
+ hasRead: false,
+ },
+ {
+ content:'撠10/11 02:00-14:00�脰��嚗�����董...',
+ time:'隞予 10:00',
+ hasRead: false,
+ },
+ {
+ content:'撠9/28 02:00-14:00�脰��嚗�����董...',
+ time:'隞予 10:00',
+ hasRead: false,
+ },
+ {
+ content:'撠9/28 02:00-14:00�脰��嚗�����董...',
+ time:'隞予 10:00',
+ hasRead: false,
+ }
+
+ ];
+
+ showNotification = false;
+
+ readNotification(index?: number): void {
+ const targetNotification = this.notificationList[index];
+ const readNotifaction = (notification: NotificationIF) => notification.hasRead = true;
+ // 摰儔 霈 = ( �� : �� )
+ if (targetNotification) {
+ readNotifaction(targetNotification);
+ this.$router.push('/notification/detail');
+ } else {
+ this.notificationList.forEach((notification) => readNotifaction(notification));
+ }
+
+ }
+
+ deleteNotification(): void {
+ this.notificationList = [];
+ }
+}
+
+export interface NotificationIF {
+ content: string;
+ time: string;
+ hasRead: boolean;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.notification-page{
+ .notification-header{
+ display: flex;
+ justify-content: flex-end;
+ font-size:20px;
+ margin-bottom:20px;
+ .icon{
+ cursor: pointer;
+ display: flex;
+ }
+
+ }
+ .notification-reviews{
+ background-image: url('~/assets/images/satisfaction/notification_mob.svg');
+ height: 60px;
+ border-radius: 10px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+ cursor: pointer;
+ .reviews-txt{
+ font-size: 20px;
+ align-items: center;
+ font-weight: bold;
+ display: flex;
+ color: black;
+ -webkit-text-stroke: .3px #FFFF;
+
+ }
+ }
+
+ .notification-content{
+
+ .notification-container{
+
+ .notification-card {
+ height: 62px;
+ padding-bottom: 11px;
+ display: flex;
+ border-bottom: 1px solid #CCCCCC;
+ padding-top: 10px;
+ .notification-card__aside {
+ width: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .notification-card__aside-unread-indicator {
+ width: 10px;
+ height: 10px;
+ background-color: $YELLOW;
+ border-radius: 50%;
+ }
+ }
+ .notification-card__content {
+ font-size: 20px;
+ line-height: 1.5;
+ }
+ .notification-card__time-stamp {
+ display: flex;
+ width: 52px;
+ align-self: center;
+ font-size: 10px;
+ color: #707070;
+ }
+ }
+ }
+ }
+}
+.popup-txt{
+ font-size: 20px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+}
+
+
+@include desktop{
+
+ .notification-page{
+ .notification-header{
+ display: flex;
+ justify-content: flex-end;
+ font-size:24px;
+ margin-bottom:20px;
+ .icon{
+ cursor: pointer;
+ }
+
+ }
+ .notification-reviews{
+ background-image: url('~/assets/images/satisfaction/notification_web.svg');
+ height: 110px;
+ border-radius: 10px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 40px;
+ cursor: pointer;
+ .reviews-txt{
+ font-size: 20px;
+ align-items: center;
+ font-weight: bold;
+ display: flex;
+ color: black;
+ -webkit-text-stroke: .3px #FFFF;
+
+ }
+ }
+
+ .notification-content{
+
+ .notification-container{
+
+ .notification-card {
+ height: 60px;
+ padding-bottom: 10px;
+ display: flex;
+ border-bottom: 1px solid #CCCCCC;
+ padding-top: 10px;
+ .notification-card__aside {
+ width: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .notification-card__aside-unread-indicator {
+ width: 10px;
+ height: 10px;
+ background-color: $YELLOW;
+ border-radius: 50%;
+ }
+ }
+ .notification-card__content {
+ font-size: 20px;
+ line-height: 1.5;
+ padding-top: 10px;
+ }
+ .notification-card__time-stamp {
+ display: flex;
+ width: 52px;
+ align-self: center;
+ font-size: 10px;
+ color: #707070;
+ justify-content: flex-end;
+ flex: 1;
+ }
+ }
+ }
+ }
+}
+
+
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0