From 8f5057969ef0943cd4ee68fa8770aeb3e4737b67 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 22 十二月 2021 16:55:42 +0800
Subject: [PATCH] refactor: reviews / userReviews page (add ReviewRecords feature component)
---
PAMapp/pages/userReviewsRecord/index.vue | 47 +----------
PAMapp/components/ReviewRecords/ReviewRecords.vue | 110 +++++++++++++++++++++++++++
PAMapp/pages/record/index.vue | 62 ++------------
PAMapp/shared/services/auth.service.ts | 6 -
4 files changed, 127 insertions(+), 98 deletions(-)
diff --git a/PAMapp/components/ReviewRecords/ReviewRecords.vue b/PAMapp/components/ReviewRecords/ReviewRecords.vue
new file mode 100644
index 0000000..2c4ed02
--- /dev/null
+++ b/PAMapp/components/ReviewRecords/ReviewRecords.vue
@@ -0,0 +1,110 @@
+<template>
+<div class="user-reviews-page">
+ <section class="mdTxt">
+ �������
+ </section>
+
+ <section class="user-reviews-header">
+ <div class="header-title mdTxt">
+ 皛踵�漲蝝����
+ </div>
+ </section>
+ <div class="user-reviews-page">
+
+ <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="isUserLogin">
+ �撠�<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>
+</div>
+
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+
+import authService from '~/shared/services/auth.service';
+import { AppointmentLog } from '~/shared/models/appointment.model';
+
+@Component
+export default class ReviewRecords extends Vue{
+
+ @Prop()
+ myAppointmentReviewLogList!: AppointmentLog[];
+
+ isUserLogin = false;
+
+ mounted() {
+ this.isUserLogin = authService.isUserLogin();
+ }
+
+}
+</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>
diff --git a/PAMapp/pages/record/index.vue b/PAMapp/pages/record/index.vue
index db7ac04..de16eb0 100644
--- a/PAMapp/pages/record/index.vue
+++ b/PAMapp/pages/record/index.vue
@@ -1,69 +1,29 @@
<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>
+ <ReviewRecords
+ :myAppointmentReviewLogList="myAppointmentReviewLogList"
+ ></ReviewRecords>
</div>
-
</template>
<script lang="ts">
-import { Vue, Component, Action, State, namespace } from 'nuxt-property-decorator';
-import { AppointmentLog } from '~/shared/models/appointment.model';
+import { Vue, Component, Action, State } from 'nuxt-property-decorator';
-const roleStorage = namespace('localStorage');
+import { AppointmentLog } from '~/shared/models/appointment.model';
@Component
export default class Reviews extends Vue{
- today = new Date();
+ @State('myAppointmentReviewLogList')
+ myAppointmentReviewLogList!: AppointmentLog[];
- @roleStorage.Getter currentRole!:string;
+ @Action
+ storeMyAppointmentReviewLog!: any;
- @State('myAppointmentReviewLogList') myAppointmentReviewLogList!: AppointmentLog[];
-
- @Action storeMyAppointmentReviewLog!: any;
-
- appointmentLogList: AppointmentLog[] = [];
+ //////////////////////////////////////////////////////////////////////
mounted() {
this.storeMyAppointmentReviewLog();
}
-
-
}
</script>
diff --git a/PAMapp/pages/userReviewsRecord/index.vue b/PAMapp/pages/userReviewsRecord/index.vue
index c6029e8..5f3e26e 100644
--- a/PAMapp/pages/userReviewsRecord/index.vue
+++ b/PAMapp/pages/userReviewsRecord/index.vue
@@ -1,49 +1,14 @@
<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="isUserLogin">
- �撠�<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>
+ <ReviewRecords
+ :myAppointmentReviewLogList="myAppointmentReviewLogList"
+ ></ReviewRecords>
</div>
</template>
<script lang="ts">
import { Vue, Component, Action, State } from 'nuxt-property-decorator';
-import authService from '~/shared/services/auth.service';
import { AppointmentLog } from '~/shared/models/appointment.model';
@Component
@@ -55,13 +20,9 @@
@Action
storeMyAppointmentReviewLog!: any;
- appointmentLogList: AppointmentLog[] = [];
- isUserLogin = false;
-
//////////////////////////////////////////////////////////////////////
mounted() {
- this.isUserLogin = authService.isUserLogin();
this.storeMyAppointmentReviewLog();
}
diff --git a/PAMapp/shared/services/auth.service.ts b/PAMapp/shared/services/auth.service.ts
index 6c10d47..469bace 100644
--- a/PAMapp/shared/services/auth.service.ts
+++ b/PAMapp/shared/services/auth.service.ts
@@ -1,15 +1,13 @@
import { Role } from "../models/enum/role";
class AuthService {
- private idToken = localStorage.getItem('id_token');
- private currentRole = localStorage.getItem('current_role');
isAdminLogin(): boolean {
- return this.currentRole === Role.ADMIN;
+ return localStorage.getItem('current_role') === Role.ADMIN;
}
isUserLogin(): boolean {
- return this.currentRole === Role.USER;
+ return localStorage.getItem('current_role') === Role.USER;
}
}
--
Gitblit v1.8.0