Skip to content

W
web
提交 9393282f 作者: 翁进城
操作

商城详情意向模态框开发

上级 2bb95a4f
正在显示 包含 209 行增加 和 17 行删除
pages/mall/detail/[id].page.tsx
...@@ -2,7 +2,7 @@ import styles from "./index.module.scss"; ...@@ -2,7 +2,7 @@ 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 { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RightOutlined } from "@ant-design/icons"; import { DownOutlined, 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";
...@@ -14,14 +14,24 @@ import { Navigation } from "swiper"; ...@@ -14,14 +14,24 @@ import { Navigation } from "swiper";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import api, { GetAppGoodsInfoDetailResult } from "./api"; import api, { GetAppGoodsInfoDetailResult } from "./api";
import IntentionModal from "./components/intentionModal";
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 [id, setId] = useState<number | null>(null); const [id, setId] = useState<number | null>(null);
const [detail, setDetail] = useState<GetAppGoodsInfoDetailResult | null>( const [detail, setDetail] = useState<GetAppGoodsInfoDetailResult | null>(
null null
); ); //详情数据
const [intentionModalOpen, setIntentionModalOpen] = useState(false); //意向弹窗
const handleIntentionOk = () => {
setIntentionModalOpen(false);
};
const handleIntentionCancel = () => {
setIntentionModalOpen(false);
};
useEffect(() => { useEffect(() => {
setId(Number(router.query.id)); setId(Number(router.query.id));
...@@ -41,6 +51,8 @@ export default function MallDetail() { ...@@ -41,6 +51,8 @@ export default function MallDetail() {
return ( return (
<Layout> <Layout>
{/* 意向弹窗 */}
<IntentionModal open={intentionModalOpen} onOk={handleIntentionOk} onCancel={handleIntentionCancel}></IntentionModal>
<div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}> <div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}>
<div style={{ display: "none" }}> <div style={{ display: "none" }}>
<AImage.PreviewGroup <AImage.PreviewGroup
...@@ -51,7 +63,10 @@ export default function MallDetail() { ...@@ -51,7 +63,10 @@ export default function MallDetail() {
})} })}
</AImage.PreviewGroup> </AImage.PreviewGroup>
</div> </div>
<Space size={30} style={{ padding: "22px 24px 0" }}> <Space
size={30}
style={{ padding: "22px 24px 0", alignItems: "start" }}
>
{/* 商品图 */} {/* 商品图 */}
<Space size={17} direction="vertical" style={{ width: 300 }}> <Space size={17} direction="vertical" style={{ width: 300 }}>
<AImage <AImage
...@@ -61,6 +76,9 @@ export default function MallDetail() { ...@@ -61,6 +76,9 @@ export default function MallDetail() {
src={detail?.images && detail.images[0].imgUrl} src={detail?.images && detail.images[0].imgUrl}
onClick={() => setVisible(true)} onClick={() => setVisible(true)}
fallback={errImg} fallback={errImg}
style={{
borderRadius: 6,
}}
/> />
<Swiper <Swiper
modules={[Navigation]} modules={[Navigation]}
...@@ -89,27 +107,43 @@ export default function MallDetail() { ...@@ -89,27 +107,43 @@ export default function MallDetail() {
<div className={`${styles.font1} ${styles.ellipsis}`}> <div className={`${styles.font1} ${styles.ellipsis}`}>
{detail?.goodsName} {detail?.goodsName}
</div> </div>
<div className={`${styles.font2} ${styles.ellipsis}`} style={{height: 22}}> <div
className={`${styles.font2} ${styles.ellipsis}`}
style={{ height: 22 }}
>
{detail?.goodsDesc} {detail?.goodsDesc}
</div> </div>
<Space <Space
size={24} size={24}
direction="vertical" direction="vertical"
style={{ style={{
padding: "24px 40px 24px 0", padding: "24px 40px 0px 0",
width: 470, width: 470,
}} }}
> >
<Row wrap={false}> <Row wrap={false} justify="space-between">
<Col flex="60px" className={styles.font3}> <Col span={12}>
选择 <Row>
<Col flex="60px" className={styles.font3}>
选择
</Col>
<Col flex="auto" className={styles.font4} style={{}}>
已选：1件
</Col>
</Row>
</Col> </Col>
<Col <Col>
flex="auto" <Row align="middle" style={{ cursor: "pointer" }}>
className={styles.font4} <Col className={styles.font4} onClick={() => setIntentionModalOpen(true)}>共3种可选</Col>
style={{ cursor: "pointer" }} <Col style={{ marginLeft: 9 }}>
> <DownOutlined
已选：1件 style={{
fontSize: 12,
color: "RGBA(219, 219, 219, 1)",
}}
/>
</Col>
</Row>
</Col> </Col>
</Row> </Row>
<Row wrap={false}> <Row wrap={false}>
...@@ -134,9 +168,9 @@ export default function MallDetail() { ...@@ -134,9 +168,9 @@ export default function MallDetail() {
</Col> </Col>
</Row> </Row>
</Space> </Space>
<Space size={12} style={{ marginTop: 20 }}> <Space size={12} style={{ marginTop: 123 }}>
<Button className={styles.btn1}>加入购物车</Button> <Button className={styles.btn1}>加入购物车</Button>
<Button className={styles.btn2} type="primary"> <Button className={styles.btn2} type="primary" onClick={() => setIntentionModalOpen(true)}>
提交意向 提交意向
</Button> </Button>
<Space size={20} style={{ marginLeft: 19 }}> <Space size={20} style={{ marginLeft: 19 }}>
......
pages/mall/detail/components/intentionModal/index.module.scss 0 → 100644
@import "~/styles/mixins.scss";
.font1 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #323232;
line-height: 22px;
}
.font2 {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9a9a9a;
line-height: 17px;
}
.font3 {
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 18px;
}
.font4 {
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #212121;
line-height: 21px;
}
.font5 {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 22px;
}
.ellipsis1 {
@include ellipsis(1);
}
.ellipsis2 {
@include ellipsis(2);
}
.model {
:global .ant-modal-content {
padding: 0;
border-radius: 0 !important;
}
}
.specsContent {
padding: 0 39px 0 38px;
height: 364px;
overflow-y: auto;
@include scrollbar();
}
pages/mall/detail/components/intentionModal/index.tsx 0 → 100644
import { Button, Col, Image, Modal, Row, Space } from "antd";
import { useState } from "react";
import errImg from "~/assets/errImg";
import styles from "./index.module.scss";
type Props = {
open?: boolean;
onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export default function IntentionModal(props: Props) {
const list = [1, 1, 1, 1, 1, 1, 1, 1, 1];
return (
<Modal
open={props.open}
onOk={props.onOk}
onCancel={props.onCancel}
width={420}
style={{ padding: 0 }}
className={styles.model}
footer={
<div style={{ padding: "13px 36px" }}>
<Button type="primary" className={styles.font5} style={{width: '100%', height: 44}}>提交意向</Button>
</div>
}
>
<Row style={{ padding: "22px 39px 12px 39px" }} wrap={false}>
<Col>
<Image
width={100}
height={100}
fallback={errImg}
style={{ borderRadius: 8 }}
></Image>
</Col>
<Col flex="auto" style={{ marginLeft: 13, width: 230 }}>
<div
className={`${styles.font1} ${styles.ellipsis1}`}
style={{ marginTop: 28 }}
>
垂直起降固定翼 插翅虎M9
</div>
<div
className={`${styles.font2} ${styles.ellipsis2}`}
style={{ marginTop: 7 }}
>
已选:入云龙【机壳喷绘】+金眼彪Z40【222222222222222222222222233333555555555555555
</div>
</Col>
</Row>
<div style={{ paddingRight: 13 }}>
<div className={styles.specsContent}>
<div className={styles.font3} style={{}}>
无人机
</div>
<div>
<div
className={styles.font2}
style={{ marginBottom: 5, marginTop: 11 }}
>
入云龙
</div>
<Space size={10} direction="vertical" style={{ width: "100%" }}>
{list.map((item) => {
return (
<Row
align="middle"
wrap={false}
style={{
borderRadius: 5,
border: "1px solid #d6d6d6",
height: 50,
}}
>
<Col style={{ marginLeft: 7 }}>
<Image width={52} height={36} src="" fallback={errImg} preview={false}></Image>
</Col>
<Col
className={`${styles.ellipsis1} ${styles.font4}`}
style={{ width: 238, marginLeft: 18 }}
>
入云龙1-机壳喷绘
</Col>
</Row>
);
})}
</Space>
</div>
</div>
</div>
</Modal>
);
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论