From fa0f33c5b157f88b12b55acb72fbb8b15542fc60 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, 16 Dec 2024 11:39:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=86=85=E5=AE=B9=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/background-common/index.vue        | 46 +++++++++++++++++++
 .../model-article-tabs-content.vue            |  4 +-
 src/components/model-carousel/index.vue       | 26 ++++++-----
 .../model-carousel/model-carousel-content.vue | 17 ++++---
 .../model-carousel/model-carousel-styles.vue  |  2 +-
 .../model-goods-tabs-content.vue              |  4 +-
 src/components/model-tabs-carousel/index.vue  |  5 +-
 .../model-tabs/model-tabs-content.vue         |  4 +-
 src/config/const/carousel.ts                  | 21 +++++++--
 src/config/const/tabs-carousel.ts             | 21 +++++++--
 10 files changed, 113 insertions(+), 37 deletions(-)
 create mode 100644 src/components/common/background-common/index.vue

diff --git a/src/components/common/background-common/index.vue b/src/components/common/background-common/index.vue
new file mode 100644
index 00000000..b30ff2cd
--- /dev/null
+++ b/src/components/common/background-common/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="flex-col gap-10 w">
+        <div class="size-12 flex-row gap-10">
+            <span>背景色</span>
+            <el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="props.tooltipContent" raw-content placement="top">
+                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+            </el-tooltip>
+        </div>
+        <mult-color-picker :value="color_list" :type="direction" @update:value="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="background_img_style"></bg-btn-style>
+        </div>
+        <upload v-model="background_img" :limit="1"></upload>
+    </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+    tooltipContent?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+    tooltipContent: '背景图的优先级比背景色的优先级高',
+});
+
+const color_list = defineModel('color_list', {
+    type: Array,
+    default: () => ([{ color: '', color_percentage: undefined }]),
+});
+const direction = defineModel('direction', {
+    type: String,
+    default: '90deg',
+});
+const background_img_style = defineModel('img_style', {
+    type: String,
+    default: '2',
+});
+const background_img = defineModel('img', {
+    type: Array as PropType<uploadList[]>,
+    default: () => [],
+});
+const emit = defineEmits(['mult_color_picker_event']);
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    emit('mult_color_picker_event', arry, type);
+};
+</script>
\ No newline at end of file
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 98cb026f..51a4cf86 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -162,8 +162,8 @@ onMounted(() => {
 const tabs_list = computed(() => {
     return form.tabs_list.map((item: any) => ({
         ...item,
-        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
-        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
         tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
     }));
 });
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index 77e0fb38..d36a4d20 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="re" :style="style_container + swiper_bg_style">
-        <div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
-        <div class="re" :style="style_img_container">
+        <div class="abs top-0 w h" :style="swiper_bg_img_style"></div>
+        <div class="re" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
             <div ref="swiperSize" class="swiper-container w h oh">
                 <swiper
                     :key="carouselKey"
@@ -154,11 +154,11 @@ const indicator_location_style = computed(() => {
 });
 //#endregion
 const seat_list = computed(() => {
-    if (form.value.carousel_list.length > 3 || form.value.carousel_type !== 'card') {
+    let seat_list = [];
+    const list = cloneDeep(form.value.carousel_list);
+    if (form.value.carousel_list.length > 3) {
         return [];
     } else {
-        let seat_list = [];
-        const list = cloneDeep(form.value.carousel_list);
         switch (list.length) {
             case 1:
                 seat_list = [ ...list, ...list, ...list];
@@ -167,13 +167,13 @@ const seat_list = computed(() => {
                 seat_list.push(...list)
                 break;
             case 3:
-                seat_list.push(...list.slice(0, 1))
+                seat_list.push(...list)
                 break;
             default:
                 break;
         }
-        return seat_list;
     }
+    return seat_list;
 })
 // 轮播图自适应高度 
 const newHeight = computed(() => form.value.height + 'px');
@@ -222,6 +222,10 @@ const swiper_style = computed(() => {
         slidesPerView = 3;
         centeredSlides = false
         spaceBetween = new_style.value.image_spacing;
+    } else if (form.value.carousel_type == 'inherit') {
+        slidesPerView = 1;
+        centeredSlides = true;
+        spaceBetween = 0;
     }
     return {
         slidesPerView: slidesPerView,
@@ -309,16 +313,16 @@ const swiper_bg_img_style = computed(() => {
         return '';
     }
     if (!isEmpty(form.value.carousel_list[actived_index.value]?.style?.background_img)) {
-        return background_computer(form.value.carousel_list[actived_index.value].style) + `filter: blur(${form.value.carousel_list[actived_index.value]?.style?.background_img_blur || 0}px);`;
+        return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
     }
     return '';
 });
 const emit = defineEmits(['slideChange']);
 const slideChange = (swiper: { realIndex: number }) => {
-    if (swiper.realIndex > form.value.carousel_list.length - 1 && form.value.carousel_type == 'card') {
+    if (swiper.realIndex > form.value.carousel_list.length - 1) {
         const seat_length = seat_list.value.length;
-        if (seat_length == 2 && swiper.realIndex == 3) {
-            actived_index.value = 1;
+        if (form.value.carousel_list.length > 1) {
+            actived_index.value = swiper.realIndex - seat_length;
         } else {
             actived_index.value = 0;
         }
diff --git a/src/components/model-carousel/model-carousel-content.vue b/src/components/model-carousel/model-carousel-content.vue
index 15342755..9036b6a2 100644
--- a/src/components/model-carousel/model-carousel-content.vue
+++ b/src/components/model-carousel/model-carousel-content.vue
@@ -31,7 +31,10 @@
             <div class="divider-line"></div>
             <card-container>
                 <div class="mb-12">内容设置</div>
-                <div class="tips mt-10 mb-20 size-12">最多添加{{ carousel_list.length }}张图片，建议尺寸750*300px</div>
+                <div class="tips mt-10 mb-20 size-12">最多添加{{ carousel_list.length }}张图片，建议尺寸750*300px
+                    <br/>
+                    <div class="mt-4" style="color: red;">模式二和模式四最少需要4张图片才能实现轮播，模式三最少需要3张图片， 模式一不限制数量</div>
+                </div>
                 <div class="flex-col gap-20">
                     <div v-for="(item, index) in carousel_list" :key="index" class="card-background box-shadow-sm re">
                         <el-tabs v-model="item.tabs_name" class="content-tabs">
@@ -58,9 +61,9 @@
                             <el-tab-pane label="样式设置" name="styles">
                                 <el-form-item label-width="0">
                                     <background-common v-model:color_list="item.style.color_list" v-model:direction="item.style.direction" v-model:img_style="item.style.background_img_style" v-model:img="item.style.background_img" :tooltip-content="'1.背景图的优先级比背景色的优先级高<br/>2.覆盖通用背景样式'" @mult_color_picker_event="(...value: [color_list[],  number]) => carousel_tabs_mult_color_picker_event(...value, index)" />
-                                    <div class="flex-col w gap-10">
+                                    <div class="flex-row w gap-10">
                                         <div class="size-12">背景图模糊</div>
-                                        <slider v-model="item.style.background_img_blur" :min="0" :max="100"></slider>
+                                        <el-switch v-model="form.is_background_img_blur" active-value="1" inactive-value="0" />
                                     </div>
                                 </el-form-item>
                             </el-tab-pane>
@@ -96,7 +99,7 @@ const carousel_list = computed(() => {
                 color_list: [{ color: '', color_percentage: undefined }],
                 background_img_style: '2',
                 background_img: [],
-                background_img_blur: 0,
+                background_img_blur: '0',
             }
         }
     });
@@ -114,7 +117,7 @@ const add = () => {
             color_list: [{ color: '', color_percentage: undefined }],
             background_img_style: '2',
             background_img: [],
-            background_img_blur: 0,
+            background_img_blur: '0',
         }
     });
 };
@@ -127,10 +130,6 @@ const carousel_tabs_mult_color_picker_event = (arry: color_list[], type: number,
     form.value.carousel_list[index].style.color_list = arry;
     form.value.carousel_list[index].style.direction = type.toString();
 };
-// 内容区域背景图片设置
-const carousel_tabs_background_img_change = (arry: uploadList[], index: number) => {
-    form.value.carousel_list[index].style.background_img = arry;
-};
 </script>
 <style lang="scss" scoped>
 .card-background {
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index aebb55d2..36a61250 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -17,8 +17,8 @@
                         <padding :value="form.carousel_content_padding"></padding>
                     </el-form-item>
                 </card-container>
+                <div class="divider-line"></div>
             </template>
-            <div class="divider-line"></div>
             <card-container>
                 <div class="mb-12">图片设置</div>
                 <el-form-item label="圆角">
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 f487825f..d3ac656a 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -149,8 +149,8 @@ onBeforeMount(() => {
 const tabs_list = computed(() => {
     return form.value.tabs_list.map((item: any) => ({
         ...item,
-        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
-        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
         tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
     }));
 });
diff --git a/src/components/model-tabs-carousel/index.vue b/src/components/model-tabs-carousel/index.vue
index 11672b9c..14c30284 100644
--- a/src/components/model-tabs-carousel/index.vue
+++ b/src/components/model-tabs-carousel/index.vue
@@ -1,6 +1,7 @@
 <template>
     <div :style="style_container + swiper_bg_style">
-        <div class="flex-col oh" :style="style_img_container + swiper_bg_img_style">
+        <div class="abs top-0 w h" :style="swiper_bg_img_style"></div>
+        <div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
             <div class="oh" :style="tabs_container">
                 <div class="oh" :style="tabs_img_container">
                     <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index"></tabs-view>
@@ -93,7 +94,7 @@ const swiper_bg_style = computed(() => {
 
 const swiper_bg_img_style = computed(() => {
     if (!isEmpty(form.value?.carousel_list[actived_index.value]?.style?.background_img)) {
-        return background_computer(form.value.carousel_list[actived_index.value].style);
+        return background_computer(form.value.carousel_list[actived_index.value].style) + (form.value.is_background_img_blur == '1' ? `filter: blur(14px);opacity: 0.6;` : '');
     }
     return '';
 });
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index be03faf6..6f5a2953 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -104,8 +104,8 @@ const { form, styles } = toRefs(state);
 const tabs_list = computed(() => {
     return form.value.tabs_list.map((item: any) => ({
         ...item,
-        tabs_img: isEmpty(item.data_type) ? [] : item.tabs_img,
-        tabs_icon: isEmpty(item.data_type) ? '' : item.tabs_icon,
+        tabs_img: isEmpty(item.tabs_img) ? [] : item.tabs_img,
+        tabs_icon: isEmpty(item.tabs_icon) ? '' : item.tabs_icon,
         tabs_type: isEmpty(item.data_type) ? '0' : item.data_type,
     }));
 });
diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts
index 7e9cd837..17d04a1f 100644
--- a/src/config/const/carousel.ts
+++ b/src/config/const/carousel.ts
@@ -11,7 +11,7 @@ interface carousel_list {
         color_list: color_list[];
         background_img_style: string;
         background_img: uploadList[];
-        background_img_blur: 0,
+        is_background_img_blur: string,
     }
 }
 interface defaultSearch {
@@ -74,7 +74,7 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
                 }
             },
             {
@@ -87,7 +87,7 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
                 }
             },
             {
@@ -100,7 +100,20 @@ const defaultSearch: defaultSearch = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
+                }
+            },
+            {
+                carousel_img: [],
+                carousel_video: [],
+                carousel_link: {},
+                video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                    is_background_img_blur: '0',
                 }
             }
         ]
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index 2282aeb6..19bd0efa 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -23,7 +23,7 @@ interface carousel_list {
         color_list: color_list[];
         background_img_style: string;
         background_img: uploadList[];
-        background_img_blur: number;
+        is_background_img_blur: string;
     }
 }
 interface defaultTabs {
@@ -138,7 +138,7 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
                 }
             },
             {
@@ -151,7 +151,7 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
                 }
             },
             {
@@ -164,7 +164,20 @@ const defaultTabs: defaultTabs = {
                     color_list: [{ color: '', color_percentage: undefined }],
                     background_img_style: '2',
                     background_img: [],
-                    background_img_blur: 0,
+                    is_background_img_blur: '0',
+                }
+            },
+            {
+                carousel_img: [],
+                carousel_video: [],
+                carousel_link: {},
+                video_title: '视频名称',
+                style: {
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                    is_background_img_blur: '0',
                 }
             },
         ],