From 14089eebc4793f4064d538fb93207429ed125ebe 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, 13 Aug 2024 17:42:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E7=9A=84=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/carousel-indicator/index.vue       |  2 -
 .../components/tabs-content.vue               | 22 ++++----
 .../components/tabs-styles.vue                | 42 +++++++++++++--
 src/components/model-data-magic/index.vue     |  4 +-
 .../model-data-magic-content.vue              | 51 +++++++++++++++----
 .../components/main/default/data-magic.ts     | 26 +++-------
 6 files changed, 101 insertions(+), 46 deletions(-)

diff --git a/src/components/common/carousel-indicator/index.vue b/src/components/common/carousel-indicator/index.vue
index aff2573b..dae6cb41 100644
--- a/src/components/common/carousel-indicator/index.vue
+++ b/src/components/common/carousel-indicator/index.vue
@@ -48,8 +48,6 @@
 import { pick } from 'lodash';
 // interface indicator {
 //     is_show: boolean;
-//     is_roll: boolean;
-//     interval_time: number;
 //     indicator_style: string;
 //     indicator_location: string;
 //     indicator_size: number;
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 5fc1c2a5..4eb9f05a 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -1,19 +1,21 @@
 <template>
     <card-container class="mb-8">
         <el-form-item label="数据类型">
-            <el-radio-group v-model="form.display_location" class="ml-4">
-                <el-radio value="img">图片</el-radio>
+            <el-radio-group v-model="form.data_type" class="ml-4">
                 <el-radio value="commodity">商品</el-radio>
+                <el-radio value="img">图片</el-radio>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="主标题">
-            <el-input placeholder="请输入主标题"></el-input>
-        </el-form-item>
-        <el-form-item label="副标题">
-            <el-input placeholder="请输入副标题"></el-input>
-        </el-form-item>
+        <template v-if="form.data_type === 'commodity'">
+            <el-form-item label="主标题">
+                <el-input placeholder="请输入主标题"></el-input>
+            </el-form-item>
+            <el-form-item label="副标题">
+                <el-input placeholder="请输入副标题"></el-input>
+            </el-form-item>
+        </template>
     </card-container>
-    <card-container v-if="form.display_location == 'img'" class="mb-8">
+    <card-container v-if="form.data_type == 'img'" class="mb-8">
         <div class="mb-12">图片设置</div>
         <div class="flex-col gap-20">
             <div v-for="(item, index) in form.carousel_list" :key="index" class="card-background box-shadow-sm re">
@@ -48,7 +50,7 @@
             </template>
         </drag>
         <el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
-        
+
     </card-container>
 </template>
 <script setup lang="ts">
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 415b002a..db7a2ca6 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -3,16 +3,52 @@
         <el-form-item label="底部背景">
             <div class="flex-col gap-10 w">
                 <div class="size-12">背景色</div>
-                <mult-color-picker :value="form.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                <div class="flex-row jc-sb align-c">
+                    <div class="size-12">背景图</div>
+                    <el-radio-group v-model="form.background_img_style" is-button>
+                        <el-tooltip content="单张" placement="top" effect="light">
+                            <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                        </el-tooltip>
+                        <el-tooltip content="平铺" placement="top" effect="light">
+                            <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                        </el-tooltip>
+                        <el-tooltip content="铺满" placement="top" effect="light">
+                            <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                        </el-tooltip>
+                    </el-radio-group>
+                </div>
+                <upload v-model="form.background_img_url" :limit="1"></upload>
             </div>
         </el-form-item>
+        <el-form-item label="自动轮播">
+            <el-switch v-model="form.is_roll" size="large" />
+        </el-form-item>
+        <el-form-item label="轮播方向">
+            <el-radio-group v-model="form.rotation_direction" class="ml-4">
+                <el-radio value="horizontal">横向</el-radio>
+                <el-radio value="vertical">纵向</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="间隔时间">
+            <slider v-model="form.interval_time" :max="100"></slider>
+        </el-form-item>
         <el-form-item label="主标题">
-            <el-input placeholder="请输入主标题"></el-input>
+            <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="副标题">
-            <el-input placeholder="请输入副标题"></el-input>
+            <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>
     </card-container>
+    <card-container class="mb-8">
+        <carousel-indicator :value="form"></carousel-indicator>
+    </card-container>
 </template>
 <script setup lang="ts">
 const props = defineProps({
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index e421dc88..6559ece7 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -4,13 +4,13 @@
             <!-- 风格9 -->
             <template v-if="form.style_actived == 8">
                 <div class="flex-row align-c jc-c style-size flex-wrap">
-                    <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
+                    <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
                         <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
                     </div>
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
+                <div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
                     <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
                 </div>
             </template>
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 9e83d4ac..369a8300 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -37,10 +37,10 @@
             </card-container>
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
-                    <tabs-content :value="form"></tabs-content>
+                    <tabs-content :value="form[selected_active]"></tabs-content>
                 </el-tab-pane>
                 <el-tab-pane label="样式设置" name="styles">
-                    <tabs-styles :value="form"></tabs-styles>
+                    <tabs-styles :value="form[selected_active].style"></tabs-styles>
                 </el-tab-pane>
             </el-tabs>
         </el-form>
@@ -56,17 +56,46 @@ const props = defineProps({
 });
 const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
 
+const data_style = {
+    color_list: ['#FFD9C3', '#FFECE2', '#FFFFFF'],
+    direction: '90deg',
+    background_img_style: 2,
+    background_img_url: [],
+    is_roll: true,
+    rotation_direction: 'horizontal',
+    interval_time: 2,
+    heading_color: '#000',
+    heading_typeface: 'normal',
+    heading_size: 12,
+    subtitle_color: '#000',
+    subtitle_typeface: 'normal',
+    subtitle_size: 12,
+    is_show: true,
+    indicator_style: 'dot',
+    indicator_location: 'center',
+    indicator_size: 5,
+    indicator_radius: {
+        radius: 0,
+        radius_top_left: 0,
+        radius_top_right: 0,
+        radius_bottom_left: 0,
+        radius_bottom_right: 0,
+    },
+    actived_color: '#2A94FF',
+    color: '#DDDDDD',
+}
+
 // 风格
 const style_show_list = [
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }], // 风格1
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4},commodity_list:[], img_list:[] }], // 风格2
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2},commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格3
-    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4},commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格4
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2},commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格5
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4},commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格6
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2},commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4},commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格7
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2},commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4},commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格8
-    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2},commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4},commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4},commodity_list:[], img_list:[] }],// 风格9
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格1
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }], // 风格2
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格3
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格4
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格5
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格6
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 1, y: 3},end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格7
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格8
+    [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 1},end: {x: 4, y: 2}, commodity_list:[], img_list:[] }, { start: {x: 3, y: 3},end: {x: 3, y: 4}, commodity_list:[], img_list:[] }, { start: {x: 4, y: 3},end: {x: 4, y: 4}, commodity_list:[], img_list:[] }],// 风格9
 ]
 const tabs_name = ref('content');
 //#region 容器大小变更
diff --git a/src/layout/components/main/default/data-magic.ts b/src/layout/components/main/default/data-magic.ts
index 164191f8..62f42eeb 100644
--- a/src/layout/components/main/default/data-magic.ts
+++ b/src/layout/components/main/default/data-magic.ts
@@ -1,15 +1,18 @@
 import { get_math } from "@/utils";
 import defaultCommon from "./index";
-interface img_magic {
+import { tr } from "element-plus/es/locale";
+interface data_magic {
     start: object;
     end: object;
-    img: uploadList[],
-    img_link: object;
+    data_type: string;
+    commodity_list: Array<string>,
+    img_list: Array<string>;
+    data_style: object;
 }
 interface defaultSearch {
     content: {
         style_actived: number;
-        img_magic_list: img_magic[];
+        data_magic_list: data_magic[];
     };
     style: {
         img_radius: object
@@ -22,20 +25,7 @@ interface defaultSearch {
 const defaultSearch: defaultSearch = {
     content: {
         style_actived: 0,
-        img_magic_list: [
-            {
-                start: {x: 1, y: 1},
-                end: {x: 4, y: 2},
-                img: [],
-                img_link: {}
-            },
-            {
-                start: {x: 1, y: 3},
-                end: {x: 4, y: 4},
-                img: [],
-                img_link: {}
-            }
-        ],
+        data_magic_list: [],
     },
     style: {
         img_radius: {