TODO#128253/128259 新增動作操作元件- carousel / dialog

Mila

2021-10-19 1fcd604ad844352dd350ecda3ee870d69e3d85df

TODO#128253/128259 新增動作操作元件- carousel / dialog

 PAMapp/components/Ui/UiCardCarousel.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,77 @@
<template>
<div>
    <el-carousel
        type="card"
        height="200px"
        :autoplay="false"
        indicator-position="none"
        arrow="always"
        ref="carouselRef"

    >
        <el-carousel-item
            v-for="(item, index) in 5"
            :key="index"
        >
            <div
                class="fill"
                @touchstart="touchStart"
                @touchend="moveCard"
            >
                <h3>{{ item }}</h3>
                <el-button @click="$router.push('/agentInfo')" size="small">詳細資訊</el-button>
                <el-button @click="isVisibleDialog = true" size="small">+聯絡清單</el-button>
            </div>

        </el-carousel-item>
    </el-carousel>

    <Ui-Dialog
        :isVisible.sync="isVisibleDialog"
    >
        <span>已加入聯絡清單</span>
    </Ui-Dialog>

</div>
</template>

<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class UiCardCarousel extends Vue {
    isVisibleDialog = false;
    startPosition = 0;
    endPosition = 0;

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

    moveCard(event: any) {
        this.endPosition = event.changedTouches[0].clientX;
        if (this.endPosition < this.startPosition) {
            (this.$refs.carouselRef as ElCarousel).next();
            return;
        }

        if (this.endPosition > this.startPosition) {
            (this.$refs.carouselRef as ElCarousel).prev();
            return;
        }
    }

}
</script>

<style lang="scss" scoped>
    .el-carousel__item {
        background-color: #d3dce6;
    }
    .fill {
        width: 100%;
        height: 100%;
        padding: 3px;
    }
</style>

 PAMapp/components/Ui/UiCarousel.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,33 @@
<template>
<div>
    <el-carousel
        height="200px"
        :autoplay="true"
        indicator-position="outside"
        arrow="never"
        trigger="click"
    >
        <el-carousel-item
            v-for="(item, index) in 3"
            :key="index"
        >
            <h3>{{ item }}</h3>
        </el-carousel-item>
    </el-carousel>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class UiCarousel extends Vue {

}
</script>

<style lang="scss" scoped>
.el-carousel__item {
    background-color: #d3dce6;
}
</style>

 PAMapp/components/Ui/UiDialog.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,20 @@
<template>
    <div>
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="70%"
        >
            <slot></slot>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from 'vue-property-decorator';

@Component
export default class UiDialog extends Vue {
    @PropSync('isVisible') dialogVisible!: boolean
}
</script>

 PAMapp/pages/index.vue

@@ -1,5 +1,6 @@
<template>
    <div>PAMapp-Home
    <div>首頁
        <Ui-Carousel></Ui-Carousel>
        <h5>推薦顧問</h5>
        <Ui-Swiper></Ui-Swiper>
    </div>
@@ -12,7 +13,9 @@
    layout: 'home'
})
export default class MainComponent extends Vue {

    routerPush(path: string) {
        this.$router.push('/' + path);
    }
}

</script>

 PAMapp/pages/quickFilter/index.vue

@@ -1,3 +1,7 @@
<template>
    <div>quickFilter-快速篩選</div>
    <div>快速篩選
        <h5>篩選條件</h5>
        <h5>快速篩選推薦</h5>
        <Ui-CardCarousel></Ui-CardCarousel>
    </div>
</template>