修改搜索逻辑显示

src/components/model-search/index.vue

@@ -2,7 +2,7 @@
     <div :style="style_container">
         <div :style="style_img_container">
             <div class="search w re" :style="style">
-                <div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
+                <div class="box h oh flex align-c gap-10" :style="box_style">
                     <template v-if="form.is_icon_show == '1'">
                         <template v-if="form.icon_img.length > 0">
                             <div class="img-box">
@@ -13,7 +13,14 @@
                             <el-icon :class="`iconfont ${ !isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-search' } size-14`" :style="`color:${new_style.icon_color};`" />
                         </template>
                     </template>
-                    <span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
+                    <template v-if="!isEmpty(form.hot_word_list) && form.is_hot_word_show == '1'">
+                        <el-carousel :key="carouselKey" class="flex-1" indicator-position="none" :interval="interval_list.time" arrow="never" height="32px" direction="vertical" :autoplay="interval_list.is_roll == '1'">
+                            <el-carousel-item v-for="(item, index) in form.hot_word_list" :key="index" class="flex align-c" :style="{ 'color': !isEmpty(new_style.hot_words_color) ? new_style.hot_words_color : item.color }">{{ item.value }}</el-carousel-item>
+                        </el-carousel>
+                    </template>
+                    <template v-else>
+                        <span v-if="form.is_tips_show == '1'" :class="[props.isPageSettings ? 'size-12 text-line-1' : 'size-14 text-line-1']" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
+                    </template>
                 </div>
                 <div v-if="form.is_search_show == '1'" class="abs search-botton h flex align-c jc-c" :style="search_button">
                     <template v-if="form.search_type === 'text'">
@@ -33,7 +40,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer } from '@/utils';
+import { background_computer, common_styles_computer, gradient_computer, radius_computer, common_img_computer, get_math } from '@/utils';
 import { isEmpty } from 'lodash';
 
 const props = defineProps({
@@ -72,7 +79,7 @@ const style_img_container = computed(() => props.isPageSettings ? '' : common_im
 const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
 // 搜索框设置
 const box_style = computed(() => {
-    let style = `border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
+    let style = `background: ${ new_style.value.search_bg_color };border: 1px solid ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) };`;
     if (form.value.is_center == '1') {
         style += `justify-content: center;`;
     }
@@ -92,6 +99,41 @@ const search_button = computed(() => {
     }
     return style;
 })
+// 轮播图key值
+const carouselKey = ref('0');
+// 记录当前显示的轮播图的数据
+const interval_list = ref({
+    time: 2000,
+    is_roll: '1',
+    length: 0,
+    is_hot_word_show: '0',
+});
+// 内容参数的集合
+watchEffect(() => {
+    //#region 轮播图设置
+    const time = (new_style.value?.interval_time || 2) * 1000;
+    const is_roll = new_style.value.is_roll;
+    // 判断长度是否相等
+    const hot_word_length = form.value.hot_word_list.length;
+    const data = {
+        time: time,
+        is_roll: is_roll,
+        length: hot_word_length,
+        is_hot_word_show: form.value.is_hot_word_show,
+    }
+    // 旧数据
+    const oldDataStringified = JSON.stringify(interval_list);
+    // 新数据
+    const newDataStringified = JSON.stringify(data);
+    // 判断跟历史的是否相等，不相等更新组件时间
+    if (oldDataStringified != newDataStringified) {
+        // 更新旧数据
+        interval_list.value = JSON.parse(newDataStringified);
+        // 更新轮播图的key，确保更换时能重新更新轮播图
+        carouselKey.value = get_math();
+    }
+    //#endregion
+});
 </script>
 <style lang="scss" scoped>
 .search {

src/components/model-search/model-search-content.vue

@@ -54,6 +54,9 @@
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">搜索热词</div>
+                <el-form-item label="是否显示" class="align-s">
+                    <el-switch v-model="form.is_hot_word_show" active-value="1" inactive-value="0"></el-switch>
+                </el-form-item>
                 <drag :data="form.hot_word_list" @remove="remove" @on-sort="on_sort">
                     <template #default="scoped">
                         <el-input v-model="scoped.row.value" placeholder="请输入搜索热词" clearable />

src/components/model-search/model-search-styles.vue

@@ -44,10 +44,25 @@
                 <el-form-item label="搜索框线">
                     <color-picker v-model="form.search_border" default-color="#fff"></color-picker>
                 </el-form-item>
+                <el-form-item label="搜索背景">
+                    <color-picker v-model="form.search_bg_color" default-color="#fff"></color-picker>
+                </el-form-item>
                 <el-form-item label="框体圆角">
                     <radius :value="form.search_border_radius" @update:value="border_radius_change"></radius>
                 </el-form-item>
             </card-container>
+            <template v-if="search_content.is_hot_word_show == '1'">
+                <div class="bg-f5 divider-line" />
+                <card-container>
+                    <div class="mb-12">轮播设置</div>
+                    <el-form-item label="自动轮播">
+                        <el-switch v-model="form.is_roll" active-value="1" inactive-value="0" />
+                    </el-form-item>
+                    <el-form-item label="间隔时间">
+                        <slider v-model="form.interval_time" :min="1" :max="100"></slider>
+                    </el-form-item>
+                </card-container>
+            </template>
         </el-form>
         <template v-if="isShowCommon">
             <div class="bg-f5 divider-line" />

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

@@ -38,7 +38,7 @@ const default_data = {
         header_background_title_color: '#333',
         header_background_title_typeface: '500',
         header_background_title_size: 14,
-        function_buttons_type: 'black',
+        function_buttons_type: '0',
         immersive_style: '0',
         up_slide_display: '1',
         up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],

src/config/const/search.ts

@@ -19,6 +19,7 @@ interface defaultSearch {
         is_search_show: string;
         search_type: string;
         search_tips: string;
+        is_hot_word_show: string;
         hot_word_list: hot_word_list[];
     };
     style: {
@@ -32,7 +33,10 @@ interface defaultSearch {
         tips_color: string;
         hot_words_color: string;
         search_border: string;
+        search_bg_color: string;
         search_border_radius: object;
+        is_roll: string;
+        interval_time: number;
         common_style: object;
     };
 }
@@ -50,6 +54,7 @@ const defaultSearch: defaultSearch = {
         is_search_show: '0',
         search_type: 'text',
         search_tips: '搜索',
+        is_hot_word_show: '0',
         hot_word_list: [],
     },
     style: {
@@ -69,6 +74,7 @@ const defaultSearch: defaultSearch = {
         tips_color: '#ccc',
         hot_words_color: '#000',
         search_border: '#fff',
+        search_bg_color: '#fff',
         search_border_radius: {
             radius: 16,
             radius_top_left: 16,
@@ -76,6 +82,8 @@ const defaultSearch: defaultSearch = {
             radius_bottom_left: 16,
             radius_bottom_right: 16,
         },
+        is_roll: '1',
+        interval_time: 3,
         common_style: {
             ...defaultCommon,
             padding_top: 9,