商城下单

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

@@ -55,6 +55,7 @@ export default function MallDetail() {
       api
         .getLeaseGoodsDetail({
           goodsId: id,
+          type: 0
         })
         .then((res) => {
           setDetail(res.result || null);

pages/mall/detail/api/index.ts

 import request, { Response } from "~/api/request"
 
 export interface GetLeaseGoodsDetailParams {
-  goodsId: number
+  goodsId: number,
+  type: 1 | 0,  //租赁：1 销售商品：0
 }
 
 export interface GetLeaseGoodsDetailResp {
@@ -77,10 +78,23 @@ export interface Image {
   imgType: number;
 }
 
+interface CommitMallOrderParams {
+  buyNum: number;
+  directoryId: number;
+  goodsInfoId: number;
+  mallSpecIds: any[];
+  remark: string;
+  userAddressId: number;
+}
+
 
 export default {
   //web-获取商品详细信息--共多少种选择
   getLeaseGoodsDetail(params: GetLeaseGoodsDetailParams): Promise<Response<GetLeaseGoodsDetailResp>> {
     return request('/pms/product/mall/getLeaseGoodsDetail', 'get', params)
+  },
+  //提交订单V1.0.0
+  commitMallOrder(params: CommitMallOrderParams){
+    return request('/oms/app-order/commitMallOrder', 'post', params);
   }
 }
\ No newline at end of file

pages/mall/detail/components/intentionModal/api/index.ts

+import request from "~/api/request"
+
+interface CommitMallOrderParams {
+  buyNum: number;
+  directoryId: number;
+  goodsInfoId: number;
+  mallSpecIds: any[];
+  remark?: string;
+  userAddressId: number;
+}
+
+export default {
+  //提交订单V1.0.0
+  commitMallOrder(params: CommitMallOrderParams) {
+    return request("/oms/app-order/commitMallOrder", 'post', params);
+  }
+}
\ No newline at end of file

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

-import { Button, Col, Image, Modal, Row, Space } from "antd";
-import { useState } from "react";
+import { Button, Col, Image, message, Modal, Row, Space } from "antd";
+import { useEffect, useState } from "react";
 import errImg from "~/assets/errImg";
-import { GetLeaseGoodsDetailResp } from "../../api";
+import { GetLeaseGoodsDetailResp, ProductSpecList } from "../../api";
 import styles from "./index.module.scss";
+import api from "./api";
+import Item from "antd/es/list/Item";
 
 type Props = {
   open?: boolean;
-  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onCancel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onOk?: () => void;
+  onCancel: () => void;
   detail: GetLeaseGoodsDetailResp | null;
 };
 export default function IntentionModal(props: Props) {
-  const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false}
+  const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false} props.detail?.goodsSpec[1].productSpecList[1]
+  const [checkItems, setCheckItems] = useState<ProductSpecList[]>([]); //选中的规格
+  const [loading, setLoading] = useState(false);  //下单中
+
+  useEffect(() => {
+    let list: ProductSpecList[] = [];
+    Object.keys(checkedMap).forEach((key) => {
+      if (checkedMap[key as keyof typeof checkedMap]) {
+        let arr = key.split(",");
+        let item =
+          props.detail?.goodsSpec[Number(arr[0])].productSpecList[
+            Number(arr[1])
+          ];
+        if (item) {
+          list.push(item);
+        }
+      }
+    });
+    setCheckItems(list);
+  }, [checkedMap]);
 
   //添加规格到购物车
   function addProductSpec(goodsSpecIndex: number, productSpecIndex: number) {
@@ -27,6 +48,59 @@ export default function IntentionModal(props: Props) {
     });
   }
 
+  //提交
+  function onSubmit() {
+    let buyNum = 0;
+    let mallSpecIds: number[] = [];
+    Object.keys(checkedMap).forEach((key) => {
+      if (checkedMap[key as keyof typeof checkedMap]) {
+        buyNum++;
+        let arr = key.split(",");
+        let specId =
+          props.detail?.goodsSpec[Number(arr[0])].productSpecList[
+            Number(arr[1])
+          ].id;
+        if (specId) {
+          mallSpecIds.push(specId);
+        }
+      }
+    });
+    if (buyNum > 0) {
+      setLoading(true);
+      api
+        .commitMallOrder({
+          buyNum,
+          directoryId: 1,
+          goodsInfoId: props.detail!.id,
+          mallSpecIds,
+          userAddressId: 1,
+        })
+        .then((res) => {
+          if (res.code == "200") {
+            message.success("提交意向成功");
+
+            //重置为未选中
+            let temp = {
+              ...checkedMap
+            };
+            Object.keys(temp).forEach((key) => {
+              temp[key as keyof typeof temp] = false;
+            });
+            setCheckedMap(temp);
+            props.onCancel();
+          }else{
+            
+          }
+          setLoading(false);
+        })
+        .catch((err) => {
+          message.error("提交意向失败");
+          console.log("err", err);
+          setLoading(false);
+        });
+    }
+  }
+
   return (
     <Modal
       open={props.open}
@@ -41,6 +115,8 @@ export default function IntentionModal(props: Props) {
             type="primary"
             className={styles.font5}
             style={{ width: "100%", height: 44 }}
+            onClick={onSubmit}
+            loading={loading}
           >
             提交意向
           </Button>
@@ -68,7 +144,12 @@ export default function IntentionModal(props: Props) {
             className={`${styles.font2} ${styles.ellipsis2}`}
             style={{ marginTop: 7 }}
           >
-            已选:
+            已选:{" "}
+            {checkItems
+              .map((item) => {
+                return item.specName;
+              })
+              .join("+")}
           </div>
         </Col>
       </Row>