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

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 (!search) return
-      this.setHistory(search)
-      this.search = ''
-      this.toSearch(search)
+      if (this.showkey) {
+        const search = trim(this.currentSearch) || ''
+        console.log(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%;
       }