From 80737fa7043618f5c76199d4af9328537eb0c3bb 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, 20 Jan 2025 17:51:38 +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=89=AF=E6=A0=87=E9=A2=98=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../magic-cube-settings/tabs-content.vue       | 13 ++++++++++++-
 .../magic-cube-settings/tabs-styles.vue        |  9 ++++++++-
 src/components/model-data-magic/index.vue      | 18 ++++++++++++++++--
 .../model-data-magic-content.vue               |  3 +++
 4 files changed, 39 insertions(+), 4 deletions(-)

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 b1a288e3..0871321b 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
@@ -24,7 +24,18 @@
                 </div>
             </el-form-item>
             <el-form-item label="副标题">
-                <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
+                <div class="flex-col gap-10 w">
+                    <el-radio-group v-model="form.subtitle_title_type">
+                        <el-radio value="text">文字</el-radio>
+                        <el-radio value="image">图片</el-radio>
+                    </el-radio-group>
+                    <template v-if="form.subtitle_title_type == 'text'">
+                        <el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>
+                    </template>
+                    <template v-else>
+                        <upload v-model="form.subtitle_title_img" :limit="1" size="50"></upload>
+                    </template>
+                </div>
             </el-form-item>
             <el-form-item label="商品排列">
                 <el-radio-group v-model="form.goods_outerflex">
diff --git a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
index b75c21e7..ad37d0dd 100644
--- a/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
+++ b/src/components/model-data-magic/components/magic-cube-settings/tabs-styles.vue
@@ -50,7 +50,14 @@
                 </template>
             </el-form-item>
             <el-form-item label="副标题">
-                <color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
+                <template v-if="tabs_content.subtitle_title_type == 'text'">
+                    <color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
+                </template>
+                <template v-else>
+                    <el-form-item label="图片高度" label-width="60" class="w form-item-child-label">
+                        <slider v-model="form.subtitle_img_height" :min="1" :max="200"></slider>
+                    </el-form-item>
+                </template>
             </el-form-item>
             <el-form-item label="标题内间距">
                 <slider v-model="form.title_gap" :min="0" :max="100"></slider>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 56ab484f..eed6f185 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -19,7 +19,14 @@
                                                 <template v-else>
                                                     <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                                 </template>
-                                                <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>
+                                                <template v-if="item.data_content.subtitle_title_type && item.data_content.subtitle_title_type == 'image'">
+                                                    <div v-if="item.data_content.subtitle_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;`">
+                                                        <img :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;max-width: 100%;`" :src="item.data_content.subtitle_title_img[0].url" fit="contain" />
+                                                    </div>
+                                                </template>
+                                                <template v-else>
+                                                    <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>
+                                                </template>
                                             </div>
                                             <div class="w h flex-1 oh flex-row">
                                                 <magic-carousel :key="form.style_actived" :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change(index, $event)"></magic-carousel>
@@ -67,7 +74,14 @@
                                             <template v-else>
                                                 <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
                                             </template>
-                                            <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>
+                                            <template v-if="item.data_content.subtitle_title_type && item.data_content.subtitle_title_type == 'image'">
+                                                <div v-if="item.data_content.subtitle_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px`">
+                                                    <img :style="`height: ${ item.data_style?.subtitle_img_height || 0 }px;max-width: 100%;`" :src="item.data_content.subtitle_title_img[0].url" fit="contain" />
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <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>
+                                            </template>
                                         </div>
                                         <div class="w h flex-1 oh flex-row">
                                             <magic-carousel :key="form.style_actived" :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change(index, $event)"></magic-carousel>
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 f3aee506..d02998f6 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -125,6 +125,7 @@ const data_style = {
     subtitle_color: '#FF852A',
     subtitle_typeface: '400',
     subtitle_size: 14,
+    subtitle_img_height: 28,
     goods_title_typeface: 'bold',
     goods_title_size: 14,    
     goods_title_color: "#333333",
@@ -320,7 +321,9 @@ const data_content = {
     heading_title_type: 'text',
     heading_title: '主标题',
     heading_title_img: [],
+    subtitle_title_type:'text',
     subtitle: '副标题',
+    subtitle_title_img: [],
     // 商品数据处理
     goods_list:[],
     goods_ids: '',