From a6eb0b9b2183e43bdc5b74aac09dcbc525d461cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 27 Sep 2024 16:59:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/diy/carousel.vue              |   2 +-
 components/diy/header.vue                |  24 +++-
 components/diy/modules/hot-word-list.vue |  74 ++++++++++++
 components/diy/search.vue                | 139 ++++++++++++++++++-----
 4 files changed, 205 insertions(+), 34 deletions(-)
 create mode 100644 components/diy/modules/hot-word-list.vue

diff --git a/components/diy/carousel.vue b/components/diy/carousel.vue
index 25e37c4e..fbaa14fd 100644
--- a/components/diy/carousel.vue
+++ b/components/diy/carousel.vue
@@ -20,7 +20,7 @@
                 </swiper-item>
             </block>
             <block v-else>
-                <swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }">
+                <swiper-item v-for="(item, index) in new_list" :key="index" :style="{ 'padding-right': new_style.image_spacing * 2 + 'rpx' }" :data-value="item.carousel_link.page" @tap="url_open">
                     <view class="wh-auto ht-auto pr" :style="img_style">
                         <imageEmpty :propImageSrc="item.carousel_img[0]" :propStyle="img_style" :propImgFit="img_fit" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
                     </view>
diff --git a/components/diy/header.vue b/components/diy/header.vue
index d74d4f19..7c6be3fa 100644
--- a/components/diy/header.vue
+++ b/components/diy/header.vue
@@ -4,18 +4,18 @@
             <view class="header-content flex-row align-c">
                 <view class="model-top flex-1">
                     <view class="roll pr z-i">
-                        <view class="model-head tc pr padding-horizontal-sm flex-row align-c" :style="header_style">
+                        <view class="model-head pr padding-horizontal-sm flex-row align-c" :style="header_style">
                             <view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
                                 <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">
-                                            <imageEmpty :propImageSrc="form.content.logo[0].url" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
+                                            <imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
                                         </view>
                                     </template>
                                     <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 :propValue="form" :isPageSettings="true"></componentDiySearch>
+                                            <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
                                         </view>
                                     </template>
                                 </view>
@@ -27,11 +27,11 @@
                                     </view>
                                     <template v-if="['5'].includes(form.content.theme)">
                                         <view class="flex-1">
-                                            <componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
+                                            <componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
                                         </view>
                                     </template>
                                 </view>
-                                <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-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? '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' }" :data-value="item.link.page" @tap="url_event">
                                         <imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
                                         <iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
@@ -43,6 +43,7 @@
                 </view>
             </view>
         </view>
+        <hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
     </view>
 </template>
 
@@ -50,6 +51,7 @@
     const app = getApp();
     import componentDiySearch from '@/components/diy/search';
     import imageEmpty from '@/components/diy/modules/image-empty';
+    import hotWordList from '@/components/diy/modules/hot-word-list';
     import { isEmpty, background_computer, gradient_computer } from '@/common/js/common/common.js';
     // 状态栏高度
     var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
@@ -66,9 +68,11 @@
         components: {
             componentDiySearch,
             imageEmpty,
+            hotWordList,
         },
         data() {
             return {
+                is_click: false,
                 form: {},
                 new_style: {},
                 position: '',
@@ -126,6 +130,16 @@
             go_map_event() {
                 console.log('地图方法');
             },
+            search_tap(value) {
+                this.setData({
+                    is_click: value
+                })
+            },
+            search_hot_close() {
+                this.setData({
+                    is_click: false
+                })
+            },
             url_event(e) {
                 app.globalData.url_event(e);
             },
diff --git a/components/diy/modules/hot-word-list.vue b/components/diy/modules/hot-word-list.vue
new file mode 100644
index 00000000..065d708a
--- /dev/null
+++ b/components/diy/modules/hot-word-list.vue
@@ -0,0 +1,74 @@
+<template>
+    <view class="search-hot-location flex-col align-c jc-c">
+        <view class="search-hot flex-row align-c gap-10 bg-white flex-wrap box-shadow-md">
+            <view v-for="(item, index) in propValue" :key="index" class="text-size-md" :style="{ color: !isEmpty(prophotWordsColor) ? prophotWordsColor : item.color }" :data-value="item.value" @tap.stop="url_event">{{ item.value }}</view>
+        </view>
+        <view class="flex-col align-c">
+            <view class="icon-top" />
+            <iconfont name="icon-qiandao-tancguanbi" size="56rpx" color="#666" @tap="search_hot_close"></iconfont>
+        </view>
+    </view>
+</template>
+
+<script>
+const app = getApp();
+import { isEmpty} from '@/common/js/common/common.js';
+export default {
+        props: {
+            propValue: {
+                type: Array,
+                default: () => {
+                    return [];
+                },
+            },
+            prophotWordsColor: {
+                type: String,
+                default: () => {
+                    return '';
+                },
+            }
+        },
+        data() {
+            return {};
+        },
+        methods: {
+            isEmpty,
+            search_hot_close() {
+                this.$emit('search_hot_close');
+            },
+            url_event(e) {
+                if (!isEmpty(e.currentTarget.dataset.value)) {
+                    app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + e.currentTarget.dataset.value);
+                }
+            }
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+.search-hot {
+    width: 100%;
+    padding: 20rpx;
+    min-height: 20rpx;
+    transition: all 1s;
+}
+.search-hot-location {
+    padding-left: 20rpx;
+    padding-right: 20rpx;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+    box-sizing: content-box;
+}
+// 阴影
+.box-shadow-md {
+    box-shadow: 0 16rpx 32rpx -16rpx rgba(50, 55, 58, 0.1);
+}
+.icon-top {
+    width: 4rpx;
+    height: 20rpx;
+    background: #666;
+    position: relative;
+    bottom: -1px;
+}
+</style>
\ No newline at end of file
diff --git a/components/diy/search.vue b/components/diy/search.vue
index a1669e6c..59a18206 100644
--- a/components/diy/search.vue
+++ b/components/diy/search.vue
@@ -1,41 +1,71 @@
 <template>
-    <view :style="style_container">
-        <view :style="style" class="flex-row align-c">
-            <view class="search wh-auto pr">
-                <view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
-                    <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="heightFix"></image>
-                            </view>
+    <view :class="[{'bg-white wh-auto ht-auto oh': is_click }]">
+        <view :style="style_container" :class="[{'bg-white': is_click }]">
+            <template v-if="!is_click">
+                <view class="search wh-auto pr" :style="style">
+                    <view class="box oh flex-row align-c gap-10 bg-white" :style="box_style" @tap="search_tap">
+                        <template v-if="form.is_icon_show == '1'">
+                            <template v-if="form.icon_img.length > 0">
+                                <view class="img-box" @tap="search_icon_tap">
+                                    <image :src="form.icon_img[0].url" class="img" mode="heightFix"></image>
+                                </view>
+                            </template>
+                            <template v-else>
+                                <view @tap="search_icon_tap">
+                                    <iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="28rpx" :color="new_style.icon_color"></iconfont>
+                                </view>
+                            </template>
+                        </template>
+                        <text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
+                    </view>
+                    <view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button">
+                        <template v-if="form.search_type === 'text'">
+                            <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? '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="heightFix"></image>
                         </template>
                         <template v-else>
-                            <iconfont :name="!isEmpty(form.icon_class) ? 'icon-' + form.icon_class : 'icon-index-search'" size="'28rpx'" :color="new_style.icon_color"></iconfont>
+                            <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
+                                <iconfont :name="!isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="28rpx"></iconfont>
+                            </view>
                         </template>
-                    </template>
-                    <text v-if="form.is_tips_show == '1'" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :style="'color:' + new_style.tips_color">{{ form.tips }}</text>
+                    </view>
                 </view>
-                <view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button">
-                    <template v-if="form.search_type === 'text'">
-                        <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? '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="heightFix"></image>
-                    </template>
-                    <template v-else>
-                        <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
-                            <iconfont :name="!isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="'28rpx'"></iconfont>
-                        </view>
-                    </template>
+            </template>
+            <template v-else>
+                <view class="search wh-auto pr">
+                    <view class="box oh flex-row align-c gap-10 bg-white" :style="box_style">
+                        <input :focus="is_click" type="text" name="title" :class="[propIsPageSettings ? 'text-size-xs text-line-1' : 'text-size-md text-line-1']" :placeholder="form.tips" @input="search_input" />
+                    </view>
+                    <view v-if="form.is_search_show == '1'" class="pa search-botton h flex-row align-c jc-c" :style="search_button" @tap.stop="url_event">
+                        <template v-if="form.search_type === 'text'">
+                            <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? '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="heightFix"></image>
+                        </template>
+                        <template v-else>
+                            <view :class="['padding-vertical-xs text-size-xs', propIsPageSettings ? 'padding-horizontal' : 'padding-horizontal-lg']">
+                                <iconfont :name="!isEmpty(form.search_botton_icon) ? 'icon-' + form.search_botton_icon : ''" size="28rpx"></iconfont>
+                            </view>
+                        </template>
+                    </view>
                 </view>
-            </view>
+            </template>
         </view>
+        <hotWordList v-if="is_click && !propIsPageSettings" :propValue="form.hot_word_list" :prophotWordsColor="new_style.hot_words_color" @search_hot_close="search_hot_close"></hotWordList>
     </view>
 </template>
 
 <script>
+    const app = getApp();
     import { background_computer, common_styles_computer, gradient_computer, radius_computer, isEmpty } from '@/common/js/common/common.js';
+    import hotWordList from '@/components/diy/modules/hot-word-list';
     export default {
+        components: {
+            hotWordList
+        },
         props: {
             propValue: {
                 type: Object,
@@ -47,9 +77,15 @@
                 type: Boolean,
                 default: false,
             },
+            propIsClick: {
+                type: Boolean,
+                default: false,
+            }
         },
         data() {
             return {
+                is_click: false,
+                search_content: '',
                 form: {},
                 new_style: {},
                 style: '',
@@ -59,6 +95,16 @@
                 search_button: '',
             };
         },
+        watch: {
+            propIsClick: {
+                handler(new_value) {
+                    this.setData({
+                        is_click: new_value
+                    });
+                },
+                immediate: true
+            }
+        },
         created() {
             this.setData({
                 form: this.propValue.content,
@@ -88,15 +134,29 @@
                 return common_styles;
             },
             get_box_style() {
-                let style = `border: 1px solid ${this.new_style.search_border}; ${radius_computer(this.new_style.search_border_radius)};`;
+                let style = `border: 1px solid ${this.new_style.search_border}; ${radius_computer(this.new_style.search_border_radius)};box-sizing: border-box;`;
                 if (this.form.is_center == '1') {
                     style += `justify-content: center;`;
                 }
                 return style;
             },
+            search_tap() {
+                if (this.propIsPageSettings) {
+                    this.$emit('search_tap', true);
+                } else {
+                    this.setData({
+                        is_click: true,
+                    })
+                }
+            },
+            search_hot_close() {
+                this.setData({
+                    is_click: false
+                })
+            },
             get_search_button() {
-                let style = this.search_button_radius;
-                const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img } = this.new_style;
+                const { search_botton_color_list, search_botton_direction, search_botton_background_img_style, search_botton_background_img, search_button_radius } = this.new_style;
+                let style = radius_computer(search_button_radius);
                 if (this.form.search_type != 'img') {
                     const data = {
                         color_list: search_botton_color_list,
@@ -108,6 +168,28 @@
                 }
                 return style;
             },
+            search_input(e) {
+                this.setData({
+                    search_content: e.detail.value
+                })
+            },
+            search_icon_tap() {
+                if (!isEmpty(this.form.icon_src)) {
+                    app.globalData.url_open(this.form.icon_src.page);
+                }
+            },
+            url_event() {
+                if (!isEmpty(this.search_content)) {
+                    if (this.propIsPageSettings) {
+                        this.$emit('search_tap', false);
+                    } else {
+                        this.setData({
+                            is_click: false,
+                        })
+                    }
+                    app.globalData.url_open('/pages/goods-search/goods-search?keywords=' + this.search_content);
+                }
+            }
         },
     };
 </script>
@@ -115,6 +197,7 @@
 <style lang="scss" scoped>
     .search {
         .box {
+            height: 64rpx;
             padding: 12rpx 30rpx;
         }
         .img-box {