From bade4b326f6fbe560f12145e11f8b6d3c682273f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 19 Nov 2024 10:53:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=AD=94=E6=96=B9=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=A4=84=E7=90=86=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         |  2 +-
 .../model-custom/model-custom-content.vue     |  3 +-
 .../components/carousel/magic-carousel.vue    |  2 +-
 .../components/custom/index.vue               | 65 +++++++++++++++++--
 .../magic-cube-settings/tabs-styles.vue       |  8 +--
 src/components/model-data-magic/index.vue     | 40 +++++++++---
 6 files changed, 99 insertions(+), 21 deletions(-)

diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index d5662ab3..31c7c327 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -18,7 +18,7 @@
                         </div>
                     </swiper-slide>
                 </swiper>
-                <div v-if="new_style.is_show == '1' && dot_list.length > 0" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
+                <div v-if="new_style.is_show == '1' && dot_list.length > 1" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
                     <template v-if="new_style.indicator_style == 'num'">
                         <div :style="indicator_style" class="dot-item">
                             <span class="num-active">{{ actived_index + 1 }}</span><span>/{{ dot_list.length }}</span>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 45e0cea5..8f0ade15 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -114,7 +114,8 @@ const form = ref(props.value);
 const center_width = ref(props.magicWidth);
 
 const custom_width = computed(() => {
-    if (['goods', 'article', 'brand'].includes(form.value.data_source) && form.value.data_source_direction == '0') {
+    // 如果是横向展示，那么就需要根据每屏显示的数量来计算宽度 data_source_direction == 2 为横向滑动
+    if (['goods', 'article', 'brand'].includes(form.value.data_source) && form.value.data_source_direction == '2') {
         return center_width.value / form.value.data_source_carousel_col;
     } else {
         return center_width.value;
diff --git a/src/components/model-data-magic/components/carousel/magic-carousel.vue b/src/components/model-data-magic/components/carousel/magic-carousel.vue
index e88cbfda..6136b317 100644
--- a/src/components/model-data-magic/components/carousel/magic-carousel.vue
+++ b/src/components/model-data-magic/components/carousel/magic-carousel.vue
@@ -93,7 +93,7 @@ watchEffect(() => {
         // 商品时的处理逻辑
         const { goods_outerflex, goods_num } = form.value.data_content;
         const { rotation_direction, rolling_fashion } = form.value.data_style;
-        // 判断是平移还是整屏滚动, 平移的时候是一个为1组
+        // 判断是平移还是整屏滚动, 平移的时候是一个为1组，如果是整屏滚动，就为一屏为一组
         if (rolling_fashion == 'translation') {
             // 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
             if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue
index 19493f47..dcf52807 100644
--- a/src/components/model-data-magic/components/custom/index.vue
+++ b/src/components/model-data-magic/components/custom/index.vue
@@ -1,11 +1,22 @@
 <template>
-    <template v-if="data_source_content_list.length > 0">
+    <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" class="oh" :style="style_container">
             <div class="w h oh" :style="style_img_container">
                 <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
             </div>
         </div>
     </template>
+    <div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="oh" :style="form.data_source_direction == '2' ? `height:100%;` : `height: ${ swiper_height }px;`">
+        <swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '2' ? '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">
+                        <data-rendering :custom-list="form.custom_list" :source-list="item1" :source-type="form?.data_source || ''" :data-height="form.height" :scale="scale"></data-rendering>
+                    </div>
+                </div>
+            </swiper-slide>
+        </swiper>
+    </div>
     <template v-else>
         <div class="oh" :style="style_container">
             <div class="w h oh" :style="style_img_container">
@@ -15,8 +26,12 @@
     </template>
 </template>
 <script setup lang="ts">
-import { background_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+import { background_computer, get_math, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
 import { isEmpty } from "lodash";
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay } from 'swiper/modules';
+import 'swiper/css';
+const modules = [Autoplay];
 
 const props = defineProps({
     value: {
@@ -42,9 +57,6 @@ const state = reactive({
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
 const scale = ref(1);
-const percentage_count = (val: number) => {
-    return val * scale.value + 'px';
-};
 // 数据来源的内容
 let data_source_content_list = computed(() => {
     if (['goods', 'article', 'brand'].includes(form.value.data_source)) {
@@ -64,7 +76,7 @@ let data_source_content_list = computed(() => {
 })
 interface new_style {
     data_color_list: color_list[];
-    data_direction: string; 
+    data_direction: string;
     data_radius: radiusStyle;
     data_chunk_margin: marginStyle;
     data_chunk_padding: paddingStyle;
@@ -107,6 +119,47 @@ watchEffect(() => {
     const width = form.value.width - padding_left - padding_right - margin_left - margin_right - (props.dataSpacing / 2);
     scale.value = (width / form.value.width) * props.magicScale;
 })
+//#region 轮播图操作
+// 轮播图key值
+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(150);
+const emit = defineEmits(['carousel_change']);
+// 内容参数的集合
+watchEffect(() => {
+    // 是否滚动
+    if (new_style.value.is_roll == '1') {
+        autoplay.value = {
+            delay: (new_style.value.interval_time || 2) * 1000,
+            pauseOnMouseEnter: true,
+        };
+    } else {
+        autoplay.value = false;
+    }
+    const carousel_col = form.value?.data_source_carousel_col || 1;
+    // 判断是平移还是整屏滚动
+    slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : carousel_col;
+    const { margin_bottom, margin_top } = new_style.value.data_chunk_margin;
+    const { padding_top, padding_bottom } = new_style.value.data_chunk_padding;
+    // 轮播图高度控制
+    if (form.value.data_source_direction == '2') {
+        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) * carousel_col;
+    }
+    // 更新轮播图的key，确保更换时能重新更新轮播图
+    carouselKey.value = get_math();
+});
+
+const slideChange = (swiper: { realIndex: number }) => {
+    const carousel_col = form.value?.data_source_carousel_col || 1;
+    // 轮播图滚动时，更新当前激活的下标， 如果不是平移的时候，需要除以列数，否则就是当前的下标
+    const index = new_style.value.rolling_fashion == 'translation' ? swiper.realIndex : (swiper.realIndex / carousel_col) > 0 ? (swiper.realIndex / carousel_col) : 0;
+    emit('carousel_change', index);
+};
+//#endregion
 </script>
 <style lang="scss" scoped>
 </style>
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index ae83ab0e..75131083 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -1,13 +1,13 @@
 <template>
-    <template v-if="tabs_content.data_type != 'custom'">
+    <template v-if="tabs_content.data_type != 'video'">
         <card-container>
             <div class="mb-12">基础样式</div>
-            <template v-if="['goods', 'images'].includes(tabs_content.data_type)">
+            <template v-if="['goods', 'images', 'custom'].includes(tabs_content.data_type)">
                 <el-form-item label="自动轮播">
                     <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
                 </el-form-item>
                 <template v-if="form.is_roll == '1'">
-                    <el-form-item label="轮播方向">
+                    <el-form-item v-if="tabs_content.data_type != 'custom'" label="轮播方向">
                         <el-radio-group v-model="form.rotation_direction">
                             <el-radio value="horizontal">横向</el-radio>
                             <el-radio value="vertical">纵向</el-radio>
@@ -116,7 +116,7 @@
         </card-container>
         <div class="bg-f5 divider-line" />
     </template>
-    <template v-if="['goods', 'images'].includes(tabs_content.data_type)">
+    <template v-if="['goods', 'images', 'custom'].includes(tabs_content.data_type)">
         <card-container>
             <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
         </card-container>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 3be304f5..1afc1171 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -21,17 +21,17 @@
                                             <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
-                                            <magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                            <magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                         </div>
                                     </div>
                                 </template>
                                 <template v-else-if="item.data_content.data_type == 'images'">
                                     <div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                                        <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                        <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                     </div>
                                 </template>
                                 <template v-else-if="item.data_content.data_type == 'custom'">
-                                    <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
+                                    <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing" @carousel_change="carousel_change(index, $event)"></customIndex>
                                 </template>
                                 <template v-else>
                                     <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
@@ -67,17 +67,17 @@
                                         <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h flex-1">
-                                        <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                        <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                     </div>
                                 </div>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'images'">
                                 <div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
+                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                 </div>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'custom'">
-                                <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing"></customIndex>
+                                <customIndex :value="item" :magic-scale="magic_scale" :data-spacing="new_style.image_spacing" @carousel_change="carousel_change(index, $event)"></customIndex>
                             </template>
                             <template v-else>
                                 <videoIndex :value="item.data_content" :data-style="item.data_style"></videoIndex>
@@ -346,7 +346,23 @@ const rotation_calculation = (list: Array<any>, num: number, data_content: any,
     }
     return nav_list;
 }
-
+// 数据来源的内容
+let data_source_content_list = (data_content: any) => {
+    if (['goods', 'article', 'brand'].includes(data_content.data_source)) {
+        if (data_content.data_source_content.data_type == '0') {
+            return data_content.data_source_content.data_list;
+        } else {
+            return data_content.data_source_content.data_auto_list.map((item: any) => ({
+                id: Math.random(),
+                new_cover: [],
+                new_title: '',
+                data: item,
+            }));
+        }
+    } else {
+        return data_content.data_source_content.data_list;
+    }
+};
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
@@ -371,9 +387,17 @@ watch(props.value.content, (val) => {
 
         const { is_roll, rotation_direction, interval_time, rolling_fashion } = data_style;
         const { goods_list, images_list } = data_content;
+        // 商品时的处理逻辑
         if (data_content.data_type == 'goods') {
             data_content.list = commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
+        } else if (data_content.data_type == 'custom' && ['1', '2'].includes(data_content.data_source_direction)) {
+            // 是自定义并且是轮播状态的时候，添加数据
+            const list = data_source_content_list(data_content);
+            const carousel_col = data_style?.data_source_carousel_col || 1;
+            const num = new_style.value.rolling_fashion == 'translation' ? list.length : Math.ceil(list.length / carousel_col);
+            data_content.list = Array(num);
         } else {
+            // 是图片的时候，直接赋值
             data_content.list = data_content.images_list;
         }
         const new_data = {
@@ -405,7 +429,7 @@ watch(props.value.content, (val) => {
     data_magic_list.value = data;
 }, {immediate: true, deep: true})
 //#endregion
-const carousel_change = (index: number, key: number) => {
+const carousel_change = (key: number, index: number, type?: string, list?: any[]) => {
     if (data_magic_list.value[key]) {
         data_magic_list.value[key].actived_index = index;
     }