From 0f4039691b5a6fec59fbcff074704ac8ab81d7fd Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Tue, 24 Sep 2024 15:10:26 +0800
Subject: [PATCH] 1.diy---header

---
 common/css/lib.css                     |  4 ++
 components/diy/header.vue              | 51 +++++++++++++-------------
 components/diy/modules/image-empty.vue | 14 +++----
 components/diy/search.vue              | 15 +++++---
 4 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/common/css/lib.css b/common/css/lib.css
index 6a56ce1f..fa818898 100644
--- a/common/css/lib.css
+++ b/common/css/lib.css
@@ -945,6 +945,10 @@
 /**
  * gap
  */
+.gap-2 {
+    gap: 4rpx;
+}
+
 .gap-4 {
     gap: 8rpx;
 }
diff --git a/components/diy/header.vue b/components/diy/header.vue
index d962a00c..809a284c 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -5,33 +5,35 @@
                 <view class="roll pr z-i" :style="roll_style">
                     <view class="model-head tc pr padding-horizontal-sm flex-row align-c">
                         <view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
-                            <view v-if="['1', '2', '3'].includes(form.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.indicator_location || 'center'">
-                                <template v-if="['2', '3'].includes(form.theme)">
-                                    <view class="logo-outer-style"><image-empty v-model="form.logo[0]" class="logo-style" error-img-style="width:2rem;height:2rem;"></image-empty></view>
+                            <view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
+                                <template v-if="['2', '3'].includes(form.content.theme)">
+                                    <view class="logo-outer-style">
+                                        <image-empty :image-src="form.content.logo[0].url" class="logo-style" error-style="width:40rpx;height:40rpx;"></image-empty>
+                                    </view>
                                 </template>
-                                <view v-if="['1', '2'].includes(form.theme)">{{ form.title }}</view>
-                                <template v-if="['3', '5'].includes(form.theme)">
+                                <view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
+                                <template v-if="['3', '5'].includes(form.content.theme)">
                                     <view class="flex-1">
-                                        <componentDiySearch :value="value.com_data" :is-page-settings="true"></componentDiySearch>
+                                        <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
                                     </view>
                                 </template>
                             </view>
-                            <view v-else-if="['4', '5'].includes(form.theme)" class="flex-1 flex-row align-c h gap-10">
-                                <view class="flex-row gap-2">
-                                    <iconfont name="icon-position" size="12" color="0"></iconfont>
-                                    <span class="size-14 cr-3 text-line-1">{{ form.positioning_name }}</span>
-                                    <iconfont v-if="'icon-' + form.is_arrows_show == '1'" name="arrow-right" size="12" color="0"></iconfont>
+                            <view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
+                                <view class="flex-row align-c gap-2">
+                                    <iconfont name="icon-location" size="12" color="0"></iconfont>
+                                    <span class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</span>
+                                    <iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
                                 </view>
-                                <template v-if="['5'].includes(form.theme)">
+                                <template v-if="['5'].includes(form.content.theme)">
                                     <view class="flex-1">
-                                        <componentDiySearch :value="value.com_data" :is-page-settings="true"></componentDiySearch>
+                                        <componentDiySearch :value="form" :is-page-settings="true"></componentDiySearch>
                                     </view>
                                 </template>
                             </view>
-                            <view v-if="!isEmpty(form.icon_setting)" class="flex-row align-c pa right-0 padding-right-main" :style="{ gap: new_style.img_space * 2 + 'rpx' }">
-                                <view v-for="(item, index) in form.icon_setting" :key="index" :style="{ width: new_style.img_size * 2 + 'rpx', height: new_style.img_size * 2 + 'rpx' }">
-                                    <image-empty v-if="item.img.length > 0" v-model="item.img[0]" :error-img-style="'width: ' + Number(new_style.img_size) / 4 + 'rpx;height:' + Number(new_style.img_size) / 4 + 'rpx;'"></image-empty>
-                                    <iconfont v-else :name="'icon-' + item.icon" :size="new_style.img_size / 2 + ''" color="6"></iconfont>
+                            <view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'pa right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
+                                <view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }">
+                                    <image-empty v-if="item.img.length > 0" :image-src="item.img[0].url" :error-style="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></image-empty>
+                                    <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size + 'rpx'" color="#666"></iconfont>
                                 </view>
                             </view>
                         </view>
@@ -45,6 +47,7 @@
 <script>
     const app = getApp();
     import componentDiySearch from '@/components/diy/search';
+    import imageEmpty from '@/components/diy/modules/image-empty';
     import { isEmpty, background_computer, gradient_computer } from '@/common/js/common/common.js';
     // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@@ -60,6 +63,7 @@
         },
         components: {
             componentDiySearch,
+            imageEmpty,
         },
         data() {
             return {
@@ -71,7 +75,7 @@
                 text_style: '',
             };
         },
-        mounted() {
+        created() {
             this.init();
         },
         methods: {
@@ -92,8 +96,7 @@
                     new_roll_style += `background: transparent;`;
                 }
                 this.setData({
-                    form: new_content,
-                    new_style: new_style,
+                    form: this.value,
                     position: (new_style.up_slide_display == '1' ? 'position:absolute;' : 'position:relative;') + 'top:' + bar_height + 'rpx;',
                     roll_style: new_roll_style,
                     text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
@@ -137,12 +140,8 @@
     .logo-outer-style {
         height: 64rpx;
         .logo-style {
-            max-height: 64rpx;
-            max-width: 100%;
-            :deep(.image-slot) {
-                height: 64rpx;
-                width: 64rpx;
-            }
+            height: 64rpx;
+            width: 64rpx;
         }
     }
 </style>
diff --git a/components/diy/modules/image-empty.vue b/components/diy/modules/image-empty.vue
index 3663cef9..b1bbfa09 100644
--- a/components/diy/modules/image-empty.vue
+++ b/components/diy/modules/image-empty.vue
@@ -27,7 +27,7 @@
             type_class: {
                 type: String,
                 default: () => '',
-            }
+            },
         },
         data() {
             return {
@@ -37,7 +37,7 @@
                 defaultImage: '/static/images/common/image-empty.png',
             };
         },
-        mounted() {
+        created() {
             this.init();
         },
         methods: {
@@ -50,14 +50,14 @@
                 if (img_url == undefined || img_url == null || img_url == '') {
                     this.setData({
                         empty_outer_style: 'background: #f4fcff;display:flex;align-items: center;justify-content: center;',
-                        empty_style: `${ this.errorStyle }`
-                    })
+                        empty_style: `${this.errorStyle}`,
+                    });
                     img_url = this.defaultImage;
                 }
                 this.setData({
-                    imageUrl: img_url
-                })
-            }
+                    imageUrl: img_url,
+                });
+            },
         },
     };
 </script>
diff --git a/components/diy/search.vue b/components/diy/search.vue
index 295c7875..0876d9e0 100644
--- a/components/diy/search.vue
+++ b/components/diy/search.vue
@@ -6,7 +6,7 @@
                     <template v-if="form.is_icon_show == '1'">
                         <template v-if="form.icon_img.length > 0">
                             <view class="img-box">
-                                <image :src="form.icon_img[0].url" class="img" mode="aspectFill"></image>
+                                <image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
                             </view>
                         </template>
                         <template v-else>
@@ -20,7 +20,7 @@
                         <view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">{{ form.search_tips }}</view>
                     </template>
                     <template v-else-if="!isEmpty(form.search_botton_img) && form.search_botton_img.length > 0">
-                        <image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="aspectFill"></image>
+                        <image :src="form.search_botton_img[0].url" class="img" :style="search_button_radius" mode="heightFix"></image>
                     </template>
                     <template v-else>
                         <view :class="['padding-vertical-xs text-size-xs', isPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
@@ -64,11 +64,13 @@
                 form: this.value.content,
                 new_style: this.value.style,
             });
+            console.log(this.value);
             this.init();
         },
         methods: {
             isEmpty,
             init() {
+                console.log(this.new_style);
                 const { search_button_radius, common_style } = this.new_style;
                 this.setData({
                     style: this.get_style(), // 内部样式
@@ -114,14 +116,15 @@
 
 <style lang="scss" scoped>
     .search {
-        height: 64rpx;
         .box {
             padding: 12rpx 30rpx;
         }
         .img-box {
             height: 100%;
-            min-width: 4rpx;
-            max-width: 12rpx;
+            .img {
+                height: 36rpx;
+                display: block;
+            }
         }
         .search-botton {
             height: 56rpx;
@@ -134,4 +137,4 @@
             }
         }
     }
-</style>
\ No newline at end of file
+</style>