数据更新绑定

src/components/model-data-magic/components/tabs-content.vue

@@ -8,10 +8,10 @@
         </el-form-item>
         <template v-if="form.data_type === 'commodity'">
             <el-form-item label="主标题">
-                <el-input placeholder="请输入主标题"></el-input>
+                <el-input v-model="form.heading_title" placeholder="请输入主标题"></el-input>
             </el-form-item>
             <el-form-item label="副标题">
-                <el-input placeholder="请输入副标题"></el-input>
+                <el-input v-model="form.subtitle" placeholder="请输入副标题"></el-input>
             </el-form-item>
         </template>
     </card-container>

src/components/model-data-magic/components/tabs-styles.vue

@@ -51,6 +51,20 @@
     </card-container>
 </template>
 <script setup lang="ts">
+interface from {
+    color_list: string[];
+    background_img_url: string;
+    background_img_style: string;
+    is_roll: boolean;
+    rotation_direction: string;
+    interval_time: number;
+    heading_color: string;
+    heading_typeface: string;
+    heading_size: number;
+    subtitle_color: string;
+    subtitle_typeface: string;
+    subtitle_size: number;
+}
 const props = defineProps({
     value: {
         type: Object,

src/components/model-data-magic/index.vue

@@ -1,17 +1,18 @@
 <template>
     <div ref="container" class="img-magic" :style="style_container">
         <div class="w h re outer-style">
+            {{ data_list }}
             <!-- 风格9 -->
             <template v-if="form.style_actived == 8">
                 <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) }]">
-                        <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                        <!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
                     </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)">
-                    <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty>
+                    <!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
                 </div>
             </template>
         </div>
@@ -35,6 +36,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, new_style } = toRefs(state);
+const data_list = computed(() => form.value.data_magic_list);
 const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
 const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
 // 图片间距设置

src/components/model-data-magic/model-data-magic-content.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="auxiliary-line common-content-height">
-        <el-form :model="form" label-width="60">
+        <el-form :model="form" label-width="80">
             <card-container class="mb-8">
                 <div class="mb-12">展示风格</div>
                 <el-form-item label="选择风格">
@@ -18,15 +18,10 @@
                     <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.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])">
+                                <div class="cube-selected-text">
-                                    <image-empty v-model="item.img[0]"></image-empty>
+                                    <template v-if="[0, 1].includes(index)">375 x 375 像素</template> 
-                                </template>
+                                    <template v-else>250 x 375 像素</template> 
-                                <template v-else>
+                                </div>
-                                    <div class="cube-selected-text">
-                                        <template v-if="[0, 1].includes(index)">375 x 375 像素</template> 
-                                        <template v-else>250 x 375 像素</template> 
-                                    </div>
-                                </template>
                             </div>
                         </div>
                     </template>
@@ -36,7 +31,6 @@
                 </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.data_magic_list[selected_active].data_content"></tabs-content>
                 </el-tab-pane>
@@ -88,6 +82,8 @@ const data_style = {
 
 const data_content = {
     data_type: 'commodity',
+    heading_title: '',
+    subtitle: '',
     product_list:[],
     img_list:[]
 }
@@ -141,7 +137,7 @@ onUnmounted(() => {
 const selected_active = ref(0);
 
 const style_click = (index: number) => {
-    form.value.data_magic_list = cloneDeep(style_show_list[index]);
+    form.value.data_magic_list = magic_list(index);
 
     form.value.style_actived = index;
     selected_active.value = 0;

src/layout/components/main/default/data-magic.ts

@@ -4,7 +4,6 @@ import { tr } from "element-plus/es/locale";
 interface data_magic {
     start: object;
     end: object;
-    img: uploadList[];
     data_content: object;
     data_style: object;
 }