Update:小鈴鐺內,點擊進行滿意度評分banner圖片更改 & 匹配度顯示

HelenHuang

2022-02-16 10c73966d79b72196a26b4b5e0ad15a299b82b1f

 PAMapp/pages/notification/index.vue

@@ -1,10 +1,10 @@
<template>
    <div>
        <div class="text--right mb-10" @click="showNotificationHint = true">
            <i class="satisfaction-icon icon-edit"></i>
        </div>
        <div class="satisfaction-banner my-10 cursor--pointer" @click="$router.push('/satisfactionList')">
            <p class="satisfaction-text text--center">請填寫滿意度調查</p>
        <div
            v-if="isUserLogin && unReviewLogList.length"
            class="satisfaction-banner my-10 cursor--pointer"
            @click="$router.push('/satisfactionList')"
        >
        </div>
        <el-row
            v-for="(item, index) in notificationList"
@@ -14,7 +14,7 @@
            align="middle"
            class="notification-card"
        >
            <el-col class="unRead" :span="3"></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>
@@ -22,54 +22,46 @@
                <div>
                    <UiDateFormat
                        class="date"
                        :date="item.date"
                        :date="item.createdDate"
                        onlyShowSection="DAY" />
                </div>
                <div>
                    <UiDateFormat
                        class="time"
                        :date="item.date"
                        :date="item.createdDate"
                        onlyShowSection="TIME" />
                </div>

            </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>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { Component, State, Vue } from "nuxt-property-decorator";
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 {
    showNotificationHint = false;

    notificationList = [
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        },
        {
            content: '系統停機公告：10/19(五)22:30至10/21(日)20:00進行系統更新',
            date: '2022-01-05T04:18:05.249Z'
        }
    ]
    @State
    unReviewLogList!: AppointmentLog[];

    @State
    notificationList!: NotificationList[];

    isUserLogin = false;

    ////////////////////////////////////////////////////////////

    mounted() {
        this.isUserLogin = authService.isUserLogin();
        reviewsService.readAllMyNotification().then(res => res);
    }

}
</script>

@@ -77,7 +69,7 @@
    .satisfaction-banner {
        width: 100%;
        height: 60px;
        background-image: url('~/assets/images/satisfaction/satisfactionBtn_mob.svg');
        background-image: url('~/assets/images/satisfaction/satisfactionBtn_s_mob.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
@@ -91,7 +83,7 @@

        @include desktop {
            height: 110px;
            background-image: url('~/assets/images/satisfaction/satisfactionBtn_web.svg');
            background-image: url('~/assets/images/satisfaction/satisfactionBtn_s_web.svg');

            .satisfaction-text {
                font-size: 24px;
@@ -108,7 +100,7 @@
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $YELLOW;
            background-color: $PRIMARY_RED;
        }

        .notification-period {
@@ -129,4 +121,4 @@
        font-size: 24px;
        @extend .cursor--pointer;
    }
</style>
</style>