Skip to content

W
web-ci-test
提交 fb55e8a7 作者: 翁进城
操作

对接商品详情

上级 40e08c40
正在显示 包含 168 行增加 和 18 行删除
package.json
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
"passport-local": "^1.0.0", "passport-local": "^1.0.0",
"pinyin-pro": "^3.14.0", "pinyin-pro": "^3.14.0",
"styled-components": "^6.0.0-rc.1", "styled-components": "^6.0.0-rc.1",
"swiper": "^9.3.2",
"swr": "^2.1.5", "swr": "^2.1.5",
"uuid": "^9.0.0" "uuid": "^9.0.0"
} }
......
pages/mall/detail/[pid].page.tsx → pages/mall/detail/[id].page.tsx
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import Layout from "~/components/layout"; import Layout from "~/components/layout";
import { Space, Image as AImage, Row, Col, Button, Divider, Badge } from "antd"; 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 { RightOutlined } from "@ant-design/icons";
import Image from "next/image"; import Image from "next/image";
import errImg from "~/assets/errImg"; import errImg from "~/assets/errImg";
import { useRouter } from "next/router"; 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() { export default function MallDetail() {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const router = useRouter(); 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 ( return (
<Layout> <Layout>
...@@ -19,22 +46,48 @@ export default function MallDetail() { ...@@ -19,22 +46,48 @@ export default function MallDetail() {
<AImage.PreviewGroup <AImage.PreviewGroup
preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }} preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}
> >
<AImage src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" /> {detail?.images?.map((item) => {
<AImage src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp" /> return <AImage key={item.id} src={item.imgUrl} />;
<AImage src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp" /> })}
</AImage.PreviewGroup> </AImage.PreviewGroup>
</div> </div>
<Space size={30} style={{ padding: "22px 24px 0" }}> <Space size={30} style={{ padding: "22px 24px 0" }}>
{/* 商品图 */} {/* 商品图 */}
<AImage <Space size={17} direction="vertical" style={{ width: 300 }}>
preview={{ visible: false }} <AImage
width={200} preview={{ visible: false }}
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" width={300}
onClick={() => setVisible(true)} 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}> <Space direction="vertical" size={17}>
<div className={`${styles.font1} ${styles.ellipsis}`}> <div className={`${styles.font1} ${styles.ellipsis}`}>
入云龙1550 {detail?.goodsName}
</div> </div>
<div className={`${styles.font2} ${styles.ellipsis}`}> <div className={`${styles.font2} ${styles.ellipsis}`}>
交通事故处理、违章取证、指挥调度、日常巡 交通事故处理、违章取证、指挥调度、日常巡
...@@ -43,8 +96,7 @@ export default function MallDetail() { ...@@ -43,8 +96,7 @@ export default function MallDetail() {
size={24} size={24}
direction="vertical" direction="vertical"
style={{ style={{
padding: "24px 40px 24px 23px", padding: "24px 40px 24px 0",
border: "1px solid #EDEDED",
width: 470, width: 470,
}} }}
> >
...@@ -59,9 +111,6 @@ export default function MallDetail() { ...@@ -59,9 +111,6 @@ export default function MallDetail() {
> >
已选：1件 已选：1件
</Col> </Col>
<Col style={{ cursor: "pointer" }}>
<RightOutlined />
</Col>
</Row> </Row>
<Row wrap={false}> <Row wrap={false}>
<Col flex="60px" className={styles.font3}> <Col flex="60px" className={styles.font3}>
...@@ -121,7 +170,11 @@ export default function MallDetail() { ...@@ -121,7 +170,11 @@ export default function MallDetail() {
</Space> </Space>
<Divider className={styles.divider}>商品详情</Divider> <Divider className={styles.divider}>商品详情</Divider>
<div style={{ textAlign: "center" }}> <div style={{ textAlign: "center" }}>
<AImage fallback={errImg} width={1080}></AImage> <div
dangerouslySetInnerHTML={{
__html: detail?.goodsDetail?.content || "",
}}
></div>
</div> </div>
</div> </div>
</Layout> </Layout>
......
pages/mall/detail/api/index.ts 0 → 100644
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 @@ ...@@ -80,3 +80,10 @@
color: #989898; color: #989898;
} }
} }
.swiperButtonNext {
width: 20px;
height: 50px;
background: #d8d8d8;
opacity: 0.3;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论