From 7151d1e6b5b81bb3ac6155a17bc9417a768acaac 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 10:13:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-data-magic/index.vue | 52 +++++++++++------------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index e3e0e10b..8e4d9e91 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -4,18 +4,20 @@
             <!-- 风格9 -->
             <template v-if="form.style_actived == 7">
                 <div class="flex-row align-c jc-c style-size flex-wrap">
-                    <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) }]">
+                    <div v-for="(item, index) in 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>
                     </div>
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${selected_style(item)} ${ item.data_style.background_style }`">
+                <div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style }`">
                     <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="(item2, index) in item.data_content.list" :key="index">
-                            <template>
-
+                        <el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
+                            <template v-if="item.data_content.data_type == 'commodity'">
+                            </template>
+                            <template v-else>
+                                <image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
                             </template>
                         </el-carousel-item>
                     </el-carousel>
@@ -26,7 +28,7 @@
                             </div>
                         </template>
                         <template v-else>
-                            <div v-for="(item3, index2) in item.data_content.product_list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
+                            <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" />
                         </template>
                     </div>
                 </div>
@@ -36,7 +38,7 @@
 </template>
 <script setup lang="ts">
 import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
-import { isEmpty } from 'lodash';
+import { isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -71,7 +73,7 @@ onMounted(() => {
 //#endregion
 //#region 图片位置计算
 //计算选中层的宽度。
-interface CubeItem {
+interface data_magic {
     start: {
         x: number;
         y: number;
@@ -80,29 +82,32 @@ interface CubeItem {
         x: number;
         y: number;
     };
+    actived_index: number;
+    data_content: any;
+    data_style: any;
 }
 const density = ref('4');
 //单元魔方宽度。
 const cubeCellWidth = computed(() => div_width.value / parseInt(density.value));
 //单元魔方高度。
 const cubeCellHeight = computed(() => div_width.value / parseInt(density.value));
-const getSelectedWidth = (item: CubeItem) => {
+const getSelectedWidth = (item: data_magic) => {
     return (item.end.x - item.start.x + 1) * cubeCellWidth.value;
 };
 //计算选中层的高度。
-const getSelectedHeight = (item: CubeItem) => {
+const getSelectedHeight = (item: data_magic) => {
     return (item.end.y - item.start.y + 1) * cubeCellHeight.value;
 };
 //计算选中层的右边距离。
-const getSelectedTop = (item: CubeItem) => {
+const getSelectedTop = (item: data_magic) => {
     return (item.start.y - 1) * cubeCellHeight.value;
 };
 //计算选中层的左边距离。
-const getSelectedLeft = (item: CubeItem) => {
+const getSelectedLeft = (item: data_magic) => {
     return (item.start.x - 1) * cubeCellWidth.value;
 };
 // 根据当前页面大小计算成百分比
-const selected_style = (item: CubeItem, ) => {
+const selected_style = (item: data_magic) => {
     return `width: calc(${percentage(getSelectedWidth(item))} - ${ outer_spacing.value } ); height: calc(${percentage(getSelectedHeight(item))} - ${ outer_spacing.value } ); top: ${percentage(getSelectedTop(item))}; left: ${percentage(getSelectedLeft(item))};`;
 };
 // 计算成百分比
@@ -111,17 +116,10 @@ const percentage = (num: number) => {
 };
 //#endregion
 //#region 组装页面显示的数据
-interface data_magic {
-    start: object;
-    end: object;
-    actived_index: number;
-    data_content: any;
-    data_style: any;
-}
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
-    const data = val.data_magic_list;
+    const data = cloneDeep(val.data_magic_list);
     data.actived_index = 0;
     data.forEach((item: data_magic) => {
         const data_content = item.data_content;
@@ -135,28 +133,28 @@ watch(props.value.content, (val) => {
         const { product_list, img_list } = data_content;
         data_content.list = data_content.data_type == 'commodity' ? data_content.product_list : data_content.img_list;
         const new_data = {
+            data_type: data_content.data_type,
             interval_time: interval_time,
             is_roll: is_roll,
             rotation_direction: rotation_direction,
             product_list: [...product_list], // 确保深拷贝
             img_list: [...img_list] // 确保深拷贝
         };
-        let old_data = old_list.value[key];
+        // let old_data = old_list.value[key];
         // 获取旧数据
-        if (!isEmpty(old_data)) {
+        if (!isEmpty(old_list.value[key])) {
             // 旧数据
-            const oldDataStringified = JSON.stringify(old_data);
+            const oldDataStringified = JSON.stringify(old_list.value[key]);
             // 新数据
             const newDataStringified = JSON.stringify(new_data);
-
             if (oldDataStringified !== newDataStringified) {
                 // 更新旧数据
-                old_data = JSON.parse(newDataStringified);
+                old_list.value[key] = JSON.parse(newDataStringified);
                 // 更新轮播图的key，确保更换时能重新更新轮播图
                 data_style.carouselKey = get_math();
             }
         } else {
-            old_data = new_data;
+            old_list.value[key] = new_data;
         }
     });
     data_magic_list.value = data;