feat: 前端暂存

pages/item/components/DetailHead.tsx

 import QqIcon from "@/components/QqIcon"
 import QqIcon from "@/components/QqIcon"
 import type { skuInfoResponseType } from '@/types/detailTypes'
 import type { skuInfoResponseType } from '@/types/detailTypes'
 import styles from '../index.module.scss'
 import styles from '../index.module.scss'
-
+import { Checkbox } from "antd";
 
 
 import { useQq } from "@/hooks/useQq"
 import { useQq } from "@/hooks/useQq"
+import { useState } from "react"
 
 
 const DetailHead = (props: skuInfoResponseType) => {
 const DetailHead = (props: skuInfoResponseType) => {
     const { QQURL,PHONE}=useQq()
     const { QQURL,PHONE}=useQq()
     const sku_info =props!
     const sku_info =props!
+    const [purNum, setPurNum] = useState()
+    const [seArea, setSeArea] = useState('1')
+
+    const handlePurNumChange = (num:any) => setPurNum(num)
+
+    const handlecheckBoxChange = (type:any) => setSeArea(type)
+
+    const handleAddCart = () => {}
+
     return (
     return (
         <>
         <>
             <div className={`${styles.detailHeaders} w1226 row bothSide boxsiz`}>
             <div className={`${styles.detailHeaders} w1226 row bothSide boxsiz`}>
@@ -37,16 +47,30 @@ const DetailHead = (props: skuInfoResponseType) => {
                 <div className={`${styles.r} boxsiz`}>
                 <div className={`${styles.r} boxsiz`}>
                     <p className='row'>
                     <p className='row'>
                         <span className={styles.items}>库存：{sku_info.stock} </span>
                         <span className={styles.items}>库存：{sku_info.stock} </span>
-                        <span className={styles.items}>交期(HK)： {sku_info.hk_delivery_time||'--'}</span>
+                        <span className={styles.items}>
+                            <Checkbox checked={seArea === '2'} onChange={() => handlecheckBoxChange('2')}>A</Checkbox>
+                            交期(HK)： {sku_info.hk_delivery_time||'--'}</span>
                     </p>
                     </p>
                     <p className='row'>
                     <p className='row'>
                         <span className={`${styles.items} row`}><strong>批次：</strong> <strong dangerouslySetInnerHTML={{ __html: sku_info.batch_sn||'--' }}></strong></span>
                         <span className={`${styles.items} row`}><strong>批次：</strong> <strong dangerouslySetInnerHTML={{ __html: sku_info.batch_sn||'--' }}></strong></span>
-                        <span className={styles.items}>交期(大陆)： {sku_info.cn_delivery_time||'--'}</span>
+                        <span className={styles.items}>
+                            <Checkbox checked={seArea === '1'} onChange={() => handlecheckBoxChange('1')}>A</Checkbox>
+                            交期(大陆)： {sku_info.cn_delivery_time||'--'}
+                        </span>
                     </p>
                     </p>
-                    <p className={`${styles.mb23} row`}>
+                    <p className={`row`}>
                         <span className={styles.items}> 起订量： {sku_info.moq}</span>
                         <span className={styles.items}> 起订量： {sku_info.moq}</span>
                         <span className={styles.items}>递增： {sku_info.multiple}</span>
                         <span className={styles.items}>递增： {sku_info.multiple}</span>
                     </p>
                     </p>
+                    <div className="row">
+                        <span className={styles.items}>
+                            <input className={styles.numInput} value={purNum} onChange={handlePurNumChange}/>
+                        </span>
+                        <span className={styles.items}>
+                            <button className={styles.btn} onClick={handleAddCart}>加入购物车</button>
+                            <button className={styles.buyBtn}>立即购买</button>
+                        </span>
+                    </div>
                     {
                     {
                         (sku_info.ladder_price||[]).map((item,index) => {
                         (sku_info.ladder_price||[]).map((item,index) => {
                             return (
                             return (

pages/item/index.module.scss

@@ -59,22 +59,22 @@
                         }
                         }
                     }
                     }
                 }
                 }
-                .btn{
-                    width: 80px;
-                    height: 30px;
-                    background: #FF9A00;
-                    line-height: 30px;
-                    text-align: center;
-                    color:#fff;
-                }
             }
             }
            
            
         }
         }
+        .btn{
+            width: 80px;
+            height: 30px;
+            background: #FF9A00;
+            line-height: 30px;
+            text-align: center;
+            color:#fff;
+        }
         .r{
         .r{
             width: 452px;
             width: 452px;
             min-height: 222px;
             min-height: 222px;
             background: #FFFCF8;
             background: #FFFCF8;
-            padding: 10px 50px;
+            padding: 10px 30px;
             .mb23{
             .mb23{
                 margin-bottom: 24px;
                 margin-bottom: 24px;
             }
             }
@@ -83,10 +83,32 @@
                 font-size: 12px;
                 font-size: 12px;
                 color: #000000;
                 color: #000000;
                 line-height: 25px;
                 line-height: 25px;
-                span{
+                >span{
                     width:50%;
                     width:50%;
                 }
                 }
             }
             }
+
+            .numInput {
+                width: 80px;
+                height: 30px;
+                text-align: center;
+                background: #FFFFFF;
+                border: 1px solid #999999;
+                cursor: pointer;
+                margin-top: 10px;
+            }
+
+            .buyBtn {
+                width: 80px;
+                height: 30px;
+                color: #FF9A00;
+                margin-left: 10px;
+                background: #FFFFFF;
+                border: 1px solid #FF9A00;
+                cursor: pointer;
+                margin-top: 10px;
+                margin-bottom: 15px;
+            }
         }
         }
     }
     }
 
 

server/postShoppingCart.tsx

+import useRequest from "@/hooks/useRequest"
+
+export async function postShoppingCart(data:any) {
+
+    const { request: userRequest } = useRequest<any>({ manual: true, loading: true })
+    const res = await userRequest({
+        url: '/api/cart/cartAdd',
+        method: 'post',
+        data: data
+    })
+     
+    return res
+}
\ No newline at end of file