From a021d8c2c1698b9e022bb233fe3ce36d81fcce3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 15 Nov 2024 18:57:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-custom/index.vue              | 14 +++++++++++---
 .../model-custom/model-custom-content.vue          |  8 +++++---
 .../model-custom/model-custom-styles.vue           |  2 +-
 src/config/const/custom.ts                         |  4 ++--
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 034a157b..80409b86 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <template v-if="data_source_content_list.length > 0 && form.data_source_direction == '1'">
+    <template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
         <div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
             <div class="w h" :style="style_img_container">
                 <div class="w h re custom-other">
@@ -24,8 +24,8 @@
             </div>
         </div>
     </template>
-    <div v-else-if="data_source_content_list.length > 0 && form.data_source_direction == '0'" class="re oh">
-        <swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
+    <div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="re oh" :style="form.data_source_direction == '1' ? `height:100%;` : `height: ${ swiper_height }px;`">
+        <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '1' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
             <swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
                 <div :style="style_container">
                     <div class="w h" :style="style_img_container">
@@ -176,6 +176,7 @@ const carouselKey = ref('0');
 const autoplay = ref<boolean | object>(false);
 const slides_per_group = ref(1);
 const dot_list = ref<unknown[]>([]);
+const swiper_height = ref(390);
 // 内容参数的集合
 watchEffect(() => {
     // 是否滚动
@@ -190,6 +191,13 @@ watchEffect(() => {
     // 判断是平移还是整屏滚动
     slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.data_source_carousel_col;
     const num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
+    const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.common_style;
+    // 轮播图高度控制
+    if (form.value.data_source_direction == '1') {
+        swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
+    } else {
+        swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * form.value.data_source_carousel_col;
+    }
     dot_list.value = Array(num);
     // 更新轮播图的key，确保更换时能重新更新轮播图
     carouselKey.value = get_math();
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 3f3f4c21..9eb63c1d 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -16,11 +16,12 @@
                     <div class="mb-12">显示设置</div>
                     <el-form-item label="铺满方式">
                         <el-radio-group v-model="form.data_source_direction">
-                            <el-radio value="0">横向滑动</el-radio>
-                            <el-radio value="1">纵向</el-radio>
+                            <el-radio value="0">纵向展示</el-radio>
+                            <el-radio value="2">纵向滑动</el-radio>
+                            <el-radio value="1">横向滑动</el-radio>
                         </el-radio-group>
                     </el-form-item>
-                    <el-form-item v-if="form.data_source_direction == '0'" label="每屏显示">
+                    <el-form-item v-if="['1', '2'].includes(form.data_source_direction)" label="每屏显示">
                         <el-radio-group v-model="form.data_source_carousel_col">
                             <el-radio :value="1">单列展示</el-radio>
                             <el-radio :value="2">两列展示</el-radio>
@@ -203,6 +204,7 @@ const changeDataSource = (key: string) => {
     const type_data = options.value.filter((item) => item.type == key);
     processing_data(key);
     if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
+        form.value.data_source_direction = '0';
         form.value.data_source_content = {
             // 存放手动输入的id
             data_ids: [],
diff --git a/src/components/model-custom/model-custom-styles.vue b/src/components/model-custom/model-custom-styles.vue
index 3ee1ad4a..e639826b 100644
--- a/src/components/model-custom/model-custom-styles.vue
+++ b/src/components/model-custom/model-custom-styles.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w">
-        <template v-if="data.data_source_direction == '0'">
+        <template v-if="['1', '2'].includes(data.data_source_direction)">
             <el-form :model="form" label-width="70">
                 <card-container>
                     <div class="mb-12">轮播设置</div>
diff --git a/src/config/const/custom.ts b/src/config/const/custom.ts
index 50b6beca..5cebd7d3 100644
--- a/src/config/const/custom.ts
+++ b/src/config/const/custom.ts
@@ -113,8 +113,8 @@ const defaultSearch: defaultSearch = {
         },
         // 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
         data_source:'',
-        // 铺满方式 0 横向 1 纵向
-        data_source_direction: '1',
+        // 铺满方式 0 纵向展示 1 横向滑动 2 纵向滑动
+        data_source_direction: '0',
         // 横向滑动时的显示 轮播数量
         data_source_carousel_col: 1,
         // 自定义内容列表