Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/pages/notification/index.vue

@@ -1,5 +1,124 @@
<template>
    <div>通知功能
        <el-button @click="$router.push('/notification/detail')">通知細節</el-button>
    <div>
        <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"
            :key="index"
            type="flex"
            justify="space-between"
            align="middle"
            class="notification-card"
        >
            <el-col class="unRead" :span="3" v-if="!item.readDate"></el-col>
            <el-col :span="18">
                <p class="text">{{item.content}}</p>
            </el-col>
            <el-col :span="3" class="notification-period text--right">
                <div>
                    <UiDateFormat
                        class="date"
                        :date="item.createdDate"
                        onlyShowSection="DAY" />
                </div>
                <div>
                    <UiDateFormat
                        class="time"
                        :date="item.createdDate"
                        onlyShowSection="TIME" />
                </div>

            </el-col>
        </el-row>
    </div>
</template>
</template>

<script lang="ts">
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 {

    @State
    unReviewLogList!: AppointmentLog[];

    @State
    notificationList!: NotificationList[];

    isUserLogin = false;

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

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

}
</script>

<style lang="scss" scoped>
    .satisfaction-banner {
        width: 100%;
        height: 60px;
        background-image: url('~/assets/images/satisfaction/satisfactionBtn_s_mob.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 10px;

        .satisfaction-text {
            @extend .mdTxt;
            @extend .text--PRIMARY_WHITE;
            line-height: 60px;
        }

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

            .satisfaction-text {
                font-size: 24px;
                line-height: 110px;
            }
        }
    }

    .notification-card {
        padding: 10px;
        border-bottom: solid 1px #CCCCCC;

        .unRead {
            width: 10px;
            height: 10px;
            border-radius: 50px;
            background-color: $PRIMARY_RED;
        }

        .notification-period {
            color: #707070;
            .date {
                font-size: 10px;
                line-height: 12px;
            }
            .time {
                font-size: 12px;
                line-height: 14px;
            }
        }

    }

    .satisfaction-icon {
        font-size: 24px;
        @extend .cursor--pointer;
    }
</style>