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

Tomas

2022-01-27 3041bdc8daee6f17ab790bbab0bfdbf22f244573

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -5,110 +5,129 @@
        :autoplay="false"
        indicator-position="none"
        arrow="never"
        class="pam-consultant-carousel"
        class="pam-quickFilter-carousel"
        ref="carouselRef"
    >
        <el-carousel-item
            v-for="(item, index) in 5"
            v-for="(item, index) in consultantList"
            :key="index"
        >
            <div
                class="fill"
                @touchstart="touchStart"
                @touchend="moveCard"
                @touchstart="moveStart"
                @touchend="moveEnd"
            >
                <el-avatar
                <UiAvatar
                    :size="200"
                    class="mx-auto cursor--pointer"
                    @click="$router.push('/agentInfo')"
                    src=""
                />
                <div class="mdTxt mt-30 mb-10 text--center">蔡美莓(伯樂保險經紀人)</div>
                    :agentNo="item.agentNo"
                    class="mx-auto"
                    @click.native="showAgentDetail(item.agentNo)"
                ></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">一年12個月</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"></i>
                            4.8</div>
                            <i class="icon-star pam-icon icon--yellow "></i>
                            {{item.avgScore}}</div>
                    </el-col>
                </el-row>
                <div class="smTxt_bold mb-10 text--prudential_grey">專長領域</div>
                <div class="p bold">#財務規劃</div>
            </div>
            <div class="parallelBtns">
                <el-button @click="addConsultant">
                    <i class="icon-add smTxt"></i>
                    <span>顧問清單</span>
                </el-button>
                <el-button
                    @click="$router.push('/communication/myDemand')"
                    type="primary"
                >進行預約</el-button>
                <div class="smTxt_bold mt-10 mb-10 text--prudential_grey">專長領域</div>
                <div>
                    <span
                        v-for="(i, index) in item.expertise"
                        :key="index"
                        class="p bold mr-30 mb-10 inline-block"
                    >#{{i}}</span>
                </div>
                <AddAndReservedBtns
                    :cusClass="'fixedBtn'"
                    :agentInfo="item"
                    @openPopUp="openPopUp"
                ></AddAndReservedBtns>
            </div>
        </el-carousel-item>
    </el-carousel>

    <div class="absolute arrow-left-position" @click="nextCard">
    <div class="absolute arrow-left-position" @click="prevCard">
        <i class="icon-left pam-left-arrow"></i>
    </div>
    <div class="absolute arrow-right-position" @click="nextCard">
        <i class="icon-right pam-right-arrow"></i>
    </div>

    <Ui-Drawer
        :isVisible.sync="isVisibleDrawer"
    <PopUpFrame :isOpen.sync="isVisiblePopUp"
    >
        <div class="text--center mdTxt">
            <p class="mb-50">成功加入顧問清單</p>
            <p class="text--primary cursor--pointer"
                @click="isVisibleDrawer = false">我知道了</p>
            <p class="mb-50">{{popUpTxt}}</p>
            <div class="text--center">
                <el-button
                    type="primary"
                    @click="isVisiblePopUp = false"
                >我知道了</el-button>
            </div>
        </div>
    </Ui-Drawer>

    <Ui-Dialog
        :isVisible.sync="isVisibleDialog"
    >
        <div class="text--center mdTxt">
            <p class="mb-50">成功加入顧問清單</p>
            <p class="text--primary cursor--pointer"
                @click="isVisibleDialog = false">我知道了</p>
        </div>
    </Ui-Dialog>
    </PopUpFrame>

</div>
</template>

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

@Component
export default class QuickFilterConsultantList extends Vue {
    isVisibleDrawer = false;
    isVisibleDialog = false;
    @Prop()
    consultantList!: Consultant[];

    isVisiblePopUp = false;
    popUpTxt = '成功加入顧問清單';
    startPosition = 0;
    endPosition = 0;
    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();
            return;
        }
        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();
            return;
            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() {
@@ -117,12 +136,6 @@

    prevCard() {
        (this.$refs.carouselRef as ElCarousel).prev();
    }

    addConsultant() {
        isMobileDevice()
            ? this.isVisibleDrawer = true
            : this.isVisibleDialog = true;
    }

}
@@ -141,19 +154,11 @@
        margin: 0 auto;
    }

    .parallelBtns {
        display: flex;
        justify-content: center;
    .fixedBtn {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        .el-button {
            padding: 10px 0;
            width: 45%;
        }
    }

    .pam-left-arrow,.pam-right-arrow {
@@ -163,7 +168,6 @@
        border-radius: 50px;
        background-color: $LIGHT_GREY;
        color: $CORAL;
        z-index: 2;
        cursor: pointer;

        &:before {
@@ -172,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 {
@@ -202,6 +204,10 @@

    .absolute {
        position: absolute;
    }

    .inline-block {
        display: inline-block;
    }

    @media (min-width: 768px) {
@@ -218,4 +224,4 @@
        }
    }

</style>
</style>