update#131538: [查看紀錄] 滿意度清單串接api

HelenHuang

2021-12-06 4a5efae63b1dd7943cb93894a96759f4f2f2550b

update#131538: [查看紀錄] 滿意度清單串接api

 PAMapp/components/Ui/UiDateFormat.vue

@@ -9,10 +9,17 @@

@Component
export default class UiDateFormat extends Vue {
    @Prop() date!: Date;
    @Prop() date!: Date | string;
    @Prop() onlyShowSection!: 'DAY' | 'TIME';
    compareTarget!: Date;

    get formattedDate(): string {

        if (typeof this.date === 'string') {
            this.compareTarget = new Date(this.date);
        } else {
            this.compareTarget = this.date;
        }
        const isToday = (compareDate: Date): boolean => {
            return compareDate.getFullYear() === _now.getFullYear()
                && compareDate.getMonth() === _now.getMonth()
@@ -24,12 +31,12 @@
        };
        const _now = new Date();
        const minutes = _now.getMinutes() > 9 ?  _now.getMinutes() : `0${_now.getMinutes()}`;
        const thisYearDayLabel = isToday(this.date) ? `今天` : `${this.date.getMonth() + 1}/${this.date.getDate()}`;
        const thisYearDayLabel = isToday(this.compareTarget) ? `今天` : `${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()}`;

        if (this.onlyShowSection === 'DAY') {
            return isThisYear(this.date) ? thisYearDayLabel : `${this.date.getFullYear()}/${this.date.getMonth() + 1}/${this.date.getDate()}`;
            return isThisYear(this.compareTarget) ? thisYearDayLabel : `${this.compareTarget.getFullYear()}/${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()}`;
        } else if (this.onlyShowSection === 'TIME') {
            return `${this.date.getHours()}:${minutes}`;
            return `${this.compareTarget.getHours()}:${minutes}`;
        }

        return isThisYear(this.date) 

 PAMapp/pages/record.vue

@@ -1,5 +1,5 @@
<template>
    <div>record-查看紀錄
    <!-- <div>record-查看紀錄
        <el-tabs
            v-model="activeTabName"
            @tab-click="tabClick"
@@ -13,10 +13,10 @@
                label="滿意度紀錄"
                name="reviews"
            ></el-tab-pane>
        </el-tabs>
        </el-tabs> -->

        <NuxtChild></NuxtChild>
    </div>
    <!-- </div> -->
</template>

<script lang="ts">

 PAMapp/pages/record/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,115 @@
<template>

<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>

    <section class="user-reviews-content">
        <div 
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
            <div class="user-reviews-card-content" v-if="currentRole === 'user'">
                æ‚¨å°<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-content" v-else>
                {{ `${appointmentLog.customerName} `}} å°æ‚¨åšäº† <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                    <UiDateFormat 
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="DAY" />
                </div>
                <div class="time">
                    <UiDateFormat 
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="TIME" />
                </div>
            </div>
        </div>
    </section>
  
</div>

</template>
<script lang="ts">
import { Vue, Component, Action, State, namespace } from 'nuxt-property-decorator';
import { AppointmentLog } from '~/assets/ts/models/appointment.model';

const roleStorage = namespace('localStorage');

@Component
export default  class Reviews extends Vue{

    today = new Date();

    @roleStorage.Getter currentRole!:string;

    @State('myAppointmentReviewLogList') myAppointmentReviewLogList!: AppointmentLog[];

    @Action storeMyAppointmentReviewLog!: any;

    appointmentLogList: AppointmentLog[] = [];

    mounted() {
        this.storeMyAppointmentReviewLog();
    }

    
    
}
</script>
<style lang="scss" scoped>
.user-reviews-page{
    margin-bottom:155px;
    .user-reviews-header{
        height: 43px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid black;
    }
    .user-reviews-content{
        .user-reviews-card{
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            border-bottom: 1px solid #707070;
            height: 54px;
            padding-bottom: 15px;
            .user-reviews-card-content{
                width: 242px;
                padding-right:50px;
                line-height: 1.2;
                font-size: 20px;
                margin-left: 15px;
            }
            .user-reviews-card-date{
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: 15px;
                width:52px;
                .date{
                    margin-bottom: 2px;
                    
                }
            }
        }
    }
}
@include desktop{
    .user-reviews-card-content{
        flex: 1;
    }
}
</style>

 PAMapp/pages/userReviews/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,212 @@
<template> 
<div class="reviews-page">
    <!-- é¡§å®¢ç™¼é€æ»¿æ„åº¦çµ¦é¡§å• -->
    <div class="reviews-banner"></div>

    <section class="reviews-container"> 
        <section class="reviews-header">
            <div class="reviews-header-container">
                <div class="reviews-header-title">滿意度調查</div>
                <!-- <div class="reviews-header-subTitle">共{{ reviewsList.length }}筆</div> -->
            </div>
        </section>

        <section class="reviews-content">
            <div class="reviews-content-card" v-for="(item,index) in reviewsList" :key="(index)">
                <div class="card-body">
                    <div class="card-avatar">
                        <img :src="item.avatar" class="img">
                    </div>
                    <div class="card-txt">
                        å°æ–¼é¡§å•
                        <span class="p">{{item.name}}</span>的整體服務,您給予幾顆星的評價?
                        <div 
                            class="card-score"
                            v-if="!isMobileDevice">
                            <el-rate class="user-reviews-rate" v-model="item.avgScore"></el-rate>
                        </div>
                    </div>
                </div>
                <div 
                    class="card-score"
                    v-if="isMobileDevice">
                    <el-rate 
                        class="user-reviews-rate"
                        v-model="item.avgScore"></el-rate>
                </div>
            </div>
        </section>
    </section>

    <section class="reviews-footer">
        <el-button type="primary" class="reviews-footer-btn" @click.native="sendReviews">送出</el-button>
    </section>
    <PopUpFrame :isOpen.sync="showReviews">
        <div class="reviews-dialog">
            <span class="reviews-dialog-title">評價完成!</span>
        </div>
        <div class="reviews-btn-block">
            <el-button type="primary" class="reviews-dialog-btn" @click.native="reviewsDialogCheck">我知道了</el-button>
        </div>
    </PopUpFrame>
    

</div>
</template>
<script lang="ts">
import { Vue,Component } from 'vue-property-decorator'
import { isMobileDevice } from '~/assets/ts/device';


@Component({
    layout: 'home'
})
export default class UserReviews extends Vue{

    isMobileDevice = true;

    showReviews = false;

    reviewsList:ReviewsList[] = [
        {
            avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name:'蔡美眉',
            avgScore: 0
        },
        {
            avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name:'賈斯町',
            avgScore: 0
        },
        {
            avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            name:'服務媒合',
            avgScore: 0
        }
    ];

    reviewsDialogCheck(): void {
        this.reviewsList = this.reviewsList.filter((reviewItem) => !reviewItem.avgScore);
        this.showReviews = false;
    };

    mounted() {
        this.isMobileDevice = isMobileDevice();
    };

    sendReviews() {
        this.showReviews = true;
    };
}
export interface ReviewsList{
    avatar:any;
    name:string;
    avgScore:number;
}
</script>
<style lang="scss" scoped>
.reviews-page{
    background-color: #F8F9FA;
    .reviews-banner{
        background-image: url('~/assets/images/satisfaction/banner_mob.svg');
        height: 120px;
        margin-bottom: 10px;
    }
    .reviews-container{
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        .reviews-header{
            margin-top: 10px;
            .reviews-header-container{
                display: flex;
                margin-bottom:38px;
                align-items: baseline;
                .reviews-header-title{
                    margin-right: 17.5px;
                    font-size: 20px;
                }
                .reviews-header-subTitle{
                    font-size: 16px;
                    color: #68737A;
                }
            }
        }
        .reviews-content{
            .reviews-content-card{
                .card-body{
                    display: flex;
                    .card-avatar{
                        .img{
                            height: 80px;
                            width: 80px;
                        }
                    }
                    .card-txt{
                        font-size: 20px;
                        padding-top: 20px;
                        .p{
                            font-size: 23px;
                            color:#ED1B2E;
                            font-weight: bold;
                        }
                    }
                }
                .card-score{
                    margin-top: 10px;
                    margin-bottom: 30px;
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
    .reviews-footer{
        height: 70px;
        display: flex;
        justify-content: center;
        margin-top: 45px;
        background-color: #fff;
        .reviews-footer-btn{
            width: 120px;
            height: 50px;
            margin-top: 10px;
        }
    }
    .reviews-dialog{
        display: flex;
        justify-content: center;
        margin-bottom: 56px;
        .reviews-dialog-title{
            font-size: 18px;
        }
    }
    .reviews-btn-block{
        display: flex;
        justify-content: center;
    }
}

@include desktop{
    .reviews-page{
        .reviews-banner{
            height: 147px;
            background-image: url('~/assets/images/satisfaction/banner_web.svg');
        }
        .reviews-container{
            width: 700px;
            margin: 30px auto 0px auto;
            .reviews-content{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
        }
        .reviews-footer{
            background-color:#F8F9FA;
        }
    }

}

</style>

 PAMapp/pages/userReviewsRecord/index.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,113 @@
<template>

<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>

    <section class="user-reviews-content">
        <div 
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
            <div class="user-reviews-card-content" v-if="currentRole === 'user'">
                æ‚¨å°<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-content" v-else>
                {{ `${appointmentLog.clientName} `}} å°æ‚¨åšäº† <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                    <UiDateFormat 
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="DAY" />
                </div>
                <div class="time">
                    <UiDateFormat 
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="TIME" />
                </div>
            </div>
        </div>
    </section>
  
</div>

</template>
<script lang="ts">
import { Vue, Component, Action, State, namespace } from 'nuxt-property-decorator';
import { AppointmentLog } from '~/assets/ts/models/appointment.model';

const roleStorage = namespace('localStorage');

@Component
export default  class UserReviewsRecord extends Vue{

    today = new Date();

    @roleStorage.Getter currentRole!:string;

    @State('myAppointmentReviewLogList') myAppointmentReviewLogList!: AppointmentLog[];

    @Action storeMyAppointmentReviewLog!: any;

    appointmentLogList: AppointmentLog[] = [];

    mounted() {
        this.storeMyAppointmentReviewLog();
    }
    
}
</script>
<style lang="scss" scoped>
.user-reviews-page{
    margin-bottom:155px;
    .user-reviews-header{
        height: 43px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid black;
    }
    .user-reviews-content{
        .user-reviews-card{
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            border-bottom: 1px solid #707070;
            height: 54px;
            padding-bottom: 15px;
            .user-reviews-card-content{
                width: 242px;
                padding-right:50px;
                line-height: 1.2;
                font-size: 20px;
                margin-left: 15px;
            }
            .user-reviews-card-date{
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: 15px;
                width:52px;
                .date{
                    margin-bottom: 2px;
                    
                }
            }
        }
    }
}
@include desktop{
    .user-reviews-card-content{
        flex: 1;
    }
}
</style>