From 150f33ebf7b0d89a790cb0c4449b7661864df645 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 18:43:12 +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=E4=BC=A0=E8=BE=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/magic-cube/index.vue    |  4 +-
 .../components/tabs-content.vue               |  8 ++-
 .../model-data-magic-content.vue              | 63 ++++++++++++-------
 .../components/main/default/data-magic.ts     |  5 +-
 4 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/components/common/magic-cube/index.vue b/src/components/common/magic-cube/index.vue
index 456715af..c5d94b19 100644
--- a/src/components/common/magic-cube/index.vue
+++ b/src/components/common/magic-cube/index.vue
@@ -12,7 +12,7 @@
                 <div v-if="selected_active == index && props.flag" class="cube-del" @click.stop="on_selected_del(index)">
                     <icon name="close" color="f" size="8"></icon>
                 </div>
-                <template v-if="!isEmpty(item.img[0]) && props.type == 'img'">
+                <template v-if="item.img && !isEmpty(item.img[0] || '') && props.type == 'img'">
                     <image-empty v-model="item.img[0]"></image-empty>
                 </template>
                 <template v-else>
@@ -42,7 +42,7 @@ interface CubeItem {
         x: number;
         y: number;
     };
-    img: uploadList[],
+    img?: uploadList[],
     img_list?: any,
     data_list?: any
 }
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index 4eb9f05a..1eb5acd4 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -18,7 +18,7 @@
     <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">
+            <div v-for="(item, index) in form.img_list" :key="index" class="card-background box-shadow-sm re">
                 <div class="flex-col align-c jc-c gap-20 w">
                     <div class="upload_style">
                         <upload v-model="item.carousel_img" :limit="1" size="100%"></upload>
@@ -67,14 +67,16 @@ const state = reactive({
     form: props.value
 });
 const { form } = toRefs(state);
+console.log(form.value);
+
 const img_add = () => {
-    form.value.carousel_list.push({
+    form.value.img_list.push({
         carousel_img: [],
         carousel_link: {},
     });
 }
 const img_remove = (index: number) => {
-    form.value.carousel_list.splice(index, 1);
+    form.value.img_list.splice(index, 1);
 }
 const product_list_remove = (index: number) => {
     form.value.product_list.splice(index, 1);
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 369a8300..c677e170 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -15,9 +15,9 @@
                 <div class="mb-12">展示设置</div>
                 <el-form-item label-width="0" class="show-config">
                     <!-- 风格9 -->
-                    <template v-if="form.style_actived == 8">
+                    <template v-if="form.style_actived == 7">
                         <div class="flex-row align-c jc-c gap-2 style-size flex-wrap">
-                            <div v-for="(item, index) in form.img_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
+                            <div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
                                 <template v-if="!isEmpty(item.img[0])">
                                     <image-empty v-model="item.img[0]"></image-empty>
                                 </template>
@@ -31,16 +31,17 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.img_magic_list" :flag="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="false" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>
             <el-tabs v-model="tabs_name" class="content-tabs">
+                {{ form.data_magic_list[selected_active] }}
                 <el-tab-pane label="内容设置" name="content">
-                    <tabs-content :value="form[selected_active]"></tabs-content>
+                    <tabs-content :value="form.data_magic_list[selected_active].data_content"></tabs-content>
                 </el-tab-pane>
                 <el-tab-pane label="样式设置" name="styles">
-                    <tabs-styles :value="form[selected_active].style"></tabs-styles>
+                    <tabs-styles :value="form.data_magic_list[selected_active].data_style"></tabs-styles>
                 </el-tab-pane>
             </el-tabs>
         </el-form>
@@ -85,19 +86,29 @@ const data_style = {
     color: '#DDDDDD',
 }
 
+const data_content = {
+    data_type: 'commodity',
+    product_list:[],
+    img_list:[]
+}
+
 // 风格
 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} }, { 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
 ]
 const tabs_name = ref('content');
+const state = reactive({
+    form: props.value
+});
+const { form } = toRefs(state);
 //#region 容器大小变更
 const cubeWidth = ref(400);
 const cubeHeight = ref(400);
@@ -113,26 +124,36 @@ function handleResize() {
         cubeHeight.value = 390;
     }
 }
-
+onBeforeMount(() => {
+    if (isEmpty(form.value.data_magic_list)) {
+        form.value.data_magic_list = magic_list(0);
+    }
+})
 onMounted(() => {
     handleResize();
     window.addEventListener('resize', handleResize);
 });
- 
+
 onUnmounted(() => {
     window.removeEventListener('resize', handleResize);
 });
 //#endregion
 const selected_active = ref(0);
-const state = reactive({
-    form: props.value
-});
-const { form } = toRefs(state);
+
 const style_click = (index: number) => {
-    form.value.img_magic_list = cloneDeep(style_show_list[index]);
+    form.value.data_magic_list = cloneDeep(style_show_list[index]);
+
     form.value.style_actived = index;
     selected_active.value = 0;
 }
+const magic_list = (index: number) => {
+    return cloneDeep(style_show_list[index]).map((item) => ({
+        ...item,
+        data_content: cloneDeep(data_content),
+        data_style: cloneDeep(data_style)
+    }));
+}
+
 // 选中的点击事件
 const selected_click = (index: number) => {
     selected_active.value = index;
diff --git a/src/layout/components/main/default/data-magic.ts b/src/layout/components/main/default/data-magic.ts
index 62f42eeb..17d22516 100644
--- a/src/layout/components/main/default/data-magic.ts
+++ b/src/layout/components/main/default/data-magic.ts
@@ -4,9 +4,8 @@ import { tr } from "element-plus/es/locale";
 interface data_magic {
     start: object;
     end: object;
-    data_type: string;
-    commodity_list: Array<string>,
-    img_list: Array<string>;
+    img: uploadList[];
+    data_content: object;
     data_style: object;
 }
 interface defaultSearch {