商品详情规格内容对接

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 { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { DownOutlined, RightOutlined } from "@ant-design/icons";
 import Image from "next/image";
 import errImg from "~/assets/errImg";
@@ -15,16 +15,28 @@ import "swiper/css";
 import "swiper/css/navigation";
 import api, { GetAppGoodsInfoDetailResult } from "./api";
 import IntentionModal from "./components/intentionModal";
+import { UserContext } from "~/lib/userProvider";
 
 export default function MallDetail() {
-  const [visible, setVisible] = useState(false);
+  const { userInfo, setNeedLogin } = useContext(UserContext);
+  const [visible, setVisible] = useState(false); //商品图预览
   const router = useRouter();
-  const [id, setId] = useState<number | null>(null);  
+  const [id, setId] = useState<number | null>(null);
   const [detail, setDetail] = useState<GetAppGoodsInfoDetailResult | null>(
     null
-  );    //详情数据
-  const [intentionModalOpen, setIntentionModalOpen] = useState(false);      //意向弹窗
+  ); //详情数据
+  const [intentionModalOpen, setIntentionModalOpen] = useState(false); //意向弹窗
 
+  //打开意向modal
+  const openIntentionModal = () => {
+    if (userInfo) {
+      setIntentionModalOpen(true);
+    } else {
+      setNeedLogin(true);
+    }
+  };
+
+  //提交意向
   const handleIntentionOk = () => {
     setIntentionModalOpen(false);
   };
@@ -52,7 +64,12 @@ export default function MallDetail() {
   return (
     <Layout>
       {/* 意向弹窗 */}
-      <IntentionModal open={intentionModalOpen} onOk={handleIntentionOk} onCancel={handleIntentionCancel}></IntentionModal>
+      <IntentionModal
+        open={intentionModalOpen}
+        detail={detail}
+        onOk={handleIntentionOk}
+        onCancel={handleIntentionCancel}
+      ></IntentionModal>
       <div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}>
         <div style={{ display: "none" }}>
           <AImage.PreviewGroup
@@ -134,7 +151,9 @@ export default function MallDetail() {
                 </Col>
                 <Col>
                   <Row align="middle" style={{ cursor: "pointer" }}>
-                    <Col className={styles.font4} onClick={() => setIntentionModalOpen(true)}>共3种可选</Col>
+                    <Col className={styles.font4} onClick={openIntentionModal}>
+                      共3种可选
+                    </Col>
                     <Col style={{ marginLeft: 9 }}>
                       <DownOutlined
                         style={{
@@ -169,8 +188,14 @@ export default function MallDetail() {
               </Row>
             </Space>
             <Space size={12} style={{ marginTop: 123 }}>
-              <Button className={styles.btn1}>加入购物车</Button>
-              <Button className={styles.btn2} type="primary" onClick={() => setIntentionModalOpen(true)}>
+              <Button className={styles.btn1} onClick={openIntentionModal}>
+                加入购物车
+              </Button>
+              <Button
+                className={styles.btn2}
+                type="primary"
+                onClick={openIntentionModal}
+              >
                 提交意向
               </Button>
               <Space size={20} style={{ marginLeft: 19 }}>

pages/mall/detail/api/index.ts

@@ -46,7 +46,7 @@ export interface GoodsSpec {
   skuId: number;
   brandInfoId: number;
   skuName: string;
-  productSpecList: ProductSpecList[];
+  productSpecList: ProductSpec[];
   industrySpecList?: any;
   chooseType: number;
   skuUnitId: number;
@@ -55,7 +55,7 @@ export interface GoodsSpec {
   flag?: any;
 }
 
-export interface ProductSpecList {
+export interface ProductSpec {
   id: number;
   productSpec: number;
   productSkuId: number;

pages/mall/detail/components/intentionModal/index.tsx

 import { Button, Col, Image, Modal, Row, Space } from "antd";
 import { useState } from "react";
 import errImg from "~/assets/errImg";
+import { GetAppGoodsInfoDetailResult } from "../../api";
 import styles from "./index.module.scss";
 
 type Props = {
   open?: boolean;
   onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onCancel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  detail: GetAppGoodsInfoDetailResult | null;
 };
 export default function IntentionModal(props: Props) {
-  const list = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+  const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false}
+
+  //添加规格到购物车
+  function addProductSpec(goodsSpecIndex: number, productSpecIndex: number) {
+    let temp = {};
+    //@ts-ignore
+    temp[`${goodsSpecIndex},${productSpecIndex}`] =
+      //@ts-ignore
+      !checkedMap[`${goodsSpecIndex},${productSpecIndex}`];
+
+    setCheckedMap({
+      ...checkedMap,
+      ...temp,
+    });
+  }
 
   return (
     <Modal
@@ -21,7 +37,13 @@ export default function IntentionModal(props: Props) {
       className={styles.model}
       footer={
         <div style={{ padding: "13px 36px" }}>
-          <Button type="primary" className={styles.font5} style={{width: '100%', height: 44}}>提交意向</Button>
+          <Button
+            type="primary"
+            className={styles.font5}
+            style={{ width: "100%", height: 44 }}
+          >
+            提交意向
+          </Button>
         </div>
       }
     >
@@ -32,6 +54,7 @@ export default function IntentionModal(props: Props) {
             height={100}
             fallback={errImg}
             style={{ borderRadius: 8 }}
+            src={props.detail?.images?.[0]?.imgUrl}
           ></Image>
         </Col>
         <Col flex="auto" style={{ marginLeft: 13, width: 230 }}>
@@ -39,13 +62,13 @@ export default function IntentionModal(props: Props) {
             className={`${styles.font1} ${styles.ellipsis1}`}
             style={{ marginTop: 28 }}
           >
-            垂直起降固定翼 插翅虎M9
+            {props.detail?.goodsName}
           </div>
           <div
             className={`${styles.font2} ${styles.ellipsis2}`}
             style={{ marginTop: 7 }}
           >
-            已选:入云龙【机壳喷绘】+金眼彪Z40【222222222222222222222222233333555555555555555
+            已选:
           </div>
         </Col>
       </Row>
@@ -54,40 +77,59 @@ export default function IntentionModal(props: Props) {
           <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, i) => {
-                return (
-                  <Row
-                    key={i}
-                    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>
+          {props.detail?.goodsSpec?.map((item, goodsSpecIndex) => {
+            return (
+              <div key={item.id}>
+                <div
+                  className={styles.font2}
+                  style={{ marginBottom: 5, marginTop: 11 }}
+                >
+                  {item.goodsSpecName}
+                </div>
+                <Space size={10} direction="vertical" style={{ width: "100%" }}>
+                  {item.productSpecList?.map((product, productSpecIndex) => {
+                    return (
+                      <Row
+                        key={product.id}
+                        align="middle"
+                        wrap={false}
+                        style={{
+                          borderRadius: 5,
+                          //@ts-ignore
+                          border: checkedMap[
+                            `${goodsSpecIndex},${productSpecIndex}`
+                          ]
+                            ? "1px solid #FF552D"
+                            : "1px solid #d6d6d6",
+                          height: 50,
+                          cursor: "pointer",
+                        }}
+                        onClick={() =>
+                          addProductSpec(goodsSpecIndex, productSpecIndex)
+                        }
+                      >
+                        <Col style={{ marginLeft: 7 }}>
+                          <Image
+                            width={52}
+                            height={36}
+                            src={product.specImage}
+                            fallback={errImg}
+                            preview={false}
+                          ></Image>
+                        </Col>
+                        <Col
+                          className={`${styles.ellipsis1} ${styles.font4}`}
+                          style={{ width: 238, marginLeft: 18 }}
+                        >
+                          {product.specName}
+                        </Col>
+                      </Row>
+                    );
+                  })}
+                </Space>
+              </div>
+            );
+          })}
         </div>
       </div>
     </Modal>