From e81218654ac603ba75dfc4825d8df16645d9f3d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 9 Oct 2024 13:54:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B2=89=E6=B5=B8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-article-tabs-content.vue            |  8 +++++-
 .../model-goods-tabs-content.vue              |  8 +++++-
 src/components/page-settings/page-styles.vue  | 27 +++++++++++++++++--
 src/store/modules/common.ts                   | 14 ++++++++++
 src/views/layout/components/main/index.vue    | 13 +++++++++
 5 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index 2c599e8b..ff6ff02a 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
-                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
+                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
                 </el-form-item>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
@@ -254,6 +254,12 @@ const styles = reactive(props.tabStyle);
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
 };
+const is_immersion_model = computed(() => common_store.is_immersion_model);
+watchEffect(() => {
+    if (is_immersion_model.value) {
+        form.tabs_top_up = '0';
+    }
+})
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index e247fc45..63e88b52 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -4,7 +4,7 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
-                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
+                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model"/>
                 </el-form-item>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
@@ -272,6 +272,12 @@ const is_revise = ref(false);
 const change_shop_type = () => {
     is_revise.value = true;
 };
+const is_immersion_model = computed(() => common_store.is_immersion_model);
+watchEffect(() => {
+    if (is_immersion_model.value) {
+        form.value.tabs_top_up = '0';
+    }
+})
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index c3b20e80..1faf3f80 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -42,7 +42,12 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
-                    <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0"></el-switch>
+                    <div class="flex-row align-c gap-10">
+                        <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
+                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
+                            <icon name="tips" size="16"></icon>
+                        </el-tooltip>
+                    </div>
                 </el-form-item>
                 <el-form-item label="上滑展示">
                     <el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
@@ -79,6 +84,8 @@
     </div>
 </template>
 <script setup lang="ts">
+import { commonStore } from '@/store';
+const common_store = commonStore();
 const props = defineProps({
     value: {
         type: Object,
@@ -91,6 +98,10 @@ const props = defineProps({
         default: () => {},
     },
 });
+const is_have_tabs = computed(() => {
+    return common_store.is_have_tabs;
+});
+
 const emit = defineEmits(['update:value']);
 const state = reactive({
     form: props.value,
@@ -102,8 +113,13 @@ const { form, search_content } = toRefs(state);
 const header_background_type_change_event = (val: any) => {
     if (val === 'color_image') {
         form.value.immersive_style = '0';
+        common_store.set_is_immersion_model(false);
     } else {
-        form.value.immersive_style = '1';
+        // 没有tabs的情况下，默认开启沉浸模式
+        if (!common_store.is_have_tabs) {
+            form.value.immersive_style = '1';
+            common_store.set_is_immersion_model(true);
+        }
     }
 };
 
@@ -114,6 +130,13 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.header_background_color_list = arry;
     form.value.header_background_direction = type.toString();
 };
+const change_immersive_style = (val: string | number | boolean) => {
+    if (val === '0') {
+        common_store.set_is_immersion_model(false);
+        return;
+    }
+    common_store.set_is_immersion_model(true);
+}
 </script>
 <style lang="scss" scoped>
 .styles {
diff --git a/src/store/modules/common.ts b/src/store/modules/common.ts
index 4e8bed24..00e81eb7 100644
--- a/src/store/modules/common.ts
+++ b/src/store/modules/common.ts
@@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
 export const commonStore = defineStore('common', () => {
     // 链接是否需要调接口判断
     const is_common_api = ref(false);
+    const is_immersion_model = ref(false);
+    const is_have_tabs = ref(false);
     const common = ref({
         article_category: [] as any[], //---- 文章分类
         attachment_category: [] as any[], //---- 附件分类
@@ -34,10 +36,22 @@ export const commonStore = defineStore('common', () => {
         is_common_api.value = bool;
     };
 
+    const set_is_immersion_model = (bool: boolean) => {
+        is_immersion_model.value = bool;
+    };
+
+    const set_is_have_tabs = (bool: boolean) => {
+        is_have_tabs.value = bool;
+    };
+
     return {
         common,
         is_common_api,
+        is_immersion_model,
+        is_have_tabs,
         set_common,
         set_is_common_api,
+        set_is_immersion_model,
+        set_is_have_tabs,
     };
 });
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index c0ac50a2..c9412927 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -208,6 +208,12 @@ const show_model_border = ref(true);
 // 点击添加tabs组件
 const draggable_click = (item: componentsData) => {
     const type_data = ['tabs', 'tabs-carousel'];
+    
+    if (common_store.is_immersion_model) {
+        ElMessage.error('开启沉浸样式下不可以添加该组件');
+        return;
+    }
+
     if (type_data.includes(item.key) && isEmpty(tabs_data.value)) {
         // 添加tabs组件
         tabs_data.value.push({
@@ -219,6 +225,7 @@ const draggable_click = (item: componentsData) => {
             key: item.key,
             com_data: cloneDeep((defaultSettings as any)[item.key.replace(/-/g, '_')]),
         });
+        common_store.set_is_have_tabs(true);
         set_tabs_event(true);
     } else if (type_data.includes(item.key) && !isEmpty(tabs_data.value)) {
         if (tabs_data.value[0].key == item.key) {
@@ -228,6 +235,12 @@ const draggable_click = (item: componentsData) => {
         }
     }
 };
+watchEffect(() => {
+    if (tabs_data.value.length <= 0) {
+        common_store.set_is_have_tabs(false);
+    }
+});
+
 // 复制
 const clone_item_com_data = (item: commonComponentData) => {
     return {