From 4a5efae63b1dd7943cb93894a96759f4f2f2550b Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期一, 06 十二月 2021 13:05:24 +0800
Subject: [PATCH] update#131538: [查看紀錄] 滿意度清單串接api
---
PAMapp/pages/record.vue | 6
PAMapp/pages/userReviewsRecord/index.vue | 113 ++++++++++++++
PAMapp/pages/userReviews/index.vue | 212 ++++++++++++++++++++++++++
PAMapp/pages/record/index.vue | 115 ++++++++++++++
PAMapp/components/Ui/UiDateFormat.vue | 15 +
5 files changed, 454 insertions(+), 7 deletions(-)
diff --git a/PAMapp/components/Ui/UiDateFormat.vue b/PAMapp/components/Ui/UiDateFormat.vue
index eae9ce9..0e545dc 100644
--- a/PAMapp/components/Ui/UiDateFormat.vue
+++ b/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)
diff --git a/PAMapp/pages/record.vue b/PAMapp/pages/record.vue
index 9d9753d..bf002b7 100644
--- a/PAMapp/pages/record.vue
+++ b/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">
diff --git a/PAMapp/pages/record/index.vue b/PAMapp/pages/record/index.vue
new file mode 100644
index 0000000..692841f
--- /dev/null
+++ b/PAMapp/pages/record/index.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/pages/userReviews/index.vue b/PAMapp/pages/userReviews/index.vue
new file mode 100644
index 0000000..96b0cd9
--- /dev/null
+++ b/PAMapp/pages/userReviews/index.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/pages/userReviewsRecord/index.vue b/PAMapp/pages/userReviewsRecord/index.vue
new file mode 100644
index 0000000..a0665d9
--- /dev/null
+++ b/PAMapp/pages/userReviewsRecord/index.vue
@@ -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>
\ No newline at end of file
--
Gitblit v1.8.0