Feat(搜索):排行榜和热门配置对接

api/search.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 文玩店铺列表
+export function getSearchPageConfig() {
+    return request.get('/searchPage', {}, { login: false })
+}

pages/shop/GoodSearch/index.vue

@@ -51,22 +51,70 @@
         </view>
       </view>
     </view>
-    <view class="line"></view>
+    <view class="ranking-wrap">
+      <view
+        v-for="(rankingItem, rankingIndex) in rankingArr"
+        :key="rankingIndex"
+        :style="{
+          'background': `linear-gradient(180deg, ${rankingItem.color} 0%, #FFFFFF 35%, #FFFFFF 100%)`
+        }"
+        class="ranking-item"
+      >
+        <view class="ranking-header">
+          <image
+            :src="rankingItem.backgroundImage"
+            mode="widthFix"
+            class="icon"
+          />
+          <view class="name">{{ rankingItem.rankingName }}</view>
+        </view>
+        <view class="ranking-body">
+          <view
+            v-for="(good, goodIndex) in rankingItem.products"
+            :key="goodIndex"
+            class="item"
+            @click="goodItemClick(good)"
+          >
+            <view class="img">
+              <image
+                :src="good.productImage"
+                mode="widthFix"
+                class="pic"
+              />
+            </view>
+            <view class="info">
+              <view class="name more-t">
+                {{ good.productName }}
+              </view>
+              <view class="price-wrap">
+                <view class="price">
+                  ￥{{ good.price }}
+                </view>
+                <view class="ot-price">
+                  ￥{{ good.otPrice }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import {getSearchKeyword} from '@/api/store'
+import {
+  getSearchPageConfig
+} from '@/api/search'
 import {trim} from '@/utils'
 export default {
   name: 'GoodSearch',
-  props: {},
   data: function () {
     return {
-      webUrl: this.$VUE_APP_RESOURCES_URL,
       keywords: [],
       search: '',
-      historyKey: []
+      historyKey: [],
+      rankingArr: []
     }
   },
   mounted: function () {
@@ -88,8 +136,13 @@ export default {
       this.$yrouter.push({path: '/pages/shop/GoodsList/index', query: {s}})
     },
     getData() {
-      getSearchKeyword().then(res => {
-        this.keywords = res.data
+      getSearchPageConfig().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.keywords = data.hotKeyword
+          this.rankingArr.push(data.ranking1)
+          this.rankingArr.push(data.ranking2)
+        }
       })
     },
     getHistory() {
@@ -119,6 +172,14 @@ export default {
           }
         }
       })
+    },
+    goodItemClick(good) {
+      const id = good.productId
+      if (!id) return
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: { id }
+      })
     }
   }
 }
@@ -196,4 +257,75 @@ export default {
     }
   }
 }
+.ranking-wrap {
+  display: flex;
+  justify-content: space-between;
+  padding: 24rpx;
+  background-color: #F2F2F2;
+  .ranking-item {
+    width: 344rpx;
+    padding: 20rpx 12rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+    background-color: #fff;
+    .ranking-header {
+      display: flex;
+      align-items: center;
+      .icon {
+        display: block;
+        width: 40rpx;
+        height: 40rpx;
+      }
+      .name {
+        margin: 0 0 0 12rpx;
+        font-weight: bold;
+        font-size: 30rpx;
+        color: #333;
+        line-height: 42rpx;
+      }
+    }
+    .ranking-body {
+      padding: 24rpx 0 0 0;
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        margin: 0 0 12rpx 0;
+        .img {
+          .pic {
+            display: block;
+            width: 100rpx;
+            height: 100rpx;
+            border-radius: 8rpx;
+          }
+        }
+        .info {
+          width: calc(100% - 112rpx);
+          margin: 0 0 0 12rpx;
+          .name {
+            height: 64rpx;
+            font-size: 26rpx;
+            color: #333;
+            line-height: 32rpx;
+          }
+          .price-wrap {
+            display: flex;
+            margin: 6rpx 0 0 0;
+            line-height: 30rpx;
+            .price {
+              color: #E92727;
+              font-size: 24rpx;
+            }
+            .ot-price {
+              margin: 0 0 0 20rpx;
+              color: #BFBFBF;
+              font-size: 20rpx;
+              text-decoration: line-through;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>