From 97a996551db0226b6f7ae2b3d4ed276d2bc01777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Thu, 15 Aug 2024 14:50:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=AD=94=E6=96=B9=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E5=9F=BA=E6=9C=AC=E5=B8=83=E5=B1=80=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/tabs-content.vue               |  6 ++-
 .../components/tabs-styles.vue                | 36 +++++++++++------
 src/components/model-data-magic/index.vue     | 39 ++++++++++++++++---
 .../model-data-magic-content.vue              | 26 +++++++------
 4 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 4f324d14..9cd9a0d3 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -6,7 +6,7 @@
                 <el-radio value="img">图片</el-radio>
             </el-radio-group>
         </el-form-item>
-        <template v-if="form.data_type === 'commodity'">
+        <template v-if="form.data_type === 'commodity' && isShowTitle">
             <el-form-item label="主标题">
                 <el-input v-model="form.heading_title" placeholder="请输入主标题"></el-input>
             </el-form-item>
@@ -60,6 +60,10 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    isShowTitle: {
+        type: Boolean,
+        default: true,
+    }
 });
 
 const form = ref(props.value);
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index bad973c4..982e1dea 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -33,18 +33,20 @@
         <el-form-item label="间隔时间">
             <slider v-model="form.interval_time" :max="100"></slider>
         </el-form-item>
-        <el-form-item label="主标题">
-            <div class="flex-col gap-10 w">
-                <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
-                <text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
-            </div>
-        </el-form-item>
-        <el-form-item label="副标题">
-            <div class="flex-col gap-10 w">
-                <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
-                <text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
-            </div>
-        </el-form-item>
+        <template v-if="tabs_content.data_type === 'commodity' && isShowTitle">
+            <el-form-item label="主标题">
+                <div class="flex-col gap-10 w">
+                    <color-picker v-model="form.heading_color" default-color="#000000"></color-picker>
+                    <text-size-type v-model:typeface="form.heading_typeface" v-model:size="form.heading_size"></text-size-type>
+                </div>
+            </el-form-item>
+            <el-form-item label="副标题">
+                <div class="flex-col gap-10 w">
+                    <color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
+                    <text-size-type v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size"></text-size-type>
+                </div>
+            </el-form-item>
+        </template>
     </card-container>
     <card-container class="mb-8">
         <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
@@ -55,10 +57,19 @@ const props = defineProps({
     value: {
         type: Object,
         default: () => ({}),
+    },
+    content: {
+        type: Object,
+        default: () => ({}),
+    },
+    isShowTitle: {
+        type: Boolean,
+        default: true,
     }
 });
 
 const form = ref(props.value);
+const tabs_content = ref(props.content);
 
 const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.color_list = arry;
@@ -67,6 +78,7 @@ const mult_color_picker_event = (arry: string[], type: number) => {
 
 watchEffect(() => {
     form.value = props.value;
+    tabs_content.value = props.content;
 })
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 2cdd9ca2..a60f4aa7 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -14,7 +14,7 @@
                                 <div class="mt-20 w h">
                                     <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                                         <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                            <a>13666</a>
+                                            <a>item1</a>
                                         </el-carousel-item>
                                     </el-carousel>
                                 </div>
@@ -34,7 +34,7 @@
                                 </div>
                             </template>
                             <template v-else>
-                                <div v-for="(item2, index2) in item.data_content.list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
+                                <div v-for="(item3, index3) in item.data_content.list" :key="index3" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index3)}`" class="dot-item" />
                             </template>
                         </div>
                     </div>
@@ -51,7 +51,7 @@
                             <div class="w h">
                                 <el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
                                     <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
-                                        <a>13666</a>
+                                        <product-list-show :outerflex="item.outerflex" :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
                                     </el-carousel-item>
                                 </el-carousel>
                             </div>
@@ -71,7 +71,7 @@
                             </div>
                         </template>
                         <template v-else>
-                            <div v-for="(item2, index2) in item.data_content.list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
+                            <div v-for="(item3, index3) in item.data_content.list" :key="index3" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index3)}`" class="dot-item" />
                         </template>
                     </div>
                 </div>
@@ -125,6 +125,9 @@ interface data_magic {
         x: number;
         y: number;
     };
+    num: number;
+    flex: string;
+    outerflex: string;
     heading_title?: string;
     subtitle?: string;
     actived_index: number;
@@ -176,7 +179,11 @@ watch(props.value.content, (val) => {
 
         const { is_roll, rotation_direction, interval_time } = data_style;
         const { product_list, img_list } = data_content;
-        data_content.list = data_content.data_type == 'commodity' ? data_content.product_list : data_content.img_list;
+        if (data_content.data_type == 'commodity') {
+            data_content.list = commodity_list(data_content.product_list, item.num);
+        } else {
+            data_content.list = data_content.img_list;
+        }
         const new_data = {
             data_type: data_content.data_type,
             interval_time: interval_time,
@@ -242,6 +249,28 @@ const trends_config = (style: any, key: string) => {
 }
 const text_style = (typeface: string, size: number, color: string) => {
     return `font-weight:${ typeface }; font-size: ${ size }px; color: ${ color };`;
+} 
+/*
+** 组装产品的数据
+** @param {Array} list 商品列表
+** @param {Number} num 显示数量
+** @return {Array}
+*/
+const commodity_list = (list: any[], num: number) => {
+    if (list.length > 0) {
+        // 深拷贝一下，确保不会出现问题
+        const commodity_list = cloneDeep(list);
+        // 存储数据显示
+        let nav_list = [];
+        // 拆分的数量
+        const split_num = Math.ceil(commodity_list.length / num);
+        for (let i = 0; i < split_num; i++) {
+            nav_list.push({ split_list: commodity_list.slice(i * num, (i + 1) * num) });
+        }
+        return nav_list;
+    } else {
+        return [];
+    }
 }
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 00cc4f0a..32b5bf01 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -3,7 +3,7 @@
         <el-form :model="form" label-width="80">
             <card-container class="mb-8">
                 <div class="mb-12">展示风格</div>
-                <el-form-item label="选择风格">
+                <el-form-item label="选择风格" label-width="60">
                     <div class="flex align-c flex-wrap gap-10">
                         <div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
                             <icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="48"></icon>
@@ -33,10 +33,10 @@
             </card-container>
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
-                    <tabs-content :value="form.data_magic_list[selected_active].data_content"></tabs-content>
+                    <tabs-content :value="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-content>
                 </el-tab-pane>
                 <el-tab-pane label="样式设置" name="styles">
-                    <tabs-styles :value="form.data_magic_list[selected_active].data_style"></tabs-styles>
+                    <tabs-styles :value="form.data_magic_list[selected_active].data_style" :content="form.data_magic_list[selected_active].data_content" :isShowTitle="is_show_title"></tabs-styles>
                 </el-tab-pane>
             </el-tabs>
         </el-form>
@@ -98,15 +98,15 @@ const data_content = {
 
 // 不同风格的数据
 const style_show_list = [
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }], // 风格1
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }], // 风格2
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }],// 风格3
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格4
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格5
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }],// 风格6
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格7
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格8
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格9
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row'}], // 风格1
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }], // 风格2
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'row', outerflex: 'row' }],// 风格3
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'row', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格4
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格5
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col' }],// 风格6
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col', outerflex: 'row' }],// 风格7
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格8
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col' }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col', outerflex: 'row' }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'row' }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'row' }],// 风格9
 ]
 const tabs_name = ref('content');
 const state = reactive({
@@ -183,6 +183,8 @@ const data_title = (item: any) => {
     }
     return title;
 };
+// 除了第8个风格下的后3个不显示标题，其他的都显示
+const is_show_title = computed(() => !(form.value.style_actived == 7 && ![0, 1].includes(selected_active.value)));
 </script>
 <style lang="scss" scoped>
 .card.mb-8 {