From 25cb400db759ae48b8fbc024e19cbdd1388847ba 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, 21 Nov 2024 18:50:26 +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=E6=98=BE=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/base/image-empty/index.vue     |  1 +
 .../components/carousel/magic-carousel.vue    | 27 ++++++++++++------
 .../components/carousel/product-list-show.vue | 27 +++++++++++++-----
 .../magic-cube-settings/tabs-content.vue      | 25 +++++++++++++----
 src/components/model-data-magic/index.vue     | 10 ++++---
 .../model-data-magic-content.vue              | 28 +++++++++++++------
 src/config/const/data-magic.ts                |  3 ++
 7 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/src/components/base/image-empty/index.vue b/src/components/base/image-empty/index.vue
index 6b5f0741..d4d85e37 100644
--- a/src/components/base/image-empty/index.vue
+++ b/src/components/base/image-empty/index.vue
@@ -44,6 +44,7 @@ const on_load = (e: any) => {
     background-color: #f4fcff;
     img {
         width: 100%;
+        padding: 0.4rem;
     }
 }
 </style>
diff --git a/src/components/model-data-magic/components/carousel/magic-carousel.vue b/src/components/model-data-magic/components/carousel/magic-carousel.vue
index 6136b317..a0237d2a 100644
--- a/src/components/model-data-magic/components/carousel/magic-carousel.vue
+++ b/src/components/model-data-magic/components/carousel/magic-carousel.vue
@@ -1,13 +1,13 @@
 <template>
     <div ref="card_container" class="w h oh" :style="props.type === 'img' ? '' : style_container">
-        <div class="w re oh" :style="props.type === 'img' ? `height: ${ outer_height }px;` : `height: ${ outer_height }px;${ style_img_container }`">
+        <div class="w re oh" :style="style_2_container">
             <swiper :key="form.data_style.carouselKey" class="w flex" :direction="form.data_style.rotation_direction" :loop="true" :autoplay="autoplay" :slides-per-view="slides_per_view" :slides-per-group="1" :space-between="props.type === 'img' ? 0 : form.data_style.data_goods_gap" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
                 <swiper-slide v-for="(item1, index1) in form.data_content.list" :key="index1">
-                    <template v-if="props.type === 'img'">
+                    <template v-if="props.type === 'img' && !isEmpty(item1.carousel_img)">
                         <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.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_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>
+                        <product-list-show :outerflex="form.data_content.goods_outerflex" :flex="form.data_content.goods_flex" :num="show_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" :data-content="form.data_content"></product-list-show>
                     </template>
                 </swiper-slide>
             </swiper>
@@ -28,6 +28,7 @@ interface Props {
     type: string;
     actived: number;
     goodStyle?: any;
+    isUnlimitedSize?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -75,6 +76,11 @@ const card_container = ref<HTMLElement | null>(null);
 const outer_height = ref(0);
 // 不拆分数据的时候为1，让商品内容在内部铺满/拆分数据的时候，为一屏显示数量，用于商品内部处理显示
 const show_num = ref(0);
+const style_2_container = computed(() => {
+    const style_actived_style = props.type === 'img' ? `height: ${ outer_height.value }px;` : `height: ${ outer_height.value }px;${ style_img_container.value }`;
+    const style = props.isUnlimitedSize ? 'height: 100%;' : style_actived_style;
+    return style;
+});
 // 内容参数的集合
 watchEffect(() => {
     // 是否滚动
@@ -109,12 +115,15 @@ watchEffect(() => {
             slides_per_view.value = 1; // 能够同时显示的slides数量
         }
     }
-    nextTick(() => {
-        // 外层高度
-        if (card_container.value) {
-            outer_height.value = card_container.value?.clientHeight;
-        }
-    });
+    // 不是不限尺寸的时候的处理
+    if (!props.isUnlimitedSize) {
+        nextTick(() => {
+            // 外层高度
+            if (card_container.value) {
+                outer_height.value = card_container.value?.clientHeight;
+            }
+        });
+    }
 });
 </script>
 
diff --git a/src/components/model-data-magic/components/carousel/product-list-show.vue b/src/components/model-data-magic/components/carousel/product-list-show.vue
index 16bf54b3..1c5e489f 100644
--- a/src/components/model-data-magic/components/carousel/product-list-show.vue
+++ b/src/components/model-data-magic/components/carousel/product-list-show.vue
@@ -4,13 +4,15 @@
             <div v-for="(item, index) in split_list" :key="index" :style="block_size">
                 <div class="w h oh" :style="style_container(props.goodStyle)">
                     <div class="w h flex-row gap-10" :style="style_img_container(props.goodStyle)">
-                        <template v-if="!isEmpty(item.new_cover)">
-                            <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                        </template>
-                        <template v-else>
-                            <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                        </template>
-                        <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
+                        <div :style="`width: ${ image_scale }%;`">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </template>
+                        </div>
+                        <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`width: ${ 100 - image_scale }%;`">
                             <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="props.goodStyle.goods_title_style + `height: ${ (props.goodStyle.goods_title_size + 3) * 2 }px;`">{{ item.title }}</div>
                             <div v-if="isShow.includes('price')" class="identifying" :style="props.goodStyle.goods_price_style">
                                 <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
@@ -86,6 +88,7 @@ interface Props {
     isShow: Array<string>;
     chunkPadding: paddingStyle;
     goodStyle: any;
+    dataContent: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -107,6 +110,16 @@ const block_size = computed(() => {
     return props.outerflex == 'row' ? 'height:100%;width:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');' : 'width: 100%;height:calc((100% - ' + total_gap + 'px) / ' + props.num  + ');';
 });
 
+// 图片显示比例
+const image_scale = computed(() => {
+    const data = ['title', 'price', 'price_unit'];
+    const list = props.isShow.filter((item: string) => data.includes(item));
+    if (list.length > 0) {
+        return props.dataContent.image_scale;
+    } else {
+        return 100;
+    }
+});
 // 用于样式显示
 const style_container = computed(() => {
     return (val: new_style) => {
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
index fd3ee06d..77eabff9 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-content.vue
@@ -42,6 +42,16 @@
             <el-form-item label="每屏数量">
                 <slider v-model="form.goods_num" :min="1" :max="6"></slider>
             </el-form-item>
+            <template v-if="is_show_image_scale && form.goods_flex == 'row'">
+                <el-form-item label="图片比例">
+                    <slider v-model="form.image_scale" :min="0" :max="100"></slider>
+                </el-form-item>
+            </template>
+            <el-form-item label="展示信息" label-width="60">
+                <el-checkbox-group v-model="form.is_show">
+                    <el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
         </template>
         <template v-else-if="form.data_type === 'images'">
             <el-form-item label="图片设置">
@@ -79,11 +89,6 @@
             <div class="mb-12">商品设置</div>
             <drag-group :list="form.goods_list" img-params="images" @onsort="goods_list_sort" @remove="goods_list_remove" @replace="goods_list_replace"></drag-group>
             <el-button class="mtb-20 w" @click="goods_list_add">+添加</el-button>
-            <el-form-item label="展示信息" label-width="60">
-                <el-checkbox-group v-model="form.is_show">
-                    <el-checkbox v-for="item in list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
-                </el-checkbox-group>
-            </el-form-item>
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
         </card-container>
     </template>
@@ -120,7 +125,15 @@ const list_show_list = [
     { name: '商品售价', value: 'price' },
     { name: '售价单位', value: 'price_unit' },
 ];
-
+const is_show_image_scale = computed(() => {
+    const data = ['title', 'price', 'price_unit'];
+    const list = form.value.is_show.filter((item: string) => data.includes(item));
+    if (list.length > 0) {
+        return true;
+    } else {
+        return false;
+    }
+});
 const form = ref(props.value);
 
 const img_add = () => {
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 8840aec3..507cd1a3 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -51,7 +51,7 @@
                     </div>
                 </template>
                 <template v-else>
-                    <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 } ${ content_radius }`">
+                    <div v-for="(item, index) in data_magic_list" :key="index" :class="['img-spacing-border', is_unlimited_size ? '' : ' cube-selected']" :style="`${ selected_style(item) } ${ item.data_style.background_style } ${ content_radius }`">
                         <div class="w h re" :style="`${ item.data_style.background_img_style }`">
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div class="w h flex-col" :style="`${ padding_computer(item.data_style.chunk_padding) };gap: ${ item.data_style.title_data_gap }px;`">
@@ -67,13 +67,13 @@
                                         <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h flex-1">
-                                        <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
+                                        <magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                     </div>
                                 </div>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'images'">
                                 <div class="w h" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
-                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
+                                    <magic-carousel :value="item" type="img" :actived="form.style_actived" :is-unlimited-size="is_unlimited_size" @carousel_change="carousel_change(index, $event)"></magic-carousel>
                                 </div>
                             </template>
                             <template v-else-if="item.data_content.data_type == 'custom'">
@@ -133,8 +133,10 @@ const content_radius = computed(() => radius_computer(new_style.value.data_radiu
 const div_width = ref(390);
 // 如果容器高度为空，则取容器宽度
 const container_height = computed(() => is_number(form.value.container_height) ? form.value.container_height : div_width.value);
+// 是否不限尺寸
+const is_unlimited_size = computed(() => form.value.style_actived === 9 && form.value.limit_size == '0');
 
-const container_size = computed(() => container_height.value + 'px');
+const container_size = computed(() => is_unlimited_size.value ? '100%' : container_height.value + 'px');
 //#endregion
 //#region 图片位置计算
 //计算选中层的宽度。
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 bc079ae8..0658fc60 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -10,15 +10,22 @@
                         </div>
                     </div>
                 </el-form-item>
-                <el-form-item label="容器高度" label-width="60">
-                    <slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
-                </el-form-item>
+                <template v-if="form.style_actived == 9">
+                    <el-form-item label="限制尺寸" label-width="60">
+                        <el-switch v-model="form.limit_size" active-value="1" inactive-value="0" @change="handleResize"/>
+                    </el-form-item>
+                </template>
+                <template v-if="form.style_actived !== 9 || form.limit_size == '1'">
+                    <el-form-item label="容器高度" label-width="60">
+                        <slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
+                    </el-form-item>
+                </template>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12 flex-row jc-sb align-c">
                     展示设置
-                    <template v-if="form.style_actived === 9">
+                    <template v-if="form.style_actived === 10">
                         <el-radio-group v-model="form.magic_cube_density" @change="density_change">
                             <el-radio-button label="4X4" :value="4" />
                             <el-radio-button label="6X6" :value="6" />
@@ -40,7 +47,7 @@
                         </div>
                     </template>
                     <template v-else>
-                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 9" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
+                        <magic-cube :key="form.style_actived" :list="form.data_magic_list" :flag="form.style_actived == 10" :magic-cube-density="form.magic_cube_density" :cube-width="cubeWidth" type="data" :cube-height="cubeHeight" :default-content="data_content" :default-style="data_style" @selected_click="selected_click"></magic-cube>
                     </template>
                 </el-form-item>
             </card-container>
@@ -69,7 +76,7 @@ const props = defineProps({
     },
 });
 // 风格数组
-const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-4x4'];
+const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2', 'a-1ge', 'a-4x4'];
 // 每个小模块独立的样式
 const data_style = {
     color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
@@ -186,6 +193,7 @@ const data_content = {
     goods_outerflex: 'row',
     goods_flex: 'row',
     goods_num: 1,
+    image_scale: 50,
     is_show: ['title', 'price'],
     // 图片数据处理
     img_fit: 'cover',
@@ -233,7 +241,8 @@ const style_show_list = [
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 1, y: 3}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 4, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }],// 风格7
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col', outerflex: 'col', title_text_gap: 20, width: 130 }],// 风格8
     [{ start: {x: 1, y: 1}, end: {x: 2, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 195 }, { start: {x: 3, y: 1}, end: {x: 4, y: 2}, num: 2, flex: 'col_price_float', outerflex: 'row', title_text_gap: 10, width: 195 }, { start: {x: 3, y: 3}, end: {x: 3, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }, { start: {x: 4, y: 3}, end: {x: 4, y: 4}, num: 1, flex: 'col_price_float', outerflex: 'col', title_text_gap: 10, width: 98 }],// 风格9
-    [], //风格10
+    [{ start: {x: 1, y: 1}, end: {x: 4, y: 4}, num: 3, flex: 'row', outerflex: 'col', title_text_gap: 20, width: 390 }],// 风格10
+    [], //风格11
 ]
 const tabs_name = ref('content');
 const state = reactive({
@@ -281,13 +290,13 @@ const handleResize = () => {
 const selected_active = ref(0);
 // 切换风格
 const style_click = (index: number) => {
-    if (index !== 9) {
+    form.value.style_actived = index;
+    if (index !== 10) {
         form.value.magic_cube_density = 4;
         form.value.data_magic_list = magic_list(index);
     } else {
         form.value.data_magic_list = [];
     }
-    form.value.style_actived = index;
     selected_active.value = 0;
     tabs_name.value = 'content';
     handleResize();
@@ -305,6 +314,7 @@ const magic_list = (index: number) => {
             goods_outerflex: item.outerflex,
             goods_flex: item.flex,
             goods_num: item.num,
+            image_scale: form.value.style_actived == 9 ? 30 : data_content.image_scale, // 风格9的时候是30%，其他都是50%
         },
         data_style: {
             ...cloneDeep(data_style),
diff --git a/src/config/const/data-magic.ts b/src/config/const/data-magic.ts
index c3b50ec5..da7660eb 100644
--- a/src/config/const/data-magic.ts
+++ b/src/config/const/data-magic.ts
@@ -11,6 +11,7 @@ interface defaultSearch {
         magic_cube_density: number;
         style_actived: number;
         container_height: number;
+        limit_size: string;
         data_magic_list: data_magic[];
     };
     style: {
@@ -28,6 +29,8 @@ const defaultSearch: defaultSearch = {
         style_actived: 0,
         // 容器高度
         container_height: 390,
+        // 是否限制尺寸
+        limit_size: '1',
         // 数据列表
         data_magic_list: [],
     },