From 648a9fa41cde7892a466f81c74400dc9bcfc0fa8 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, 5 Sep 2024 10:20:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-search/index.vue         | 19 ++++++++++-----
 .../model-search/model-search-content.vue     |  4 ++--
 .../model-search/model-search-styles.vue      | 10 ++++----
 .../components/main/default/header-nav.ts     | 24 +++++++++----------
 .../layout/components/main/default/search.ts  | 24 +++++++++----------
 5 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/components/model-search/index.vue b/src/components/model-search/index.vue
index 26325e31..9e01d525 100644
--- a/src/components/model-search/index.vue
+++ b/src/components/model-search/index.vue
@@ -4,9 +4,9 @@
             <div class="search w re">
                 <div class="box h oh flex align-c gap-10 bg-f" :style="box_style">
                     <template v-if="form.is_icon_show">
-                        <template v-if="form.icon_img_src.length > 0">
+                        <template v-if="form.icon_img.length > 0">
                             <div class="img-box">
-                                <image-empty v-model="form.icon_img_src[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
+                                <image-empty v-model="form.icon_img[0]" class="img" error-img-style="width: 4rem;height: 2.5rem;" />
                             </div>
                         </template>
                         <template v-else>
@@ -19,12 +19,12 @@
                     <template v-if="form.search_type === 'text'">
                         <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">{{ form.search_tips }}</div>
                     </template>
-                    <template v-else-if="form.search_botton_src.length > 0">
-                        <image-empty v-model="form.search_botton_src[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
+                    <template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
+                        <image-empty v-model="form.search_botton_img[0]" class="img" :style="search_button_radius" error-img-style="width: 4rem;height: 2.8rem;" />
                     </template>
                     <template v-else>
                         <div :class="['ptb-3 size-12', isPageSettings ? 'plr-12' : 'plr-16']">
-                            <el-icon :class="`iconfont ${ 'icon-' + form.search_botton_icon } size-14`" />
+                            <el-icon :class="`iconfont ${ !isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : '' } size-14`" />
                         </div>
                     </template>
                 </div>
@@ -79,8 +79,15 @@ const box_style = computed(() => {
 });
 const search_button = computed(() => {
     let style = search_button_radius.value;
+    const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img  } = new_style.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 };`;
+        const data = {
+            color_list: search_botton_color_list,
+            direction: search_botton_direction,
+            background_img: search_botton_background_img,
+            background_img_style: search_botton_background_img_style,
+        }
+        style += gradient_computer(data) + background_computer(data) + `color: ${ new_style.value.button_inner_color };`;
     }
     return style;
 })
diff --git a/src/components/model-search/model-search-content.vue b/src/components/model-search/model-search-content.vue
index 6151a91b..58ff5fea 100644
--- a/src/components/model-search/model-search-content.vue
+++ b/src/components/model-search/model-search-content.vue
@@ -9,7 +9,7 @@
                     </el-row>
                     <el-row v-if="form.is_icon_show" class="mt-10 w">
                         <el-col :span="24">
-                            <upload v-model="form.icon_img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
+                            <upload v-model="form.icon_img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
                         </el-col>
                     </el-row>
                 </el-form-item>
@@ -37,7 +37,7 @@
                                 <el-radio value="text">文字</el-radio>
                             </el-radio-group>
                             <template v-if="form.search_type === 'img-icon'">
-                                <upload v-model="form.search_botton_src" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload>
+                                <upload v-model="form.search_botton_img" v-model:icon-value="form.search_botton_icon" is-icon :limit="1" size="50" class="mt-10"></upload>
                             </template>
                             <template v-else>
                                 <el-input v-model="form.search_tips" placeholder="请输入文字内容" class="mt-10"></el-input>
diff --git a/src/components/model-search/model-search-styles.vue b/src/components/model-search/model-search-styles.vue
index f5bd3ba1..d7d58872 100644
--- a/src/components/model-search/model-search-styles.vue
+++ b/src/components/model-search/model-search-styles.vue
@@ -19,10 +19,10 @@
                     <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>
+                            <mult-color-picker :value="form.search_botton_color_list" :type="form.search_botton_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-radio-group v-model="form.search_botton_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>
@@ -34,7 +34,7 @@
                                     </el-tooltip>
                                 </el-radio-group>
                             </div>
-                            <upload v-model="form.background_img" :limit="1"></upload>
+                            <upload v-model="form.search_botton_background_img" :limit="1"></upload>
                         </div>
                     </el-form-item>
                     <el-form-item label="按钮圆角">
@@ -118,8 +118,8 @@ const border_radius_change = (radius: any) => {
 }
 
 const mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.color_list = arry;
-    form.value.direction = type.toString();
+    form.value.search_botton_color_list = arry;
+    form.value.search_botton_direction = type.toString();
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/layout/components/main/default/header-nav.ts b/src/views/layout/components/main/default/header-nav.ts
index e881ae91..cf6f9112 100644
--- a/src/views/layout/components/main/default/header-nav.ts
+++ b/src/views/layout/components/main/default/header-nav.ts
@@ -18,9 +18,9 @@ interface DefaultFooterNav {
         is_center: boolean;
         is_icon_show: boolean;
         icon_src: string;
-        icon_img_src: uploadList[];
+        icon_img: uploadList[];
         icon_class: string;
-        search_botton_src: uploadList[];
+        search_botton_img: uploadList[];
         search_botton_icon: string;
         is_tips_show: boolean;
         tips: string;
@@ -43,10 +43,10 @@ interface DefaultFooterNav {
         up_slide_display: boolean,
         icon_color: string;
         button_inner_color: string;
-        color_list: color_list[];
-        direction: string;
-        background_img_style: string;
-        background_img: uploadList[];
+        search_botton_color_list: color_list[];
+        search_botton_direction: string;
+        search_botton_background_img_style: string;
+        search_botton_background_img: uploadList[];
         search_button_radius: object;
         tips_color: string;
         hot_words_color: string;
@@ -67,9 +67,9 @@ const defaultFooterNav: DefaultFooterNav = {
         is_center: false,
         is_icon_show: true,
         icon_src: '',
-        icon_img_src: [],
+        icon_img: [],
         icon_class: '',
-        search_botton_src: [],
+        search_botton_img: [],
         search_botton_icon: '',
         is_tips_show: true,
         tips: '请输入搜索内容',
@@ -99,10 +99,10 @@ const defaultFooterNav: DefaultFooterNav = {
         up_slide_display: true,
         icon_color: '#ccc',
         button_inner_color: '#fff',
-        color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-        direction: '90deg',
-        background_img_style: '',
-        background_img: [],
+        search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
+        search_botton_direction: '90deg',
+        search_botton_background_img_style: '',
+        search_botton_background_img: [],
         search_button_radius: {
             radius: 16,
             radius_top_left: 16,
diff --git a/src/views/layout/components/main/default/search.ts b/src/views/layout/components/main/default/search.ts
index b2771b3a..7e4b6d31 100644
--- a/src/views/layout/components/main/default/search.ts
+++ b/src/views/layout/components/main/default/search.ts
@@ -10,9 +10,9 @@ interface defaultSearch {
         is_center: boolean;
         is_icon_show: boolean;
         icon_src: string;
-        icon_img_src: uploadList[];
+        icon_img: uploadList[];
         icon_class: string;
-        search_botton_src: uploadList[];
+        search_botton_img: uploadList[];
         search_botton_icon: string;
         is_tips_show: boolean;
         tips: string;
@@ -24,10 +24,10 @@ interface defaultSearch {
     style: {
         icon_color: string;
         button_inner_color: string;
-        color_list: color_list[];
-        direction: string;
-        background_img_style: string;
-        background_img: uploadList[];
+        search_botton_color_list: color_list[];
+        search_botton_direction: string;
+        search_botton_background_img_style: string;
+        search_botton_background_img: uploadList[];
         search_button_radius: object;
         tips_color: string;
         hot_words_color: string;
@@ -41,9 +41,9 @@ const defaultSearch: defaultSearch = {
         is_center: false,
         is_icon_show: true,
         icon_src: '',
-        icon_img_src: [],
+        icon_img: [],
         icon_class: '',
-        search_botton_src: [],
+        search_botton_img: [],
         search_botton_icon: '',
         is_tips_show: true,
         tips: '请输入搜索内容',
@@ -61,10 +61,10 @@ const defaultSearch: defaultSearch = {
     style: {
         icon_color: '#ccc',
         button_inner_color: '#fff',
-        color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
-        direction: '90deg',
-        background_img_style: '',
-        background_img: [],
+        search_botton_color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
+        search_botton_direction: '90deg',
+        search_botton_background_img_style: '',
+        search_botton_background_img: [],
         search_button_radius: {
             radius: 16,
             radius_top_left: 16,