update: [前單] 在相關功能顯示滿意度資訊、打開滿意度相關功能

Tomas

2022-01-27 3041bdc8daee6f17ab790bbab0bfdbf22f244573

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -5,7 +5,7 @@
        :autoplay="false"
        indicator-position="none"
        arrow="never"
        class="pam-consultant-carousel"
        class="pam-quickFilter-carousel"
        ref="carouselRef"
    >
        <el-carousel-item
@@ -14,22 +14,24 @@
        >
            <div
                class="fill"
                @touchstart="touchStart"
                @touchend="moveCard"
                @touchstart="moveStart"
                @touchend="moveEnd"
            >
                <el-avatar
                <UiAvatar
                    :size="200"
                    class="mx-auto cursor--pointer"
                    :agentNo="item.agentNo"
                    class="mx-auto"
                    @click.native="showAgentDetail(item.agentNo)"
                    :src="item.img"
                />
                <div class="mdTxt mt-30 mb-30 text--center">{{item.name}}(伯樂保險經紀人)</div>
                ></UiAvatar>
                <div class="mdTxt mt-30 mb-30 text--center"
                    >{{item.name}}<span v-if="item.role">({{item.role}})</span>
                </div>
                <el-row>
                    <el-col :span="12">
                        <div class="smTxt_bold mb-10 text--prudential_grey">服務資歷</div>
                        <div class="mb-10">{{item.seniority}}</div>
                    </el-col>
                    <el-col :span="12">
                    <el-col :span="12" v-if="!hideReviews">
                        <div class="smTxt_bold mb-10 text--prudential_grey">客戶滿意度</div>
                        <div>
                            <i class="icon-star pam-icon icon--yellow "></i>
@@ -64,8 +66,12 @@
    >
        <div class="text--center mdTxt">
            <p class="mb-50">{{popUpTxt}}</p>
            <p class="text--primary cursor--pointer"
                @click="isVisiblePopUp = false">我知道了</p>
            <div class="text--center">
                <el-button
                    type="primary"
                    @click="isVisiblePopUp = false"
                >我知道了</el-button>
            </div>
        </div>
    </PopUpFrame>

@@ -73,31 +79,55 @@
</template>

<script lang="ts">
import { Consultant } from '~/shared/models/consultant.model';
import { ElCarousel } from 'element-ui/types/carousel';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';

@Component
export default class QuickFilterConsultantList extends Vue {
    @Prop() consultantList!: Consultants[];
    @Prop()
    consultantList!: Consultant[];

    isVisiblePopUp = false;
    popUpTxt = '成功加入顧問清單';
    startPosition = 0;
    endPosition = 0;
    popUpTxt = '成功加入顧問清單';
    startYPosition = 0;
    endYPosition = 0;
    hideReviews = hideReviews ;

    touchStart(event: TouchEvent) {
    //////////////////////////////////////////////////////////////////

    moveStart(event: TouchEvent) {
        this.startPosition = event.changedTouches[0].clientX;
        this.startYPosition = event.changedTouches[0].clientY;
    }

    moveCard(event: any) {
    moveEnd(event: TouchEvent) {
        this.endPosition = event.changedTouches[0].clientX;
        if (this.endPosition < this.startPosition) {
            this.nextCard();
        }
        this.endYPosition = event.changedTouches[0].clientY;
        if (Math.abs(this.endYPosition - this.startYPosition) < 50) {
            if (this.endPosition < this.startPosition) {
                this.nextCard();
                return;
            }

        if (this.endPosition > this.startPosition) {
            this.prevCard();
            if (this.endPosition > this.startPosition) {
                this.prevCard();
            }
        }
    }

    //////////////////////////////////////////////////////////////////

    openPopUp(txt: string) {
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }

    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }

    nextCard() {
@@ -107,15 +137,6 @@
    prevCard() {
        (this.$refs.carouselRef as ElCarousel).prev();
    }

    openPopUp(txt: string) {
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }
    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }


}
</script>
@@ -147,7 +168,6 @@
        border-radius: 50px;
        background-color: $LIGHT_GREY;
        color: $CORAL;
        z-index: 2;
        cursor: pointer;

        &:before {
@@ -156,28 +176,26 @@
        }
    }

    .pam-right-arrow {
        &:before {
            margin-left: 15px;
        }
    .pam-left-arrow:before {
        margin-left: 25px;
    }

    .pam-left-arrow {
        &:before {
            margin-left: 25px;
        }
    .pam-right-arrow:before {
        margin-left: 15px;
    }

    .arrow-right-position {
        top: 50%;
        right: -60px;
        right: -40px;
        transform: translateY(-50%);
        z-index: 3;
    }

    .arrow-left-position {
        top: 50%;
        left: -60px;
        left: -40px;
        transform: translateY(-50%);
        z-index: 3;
    }

    .relative {
@@ -206,4 +224,4 @@
        }
    }

</style>
</style>