From 1fcd604ad844352dd350ecda3ee870d69e3d85df Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 19 十月 2021 16:52:21 +0800
Subject: [PATCH] TODO#128253/128259 新增動作操作元件- carousel / dialog

---
 PAMapp/components/Ui/UiDialog.vue       |   20 ++++++
 PAMapp/pages/quickFilter/index.vue      |    6 +
 PAMapp/components/Ui/UiCardCarousel.vue |   77 +++++++++++++++++++++++++
 PAMapp/pages/index.vue                  |    7 +
 PAMapp/components/Ui/UiCarousel.vue     |   33 +++++++++++
 5 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/PAMapp/components/Ui/UiCardCarousel.vue b/PAMapp/components/Ui/UiCardCarousel.vue
new file mode 100644
index 0000000..e62ac29
--- /dev/null
+++ b/PAMapp/components/Ui/UiCardCarousel.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiCarousel.vue b/PAMapp/components/Ui/UiCarousel.vue
new file mode 100644
index 0000000..44425b3
--- /dev/null
+++ b/PAMapp/components/Ui/UiCarousel.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiDialog.vue b/PAMapp/components/Ui/UiDialog.vue
new file mode 100644
index 0000000..3b49409
--- /dev/null
+++ b/PAMapp/components/Ui/UiDialog.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 4f6e0b9..83e5780 100644
--- a/PAMapp/pages/index.vue
+++ b/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>
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 24a38fa..b019a7f 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -1,3 +1,7 @@
 <template>
-    <div>quickFilter-敹恍�祟�</div>
+    <div>敹恍�祟�
+        <h5>蝭拚璇辣</h5>
+        <h5>敹恍�祟���</h5>
+        <Ui-CardCarousel></Ui-CardCarousel>
+    </div>
 </template>
\ No newline at end of file

--
Gitblit v1.8.0