From 42b0def0c2d77e2a485f82b0e3845d1baf7a7f6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 20 Aug 2024 17:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/image-empty/index.vue     |   2 +-
 src/components/model-carousel/index.vue       |   4 +-
 src/components/model-nav-group/index.vue      |   4 +-
 src/components/model-notice/index.vue         |   8 +-
 src/components/model-search/index.ts          |  31 +++--
 src/components/model-search/index.vue         | 121 ++++++++---------
 .../model-search/model-search-content.vue     | 109 ++++++++-------
 .../model-search/model-search-styles.vue      | 125 ++++++++++--------
 .../model-shop-tabs-content.vue               |  11 +-
 src/layout/components/main/default/search.ts  |  79 +++++++----
 .../components/main/default/shop-tabs.ts      |  14 +-
 src/utils/request.ts                          |   2 +-
 12 files changed, 292 insertions(+), 218 deletions(-)

diff --git a/src/components/base/image-empty/index.vue b/src/components/base/image-empty/index.vue
index 651ac14a..1f017ecc 100644
--- a/src/components/base/image-empty/index.vue
+++ b/src/components/base/image-empty/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-image :src="image?.url || ''" class="flex align-c jc-c" @load="on_load">
+    <el-image :src="image?.url || ''" class="flex align-c jc-c w h" @load="on_load">
         <template #error>
             <div class="image-slot" :style="errorStyle">
                 <img :src="error_image" :style="errorImgStyle" />
diff --git a/src/components/model-carousel/index.vue b/src/components/model-carousel/index.vue
index b1dd7fa4..3c582ce7 100644
--- a/src/components/model-carousel/index.vue
+++ b/src/components/model-carousel/index.vue
@@ -25,12 +25,12 @@
         >
             <swiper-slide v-for="(item, index) in form.carousel_list" :key="index">
                 <div class="item-image flex jc-c align-c w h" :style="img_style">
-                    <image-empty v-model="item.carousel_img[0]"></image-empty>
+                    <image-empty v-model="item.carousel_img[0]" :style="img_style"></image-empty>
                 </div>
             </swiper-slide>
             <swiper-slide v-for="(item, index1) in seat_list" :key="index1">
                 <div class="item-image flex jc-c align-c w h" :style="img_style">
-                    <image-empty v-model="item.carousel_img[0]"></image-empty>
+                    <image-empty v-model="item.carousel_img[0]" :style="img_style"></image-empty>
                 </div>
             </swiper-slide>
             <div v-if="new_style.is_show" :class="{'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex abs">
diff --git a/src/components/model-nav-group/index.vue b/src/components/model-nav-group/index.vue
index 1ffad90f..27987794 100644
--- a/src/components/model-nav-group/index.vue
+++ b/src/components/model-nav-group/index.vue
@@ -4,8 +4,8 @@
             <el-carousel-item v-for="(item, index) in nav_content_list" :key="index">
                 <div ref="bannerImg" class="flex flex-wrap">
                     <div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col gap-10 align-c mt-12">
-                        <div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c" :style="img_style">
-                            <image-empty v-model="item1.nav_image[0]"></image-empty>
+                        <div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
+                            <image-empty v-model="item1.nav_image[0]" :style="img_style"></image-empty>
                         </div>
                         <p v-if="['image_with_text', 'text'].includes(nav_style)" class="size-12 ma-0" :style="text_style">{{ item1.title }}</p>
                     </div>
diff --git a/src/components/model-notice/index.vue b/src/components/model-notice/index.vue
index 68ba6ac8..b18e5832 100644
--- a/src/components/model-notice/index.vue
+++ b/src/components/model-notice/index.vue
@@ -3,8 +3,8 @@
         <template v-if="form.notice_style == 'inherit'">
             <div class="flex-row align-c news-box gap-y-8">
                 <template v-if="form.title_type == 'img'">
-                    <div v-if="!isEmpty(form.img_src)" :style="img_style">
-                        <el-image :src="form.img_src[0]?.url || ''"></el-image>
+                    <div v-if="!isEmpty(form.img_src)">
+                        <el-image :src="form.img_src[0]?.url || ''" :style="img_style"></el-image>
                     </div>
                 </template>
                 <template v-else>
@@ -20,8 +20,8 @@
             <div class="news-card flex-col gap-10">
                 <div class="flex-row w jc-sb">
                     <template v-if="form.title_type == 'img'">
-                        <div v-if="!isEmpty(form.img_src)" :style="img_style">
-                            <el-image :src="form.img_src[0]?.url || ''" ></el-image>
+                        <div v-if="!isEmpty(form.img_src)" >
+                            <el-image :src="form.img_src[0]?.url || ''" :style="img_style"></el-image>
                         </div>
                     </template>
                     <template v-else>
diff --git a/src/components/model-search/index.ts b/src/components/model-search/index.ts
index 6246da0b..25570d9e 100644
--- a/src/components/model-search/index.ts
+++ b/src/components/model-search/index.ts
@@ -4,22 +4,31 @@ interface hot_word_list {
     color: string;
 }
 interface search_content {
-    style_radio: string;
-    style_type: string;
-    logo: string;
-    search_title: string;
-    search_link: string;
-    location: string;
+    is_center: boolean;
+    is_icon_show: boolean;
+    icon_type: string;
+    icon_src: string;
+    icon_img_src: uploadList[];
+    search_botton_src: uploadList[];
+    search_botton_icon: string;
+    is_tips_show: boolean;
     tips: string;
+    is_search_show: boolean;
+    search_type: string;
+    search_tips: string;
     hot_word_list: hot_word_list[];
 }
 interface search_styles {
-    search_border: string;
+    icon_color: string;
+    button_inner_color: string;
+    color_list: color_list[];
+    direction: string;
+    background_img_style: string;
+    background_img_url: uploadList[];
+    search_button_radius: object;
     tips_color: string;
     hot_words_color: string;
-    text_location: string;
-    text_style: string;
-    text_color: string;
-    text_size: number;
+    search_border: string;
+    search_border_radius: object;
     common_style: object;
 }
\ No newline at end of file
diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index deccae6a..7053431c 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -1,37 +1,39 @@
 <template>
     <div :style="style_container">
         <div :style="style" class="flex-row align-c">
-            <template v-if="is_title()">
-                <div class="mr-15" :style="{ 'color': new_style.text_color }"><span class="set-text-size">{{ form.search_title }}</span></div>
-            </template>
-            <template v-if="(form.style_radio == 'search' && form.style_type == 'location') || form.style_radio == 'location'">
-                <div class="mr-15 flex-row align-c" :style="{ 'color': new_style.text_color }" >
-                    <template v-if="form.location == 'store'">
-                        <span class="set-text-size nowrap">官方...</span><el-icon class="iconfont icon-arrow-right" />
+            <div class="search w re">
+                <div class="box h oh flex align-c gap-10" :style="box_style">
+                    <template v-if="form.is_icon_show">
+                        <template v-if="form.icon_type == 'icon'">
+                            <span class="iconfont icon-search size-14" :style="`color: ${ new_style.icon_color }`"></span>
+                        </template>
+                        <template v-else>
+                            <div class="img-box">
+                                <image-empty v-model="form.icon_img_src[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
+                            </div>
+                        </template>
                     </template>
-                    <template v-else>
-                        <el-icon class="iconfont icon-index-zxmd-dress mr-3" /><span class="set-text-size nowrap">莲湖...</span><el-icon class="iconfont icon-arrow-right" />
+                    <span v-if="form.is_tips_show" class="size-14" :style="`color: ${ new_style.tips_color }`">{{ form.tips }}</span>
+                </div>
+                <div v-if="form.is_search_show" class="abs search-botton h flex align-c jc-c" :style="search_button">
+                    <template v-if="form.search_type === 'text'">
+                        <div class="pl-16 pr-16 ptb-3 size-12">{{ form.search_tips }}</div>
+                    </template>
+                    <template v-if="form.search_type === 'img'">
+                        <image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
+                    </template>
+                    <template v-if="form.search_type === 'icon'">
+                        <div class="pl-16 pr-16 ptb-3 size-12">
+                            <icon></icon>
+                        </div>
                     </template>
                 </div>
-            </template>
-            <template v-else-if="form.style_radio == 'search' && form.style_type == 'logo' && form.logo.length > 0">
-                <image-empty v-model="form.logo[0]" class="search-image mr-10"></image-empty>
-            </template>
-            <el-input :placeholder="get_placeholder()" :style="{ borderColor: 'red' }" :readonly="true">
-                <template v-if="text_location == 'right'" #suffix>
-                    <el-icon class="iconfont icon-search" />
-                </template>
-                <template v-else #prefix>
-                    <el-icon class="iconfont icon-search" />
-                </template>
-            </el-input>
+            </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer } from '@/utils';
-import { isEmpty } from 'lodash';
-
+import { background_computer, common_styles_computer, gradient_computer, radius_computer } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -59,46 +61,45 @@ const style = computed(() => {
     return common_styles;
 });
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
-// 输入框颜色
-const search_border = computed(() => new_style.value.search_border);
-// 提示语颜色
-const placeholder_color = computed(() => new_style.value.tips_color || '#CCCCCC');
-// 定位位置
-const text_location = computed(() => new_style.value.text_location || 'left');
-// 字体大小
-const text_size = computed(() => new_style.value.text_size + 'px' || '15px');
 
-// 是否显示标题
-const is_title = () => {
-    return ((form.value.style_radio == 'search' && form.value.style_type == 'title') || form.value.style_radio == 'title') && !isEmpty(form.value.search_title);
-}
-// 提示信息修改
-const get_placeholder = () => {
-    return form.value.tips || '请输入搜索内容';
-}
+const search_button_radius = computed(() => radius_computer(new_style.value.search_button_radius));
+// 搜索框设置
+const box_style = computed(() => {
+    let style = `background: ${ new_style.value.search_border }; ${ radius_computer(new_style.value.search_border_radius) }`;
+    if (form.value.is_center) {
+        style += `justify-content: center;`;
+    }
+    return style;
+});
+const search_button = computed(() => {
+    let style = search_button_radius.value;
+    if (form.value.search_type != 'img') {
+        style += gradient_computer(new_style.value) + background_computer(new_style.value) + `color: ${ new_style.value.button_inner_color };`;
+    }
+    return style;
+})
 </script>
 <style lang="scss" scoped>
-:deep(.el-input) {
-    & .el-input__wrapper {
-        border-radius: 16px !important;
-        border: 0;
-        box-shadow: none;
-        background: v-bind(search_border);
+.search {
+    height: 3.2rem;
+    .box {
+        padding: 0.6rem 1.5rem;
     }
-    & .el-input__inner::placeholder, 
-    & .el-input__prefix-inner {
-        text-align: v-bind(text_location);
-        color: v-bind(placeholder_color);
+    .img-box {
+        height: 100%;
+        min-width: 2rem;
+        max-width: 6rem;
     }
-}
-.set-text-size {
-    font-size: v-bind(text_size);
-}
-.search-image {
-    width: 5rem;
-    height: 3rem;
-}
-.nowrap {
-    text-wrap: nowrap;
+    .search-botton {
+        height: 2.8rem;
+        top: 0.2rem;
+        right: 0.2rem;
+        .img {
+            height: 2.8rem;
+            min-width: 3rem;
+            max-width: 10rem;
+        }
+    }
+    
 }
 </style>
diff --git a/src/components/model-search/model-search-content.vue b/src/components/model-search/model-search-content.vue
index b38312fb..52976179 100644
--- a/src/components/model-search/model-search-content.vue
+++ b/src/components/model-search/model-search-content.vue
@@ -1,51 +1,58 @@
 <template>
-    <div class="auxiliary-line common-content-height">
+    <div class="auxiliary-line common-content-height bg-f">
         <el-form :model="form" label-width="70">
-            <card-container class="mb-8">
+            <card-container>
                 <div class="mb-12">展示设置</div>
-                <el-form-item label="选择风格">
-                    <el-radio-group v-model="form.style_radio" class="ml-4">
-                        <el-radio value="search">搜索</el-radio>
-                        <el-radio value="title">标题</el-radio>
-                        <el-radio value="location">定位</el-radio>
-                    </el-radio-group>
+                <el-form-item label="是否居中">
+                    <el-switch v-model="form.is_center"/>
                 </el-form-item>
-                <el-form-item v-if="form.style_radio == 'search'" label="样式类型">
-                    <el-radio-group v-model="form.style_type" class="ml-4">
-                        <el-radio value="title">标题</el-radio>
-                        <el-radio value="location">定位</el-radio>
-                        <el-radio value="logo">logo</el-radio>
-                    </el-radio-group>
+                <el-form-item label="图标样式" class="align-s">
+                    <div class="flex-col w h gap-10">
+                        <el-switch v-model="form.is_icon_show"/>
+                        <template v-if="form.is_icon_show">
+                            <el-radio-group v-model="form.icon_type" class="ml-4">
+                                <el-radio value="img">图片</el-radio>
+                                <el-radio value="icon">图标</el-radio>
+                            </el-radio-group>
+                            <template v-if="form.icon_type === 'img'">
+                                <upload v-model="form.icon_img_src" :limit="1" size="50"></upload>
+                            </template>
+                            <template v-else>
+                                <upload v-model="form.icon_src" :limit="1" size="50"></upload>
+                            </template>
+                        </template>
+                    </div>
                 </el-form-item>
-                <template v-if="(form.style_radio == 'search' && form.style_type == 'title') || form.style_radio == 'title'">
-                    <el-form-item label="标题">
-                        <el-input v-model="form.search_title" placeholder="请输入标题"></el-input>
-                    </el-form-item>
-                    <el-form-item label="链接">
-                        <url-value v-model="form.search_link"></url-value>
-                    </el-form-item>
-                </template>
-                <template v-if="(form.style_radio == 'search' && form.style_type == 'location') || form.style_radio == 'location'">
-                    <el-form-item label="定位方式">
-                        <el-radio-group v-model="form.location" class="ml-4">
-                            <el-radio value="store">门店</el-radio>
-                            <el-radio value="user_location">用户位置</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                </template>
-                <template v-if="form.style_radio == 'search' && form.style_type == 'logo'">
-                    <el-form-item label="logo图">
-                        <upload v-model="form.logo" :limit="1" size="60"></upload>
-                    </el-form-item>
-                </template>
-            </card-container>
-            <card-container class="mb-8">
-                <div class="mb-12">搜索内容</div>
-                <el-form-item label="提示文字">
+                <el-form-item label="是否显示">
+                    <el-switch v-model="form.is_tips_show"/>
+                </el-form-item>
+                <el-form-item v-if="form.is_tips_show" label="提示文字">
                     <el-input v-model="form.tips" placeholder="请输入提示文字"></el-input>
                 </el-form-item>
+                <el-form-item label="搜索按钮" class="align-s">
+                    <div class="flex-col w h gap-10">
+                        <el-switch v-model="form.is_search_show"/>
+                        <template v-if="form.is_search_show">
+                            <el-radio-group v-model="form.search_type" class="ml-4">
+                                <el-radio value="img">图片</el-radio>
+                                <el-radio value="icon">图标</el-radio>
+                                <el-radio value="text">文字</el-radio>
+                            </el-radio-group>
+                            <template v-if="form.search_type === 'img'">
+                                <upload v-model="form.search_botton_src" :limit="1" size="50"></upload>
+                            </template>
+                            <template v-else-if="form.search_type === 'icon'">
+                                <upload v-model="form.search_botton_icon" :limit="1" size="50"></upload>
+                            </template>
+                            <template v-else>
+                                <el-input v-model="form.search_tips" placeholder="请输入文字内容"></el-input>
+                            </template>
+                        </template>
+                    </div>
+                </el-form-item>
             </card-container>
-            <card-container class="mb-8">
+            <div class="bg-f5 partition-line" />
+            <card-container>
                 <div class="mb-12">搜索热词</div>
                 <drag :data="form.hot_word_list" @remove="remove" @on-sort="on_sort">
                     <template #default="scoped">
@@ -65,13 +72,18 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), {
     value: () => ({
-        style_radio: 'search',
-        style_type: 'title',
-        logo: '',
-        search_title: '',
-        search_link: '',
-        location: 'store',
-        tips: '',
+        is_center: false,
+        is_icon_show: true,
+        icon_type: 'icon',
+        icon_src: '',
+        icon_img_src: [],
+        search_botton_src: [],
+        search_botton_icon: '',
+        is_tips_show: true,
+        tips: '请输入搜索内容',
+        is_search_show: false,
+        search_type: 'text',
+        search_tips: '搜索',
         hot_word_list: [
             {
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
@@ -108,4 +120,7 @@ const search_color_change = (color: string, old_hot_word: hot_word_list) => {
 }
 </script>
 <style lang="scss" scoped>
+.partition-line {
+    height: 0.8rem;
+}
 </style>
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index afaaa21c..8fbe2fd9 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -2,44 +2,54 @@
     <div class="common-style-height">
         <el-form :model="form" label-width="70">
             <card-container class="mb-8">
-                <div class="mb-12">搜索框</div>
-                <el-form-item label="文字位置">
-                    <el-radio-group v-model="form.text_location" is-button>
-                        <el-tooltip content="左对齐" placement="top" effect="light">
-                            <el-radio-button value="left"><icon name="iconfont icon-left"></icon></el-radio-button>
-                        </el-tooltip>
-                        <el-tooltip content="居中" placement="top" effect="light">
-                            <el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
-                        </el-tooltip>
-                        <el-tooltip content="右对齐" placement="top" effect="light">
-                            <el-radio-button value="right"><icon name="iconfont icon-right"></icon></el-radio-button>
-                        </el-tooltip>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="搜索框">
-                    <color-picker v-model="form.search_border"></color-picker>
-                </el-form-item>
-                <el-form-item label="提示文字">
-                    <color-picker v-model="form.tips_color"></color-picker>
-                </el-form-item>
-                <el-form-item label="热词文字">
-                    <color-picker v-model="form.hot_words_color"></color-picker>
+                <div class="mb-12">左侧图标</div>
+                <el-form-item label="图标">
+                    <color-picker v-model="form.icon_color" default-color="#CCCCCC"></color-picker>
                 </el-form-item>
             </card-container>
-            <card-container v-if="text_show()" class="mb-8">
-                <div class="mb-12">文字设置</div>
-                <el-form-item label="文字样式">
-                    <el-radio-group v-model="form.text_style" class="ml-4">
-                        <el-radio value="normal">正常</el-radio>
-                        <el-radio value="italic">倾斜</el-radio>
-                        <el-radio value="500">加粗</el-radio>
-                    </el-radio-group>
+            <card-container class="mb-8">
+                <div class="mb-12">搜索按钮</div>
+                <el-form-item label="搜索按钮">
+                    <color-picker v-model="form.button_inner_color" default-color="#fff"></color-picker>
                 </el-form-item>
-                <el-form-item label="文字颜色">
-                    <color-picker v-model="form.text_color"></color-picker>
+                <el-form-item v-if="content.search_type != 'img'" label="背景设置">
+                    <div class="flex-col gap-10 w">
+                        <div class="size-12">背景色</div>
+                        <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                        <div class="flex-row jc-sb align-c">
+                            <div class="size-12">背景图</div>
+                            <el-radio-group v-model="form.background_img_style" is-button>
+                                <el-tooltip content="单张" placement="top" effect="light">
+                                    <el-radio-button value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="平铺" placement="top" effect="light">
+                                    <el-radio-button value="1"><icon name="tile"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="铺满" placement="top" effect="light">
+                                    <el-radio-button value="2"><icon name="spread-over"></icon></el-radio-button>
+                                </el-tooltip>
+                            </el-radio-group>
+                        </div>
+                        <upload v-model="form.background_img_url" :limit="1"></upload>
+                    </div>
                 </el-form-item>
-                <el-form-item label="文字大小">
-                    <slider v-model="form.text_size" :max="100"></slider>
+                <el-form-item label="按钮圆角">
+                    <radius :value="form.search_button_radius" @update:value="button_radius_change"></radius>
+                </el-form-item>
+            </card-container>
+            <card-container class="mb-8">
+                <div class="mb-12">框体样式</div>
+                <el-form-item label="提示文字">
+                    <color-picker v-model="form.tips_color" default-color="#CCCCCC"></color-picker>
+                </el-form-item>
+                <el-form-item label="热词文字">
+                    <color-picker v-model="form.hot_words_color" default-color="#000"></color-picker>
+                </el-form-item>
+                <el-form-item label="搜索框">
+                    <color-picker v-model="form.search_border" 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>
         </el-form>
@@ -47,23 +57,12 @@
     </div>
 </template>
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import { isEmpty, pick } from 'lodash';
 interface Props {
     value: search_styles;
     content: search_content;
 }
-const props = withDefaults(defineProps<Props>(), {
-    value: () => ({
-        search_border: '#F5F5F5',
-        tips_color: '#CCCCCC',
-        hot_words_color: '#000',
-        text_location: 'left',
-        text_style: 'normal',
-        text_color: '#000',
-        text_size: 15,
-        common_style: {},
-    }),
-});
+const props = defineProps<Props>();
 
 const state = reactive({
     form: props.value,
@@ -79,14 +78,30 @@ const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
 
-// 是否显示文字设置
-const text_show = () => {
-    const { content } = toRefs(state);
-    if (!isEmpty(content.value)) {
-        return (content.value.style_radio == 'search' && content.value.style_type == 'title') || content.value.style_radio == 'title' || (content.value.style_radio == 'search' && content.value.style_type == 'location') || content.value.style_radio == 'location';
-    } else {
-        return true;
-    }
+// 按钮圆角
+const button_radius_change = (radius: any) => {
+    form.value.search_button_radius = Object.assign(form.value.search_button_radius, pick(radius, [
+        'radius',
+        'radius_top_left',
+        'radius_top_right',
+        'radius_bottom_left',
+        'radius_bottom_right',
+    ]));
+}
+// 搜索框圆角
+const border_radius_change = (radius: any) => {
+    form.value.search_border_radius = Object.assign(form.value.search_border_radius, pick(radius, [
+        'radius',
+        'radius_top_left',
+        'radius_top_right',
+        'radius_bottom_left',
+        'radius_bottom_right',
+    ]));
+}
+
+const mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
 };
 </script>
 <style lang="scss" scoped>
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 60debdb3..7b7de7c7 100644
--- a/src/components/model-shop-tabs/model-shop-tabs-content.vue
+++ b/src/components/model-shop-tabs/model-shop-tabs-content.vue
@@ -58,17 +58,17 @@
                                     </template>
                                     <template v-else>
                                         <el-form-item label="商品分类">
-                                            <el-select v-model="row.product_type" multiple collapse-tags placeholder="请选择文章分类">
+                                            <el-select v-model="row.goods_category_ids" multiple collapse-tags placeholder="请选择商品分类">
                                                 <el-option v-for="item in base_list.product_category_list" :key="item.id" :label="item.name" :value="item.id" />
                                             </el-select>
                                         </el-form-item>
                                         <el-form-item label="指定品牌">
-                                            <el-select v-model="row.product_type" multiple collapse-tags placeholder="请选择文章分类">
+                                            <el-select v-model="row.goods_brand_ids" multiple collapse-tags placeholder="请选择商品品牌">
                                                 <el-option v-for="item in base_list.product_brand_list" :key="item.id" :label="item.name" :value="item.id" />
                                             </el-select>
                                         </el-form-item>
                                         <el-form-item label="显示数量">
-                                            <el-input v-model="row.number" placeholder="Please input" clearable />
+                                            <el-input-number v-model="row.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
                                         </el-form-item>
                                         <el-form-item label="排序类型">
                                             <el-radio-group v-model="row.sort">
@@ -219,4 +219,9 @@ const product_add = (index: number) => {
         min-height: calc(100vh - 38.2rem);
     }
 }
+.number-show {
+    :deep(.el-input__wrapper .el-input__inner) {
+        text-align: left;
+    }
+}
 </style>
diff --git a/src/layout/components/main/default/search.ts b/src/layout/components/main/default/search.ts
index e95ade89..37eb32a8 100644
--- a/src/layout/components/main/default/search.ts
+++ b/src/layout/components/main/default/search.ts
@@ -7,35 +7,49 @@ interface hot_word_list {
 }
 interface defaultSearch {
     content: {
-        style_radio: string;
-        style_type: string;
-        logo: uploadList[];
-        search_title: string;
-        search_link: object;
-        location: string;
+        is_center: boolean;
+        is_icon_show: boolean;
+        icon_type: string;
+        icon_src: string;
+        icon_img_src: uploadList[];
+        search_botton_src: uploadList[];
+        search_botton_icon: string;
+        is_tips_show: boolean;
         tips: string;
+        is_search_show: boolean;
+        search_type: string;
+        search_tips: string;
         hot_word_list: hot_word_list[];
     };
     style: {
-        search_border: string;
+        icon_color: string;
+        button_inner_color: string;
+        color_list: color_list[];
+        direction: string;
+        background_img_style: string;
+        background_img_url: uploadList[];
+        search_button_radius: object;
         tips_color: string;
         hot_words_color: string;
-        text_location: string;
-        text_style: string;
-        text_color: string;
-        text_size: number;
+        search_border: string;
+        search_border_radius: object;
         common_style: object;
     };
 }
 const defaultSearch: defaultSearch = {
     content: {
-        style_radio: 'search',
-        style_type: 'title',
-        logo: [],
-        search_title: '',
-        search_link: {},
-        location: 'store',
-        tips: '',
+        is_center: false,
+        is_icon_show: true,
+        icon_type: 'icon',
+        icon_src: '',
+        icon_img_src: [],
+        search_botton_src: [],
+        search_botton_icon: '',
+        is_tips_show: true,
+        tips: '请输入搜索内容',
+        is_search_show: false,
+        search_type: 'text',
+        search_tips: '搜索',
         hot_word_list: [
             {
                 id: get_math(), // 唯一标识使用，避免使用index作为唯一标识导致渲染节点出现问题
@@ -45,16 +59,31 @@ const defaultSearch: defaultSearch = {
         ],
     },
     style: {
-        search_border: '#F5F5F5',
-        tips_color: '#CCCCCC',
+        icon_color: '#ccc',
+        button_inner_color: '#fff',
+        color_list: [{ color: '#FF973D', color_percentage: '' }, { color: '#FF3131', color_percentage: '' }],
+        direction: '90deg',
+        background_img_style: '',
+        background_img_url: [],
+        search_button_radius: {
+            radius: 16,
+            radius_top_left: 16,
+            radius_top_right: 16,
+            radius_bottom_left: 16,
+            radius_bottom_right: 16,
+        },
+        tips_color: '#ccc',
         hot_words_color: '#000',
-        text_location: 'left',
-        text_style: 'normal',
-        text_color: '#000',
-        text_size: 15,
+        search_border: '#fff',
+        search_border_radius: {
+            radius: 16,
+            radius_top_left: 16,
+            radius_top_right: 16,
+            radius_bottom_left: 16,
+            radius_bottom_right: 16,
+        },
         common_style: {
             ...defaultCommon,
-            color_list: [{ color: '#ffffff', color_percentage: '' }],
             padding_top: 9,
             padding_bottom: 9,
             padding_left: 15,
diff --git a/src/layout/components/main/default/shop-tabs.ts b/src/layout/components/main/default/shop-tabs.ts
index 61bd3afd..5c7d4850 100644
--- a/src/layout/components/main/default/shop-tabs.ts
+++ b/src/layout/components/main/default/shop-tabs.ts
@@ -2,7 +2,7 @@ import defaultCommon from './index';
 interface articleTabsList {
     id: string;
     title: string;
-    img: string;
+    img: uploadList[];
     desc: string;
     product_check: string;
     goods_category_ids: string[];
@@ -26,7 +26,7 @@ interface DefaultProductList {
         shop_button_size: string;
     };
     style: {
-        tabs_checked: string[];
+        tabs_checked: color_list[];
         tabs_direction: string;
         tabs_weight_checked: string,
         tabs_size_checked: number,
@@ -65,10 +65,10 @@ const defaultProductList: DefaultProductList = {
         tabs_top_up: false,
         product_style: '0',
         tabs_list: [
-            { id: '1', title: '热门推荐', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
-            { id: '2', title: '测试一', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
-            { id: '3', title: '测试二', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
-            { id: '4', title: '测试三', img: '', desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
+            { id: '1', title: '热门推荐', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
+            { id: '2', title: '测试一', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
+            { id: '3', title: '测试二', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
+            { id: '4', title: '测试三', img: [], desc: '简介', product_check: '0', goods_category_ids: [], goods_brand_ids: [], number: 4, is_price_solo: true, sort: '0', sort_rules: '0', product_list: [] },
         ],
         is_show: ['0', '1', '2', '3', '4', '5'],
         is_shop_show: true,
@@ -77,7 +77,7 @@ const defaultProductList: DefaultProductList = {
         shop_button_size: '1',
     },
     style: {
-        tabs_checked: ['rgba(212,212,212,2)', 'rgba(255,210,210,1)'],
+        tabs_checked: [{ color: 'rgba(212,212,212,2)', color_percentage: '' }, { color: 'rgba(255,210,210,1)', color_percentage: '' }],
         tabs_direction: '90deg',
         tabs_weight_checked: '500',
         tabs_size_checked: 14,
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 7dda0652..4ce4e6fb 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -15,7 +15,7 @@ service.interceptors.request.use(
         // 如果是本地则使用静态tonken如果是线上则使用cookie的token
         const cookie = get_cookie('admin_info');
         if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
-            config.url = config.url + '?token=' + 'f714594929c39071f21856b885f91556';
+            config.url = config.url + '?token=' + 'e1bd7d4c5e94c2680c359a982896e524';
         } else {
             if (cookie) {
                 config.url = config.url + '&token=' + JSON.parse(cookie).token;