feat：搜索组件新增热门词

src/api/goods.js

 import { requestPOST, requestGET } from "@/utils/request.js";
 
 export default {
+  // 获取搜索热门词
+  getHotWordsApi(data) {
+    return requestPOST(`${process.env.OLSHOP_URL}/product/query_popular_words_shop`, data);
+  },
   queryProductInfo(data) {
     return requestPOST(`${process.env.OLSHOP_URL}/product/query_product_info`, data);
   },

static/nativeComponents/GoodsSearch/index.js

@@ -9,7 +9,6 @@ Component({
       type: Object
     }
   },
-
   /**
    * 组件的初始数据
    */
@@ -18,7 +17,9 @@ Component({
     backgroundColor : '',
     borderColor : '',
     placeholderValue : '',
-    searchScopeFlag: 0
+    searchScopeFlag: 0,
+    tableData: [],
+    hotWordsInterval: null // 热门词轮播定时任务
   },
   ready(){
     this.setData({
@@ -41,12 +42,58 @@ Component({
     this.setData({
       placeholderValue: this.data.datas.componentData.placeHolderVal ? this.data.datas.componentData.placeHolderVal : '搜索店铺内'
     })
-  },
 
+    this.getHotWords()
+  },
+  detached() {
+    clearInterval(this.data.hotWordsInterval)
+    this.data.hotWordsInterval = null;
+    console.log("销毁",this.data.hotWordsInterval);
+  },
   /**
    * 组件的方法列表
    */
   methods: {
+    getHotWords() {
+      app.goodsApi.getHotWordsApi({}).then(({data:{data}})=>{
+        if (data) {
+          function compare(property) {
+            return function(a, b) {
+              var value1 = a[property];
+              var value2 = b[property];
+              return value1 - value2;
+            };
+          }
+          data.sort(compare("sequenceNumber"));
+          this.setData({tableData:data})
+          if(this.data.datas.componentData.hotWordsData["isOpenHotWords"] == 1) {
+            this.hotWordsCarousel();
+          }
+        }
+      })
+    },
+    // 热门词轮播方法
+    hotWordsCarousel() {
+      console.log("调用定时渲染任务2");
+      if(this.data.tableData.length > 0) {
+        let currentIndex = 0; // 当前取到的元素下标
+        // 初始化placeholderVal
+        const placeHolderVal = 'datas.componentData.placeHolderVal'
+        this.setData({
+          [placeHolderVal]:this.data.tableData[0].popularWordsName, // 用于搜索
+          placeholderValue:this.data.tableData[0].popularWordsName // 用于显示
+        })
+        this.data.hotWordsInterval = setInterval(()=>{
+          // 取出下一个元素
+          currentIndex = (currentIndex + 1) % this.data.tableData.length;
+          console.log("有无",this.data.tableData[currentIndex].popularWordsName);
+          this.setData({
+            [placeHolderVal]:this.data.tableData[currentIndex].popularWordsName,
+            placeholderValue:this.data.tableData[currentIndex].popularWordsName
+          })
+        }, 5000);
+      }
+    },
     toSearchPage(e){
       if (this.data.datas.componentData['searchModel'] == 1) return;
       app.trackCpn(e, this.data.datas.componentName)

static/nativeComponents/GoodsSearch/index.wxml

@@ -23,3 +23,11 @@
       </view>
     </view>
 </view>
+<!-- 热门词区域 -->
+<view class="hot_words_class" wx:if="{{datas.componentData.hotWordsData['isOpenHotWords'] == 1}}">
+  <view class="hot_words_box">
+    <view class="words_item" wx:for="{{tableData}}" wx:key="id" style="font-size:{{datas.componentData.hotWordsData.hotWordsTextIsDefault==1 ? datas.componentData.hotWordsData.fontSize + 'px' : ''}};color:{{datas.componentData.hotWordsData.hotWordsTextIsDefault==1 ? datas.componentData.hotWordsData.color : ''}};background-color:{{datas.componentData.hotWordsData.hotWordsBackgroundIsDefault==1 ? datas.componentData.hotWordsData.backgroundColor : ''}}">
+      {{ item.popularWordsName }}
+    </view>
+  </view>
+</view>

static/nativeComponents/GoodsSearch/index.wxss

@@ -71,3 +71,29 @@
   width: 15px;
   height: 15px;
 }
+
+.hot_words_class {
+  width:100%;
+  padding: 0 8px;
+}
+
+.hot_words_box {
+  display: flex;
+  justify-content: start;
+  width: 100%;
+  overflow: hidden;
+  overflow-x: scroll;
+  white-space: nowrap;
+  text-align: center;
+  margin-top: 4px;
+}
+
+.words_item {
+  padding: 2px 8px;
+  margin-right: 8px;
+  color:#ffffff;
+  font-size: 12px;
+  background-color:rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+  border-radius: 11px;
+}