功能：店铺推荐商品

c0a4bca9 · ZhangLingKun · 4757f52e · c0a4bca9 · c0a4bca9 · c0a4bca9
--- a/src/api/interface/mall.ts
+++ b/src/api/interface/mall.ts
@@ -299,6 +299,8 @@ export type BrandStoreListType = InterFunction<
 export type QueryBrandGoodsType = InterFunction<
  { userAccountId: number },
  {
+    recommend: number;
+    priceShow: number;
    categoryPrimaryId: number;
    categorySubId: number;
    createTime: string;
@@ -334,5 +336,14 @@ export type QueryBrandGoodsType = InterFunction<
    shelfStatus: number;
    tradeName: string;
    userAccountId: number;
+    priceStock: Array<{
+      id: number;
+      productSpec: string;
+      salePrice: number;
+      skuImage: null;
+      channelPrice: null;
+      stock: null;
+      skuNo: null;
+    }>;
  }[]
 >;
--- a/src/components/productItem/index.tsx
+++ b/src/components/productItem/index.tsx
@@ -12,105 +12,6 @@ const ProductItemView: React.FC<{
  detail: GoodsInfoListType;
  row?: number;
 }> = ({ detail, row = 6 }) => {
-  const ProductItemWrap = styled.div`
-    position: relative;
-    box-sizing: border-box;
-    width: calc((100% - (0.83rem * ${row - 1})) / ${row});
-    height: 16rem;
-    border: 0.02rem solid #e3e3e3;
-    margin: 0 0.83rem 0.83rem 0;
-    padding: 0.67rem;
-    cursor: pointer;
-    &:nth-child(${row}n) {
-      margin-right: 0;
-    }
-    &:active,
-    &:hover {
-      background: #fff9f6;
-      border: 0.04rem solid #ff7a3e;
-    }
-    .product-image {
-      position: relative;
-      width: 100%;
-      height: 8rem;
-      box-sizing: border-box;
-      margin-bottom: 0.5rem;
-      .image {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
-    .product-title {
-      width: 100%;
-      font-size: 13px;
-      font-weight: 500;
-      color: #333333;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-      margin-bottom: 0.33rem;
-      min-height: 2rem;
-    }
-    .product-desc {
-      position: relative;
-      width: 100%;
-      font-size: 12px;
-      font-weight: 400;
-      color: #999999;
-      margin-bottom: 0.1rem;
-      .label {
-        width: 60%;
-      }
-      .text {
-        width: 40%;
-        text-align: right;
-      }
-    }
-    .product-money {
-      font-size: 16px;
-      font-weight: 500;
-      color: #ff1b1b;
-      .label {
-        font-size: 12px;
-        font-weight: bold;
-      }
-    }
-    .product-store {
-      position: absolute;
-      left: 0.67rem;
-      bottom: 0.67rem;
-      .title {
-        width: 6rem;
-        font-size: 12px;
-        font-weight: 400;
-        color: #666666;
-        margin-left: 0.25rem;
-      }
-    }
-    .product-cart {
-      position: absolute;
-      right: 0.67rem;
-      bottom: 0.67rem;
-      width: 2rem;
-      height: 2rem;
-      background: #ff8b2e;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &:active,
-      &:hover {
-        filter: brightness(0.9);
-      }
-    }
-    @media (prefers-color-scheme: dark) {
-      .product-title {
-        color: #fff;
-      }
-    }
-  `;
  // 路由钩子
  const router = useRouter();
  // 获取最低价格
@@ -126,7 +27,7 @@ const ProductItemView: React.FC<{
    router.push(`/mall/product/${detail?.id}`).then();
  };
  return (
-    <ProductItemWrap onClick={handleDetail}>
+    <ProductItemWrap onClick={handleDetail} $row={row}>
      <div className="product-image">
        <img
          className="image"
@@ -164,3 +65,105 @@ const ProductItemView: React.FC<{
 };

 export default ProductItemView;
+const ProductItemWrap = styled.div<{ $row: number }>`
+  position: relative;
+  box-sizing: border-box;
+  width: calc(
+    (100% - (0.83rem * ${(props) => props.$row - 1})) / ${(props) => props.$row}
+  );
+  height: 16.6rem;
+  border: 0.02rem solid #e3e3e3;
+  margin: 0 0.83rem 0.83rem 0;
+  padding: 0.67rem;
+  cursor: pointer;
+  &:nth-child(${(props) => props.$row}n) {
+    margin-right: 0;
+  }
+  &:active,
+  &:hover {
+    background: #fff9f6;
+    border: 0.04rem solid #ff7a3e;
+  }
+  .product-image {
+    position: relative;
+    width: 100%;
+    height: 8rem;
+    box-sizing: border-box;
+    margin-bottom: 0.5rem;
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .product-title {
+    width: 100%;
+    font-size: 13px;
+    font-weight: 500;
+    color: #333333;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    margin-bottom: 0.33rem;
+    line-height: 16px;
+    height: 32px;
+  }
+  .product-desc {
+    position: relative;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 400;
+    color: #999999;
+    margin-bottom: 0.1rem;
+    .label {
+      width: 60%;
+    }
+    .text {
+      width: 40%;
+      text-align: right;
+    }
+  }
+  .product-money {
+    font-size: 16px;
+    font-weight: 500;
+    color: #ff1b1b;
+    .label {
+      font-size: 12px;
+      font-weight: bold;
+    }
+  }
+  .product-store {
+    position: absolute;
+    left: 0.67rem;
+    bottom: 0.67rem;
+    .title {
+      width: 6rem;
+      font-size: 12px;
+      font-weight: 400;
+      color: #666666;
+      margin-left: 0.25rem;
+    }
+  }
+  .product-cart {
+    position: absolute;
+    right: 0.67rem;
+    bottom: 0.67rem;
+    width: 2rem;
+    height: 2rem;
+    background: #ff8b2e;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:active,
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    .product-title {
+      color: #fff;
+    }
+  }
+`;
--- a/src/pages/store/product/[id].tsx
+++ b/src/pages/store/product/[id].tsx
@@ -14,6 +14,7 @@ import ProductListView from '@/components/productList';
 import StoreProductCategoryView from '@/pages/store/product/comp/_storeProductCategory';
 import StoreProductHeadView from '@/pages/store/product/comp/_storeProductHead';
 import StoreProductMenuView from '@/pages/store/product/comp/_storeProductMenu';
+import StoreProductRecommendView from '@/pages/store/product/comp/_storeProductRecommend';
 import StoreProductSwiperView from '@/pages/store/product/comp/_storeProductSwiper';
 import { wrapper } from '@/store';

@@ -123,6 +124,8 @@ const StoreProductDetailPage: React.FC<{
      <StoreProductDetailWrap>
        {/* 顶部标题 */}
        <StoreProductHeadView detail={storeDetail} />
+        {/* 推荐商品 */}
+        <StoreProductRecommendView goodsInfoList={goodsInfoList} />
        {/* 轮播图 */}
        <StoreProductSwiperView detail={storeDetail} />
        {/* 一级分类 */}

--- a/src/pages/store/product/comp/_storeProductRecommend.tsx
+++ b/src/pages/store/product/comp/_storeProductRecommend.tsx
+import React, { useEffect, useState } from 'react';
+import { Carousel } from 'antd';
+import styled from 'styled-components';
+import { InterDataType } from '@/api/interface';
+import { QueryBrandGoodsType } from '@/api/interface/mall';
+
+// 商品列表类型
+type GoodsListType = InterDataType<QueryBrandGoodsType>;
+
+const StoreProductRecommendView: React.FC<{
+  goodsInfoList: GoodsListType;
+}> = ({ goodsInfoList }) => {
+  // 推荐商品列表
+  const [recommendList, setRecommendList] = useState<GoodsListType[0][][]>();
+  // 获取最低价格
+  const getLowerPrice = (item: GoodsListType[0]) => {
+    const price =
+      item.priceStock?.reduce((a: any, b: any) =>
+        a.salePrice < b.salePrice ? a : b,
+      ).salePrice || 0;
+    return price.toLocaleString();
+  };
+  // 组件挂载
+  useEffect(() => {
+    if (!goodsInfoList?.length) return;
+    const list = goodsInfoList?.filter((i) => i?.recommend);
+    setRecommendList(
+      Array.from({ length: Math.ceil(list.length / 4) }, (_, index) =>
+        list.slice(index * 4, (index + 1) * 4),
+      ),
+    );
+  }, [goodsInfoList]);
+  return recommendList?.length ? (
+    <StoreProductRecommendWrap className="flex-start">
+      <div className="recommend-title">店铺推荐</div>
+      <div className="recommend-swiper">
+        <Carousel autoplay={false} autoplaySpeed={8000}>
+          {recommendList?.map((i, j) => (
+            <div className="swiper-item flex-between" key={j}>
+              {i?.map((n, m) => (
+                <div className="item-goods" key={m}>
+                  <img
+                    className="image"
+                    src={`${n?.resourcesList?.[0]?.url}?x-oss-process=image/quality,q_20`}
+                    alt={n?.tradeName}
+                  />
+                  <div className="detail flex-between">
+                    <div className="content">
+                      <div className="title text-ellipsis">{n?.tradeName}</div>
+                      <div className="text text-ellipsis">成交{n?.id}件</div>
+                    </div>
+                    <div className="price">
+                      {n?.priceShow ? (
+                        <>
+                          <span className="label">￥</span>
+                          <span className="num">{getLowerPrice(n)}</span>
+                        </>
+                      ) : (
+                        <span className="label">咨询报价</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </Carousel>
+      </div>
+    </StoreProductRecommendWrap>
+  ) : null;
+};
+
+export default StoreProductRecommendView;
+// 样式
+const StoreProductRecommendWrap = styled.div`
+  position: relative;
+  width: 100%;
+  height: 28.6rem;
+  box-sizing: border-box;
+  //background: #9f9f9f;
+  background-image: url('https://file.iuav.com/file/sharefly-store-product-bg.png');
+  background-size: 100% 100%;
+  flex-direction: column;
+  padding-top: 1rem;
+  .recommend-title {
+    font-weight: 500;
+    font-size: 28px;
+    color: #ffffff;
+    letter-spacing: 4px;
+    margin-bottom: 2rem;
+  }
+  .recommend-swiper {
+    position: relative;
+    max-width: 1190px;
+    box-sizing: border-box;
+    .swiper-item {
+      position: relative;
+      width: 100%;
+      height: 21rem;
+      box-sizing: border-box;
+      padding: 0 6rem 1rem 6em;
+      display: flex !important;
+      .item-goods {
+        position: relative;
+        width: calc((100% / 4) - 2rem);
+        height: 18rem;
+        background: #000;
+        cursor: pointer;
+        user-select: none;
+        &:hover {
+          transform: scale(1.1);
+          transition: all ease-in-out 350ms;
+        }
+        .image {
+          position: relative;
+          width: 100%;
+          height: 14rem;
+          background: #ffffff;
+          object-fit: cover;
+        }
+        .detail {
+          position: relative;
+          width: 100%;
+          height: calc(100% - 14rem);
+          padding: 0 1rem;
+          box-sizing: border-box;
+          .content {
+            position: relative;
+            width: 50%;
+            .title {
+              font-weight: 400;
+              font-size: 14px;
+              color: #ffffff;
+            }
+            .text {
+              font-weight: 400;
+              font-size: 13px;
+              color: rgba(255, 255, 255, 0.8);
+            }
+          }
+          .price {
+            position: relative;
+            width: 50%;
+            text-align: right;
+            font-weight: 500;
+            font-size: 16px;
+            color: #fd4034;
+            .num {
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+`;