fixed TODO#132097 快速篩選滑動顧問時會觸發頁面上下滑動

Mila

2021-12-10 2ca1a76c216ad83d14121519478b8453b14f9b58

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -14,6 +14,8 @@
        >
            <div
                class="fill"
                @touchstart="moveStart"
                @touchend="moveEnd"
            >
                <UiAvatar
                    :size="200"
@@ -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>

@@ -75,13 +81,38 @@
<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Consultants } from '~/assets/ts/api/consultant';
import { Consultant } from '~/assets/ts/models/consultant.model';


@Component
export default class QuickFilterConsultantList extends Vue {
    @Prop() consultantList!: Consultants[];
    @Prop() consultantList!: Consultant[];
    isVisiblePopUp = false;
    popUpTxt = '成功加入顧問清單';
    startPosition = 0;
    endPosition = 0;
    startYPosition = 0;
    endYPosition = 0;

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

    moveEnd(event: TouchEvent) {
        this.endPosition = event.changedTouches[0].clientX;
        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();
            }
        }
    }

    nextCard() {
        (this.$refs.carouselRef as ElCarousel).next();
@@ -95,6 +126,7 @@
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }

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