搜索对接完毕

src/api/assistingAgriculture/search.js

+import { request } from '../../utils/request';
+
+// 店铺分类商品列表/商品搜索
+export function searchCommodity(data) {
+  return request({
+    url: `/sgyrdd/search/prod/page`,
+    method: 'POST',
+    data,
+  });
+}
+
+// 商家列表分页-搜索列表
+
+export function searchBusiness(data) {
+  return request({
+    url: `/sgyrdd/shop/page`,
+    method: 'POST',
+    data,
+  });
+}

src/pages/assistingAgriculture/searchPage/searchPage.vue

 <template>
   <view class="search-page">
-    <view class="search" :style="{ background: '#FF0101' }">
+    <view
+      class="search"
+      style="background: linear-gradient(180deg, #71c456 0%, rgba(243, 243, 243, 0) 100%)"
+    >
       <wd-icon
         name="thin-arrow-left"
         class="icon"
@@ -21,20 +24,82 @@
       </view>
     </view>
   </view>
-  <wd-tabs v-model="tab">
+  <wd-tabs custom-class="tabss" v-model="tab">
     <block v-for="(item, index) in tabs" :key="index">
       <wd-tab :title="item">
-        <view class="content" v-show="tab === 0">内容1</view>
-        <view class="content" v-show="tab === 1">内容2</view>
+        <view class="content1" v-show="tab === 0">
+          <view class="shopitem" v-for="(item, index) in commoditys" :key="index">
+            <image class="img" :src="item.imgUrl" mode="aspectFill" />
+            <view class="middle">
+              <text class="text">{{ item.prodName }}</text>
+              <text class="text2">￥{{ item.price }}</text>
+              <text class="collection">月销量{{ item.soldNum }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="content2" v-show="tab === 1">
+          <view class="shopitem" v-for="(item, index) in shops" :key="index">
+            <view class="left">
+              <image class="img" :src="item.shopLogo" mode="aspectFill" />
+              <view class="middle">
+                <text class="text">{{ item.shopName }}</text>
+                <wd-rate
+                  custom-class="icon-statr"
+                  active-color="linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)"
+                  size="24rpx"
+                  v-model="item.grade"
+                />
+                <text class="collection">{{ item.privateIntFcount }}人收藏</text>
+              </view>
+            </view>
+            <view class="btn">进店看看</view>
+          </view>
+        </view>
       </wd-tab>
     </block>
   </wd-tabs>
 </template>
 
 <script setup>
-function toSearch(keyword) {}
+import { searchCommodity, searchBusiness } from '@/api/assistingAgriculture/search';
 const tab = ref(0);
 const tabs = ref(['商品', '店铺']);
+const value = ref(5);
+const commoditys = ref([]);
+const shops = ref([]);
+const baseImgurl = import.meta.env.VITE_APP_IMG_URL;
+function changeValue({ value }) {
+  console.log(value);
+}
+// 搜索
+const toSearch = (data) => {
+  const keyword = data.detail.value;
+  const params = {
+    current: 1,
+    size: 100,
+  };
+  const params2 = {
+    current: 1,
+    size: 100,
+  };
+  // 商品搜索
+  params.prodName = keyword;
+  searchCommodity(params).then((res) => {
+    res.data.data.forEach((item) => {
+      const imgs = item.imgs.split(',');
+      item.imgUrl = baseImgurl + imgs[0];
+    });
+    commoditys.value = res.data.data;
+  });
+  // 店铺搜索
+  params2.keyword = keyword;
+  searchBusiness(params2).then((res) => {
+    res.data.content.forEach((item) => {
+      item.shopLogo = baseImgurl + item.shopLogo;
+    });
+    shops.value = res.data.content;
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -78,20 +143,113 @@ page {
       }
     }
   }
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-content: center;
-    gap: 20rpx;
-  }
 }
+
 :deep(.wd-tabs__line) {
-  background-color: #e9231b;
+  background-color: #2fb641;
   bottom: 2px;
 }
-.content {
-  line-height: 120px;
-  text-align: center;
+.content1 {
   background: #f6f6f6;
+  box-sizing: border-box;
+  .shopitem {
+    padding: 0 20rpx;
+    display: flex;
+    height: 200rpx;
+    background-color: white;
+    align-items: center;
+    border-bottom: 1rpx solid rgb(225, 223, 223);
+    .img {
+      width: 200rpx;
+      height: 150rpx;
+      border-radius: 16rpx;
+      flex-shrink: 0;
+    }
+    .middle {
+      height: 150rpx;
+      margin-left: 20rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .text {
+        font-weight: bold;
+        font-size: 26rpx;
+      }
+      .text2 {
+        font-weight: bold;
+        font-size: 22rpx;
+        color: red;
+      }
+      .collection {
+        font-size: 22rpx;
+        color: rgb(147, 145, 145);
+      }
+    }
+
+    .btn {
+      text-align: center;
+      border-radius: 50rpx;
+      background: #2fb641;
+      font-size: 22rpx;
+      padding: 8rpx 15rpx;
+      color: white;
+      box-sizing: border-box;
+    }
+  }
+}
+.content2 {
+  background: #f6f6f6;
+  padding: 10rpx 15rpx;
+  box-sizing: border-box;
+  .shopitem {
+    padding: 0 20rpx;
+    display: flex;
+    height: 150rpx;
+    background-color: white;
+    border-radius: 16rpx;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10rpx;
+    .left {
+      display: flex;
+      align-items: center;
+      height: 100rpx;
+      .img {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 16rpx;
+      }
+      .middle {
+        height: 100%;
+        margin-left: 20rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .text {
+          font-weight: bold;
+          font-size: 26rpx;
+          margin-bottom: 8rpx;
+        }
+        .icon-statr {
+          :deep(.wd-icon-star-on) {
+            display: block !important;
+          }
+        }
+        .collection {
+          font-size: 22rpx;
+        }
+      }
+    }
+
+    .btn {
+      text-align: center;
+      border-radius: 50rpx;
+      background: #2fb641;
+      font-size: 22rpx;
+      padding: 8rpx 15rpx;
+      color: white;
+      box-sizing: border-box;
+    }
+  }
 }
 </style>