From 50dab652e9e000f3602bdde5e2cd52cc9ae7da04 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Fri, 17 Jan 2025 16:49:59 +0800
Subject: [PATCH] =?UTF-8?q?Feat(=E6=90=9C=E7=B4=A2):=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C=E5=92=8C=E7=83=AD=E9=97=A8=E9=85=8D=E7=BD=AE=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/search.js                   |   6 ++
 pages/shop/GoodSearch/index.vue | 146 ++++++++++++++++++++++++++++++--
 2 files changed, 145 insertions(+), 7 deletions(-)
 create mode 100644 api/search.js

diff --git a/api/search.js b/api/search.js
new file mode 100644
index 0000000..9f4a222
--- /dev/null
+++ b/api/search.js
@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 文玩店铺列表
+export function getSearchPageConfig() {
+    return request.get('/searchPage', {}, { login: false })
+}
diff --git a/pages/shop/GoodSearch/index.vue b/pages/shop/GoodSearch/index.vue
index 8394344..4f523c3 100644
--- a/pages/shop/GoodSearch/index.vue
+++ b/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>
\ No newline at end of file