修改默认数据处理逻辑

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

@@ -40,6 +40,16 @@
         </template>
     </card-container>
     <div class="bg-f5 divider-line" />
+    <card-container>
+        <div class="mb-12">商品样式</div>
+        <el-form-item label="商品名称">
+            <color-text-size-group v-model:color="form.shop_title_color" v-model:typeface="form.shop_title_typeface" v-model:size="form.shop_title_size" default-color="#000000"></color-text-size-group>
+        </el-form-item>
+        <el-form-item label="商品价格">
+            <color-text-size-group v-model:color="form.shop_price_color" v-model:typeface="form.shop_price_typeface" v-model:size="form.shop_price_size" default-color="#000000"></color-text-size-group>
+        </el-form-item>
+    </card-container>
+    <div class="bg-f5 divider-line" />
     <card-container>
         <carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
     </card-container>

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

@@ -239,12 +239,7 @@ const commodity_list = (list: any[], num: number) => {
         return [{ split_list: Array(num).fill(default_list)}];
     }
 }
-const background_style = (item: any) => {
-    return gradient_computer(item);
-};
-const background_img_style = (item: any) => {
-    return background_computer(item);
-};
+
 const old_list = ref<any>({});
 const data_magic_list = ref<data_magic[]>([]);
 watch(props.value.content, (val) => {
@@ -257,8 +252,8 @@ watch(props.value.content, (val) => {
         item.actived_index = 0;
         // 指示器样式
         data_style.indicator_styles = indicator_style(data_style);
-        data_style.background_style = background_style(data_style);
-        data_style.background_img_style = background_img_style(data_style);
+        data_style.background_style = gradient_computer(data_style);
+        data_style.background_img_style = background_computer(data_style);
 
         const { is_roll, rotation_direction, interval_time } = data_style;
         const { goods_list, images_list } = data_content;

src/components/page-settings/index.vue

@@ -107,7 +107,7 @@ const up_slide_style = computed(() => {
 const up_slide_img_style = computed(() => {
     let style = ``;
     if (props.scollTop > 0) {
-        const { up_slide_background_img, up_slide_background_img_style } = new_style.value;
+        const { up_slide_background_img = '', up_slide_background_img_style = '' } = new_style.value;
         // 背景图
         const back = { background_img: up_slide_background_img, background_img_style: up_slide_background_img_style };
         style += background_computer(back);

src/components/page-settings/page-styles.vue

@@ -19,7 +19,7 @@
                         </template>
                     </div>
                 </el-form-item>
-                <el-form-item label="功能按钮">
+                <el-form-item label="状态栏">
                     <el-radio-group v-model="form.function_buttons_type">
                         <el-radio value="black">黑色</el-radio>
                         <el-radio value="white">白色</el-radio>
@@ -41,7 +41,7 @@
                 </el-form-item>
                 <el-form-item label="上滑背景">
                     <div class="w h flex-col gap-10">
-                        <mult-color-picker :value="form.up_slide_background_color_list" :type="form.up_slide_background_direction" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
+                        <mult-color-picker :value="form?.up_slide_background_color_list || []" :type="form?.up_slide_background_direction || '180deg'" @update:value="up_slide_mult_color_picker_event"></mult-color-picker>
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
                             <bg-btn-style v-model="form.up_slide_background_img_style"></bg-btn-style>
@@ -103,6 +103,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, search_content } = toRefs(state);
+console.log(form);
 
 const header_background_type_change_event = (val: any) => {
     if (val === 'color_image') {

src/views/layout/index.vue

@@ -133,7 +133,14 @@ const init = () => {
     if (get_id()) {
         DiyAPI.getInit({ id: get_id() }).then((res: any) => {
             if (res.data) {
-                form.value = form_data_transfor_diy_data(res.data);
+                let data = form_data_transfor_diy_data(res.data);
+                // 默认数据合并
+                data.header.com_data = default_merge(data.header.com_data, 'header_nav');
+                data.footer.com_data = default_merge(data.footer.com_data, 'footer_nav');
+                data.diy_data = data_merge(data.diy_data);
+                data.tabs_data = data_merge(data.tabs_data);
+
+                form.value = data;
             } else {
                 is_empty.value = true;
             }
@@ -146,6 +153,19 @@ const init = () => {
         loading_event();
     }
 };
+// 数据合并
+const data_merge = (list: string[]) => {
+    list.forEach((item: any) => {
+        item.com_data = default_merge(item.com_data, item.key);;
+    });
+    return list;
+};
+// 浅层数据合并
+const default_merge = (data: any, key: string) => {
+    data.style = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style, data.style);
+    data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]), data.content);
+    return data;
+};
 
 // 初始化公共数据
 const common_init = () => {