对接商品详情

package.json

@@ -40,6 +40,7 @@
     "passport-local": "^1.0.0",
     "pinyin-pro": "^3.14.0",
     "styled-components": "^6.0.0-rc.1",
+    "swiper": "^9.3.2",
     "swr": "^2.1.5",
     "uuid": "^9.0.0"
   }

pages/mall/detail/[pid].page.tsx → pages/mall/detail/[id].page.tsx

 import styles from "./index.module.scss";
 import Layout from "~/components/layout";
 import { Space, Image as AImage, Row, Col, Button, Divider, Badge } from "antd";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { RightOutlined } from "@ant-design/icons";
 import Image from "next/image";
 import errImg from "~/assets/errImg";
 import { useRouter } from "next/router";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import api, { GetAppGoodsInfoDetailResult } from "./api";
 
 export default function MallDetail() {
   const [visible, setVisible] = useState(false);
   const router = useRouter();
-  const { pid } = router.query;
+  const [id, setId] = useState<number | null>(null);
+  const [detail, setDetail] = useState<GetAppGoodsInfoDetailResult | null>(
+    null
+  );
+
+  useEffect(() => {
+    setId(Number(router.query.id));
+  }, [router]);
+
+  useEffect(() => {
+    if (id) {
+      api
+        .getAppGoodsInfoDetail({
+          id: id,
+        })
+        .then((res) => {
+          setDetail(res.result || null);
+        });
+    }
+  }, [id]);
 
   return (
     <Layout>
@@ -19,22 +46,48 @@ export default function MallDetail() {
           <AImage.PreviewGroup
             preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}
           >
-            <AImage src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" />
-            <AImage src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" />
-            <AImage src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp" />
+            {detail?.images?.map((item) => {
+              return <AImage key={item.id} src={item.imgUrl} />;
+            })}
           </AImage.PreviewGroup>
         </div>
         <Space size={30} style={{ padding: "22px 24px 0" }}>
           {/* 商品图 */}
-          <AImage
-            preview={{ visible: false }}
-            width={200}
-            src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
-            onClick={() => setVisible(true)}
-          />
+          <Space size={17} direction="vertical" style={{ width: 300 }}>
+            <AImage
+              preview={{ visible: false }}
+              width={300}
+              height={300}
+              src={detail?.images && detail.images[0].imgUrl}
+              onClick={() => setVisible(true)}
+              fallback={errImg}
+            />
+            <Swiper
+              modules={[Navigation]}
+              spaceBetween={6}
+              slidesPerView={5}
+              onSlideChange={() => console.log("slide change")}
+              onSwiper={(swiper) => console.log(swiper)}
+            >
+              {detail?.images?.map((item) => {
+                return (
+                  <SwiperSlide>
+                    <AImage
+                      preview={false}
+                      width={50}
+                      height={50}
+                      src={item.imgUrl}
+                      fallback={errImg}
+                    />
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
+          </Space>
+
           <Space direction="vertical" size={17}>
             <div className={`${styles.font1} ${styles.ellipsis}`}>
-              入云龙1550
+              {detail?.goodsName}
             </div>
             <div className={`${styles.font2} ${styles.ellipsis}`}>
               交通事故处理、违章取证、指挥调度、日常巡
@@ -43,8 +96,7 @@ export default function MallDetail() {
               size={24}
               direction="vertical"
               style={{
-                padding: "24px 40px 24px 23px",
-                border: "1px solid #EDEDED",
+                padding: "24px 40px 24px 0",
                 width: 470,
               }}
             >
@@ -59,9 +111,6 @@ export default function MallDetail() {
                 >
                   已选：1件
                 </Col>
-                <Col style={{ cursor: "pointer" }}>
-                  <RightOutlined />
-                </Col>
               </Row>
               <Row wrap={false}>
                 <Col flex="60px" className={styles.font3}>
@@ -121,7 +170,11 @@ export default function MallDetail() {
         </Space>
         <Divider className={styles.divider}>商品详情</Divider>
         <div style={{ textAlign: "center" }}>
-          <AImage fallback={errImg} width={1080}></AImage>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: detail?.goodsDetail?.content || "",
+            }}
+          ></div>
         </div>
       </div>
     </Layout>

pages/mall/detail/api/index.ts

+import request, { Response } from "~/api/request"
+
+export interface GetAppGoodsInfoDetailParams {
+  id: number
+}
+
+export interface GetAppGoodsInfoDetailResult {
+  id: number;
+  pid?: number;
+  goodsName?: string;
+  shareFlyServiceId?: number;
+  repoId?: number;
+  goodsSpec?: GoodsSpec[];
+  images?: Image[];
+  goodsVideo?: string;
+  goodsVideoId?: number;
+  goodsDetail?: GoodsDetail;
+  sortTypeId?: number;
+  masterTypeId?: number;
+  slaveTypeId?: number;
+  tag?: string;
+  shelfStatus?: number;
+  otherService?: OtherService[];
+  question?: Question[];
+}
+
+export interface GoodsDetail {
+  id: number;
+  goodsDesc: string;
+  content: string;
+  remark?: any;
+}
+
+export interface Image {
+  id: number;
+  imgUrl: string;
+  imgType: number;
+}
+
+export interface GoodsSpec {
+  id: number;
+  goodsSpecName: string;
+  goodsTypeId: number;
+  typeName: string;
+  skuId: number;
+  brandInfoId: number;
+  skuName: string;
+  productSpecList: ProductSpecList[];
+  industrySpecList?: any;
+  chooseType: number;
+  skuUnitId: number;
+  unitName: string;
+  must: number;
+  flag?: any;
+}
+
+export interface ProductSpecList {
+  id: number;
+  productSpec: number;
+  productSkuId: number;
+  specName: string;
+  specImage: string;
+  partNo: string;
+  versionDesc: string;
+  createTime?: any;
+  productSpecCPQVO?: any;
+}
+
+export interface Question {
+  answer: string,
+  id: number,
+  question: string
+}
+
+//其他服务: 1:免费配送，2：专业飞手培训2日， 3：半年保修， 4：一年保修
+export interface OtherService {
+  id: number,
+  saleServiceId: number,
+  serviceName: string
+}
+
+
+export default {
+  //web-获取商品详细信息--共多少种选择
+  getAppGoodsInfoDetail(params: GetAppGoodsInfoDetailParams): Promise<Response<GetAppGoodsInfoDetailResult>> {
+    return request('/pms/webProductMall/getAppGoodsInfoDetail', 'get', params)
+  }
+}
\ No newline at end of file

pages/mall/detail/index.module.scss

@@ -80,3 +80,10 @@
     color: #989898;
   }
 }
+
+.swiperButtonNext {
+  width: 20px;
+  height: 50px;
+  background: #d8d8d8;
+  opacity: 0.3;
+}