From e890abff42d2ea3e2ad0fd6feabd7925f3ce810f 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, 29 Aug 2024 17:39:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-nav-group/index.ts       |  2 +-
 .../model-nav-group-content.vue               | 10 +-
 .../model-shop-list-content.vue               |  1 +
 .../model-shop-tabs-content.vue               |  1 +
 src/components/page-settings/index.vue        | 10 +-
 src/components/page-settings/page-content.vue |  9 +-
 src/components/page-settings/page-setting.vue | 91 ++++++++++++++++++-
 .../components/main/default/header-nav.ts     |  2 +
 8 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/src/components/model-nav-group/index.ts b/src/components/model-nav-group/index.ts
index a775e6b2..6ea71daf 100644
--- a/src/components/model-nav-group/index.ts
+++ b/src/components/model-nav-group/index.ts
@@ -2,7 +2,7 @@ interface nav_group {
     id: string;
     nav_image: uploadList[];
     title: string;
-    title_link: string,
+    title_link: object,
 }
 
 interface nav_group_content {
diff --git a/src/components/model-nav-group/model-nav-group-content.vue b/src/components/model-nav-group/model-nav-group-content.vue
index 43671a05..83881069 100644
--- a/src/components/model-nav-group/model-nav-group-content.vue
+++ b/src/components/model-nav-group/model-nav-group-content.vue
@@ -73,25 +73,25 @@ const props = withDefaults(defineProps<Props>(),{
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
                 nav_image: [],
                 title: '',
-                title_link: '',
+                title_link: {},
             },
             {
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
                 nav_image: [],
                 title: '',
-                title_link: '',
+                title_link: {},
             },
             {
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
                 nav_image: [],
                 title: '',
-                title_link: '',
+                title_link: {},
             },
             {
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
                 nav_image: [],
                 title: '',
-                title_link: '',
+                title_link: {},
             }
         ]
     })
@@ -106,7 +106,7 @@ const add = () => {
         id: get_math(),
         nav_image: [],
         title: '',
-        title_link: '',
+        title_link: {},
     });
 }
 const remove = (index: number) => {
diff --git a/src/components/model-shop-list/model-shop-list-content.vue b/src/components/model-shop-list/model-shop-list-content.vue
index ca3fc050..bfd20612 100644
--- a/src/components/model-shop-list/model-shop-list-content.vue
+++ b/src/components/model-shop-list/model-shop-list-content.vue
@@ -49,6 +49,7 @@
                     </el-form-item>
                 </template>
             </card-container>
+            <div class="divider-line"></div>
             <!-- 商品显示的配置信息 -->
             <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
diff --git a/src/components/model-shop-tabs/model-shop-tabs-content.vue b/src/components/model-shop-tabs/model-shop-tabs-content.vue
index 0a44cc3b..7f5420e4 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -77,6 +77,7 @@
                     <el-button class="mtb-20 w" @click="tabs_add">+添加</el-button>
                 </div>
             </card-container>
+            <div class="divider-line"></div>
             <!-- 商品显示的配置信息 -->
             <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
             <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index 6f9fe17c..1b8be1fa 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -5,8 +5,11 @@
                 <img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
             </div>
             <div class="model-head tc re">
-                <div class="flex align-c jc-c w h" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
-                    {{ props.pageData.com_data?.content?.title || '新建页面' }}
+                <div class="flex align-c jc-c h gap-16" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
+                    <template v-if="form.theme == '2'">
+                        <image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:3.2rem;height:3.2rem;"></image-empty>
+                    </template>
+                    <div>{{ form?.title || '新建页面' }}</div>
                 </div>
                 <div class="model-head-icon">
                     <img class="function-icon" :src="url_computer(new_style.function_buttons_type == 'black' ? 'function-icon-black' : 'function-icon-white')" />
@@ -85,4 +88,7 @@ const text_style = computed(() => `font-weight:${ new_style.value.background_tit
     z-index: 1;
     box-sizing: border-box;
 }
+.logo-style {
+    max-height: 3.2rem;
+}
 </style>
diff --git a/src/components/page-settings/page-content.vue b/src/components/page-settings/page-content.vue
index 2e0b4f17..5ae15154 100644
--- a/src/components/page-settings/page-content.vue
+++ b/src/components/page-settings/page-content.vue
@@ -6,6 +6,9 @@
                     <theme-select v-model="form.theme" :data="base_list.themeList" @update:model-value="themeChange"></theme-select>
                 </el-form-item>
                 <template v-if="form.theme == '1' || form.theme == '2'">
+                    <el-form-item v-if="form.theme == '2'" label="logo">
+                        <upload v-model="form.logo" :limit="1"></upload>
+                    </el-form-item>
                     <el-form-item label="页面标题">
                         <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                     </el-form-item>
@@ -60,8 +63,10 @@ const base_list = reactive({
         { name: '隐藏', value: '0' },
     ],
 });
-const themeChange = (value: string) => {
-    console.log(value);
+
+const emit = defineEmits(['update:change-theme']);
+const themeChange = (val: string) => {
+    emit('update:change-theme', val);
 };
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/page-settings/page-setting.vue b/src/components/page-settings/page-setting.vue
index f3db0ac1..fc32a251 100644
--- a/src/components/page-settings/page-setting.vue
+++ b/src/components/page-settings/page-setting.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="setting-content">
         <template v-if="type == '1'">
-            <page-content :value="value.content"></page-content>
+            <page-content :value="value.content" @update:change-theme="change_theme"></page-content>
         </template>
         <template v-else-if="type == '2'">
             <page-styles :value="value.style"></page-styles>
@@ -19,5 +19,92 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-
+const default_config = {
+    style: {
+        theme_1: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+        theme_2: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+        theme_3: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+        theme_4: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+        theme_5: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+        theme_6: {
+            background_type: 'color_image',
+            background_color_list: [{ color: '#fff', color_percentage: undefined }],
+            background_direction: '180deg',
+            background_img_style: 2,
+            background_img_url: [],
+            background_title_color: '#000',
+            background_title_typeface: '500',
+            background_title_size: 14,
+            function_buttons_type: 'black',
+            immersive_style: false,
+            up_slide_display: true,
+        },
+    },
+};
+const form = ref(props.value);
+const change_theme = (val: string) => {
+    if (val) {
+        form.value.style = Object.assign({}, form.value.style, (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
+    }
+};
 </script>
diff --git a/src/layout/components/main/default/header-nav.ts b/src/layout/components/main/default/header-nav.ts
index 7ffc6adf..cfc31d93 100644
--- a/src/layout/components/main/default/header-nav.ts
+++ b/src/layout/components/main/default/header-nav.ts
@@ -3,6 +3,7 @@ import defaultCommon from './index';
 interface DefaultFooterNav {
     content: {
         theme: string;
+        logo: uploadList[];
         title: string;
         link: object;
         indicator_location: string;
@@ -26,6 +27,7 @@ interface DefaultFooterNav {
 const defaultFooterNav: DefaultFooterNav = {
     content: {
         theme: '1',
+        logo: [],
         title: '',
         link: {},
         indicator_location: 'center',