Fix：3114 【商城小程序】首页及搜索页面搜索框没有显示浮动词条

pages/home/index.vue

@@ -20,6 +20,9 @@
           :src="webUrl + '/home/icon-search2.png'"
           class="icon"
         />
+        <view class="swpier-bar">
+          <u-notice-bar duration="4000" :text="recommendKeyword" :icon="' '" color="#333" fontSize="12" bgColor="transparent" direction="column"></u-notice-bar>
+        </view>
       </view>
     </view>
     <view class="slider-banner" id="slider-banner-id">
@@ -354,6 +357,9 @@ import ProductWindow from '@/components/ProductWindow'
 import goCartMixin from '@/mixins/goCartMixins'
 import FunctionGuide from '@/components/FunctionGuide'
 import GuideMixins from '@/mixins/GuideMixins'
+import {
+  getSearchPageConfig
+} from '@/api/search'
 import {
   getCurAddress,
   getLocationPromise,
@@ -409,7 +415,8 @@ export default {
       videoContext: null,
       isPlay: true,
       tabIconPostion: {},
-      messageIcon: {}
+      messageIcon: {},
+      recommendKeyword: []
     }
   },
   onLoad() {
@@ -417,6 +424,7 @@ export default {
     const _this = this
     _this.init()
     _this.queryGuide('index')
+    this.getSearch()
     uni.getSystemInfo({
       success: (e) => {
         let statusBar = 0
@@ -444,7 +452,14 @@ export default {
     this.scrollTop = e.scrollTop
   },
   methods: {
-
+    getSearch() {
+      getSearchPageConfig().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.recommendKeyword = data.recommendKeyword.split(',')
+        }
+      })
+    },
     elementData(e) {
       this.tabIconPostion = e
     },
@@ -1707,6 +1722,9 @@ export default {
     }
   }
 }
+.swpier-bar{
+  width: 100%;
+}
 .fix-header {
   position: fixed;
   top: 0;

pages/shop/GoodSearch/index.vue

@@ -5,15 +5,22 @@
         <input
           v-model.trim="search"
           type="text"
-          placeholder="请输入"
+          :placeholder="showkey ? '' : '请输入'"
           placeholder-style="color:#999"
           @confirm="submit"
+          @blur="showHistory"
+          @focus="hideHistory"
+          @input="hideHistory"
         />
-        <view class="btn flex-0 flex jc-center ai-center" @click="submit">
+        <view class="btn flex-0 flex jc-center ai-center" @click.stop="submit">
           <text class="iconfont icon-sousuo2"></text>
           <text>搜索</text>
         </view>
+         <view class="swpier-bar" v-if="showkey">
+          <u-notice-bar duration="4000" @change="change" :text="recommendKeyword" :icon="' '" color="#999" fontSize="12" bgColor="transparent" direction="column"></u-notice-bar>
+        </view>
       </view>
+     
     </view>
     <view v-if="historyKey.length" class="page-content">
       <view
@@ -111,10 +118,13 @@ export default {
   name: 'GoodSearch',
   data: function () {
     return {
+      showkey: true,
+      currentSearch: '',
       keywords: [],
       search: '',
       historyKey: [],
-      rankingArr: []
+      rankingArr: [],
+      recommendKeyword: []
     }
   },
   mounted: function () {
@@ -124,12 +134,40 @@ export default {
     this.getHistory()
   },
   methods: {
+    showHistory() {
+      if(this.search) {
+        this.showkey = false
+        return
+      }
+      this.showkey = true
+    },
+    hideHistory() {
+      if(!this.search) {
+        this.showkey = true
+        return
+      }
+      this.showkey = false
+    },
+    change(e) {
+      this.currentSearch = this.recommendKeyword[e]
+    },
     submit() {
-      const search = trim(this.search) || ''
+      if (this.showkey) {
-      if (!search) return
+        const search = trim(this.currentSearch) || ''
-      this.setHistory(search)
+        console.log(search);
-      this.search = ''
+        
-      this.toSearch(search)
+        if (!search) return
+        this.setHistory(search)
+        this.search = ''
+        this.toSearch(search)
+      } else {
+        const search = trim(this.search) || ''
+        if (!search) return
+        this.setHistory(search)
+        this.search = ''
+        this.toSearch(search)
+      }
+      
     },
     toSearch(s) {
       this.setHistory(s)
@@ -142,6 +180,7 @@ export default {
           this.keywords = data.hotKeyword
           this.rankingArr.push(data.ranking1)
           this.rankingArr.push(data.ranking2)
+          this.recommendKeyword = data.recommendKeyword.split(',')
         }
       })
     },
@@ -193,7 +232,7 @@ export default {
   .header {
     padding: 40rpx 32rpx 32rpx;
     background: #F9F9F9;
-
+    
     .search-box {
       width: 686rpx;
       height: 72rpx;
@@ -202,7 +241,12 @@ export default {
       border-radius: 36rpx;
       background: #fff;
       font-size: 24rpx;
-
+      position: relative;
+      .swpier-bar{
+        position: absolute;
+        width: calc(100% - 128rpx);
+        top: 0;
+      }
       input {
         width: 100%;
       }

uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue

@@ -108,6 +108,7 @@
 		methods: {
 			noticeChange(e){
 				this.index = e.detail.current
+				this.$emit('change', this.index)
 			},
 			// 点击通告栏
 			clickHandler() {

uni_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue

@@ -19,6 +19,7 @@
 				:duration="duration"
 				@close="close"
 				@click="click"
+				@change="change"
 			></u-column-notice>
 		</template>
 		<template v-else>
@@ -73,6 +74,9 @@
 			}
 		},
 		methods: {
+			change(index) {
+				this.$emit('change', index)
+			},
 			// 点击通告栏
 			click(index) {
 				this.$emit('click', index)