From 6bbef91c402eaa58b8a4d8f11c466a39802ca0ca Mon Sep 17 00:00:00 2001
From: 劉鈞霖 <benson@gmail.com>
Date: 星期二, 28 十二月 2021 14:50:13 +0800
Subject: [PATCH] [ Ref ] : 重構 共用資料夾 相關元件
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 16 ++++-
PAMapp/components/Ui/UiField.vue | 21 +++++-
PAMapp/components/Ui/UiAvatar.vue | 9 ++-
PAMapp/components/Ui/UiScrollPicker.vue | 12 ++-
PAMapp/components/Ui/UiDrawer.vue | 12 ++-
PAMapp/components/Ui/UiTags.vue | 5 +
PAMapp/components/Ui/UiDialog.vue | 12 ++-
PAMapp/components/Ui/UiGoToTop.vue | 14 +++-
PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 6 +
PAMapp/components/Consultant/ConsultantSwiper.vue | 6 +
PAMapp/components/Ui/UiReviewScore.vue | 5 +
PAMapp/components/Ui/UiPagination.vue | 31 +++++++---
PAMapp/components/Ui/UiDateFormat.vue | 23 ++++---
PAMapp/components/Consultant/ConsultantList.vue | 8 +-
14 files changed, 120 insertions(+), 60 deletions(-)
diff --git a/PAMapp/components/Consultant/ConsultantList.vue b/PAMapp/components/Consultant/ConsultantList.vue
index 45e8a0a..06ccd84 100644
--- a/PAMapp/components/Consultant/ConsultantList.vue
+++ b/PAMapp/components/Consultant/ConsultantList.vue
@@ -1,6 +1,5 @@
<template>
<div>
-
<template v-if="agentList.length > 0">
<ConsultantCard
v-for="(agent, index) in agentList"
@@ -23,10 +22,9 @@
</template>
<script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
-
-import authService from '~/shared/services/auth.service';
import { Consultant } from '~/shared/models/consultant.model';
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import authService from '~/shared/services/auth.service';
@Component
export default class ConsultantList extends Vue {
@@ -38,6 +36,8 @@
isUserLogin = false;
+ //////////////////////////////////////////////////////////////////////
+
get agentList(){
return this.agents.map((agentDto)=>
({...agentDto,customerScore:0,})
diff --git a/PAMapp/components/Consultant/ConsultantSwiper.vue b/PAMapp/components/Consultant/ConsultantSwiper.vue
index 8adfc60..d1300fd 100644
--- a/PAMapp/components/Consultant/ConsultantSwiper.vue
+++ b/PAMapp/components/Consultant/ConsultantSwiper.vue
@@ -35,10 +35,10 @@
@Component
export default class UiSwiper extends Vue {
- @Prop() agents!: Consultant[];
+ @Prop()
+ agents!: Consultant[];
hideReviews = hideReviews ;
-
swiperOptions: SwiperOptions = {
loop: false,
slideToClickedSlide: false,
@@ -58,6 +58,8 @@
}
}
+ //////////////////////////////////////////////////////////////////////
+
clkItem(loopIndex: number, realIndex: number) {
const agentNo = this.agents[loopIndex].agentNo;
this.$router.push(`/agentInfo/${agentNo}`);
diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
index 8ab4d6b..68d53f0 100644
--- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
@@ -87,7 +87,9 @@
@Component
export default class QuickFilterConsultantList extends Vue {
- @Prop() consultantList!: Consultant[];
+ @Prop()
+ consultantList!: Consultant[];
+
isVisiblePopUp = false;
popUpTxt = '����憿批��';
startPosition = 0;
@@ -97,6 +99,7 @@
hideReviews = hideReviews ;
//////////////////////////////////////////////////////////////////
+
moveStart(event: TouchEvent) {
this.startPosition = event.changedTouches[0].clientX;
this.startYPosition = event.changedTouches[0].clientY;
@@ -118,6 +121,7 @@
}
//////////////////////////////////////////////////////////////////
+
openPopUp(txt: string) {
this.popUpTxt = txt;
this.isVisiblePopUp = true;
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index f29930c..4b43961 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -94,6 +94,15 @@
import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
@Component
export default class QuickFilterDrawer extends Vue {
+ @Prop()
+ questionOption!: QuestionOption;
+
+ @Prop()
+ isOpenQuestionPopUp!: boolean;
+
+ @Prop()
+ confirmItem!: Selected[];
+
pickedItem: FastQueryParams = {
communicationStyles: [],
status: '',
@@ -103,9 +112,7 @@
}
hideReviews = hideReviews ;
- @Prop() questionOption!: QuestionOption;
- @Prop() isOpenQuestionPopUp!: boolean;
- @Prop() confirmItem!: Selected[];
+ //////////////////////////////////////////////////////////////////
@Watch('isOpenQuestionPopUp', {immediate: true})
onPopUpChange() {
@@ -127,8 +134,8 @@
}
}
-
//////////////////////////////////////////////////////////////////
+
get isDisabled() {
const name = this.questionOption.name;
return name === 'gender' && !this.pickedItem[name]
@@ -144,6 +151,7 @@
}
//////////////////////////////////////////////////////////////////
+
private getGender(): string {
return this.filterSingleSelected('gender');
}
diff --git a/PAMapp/components/Ui/UiAvatar.vue b/PAMapp/components/Ui/UiAvatar.vue
index 55a5763..bd79489 100644
--- a/PAMapp/components/Ui/UiAvatar.vue
+++ b/PAMapp/components/Ui/UiAvatar.vue
@@ -11,11 +11,14 @@
@Component
export default class UiAvatar extends Vue {
- @Prop() size!: number;
- @Prop() fileName!: string;
+ @Prop()
+ size!: number;
+
+ @Prop()
+ fileName!: string;
get imgSrc() {
return process.env.BASE_URL + '/consultant/avatar/' + this.fileName;
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/PAMapp/components/Ui/UiDateFormat.vue b/PAMapp/components/Ui/UiDateFormat.vue
index 7decbf2..e9223b3 100644
--- a/PAMapp/components/Ui/UiDateFormat.vue
+++ b/PAMapp/components/Ui/UiDateFormat.vue
@@ -9,14 +9,17 @@
@Component
export default class UiDateFormat extends Vue {
- @Prop() date!: Date | string;
- @Prop() onlyShowSection!: 'DAY' | 'TIME';
- compareTarget!: Date;
+ @Prop()
+ date!: Date | string;
+ @Prop()
+ onlyShowSection!: 'DAY' | 'TIME';
+
+ compareTarget!: Date;
displayValue = '';
- @Watch('date', {immediate: true}) formattedDate(): void {
-
+ @Watch('date', {immediate: true})
+ formattedDate(): void {
if (!this.date) return;
const toDatePromise = new Promise((resolve, reject) => {
@@ -35,7 +38,7 @@
const isThisYear = (compareDate: Date): boolean => {
return compareDate.getFullYear() === _now.getFullYear();
};
-
+
const minutes = compareTarget.getMinutes() > 9 ? compareTarget.getMinutes() : `0${compareTarget.getMinutes()}`;
const thisYearDayLabel = isToday(compareTarget) ? `隞予` : `${compareTarget.getMonth() + 1}/${compareTarget.getDate()}`;
@@ -47,11 +50,11 @@
if (this.onlyShowSection) return;
- this.displayValue = isThisYear(compareTarget)
- ? `${thisYearDayLabel} ${compareTarget.getHours()}:${minutes}`
+ this.displayValue = isThisYear(compareTarget)
+ ? `${thisYearDayLabel} ${compareTarget.getHours()}:${minutes}`
: `${compareTarget.getFullYear()}/${compareTarget.getMonth() + 1}/${compareTarget.getDate()} ${compareTarget.getHours()}:${minutes}`;
- }
+ }
)}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/PAMapp/components/Ui/UiDialog.vue b/PAMapp/components/Ui/UiDialog.vue
index be737dc..4865810 100644
--- a/PAMapp/components/Ui/UiDialog.vue
+++ b/PAMapp/components/Ui/UiDialog.vue
@@ -17,11 +17,15 @@
@Component
export default class UiDialog extends Vue {
- @PropSync('isVisible') dialogVisible!: boolean;
- @Prop() width!: string;
+ @PropSync('isVisible')
+ dialogVisible!: boolean;
- @Emit('closeDialog') closeDialog() {
+ @Prop()
+ width!: string;
+
+ @Emit('closeDialog')
+ closeDialog() {
return;
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/PAMapp/components/Ui/UiDrawer.vue b/PAMapp/components/Ui/UiDrawer.vue
index 8cc9b08..fc66bd4 100644
--- a/PAMapp/components/Ui/UiDrawer.vue
+++ b/PAMapp/components/Ui/UiDrawer.vue
@@ -17,10 +17,14 @@
@Component
export default class UiDialog extends Vue {
- @PropSync('isVisible') drawerVisible!: boolean;
- @Prop() size!: number;
+ @PropSync('isVisible')
+ drawerVisible!: boolean;
- @Emit('closeDrawer') closeDrawer() {
+ @Prop()
+ size!: number;
+
+ @Emit('closeDrawer')
+ closeDrawer() {
return;
}
}
@@ -34,4 +38,4 @@
border-radius: 10px;
margin: 10px auto 13px auto;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
index 1401592..b7d1192 100644
--- a/PAMapp/components/Ui/UiField.vue
+++ b/PAMapp/components/Ui/UiField.vue
@@ -19,14 +19,25 @@
@Component
export default class UiField extends Vue {
- @Prop() span!: number;
- @Prop() icon!: string;
- @Prop() label!: string;
- @Prop() content!: string;
- @Prop() displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';
+ @Prop()
+ span!: number;
+
+ @Prop()
+ icon!: string;
+
+ @Prop()
+ label!: string;
+
+ @Prop()
+ content!: string;
+
+ @Prop()
+ displayDevice!: 'MOBILE' | 'DESKTOP' | 'ALL';
currentDevice: 'MOBILE' | 'DESKTOP' = 'MOBILE';
+ //////////////////////////////////////////////////////////////////
+
mounted(): void {
this.currentDevice = UtilsService.isMobileDevice() ? 'MOBILE' : 'DESKTOP';
}
diff --git a/PAMapp/components/Ui/UiGoToTop.vue b/PAMapp/components/Ui/UiGoToTop.vue
index 2fe1bd7..8ceb2f7 100644
--- a/PAMapp/components/Ui/UiGoToTop.vue
+++ b/PAMapp/components/Ui/UiGoToTop.vue
@@ -16,11 +16,19 @@
export default class UiGoToTop extends Vue {
buttonDisplay = 'none';
+ //////////////////////////////////////////////////////////////////
+
created() {
if (process.browser) {
document.body.addEventListener('scroll', this.scrollFunction);
}
}
+
+ destroyed() {
+ document.body.removeEventListener('scroll', this.scrollFunction);
+ }
+
+ //////////////////////////////////////////////////////////////////
scrollFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
@@ -33,10 +41,6 @@
topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
- }
-
- destroyed() {
- document.body.removeEventListener('scroll', this.scrollFunction);
}
}
</script>
@@ -66,4 +70,4 @@
background-color: $MID_GREY;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/components/Ui/UiPagination.vue b/PAMapp/components/Ui/UiPagination.vue
index abb27a9..80f1075 100644
--- a/PAMapp/components/Ui/UiPagination.vue
+++ b/PAMapp/components/Ui/UiPagination.vue
@@ -16,18 +16,35 @@
@Component
export default class UiPagination extends Vue {
- @Prop() totalList!: Consultant[];
+ @Prop()
+ totalList!: Consultant[];
+
@Prop({default: 5}) pageSize!: number;
currentPage = 1;
+
pageList: Consultant[] = [];
+
+ //////////////////////////////////////////////////////////////////
+
+ @Emit('changePage')
+ changePage(): Consultant[] {
+ return this.pageList
+ }
+
+ @Watch('totalList')
+ watchTotalList(newValue: Consultant[]) {
+ if (newValue) {
+ this.handleCurrentChange(this.currentPage);
+ }
+ }
+
+ //////////////////////////////////////////////////////////////////
mounted() {
this.handleCurrentChange(this.currentPage);
}
- @Emit('changePage') changePage(): Consultant[] {
- return this.pageList
- }
+ //////////////////////////////////////////////////////////////////
handleCurrentChange(currentPage: number) {
@@ -38,12 +55,6 @@
if (this.totalList) {
this.pageList = this.totalList.slice(this.pageSize * currentPage - this.pageSize, this.pageSize * currentPage)
this.changePage();
- }
- }
-
- @Watch('totalList') watchTotalList(newValue: Consultant[]) {
- if (newValue) {
- this.handleCurrentChange(this.currentPage);
}
}
}
diff --git a/PAMapp/components/Ui/UiReviewScore.vue b/PAMapp/components/Ui/UiReviewScore.vue
index 12afaf3..3c91503 100644
--- a/PAMapp/components/Ui/UiReviewScore.vue
+++ b/PAMapp/components/Ui/UiReviewScore.vue
@@ -14,6 +14,7 @@
@Component
export default class UiReviewScore extends Vue {
- @Prop() score!: number;
+ @Prop()
+ score!: number;
}
-</script>
\ No newline at end of file
+</script>
diff --git a/PAMapp/components/Ui/UiScrollPicker.vue b/PAMapp/components/Ui/UiScrollPicker.vue
index 5d624aa..c37b429 100644
--- a/PAMapp/components/Ui/UiScrollPicker.vue
+++ b/PAMapp/components/Ui/UiScrollPicker.vue
@@ -14,12 +14,16 @@
export default class UiScrollPicker extends Vue {
// https://reposhub.com/vuejs/form-input/wan2land-vue-scroll-picker.html
- @Prop() options!: string[];
- @Prop() initValue!: string;
+ @Prop()
+ options!: string[];
- @Emit('change') selValue(value: string) {
+ @Prop()
+ initValue!: string;
+
+ @Emit('change')
+ selValue(value: string) {
return value
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/PAMapp/components/Ui/UiTags.vue b/PAMapp/components/Ui/UiTags.vue
index 870105a..7dd9ba8 100644
--- a/PAMapp/components/Ui/UiTags.vue
+++ b/PAMapp/components/Ui/UiTags.vue
@@ -16,9 +16,10 @@
@Component
export default class UiTags extends Vue {
- @Emit('removeTag') removeTag() {
+ @Emit('removeTag')
+ removeTag() {
return;
}
}
-</script>
\ No newline at end of file
+</script>
--
Gitblit v1.8.0