店铺主页

src/api/assistingAgriculture/shop.js

+import { request } from '../../utils/request';
+
+// 筑农首页-分类查询商品列表
+export function shopCategoryByShop(data) {
+  return request({
+    url: `/sgyrdd/shopCategory/byShop`,
+    method: 'GET',
+    data,
+  });
+}
+// 筑农首页-店铺分类商品列表
+export function searchProdPage(data) {
+  return request({
+    url: `/sgyrdd/search/prod/page`,
+    method: 'POST',
+    data,
+  });
+}

src/pages/assistingAgriculture/shop/index.vue

 <template>
-  <div class="page">
-    <div class="banner">
+  <view class="page">
+    <view class="banner">
       <img src="/static/assistingAgriculture/shop/banner.png" alt="" />
-    </div>
-    <div class="commodity-wrap">
-      <div class="top-bar">
-        <div class="header">分类</div>
-        <div class="search">
+    </view>
+    <view class="commodity-wrap">
+      <view class="top-bar">
+        <view class="header">分类</view>
+        <view class="search">
           <wd-search hide-cancel placeholder="请输入要搜索的内容" />
-        </div>
-      </div>
-      <div class="content">
-        <div class="nav">
+        </view>
+      </view>
+      <view class="content">
+        <view class="nav">
           <p
-            v-for="(v, i) in navList"
+            v-for="(v, i) in listOfDishCategories"
             :key="i"
-            @click="acitveNav = v.id"
-            :class="{ active: acitveNav == v.id }"
+            @click="changeCate(v)"
+            :class="{ active: acitveNav == v.categoryId }"
           >
-            {{ v.name }}
+            {{ v.categoryName }}
           </p>
-        </div>
-        <div class="list">
-          <div class="list-top">
-            <div class="subclass">
-              <div v-for="v in 10" :key="v">鸡</div>
-            </div>
-            <div class="filter" @click="activeFilter = true" v-if="!activeFilter">
+        </view>
+        <view class="list">
+          <view class="list-top">
+            <!-- <view class="subclass">
+              <view v-for="v in 10" :key="v">鸡</view>
+            </view>
+            <view class="filter" @click="activeFilter = true" v-if="!activeFilter">
               筛选
               <img src="/static/assistingAgriculture/shop/filter.png" alt="" />
-            </div>
-            <div class="sort" v-else>
+            </view>
+            <view class="sort" v-else>
               <Sort>销量</Sort>
               <Sort>交割</Sort>
-            </div>
-          </div>
-          <div class="commodity-list">
-            <CommodityItem v-for="v in 50" :key="v" />
-          </div>
-        </div>
-      </div>
-    </div>
+            </view> -->
+          </view>
+          <view class="commodity-list">
+            <scroll-view
+              :scroll-top="scrollTop"
+              scroll-y="true"
+              class="scroll-Y"
+              lower-threshold="50"
+              @scrolltolower="scrolltolowerFn"
+              @scrolltoupper="upper"
+              @scroll="scroll"
+            >
+              <view class="item" v-for="(item, i) in prodList" :key="i">
+                <view class="image-wrap" :class="{ border: isPreSale }">
+                  <img :src="imgUrl + item.pic" alt="" />
+                  <view class="count-down-wrop">
+                    距离结束:
+                    <wd-count-down
+                      custom-class="date"
+                      :format="format"
+                      :millisecond="true"
+                      :time="item.prodPresale.presaleEndTimeStamp * 1000 - new Date().getTime()"
+                    />
+                  </view>
+                  <view class="type">预售</view>
+                  <img src="/src/static/assistingAgriculture/shop/commodityBorder.png" alt="" />
+                </view>
+                <view class="commodity-info">
+                  <view class="name">{{ item.prodName }}</view>
+                  <view class="wrap">
+                    <view class="describe">{{ item.brief }}</view>
+                    <view class="date">预计{{ item.sendGoodTime }}发货</view>
+                  </view>
+                  <view class="price">
+                    <span style="font-size: 22rpx">￥</span>
+                    {{ item.price }}
+                    <span class="unit">/只</span>
+                  </view>
+                </view>
+                <view class="add-shopping-cart">
+                  <img src="/src/static/assistingAgriculture/shop/add.png" alt="" />
+                </view>
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </view>
     <!-- 购物车悬浮按钮 -->
-    <div class="cart-floating">
-      <img class="cart" @tap="toCart" src="/static/assistingAgriculture/presale/cart.png" />
-    </div>
-    <!--    <div class="shopping-cart">-->
-    <!--      <div>-->
+    <view class="cart-floating">
+      <wd-badge modelValue="12">
+        <img class="cart" @tap="toCart" src="/static/assistingAgriculture/presale/cart.png" />
+      </wd-badge>
+    </view>
+    <!--    <view class="shopping-cart">-->
+    <!--      <view>-->
     <!--        <img src="/src/static/assistingAgriculture/shop/shoppingCart.png" alt="" />-->
     <!--        购物车-->
-    <!--      </div>-->
+    <!--      </view>-->
     <!--      <img src="/src/static/assistingAgriculture/shop/doubleArrow.png" alt="" />-->
-    <!--    </div>-->
-  </div>
+    <!--    </view>-->
+  </view>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import CommodityItem from './commodityItem.vue';
-import Sort from './sort.vue';
-const navList = ref([
-  {
-    id: 1,
-    name: '鲜货家禽',
-  },
-  {
-    id: 2,
-    name: '鲜货家禽',
-  },
-  {
-    id: 3,
-    name: '鲜货家禽',
-  },
-  {
-    id: 4,
-    name: '鲜货家禽',
-  },
-  {
-    id: 5,
-    name: '鲜货家禽',
-  },
-]);
+import { shopCategoryByShop, searchProdPage } from '@/api/assistingAgriculture/shop';
+const format = ref('DD-HH:mm:ss');
+const imgUrl = import.meta.env.VITE_APP_IMG_URL;
+const currentShopId = ref('');
+const scrollTop = ref(0);
+const prodList = ref([]);
+const listOfDishCategories = ref([]);
+const params = ref({
+  isEnd: false,
+  current: 1,
+  size: 15,
+  prodName: '',
+  shopCategoryId: '',
+  deliveryType: '3',
+  prodType: '7',
+});
+onLoad((options) => {
+  currentShopId.value = options.shopId;
+  shopCategoryByShopFn(options.shopId).then((res) => {
+    searchProdPageFn();
+  });
+});
+const shopCategoryByShopFn = (shopId) => {
+  return new Promise((resolve, reject) => {
+    shopCategoryByShop({ shopId }).then((res) => {
+      if (res.code === 0) {
+        listOfDishCategories.value = res.data;
+        params.value.shopCategoryId = res.data[0].categoryId;
+        resolve();
+      }
+    });
+  });
+};
 
 const acitveNav = ref(1);
+const changeCate = (item) => {
+  acitveNav.value = item.categoryId;
+};
 const activeFilter = ref(false);
 function toCart() {
   // TODO: 跳转到购物车
@@ -90,6 +144,30 @@ function toCart() {
     url: '/pages/assistingAgriculture/cart/cart',
   });
 }
+const scrolltolowerFn = () => {
+  console.log('触底了');
+  searchProdPageFn();
+};
+const searchProdPageFn = () => {
+  if (params.value.isEnd === true)
+    return new Promise((resolve) => {
+      resolve();
+    });
+  xma.showLoading({
+    title: '加载中...',
+    mask: true,
+  });
+  return searchProdPage(params.value).then((res) => {
+    if (res.code === 0) {
+      if (res.data.data.length < params.value.size) {
+        params.value.isEnd = true;
+      }
+      params.value.current += 1;
+      prodList.value = prodList.value.concat(res.data.data);
+      xma.hideLoading();
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -146,6 +224,8 @@ uni-page-body {
   .content {
     display: flex;
     flex: 1;
+    max-height: 528 * 2rpx;
+    overflow-y: scroll;
     .nav {
       width: 180rpx;
       border-right: 2rpx solid #f6f6f6;
@@ -205,10 +285,103 @@ uni-page-body {
       .commodity-list {
         padding: 0 20rpx;
         overflow-y: scroll;
-        height: 200rpx;
         flex-grow: 1;
-        .item {
-          margin-bottom: 20rpx;
+        .scroll-Y {
+          height: 100%;
+          .item {
+            display: flex;
+            position: relative;
+            margin-top: 50rpx;
+            .image-wrap {
+              width: 160rpx;
+              height: 160rpx;
+              margin-right: 20rpx;
+              position: relative;
+              &.border {
+                border: 2rpx solid #fcdbdb;
+                box-sizing: border-box;
+                border-radius: 12rpx;
+              }
+              .count-down-wrop {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: absolute;
+                top: 0;
+                left: 0;
+                font-size: 16rpx;
+                color: #fa5151;
+                z-index: 1;
+                height: 24rpx;
+                width: 100%;
+                text-wrap: nowrap;
+                .date {
+                  font-size: 16rpx;
+                  text-wrap: nowrap;
+                  color: #fa5151;
+                }
+              }
+              .type {
+                position: absolute;
+                bottom: 4rpx;
+                right: 10rpx;
+                font-size: 18rpx;
+                color: #fff;
+                z-index: 1;
+              }
+              img {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .commodity-info {
+              display: flex;
+              flex-direction: column;
+              color: #3d3d3d;
+              padding-bottom: 20rpx;
+              box-sizing: border-box;
+
+              .name {
+                font-size: 24rpx;
+              }
+              .wrap {
+                flex: 1;
+              }
+              .describe {
+                color: #abaaaa;
+                font-size: 22rpx;
+              }
+              .date {
+                color: #fa5151;
+                font-size: 22rpx;
+              }
+              .price {
+                color: #fa5151;
+                font-size: 36rpx;
+                span {
+                  font-size: 22rpx;
+                }
+                .unit {
+                  color: #3d3d3d;
+                }
+              }
+            }
+            .add-shopping-cart {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              position: absolute;
+              bottom: 16rpx;
+              right: 0;
+              img {
+                width: 52rpx;
+                height: 52rpx;
+              }
+            }
+          }
         }
       }
     }
@@ -231,7 +404,7 @@ uni-page-body {
     height: 20rpx;
     margin-right: 70rpx;
   }
-  div {
+  view {
     margin-right: 10rpx;
     display: flex;
     flex-direction: column;
@@ -248,7 +421,10 @@ uni-page-body {
 }
 .cart-floating {
   position: fixed;
+  display: flex;
   text-align: center;
+  justify-content: center;
+  align-items: center;
   bottom: 10%;
   width: 80rpx;
   height: 80rpx;
@@ -258,10 +434,7 @@ uni-page-body {
   margin-left: 10px;
 }
 .cart {
-  position: relative;
-  top: 20rpx;
-  left: 16rpx;
-  width: 48rpx;
-  height: 46rpx;
+  width: 40rpx;
+  height: 40rpx;
 }
 </style>

src/pages/shop/text.vue

-<template>
-  <div>
-    <wd-rate
-      custom-class="icon-statr"
-      color="#fff"
-      readonly
-      v-model="grade"
-      size="22rpx"
-      space="8rpx"
-      :active-color="['#FA5151']"
-    />
-  </div>
-</template>
-
-<script setup>
-const grade = ref(5);
-</script>
-
-<style lang="scss" scoped>
-.icon-statr {
-  :deep(.wd-icon-star-on) {
-    display: block !important;
-  }
-}
-</style>