[ Ref ] : 重構 共用資料夾 相關元件

劉鈞霖

2021-12-28 6bbef91c402eaa58b8a4d8f11c466a39802ca0ca

[ Ref ] : 重構 共用資料夾 相關元件

 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,})

 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}`);

 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;

 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');
    }

 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>
</script>

 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>
</script>

 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>
</script>

 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>
</style>

 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';
  }

 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>
</style>

 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);
        }
    }
}

 PAMapp/components/Ui/UiReviewScore.vue

@@ -14,6 +14,7 @@

@Component
export default class UiReviewScore extends Vue {
    @Prop() score!: number;
    @Prop()
    score!: number;
}
</script>
</script>

 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>
</script>

 PAMapp/components/Ui/UiTags.vue

@@ -16,9 +16,10 @@
@Component
export default class UiTags extends Vue {

    @Emit('removeTag') removeTag() {
    @Emit('removeTag')
    removeTag() {
        return;
    }

}
</script>
</script>