| PAMapp/components/NavBar.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 | |
| PAMapp/components/Ui/UiDateFormat.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 | |
| PAMapp/pages/record.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 | |
| PAMapp/pages/record/index.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 | |
| PAMapp/pages/userReviews/index.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 | |
| PAMapp/pages/userReviewsRecord/index.vue | ●●●●● 修補檔 | 檢視 | 原始 | 究查 | 歷程 |
PAMapp/components/NavBar.vue
@@ -7,8 +7,8 @@ <div class="pam-header__title--sub">é ç´æç幸ç¦å®è·è </div> </div> <div class="pam-header__action-bar"> <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue" @click="$router.push('/notification')"></i> <!-- <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue" @click="$router.push('/notification')"></i> --> <el-dropdown :class="{'is-open':isOpenDropdown}" ref="dropdown" trigger="click" 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,17 +31,17 @@ }; 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) ? `${thisYearDayLabel} ${this.date.getHours()}:${minutes}` : `${this.date.getFullYear()}/${this.date.getMonth() + 1}/${this.date.getDate()} ${this.date.getHours()}:${minutes}`; return isThisYear(this.compareTarget) ? `${thisYearDayLabel} ${this.compareTarget.getHours()}:${minutes}` : `${this.compareTarget.getFullYear()}/${this.compareTarget.getMonth() + 1}/${this.compareTarget.getDate()} ${this.compareTarget.getHours()}:${minutes}`; } } </script> 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>
