From 67476b6e686d40ecf66bc21835a3a43187db8296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 21 Oct 2024 16:33:58 +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=E5=88=87=E6=8D=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/radius/index.vue             |  8 +++++++-
 .../components/magic-carousel.vue                |  5 ++---
 .../model-data-magic/components/tabs-styles.vue  | 16 +++++++++++++++-
 src/components/model-data-magic/index.vue        | 13 +++++++------
 .../model-data-magic-content.vue                 |  8 ++++++++
 .../model-data-magic/model-data-magic-styles.vue | 13 -------------
 src/config/const/data-magic.ts                   |  9 ---------
 7 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/components/base/radius/index.vue b/src/components/base/radius/index.vue
index 825e8552..6dfa592d 100644
--- a/src/components/base/radius/index.vue
+++ b/src/components/base/radius/index.vue
@@ -38,7 +38,13 @@ const props = defineProps({
 });
 // 用于页面判断显示
 const state = reactive({
-    form: props.value || {},
+    form: props.value || {
+        radius: 0,
+        radius_top_left: 0,
+        radius_top_right: 0,
+        radius_bottom_left: 0,
+        radius_bottom_right: 0,
+    },
 });
 // 如果需要解构，确保使用toRefs
 const { form } = toRefs(state);
diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index 3b7db1d4..561de9ad 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -2,10 +2,10 @@
     <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
         <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
             <template v-if="props.type === 'img'">
-                <image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" :fit="form.data_content.img_fit"></image-empty>
+                <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
             </template>
             <template v-else>
-                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="contentImgRadius"></product-list-show>
+                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
             </template>
         </el-carousel-item>
     </el-carousel>
@@ -14,7 +14,6 @@
 <script setup lang="ts">
 interface Props {
     value: any;
-    contentImgRadius: string;
     type: string;
     actived: number;
     goodStyle?: any;
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 1a2af617..b3aa088f 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -38,6 +38,9 @@
                 <padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
             </el-form-item>
         </template>
+        <el-form-item label="图片圆角">
+            <radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
+        </el-form-item>
     </card-container>
     <div class="bg-f5 divider-line" />
     <card-container v-if="tabs_content.data_type === 'goods'">
@@ -55,7 +58,7 @@
     </card-container>
 </template>
 <script setup lang="ts">
-import { pick } from 'lodash';
+import { pick, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -81,6 +84,17 @@ const mult_color_picker_event = (arry: string[], type: number) => {
 const chunk_padding_change = (padding: any) => {
     form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
+// 内容圆角
+const img_radius_change = (radius: any) => {
+    const data = !isEmpty(form.value.img_radius) ? form.value.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
+    form.value.img_radius = Object.assign(data, pick(radius, [
+        'radius',
+        'radius_top_left',
+        'radius_top_right',
+        'radius_bottom_left',
+        'radius_bottom_right',
+    ]));
+}
 
 watchEffect(() => {
     form.value = props.value;
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 1f9ca474..2efa6e08 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -14,12 +14,12 @@
                                             <p class="ma-0 w txet-word-break text-line-1" :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" :content-img-radius="content_img_radius" :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($event, index)"></magic-carousel>
                                         </div>
                                     </div>
                                 </template>
                                 <template v-else>
-                                    <magic-carousel :value="item" :content-img-radius="content_img_radius" 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($event, index)"></magic-carousel>
                                 </template>
                                 <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                     <template v-if="item.data_style.indicator_style == 'num'">
@@ -45,12 +45,12 @@
                                         <p class="ma-0 w txet-word-break text-line-1" :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" :content-img-radius="content_img_radius" 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($event, index)"></magic-carousel>
                                     </div>
                                 </div>
                             </template>
                             <template v-else>
-                                <magic-carousel :value="item" :content-img-radius="content_img_radius" 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($event, index)"></magic-carousel>
                             </template>
                             <div v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${item.data_style?.indicator_bottom}px;`">
                                 <template v-if="item.data_style.indicator_style == 'num'">
@@ -93,8 +93,6 @@ const outer_sx = computed(() => -((new_style.value?.image_spacing || 0) / 2) + '
 const spacing = computed(() => (new_style.value?.image_spacing || 0) / 2 + 'px');
 // 内容圆角设置
 const content_radius = computed(() => radius_computer(new_style.value.data_radius));
-// 图片圆角设置
-const content_img_radius = computed(() => radius_computer(new_style.value.img_radius));
 //#region 容器大小计算
 const div_width = ref(0);
 const container_size = computed(() => div_width.value + 'px');
@@ -266,6 +264,9 @@ watch(props.value.content, (val) => {
         data_style.indicator_styles = indicator_style(data_style);
         data_style.background_style = gradient_computer(data_style);
         data_style.background_img_style = background_computer(data_style);
+        const radius = !isEmpty(data_style.img_radius) ? data_style.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
+        data_style.get_img_radius = radius_computer(radius);
+        
         // 商品名称和价格样式
         data_style.goods_title_style = goods_trends_config(item.data_style, 'title');
         data_style.goods_price_style = goods_trends_config(item.data_style, 'price');
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 ec8badb2..bbc3246e 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -84,6 +84,14 @@ const data_style = {
         padding_left: 15,
         padding_right: 15,
     },
+    // 图片圆角
+    img_radius: {
+        radius: 4,
+        radius_top_left: 4,
+        radius_top_right: 4,
+        radius_bottom_left: 4,
+        radius_bottom_right: 4,
+    },
     is_show: '1',
     indicator_style: 'dot',
     indicator_location: 'center',
diff --git a/src/components/model-data-magic/model-data-magic-styles.vue b/src/components/model-data-magic/model-data-magic-styles.vue
index 68262898..2bd3b8d0 100644
--- a/src/components/model-data-magic/model-data-magic-styles.vue
+++ b/src/components/model-data-magic/model-data-magic-styles.vue
@@ -9,9 +9,6 @@
                 <el-form-item label="数据圆角">
                     <radius :value="form.data_radius" @update:value="data_radius_change"></radius>
                 </el-form-item>
-                <el-form-item label="图片圆角">
-                    <radius :value="form.img_radius" @update:value="img_radius_change"></radius>
-                </el-form-item>
             </card-container>
         </el-form>
         <div class="bg-f5 divider-line" />
@@ -38,16 +35,6 @@ const common_style_update = (value: any) => {
     form.value.common_style = value;
 };
 // 内容圆角
-const img_radius_change = (radius: any) => {
-    form.value.img_radius = Object.assign(form.value.img_radius, pick(radius, [
-        'radius',
-        'radius_top_left',
-        'radius_top_right',
-        'radius_bottom_left',
-        'radius_bottom_right',
-    ]));
-}
-// 内容圆角
 const data_radius_change = (radius: any) => {
     form.value.data_radius = Object.assign(form.value.data_radius, pick(radius, [
         'radius',
diff --git a/src/config/const/data-magic.ts b/src/config/const/data-magic.ts
index 918663d0..e957fb83 100644
--- a/src/config/const/data-magic.ts
+++ b/src/config/const/data-magic.ts
@@ -14,7 +14,6 @@ interface defaultSearch {
     style: {
         img_radius: object
         data_radius: object;
-        image_spacing: number;
         common_style: object;
     };
 }
@@ -27,14 +26,6 @@ const defaultSearch: defaultSearch = {
         data_magic_list: [],
     },
     style: {
-        // 图片圆角
-        img_radius: {
-            radius: 0,
-            radius_top_left: 0,
-            radius_top_right: 0,
-            radius_bottom_left: 0,
-            radius_bottom_right: 0,
-        },
         // 内容圆角
         data_radius: {
             radius: 0,