提交 d74c1bde 作者: ZhangLingKun

功能:店铺推荐商品问题修复

上级 9c099073
流水线 #8802 已通过 于阶段
in 6 分 2 秒
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Carousel } from 'antd'; import { Carousel } from 'antd';
import { useRouter } from 'next/router';
import styled from 'styled-components'; import styled from 'styled-components';
import { InterDataType } from '@/api/interface'; import { InterDataType } from '@/api/interface';
import { QueryBrandGoodsType } from '@/api/interface/mall'; import { QueryBrandGoodsType } from '@/api/interface/mall';
...@@ -10,6 +11,8 @@ type GoodsListType = InterDataType<QueryBrandGoodsType>; ...@@ -10,6 +11,8 @@ type GoodsListType = InterDataType<QueryBrandGoodsType>;
const StoreProductRecommendView: React.FC<{ const StoreProductRecommendView: React.FC<{
goodsInfoList: GoodsListType; goodsInfoList: GoodsListType;
}> = ({ goodsInfoList }) => { }> = ({ goodsInfoList }) => {
// 路由钩子
const router = useRouter();
// 推荐商品列表 // 推荐商品列表
const [recommendList, setRecommendList] = useState<GoodsListType[0][][]>(); const [recommendList, setRecommendList] = useState<GoodsListType[0][][]>();
// 获取最低价格 // 获取最低价格
...@@ -20,6 +23,10 @@ const StoreProductRecommendView: React.FC<{ ...@@ -20,6 +23,10 @@ const StoreProductRecommendView: React.FC<{
).salePrice || 0; ).salePrice || 0;
return price.toLocaleString(); return price.toLocaleString();
}; };
// 跳转商品详情
const handleDetail = (detail: GoodsListType[0]) => {
router.push(`/mall/product/${detail?.id}`).then();
};
// 组件挂载 // 组件挂载
useEffect(() => { useEffect(() => {
if (!goodsInfoList?.length) return; if (!goodsInfoList?.length) return;
...@@ -34,11 +41,15 @@ const StoreProductRecommendView: React.FC<{ ...@@ -34,11 +41,15 @@ const StoreProductRecommendView: React.FC<{
<StoreProductRecommendWrap className="flex-start"> <StoreProductRecommendWrap className="flex-start">
<div className="recommend-title">店铺推荐</div> <div className="recommend-title">店铺推荐</div>
<div className="recommend-swiper"> <div className="recommend-swiper">
<Carousel autoplay={false} autoplaySpeed={8000}> <Carousel autoplay={true} autoplaySpeed={8000}>
{recommendList?.map((i, j) => ( {recommendList?.map((i, j) => (
<div className="swiper-item flex-between" key={j}> <div className="swiper-item flex-between" key={j}>
{i?.map((n, m) => ( {i?.map((n, m) => (
<div className="item-goods" key={m}> <div
className="item-goods"
key={m}
onClick={() => handleDetail(n)}
>
<img <img
className="image" className="image"
src={`${n?.resourcesList?.[0]?.url}?x-oss-process=image/quality,q_20`} src={`${n?.resourcesList?.[0]?.url}?x-oss-process=image/quality,q_20`}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论