暂存

src/components/CouponModal/HeadCouponModal.css

@@ -0,0 +1,63 @@
+.headModal-top {
+    display: flex;
+}
+
+.top-title {
+    padding: 8px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #5A5A5A;
+    cursor: pointer;
+}
+
+.top-active {
+    padding: 8px;
+    font-weight: 800;
+    font-size: 16px;
+    color: #1677FF;
+    /* background-color: pink; */
+    cursor: pointer;
+    border-bottom: 3px solid #1677FF;
+}
+.couponList{
+    margin-top: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.nouse{
+    display: flex;
+    height: 118px;
+    width: 730px;
+    /* background-color: pink; */
+    box-shadow: 9px 9px 8px 0px rgba(112, 112, 112, 0.11);
+}
+.nouse-left{
+    width: 205px;
+    height: 118px;
+    /* background-color: skyblue; */
+   background: url(../../static/coupon/nouse.png) no-repeat center center;
+   background-size: cover;
+}
+.nouse-left-num{
+    height: 118px;
+   color: #ffff;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+}
+.nouse-num-top{
+    height: 49px;
+    /* background-color: red; */
+    display: flex;
+    align-items: flex-end;
+    
+}
+.nouse-right{
+    width: 524px;
+    height: 116px;
+    /* background-color: pink; */
+    border: 1px solid rgba(112, 112, 112, 0.11);
+    border-left: 0;
+}

src/components/CouponModal/HeadCouponModal.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import './HeadCouponModal.css'
+import { Button } from 'antd'
+// import nouseImg from '../../static/coupon/nouse.png'
+export default function HeadCouponModal() {
+    const [title, setTitle] = useState('未使用')
+    return (
+        <div>
+            <div className='headModal-top'>
+                <div className={title == '未使用' ? 'top-active' : 'top-title'}
+                    onClick={() => {
+                        setTitle('未使用')
+                    }}
+                >未使用</div>
+                <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
+                    onClick={() => {
+                        setTitle('已使用')
+                    }}
+                >已使用</div>
+                <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
+                    onClick={() => {
+                        setTitle('已过期')
+                    }}
+                >已过期</div>
+            </div>
+            <div className='headModal-bot'>
+                <div style={{ display: title == '未使用' ? 'block' : 'none' }}>
+                    <div className='couponList'>
+                        <div className='nouse'>
+                            <div className='nouse-left'>
+                                {/* <img src={nouseImg} width={'100%'} height={'100%'} alt="" /> */}
+                                <div className='nouse-left-num'>
+                                    <div
+                                        style={{ marginTop: -10 }}
+                                    >
+                                        <span style={{ fontSize: 30 }}>￥</span>
+                                        <span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
+                                    </div>
+                                    {/* <div >
+                                        满100可用
+                                    </div> */}
+                                </div>
+                            </div>
+                            <div className='nouse-right'>
+                                <div>
+                                    可购买平台内任意软著时使用
+                                </div>
+                                <div>
+                                    2024.08.09  12:15:04
+                                </div>
+                                <Button>去使用</Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div style={{ display: title == '已使用' ? 'block' : 'none' }}>
+                    已使用
+                </div>
+                <div style={{ display: title == '已过期' ? 'block' : 'none' }}>
+                    已过期
+                </div>
+            </div>
+        </div>
+    )
+}

src/layout/head/Head.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import BalanceHead from '../../components/balance/BalanceHead.tsx';
 import RechargeHead from '../../components/recharge/RechargeHead.tsx';
 import { Dropdown, MenuProps, message, Modal, Space, Spin, Input } from "antd";
-import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined } from "@ant-design/icons";
+import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined,GiftOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined } from "@ant-design/icons";
 import { useContext, useEffect, useState } from "react";
 import { put, get, post } from "../../util/AjaxUtils.ts";
 import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
@@ -20,6 +20,7 @@ import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
 import inv from '../../static/inv.png'
 import MyOrder from '../../components/myOrder/MyOrder.tsx'
 import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx';
+import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx'
 export default function Head() {
 
     // 消息通知弹窗
@@ -245,6 +246,8 @@ export default function Head() {
         applyContactPhone: '',
         applyContactCompany: ''
     })
+    // 优惠券弹窗
+    const [couponModal,setCouponModal]= useState(false)
     // const [belongArray,setBelongArray] = useState([])
     // // 获取初始所属者数组
     // const getLength = () => {
@@ -372,6 +375,20 @@ export default function Head() {
                 setContactModal(true)
             }
         },
+        {
+            key: 'coupon',
+            label: (
+                <div className="dropdown-item">
+                  <GiftOutlined />
+                    <span className="title">优惠券</span>
+                </div>
+            ),
+            onClick: () => {
+                // reMenuActive()
+                setCouponModal(true)
+                // window.location.href = '/copyright/logout'
+            }
+        },
 
         {
             key: 'logout',
@@ -388,6 +405,7 @@ export default function Head() {
             }
         },
        
+
     ]
 
     return (
@@ -738,6 +756,20 @@ export default function Head() {
                 }}>
                 <NoticeModal></NoticeModal>
             </Modal>
+            <Modal title="优惠券"
+                footer={null}
+
+                destroyOnClose
+                open={couponModal}
+
+                width={809}
+                onCancel={() => {
+                    setCouponModal(false)
+                    // setUnRead(0)
+                }}>
+                    <HeadCouponModal></HeadCouponModal>
+            </Modal>
+            
             <Spin tip="正在提交..." spinning={loading} fullscreen />
             {contextHolder}
             {modalHolder}

src/route/proj/ProjNew.tsx

@@ -20,7 +20,7 @@ type ProjInfo = {
     belongPeople: string;
     contacts: string;
     projDevCompleteDate: string;
-    // coupon?:string
+    coupon?:string
 };
 
 export default function ProjNew() {
@@ -68,7 +68,7 @@ export default function ProjNew() {
         applyContactCompany: ''
     })
     // 优惠券弹窗
-    // const [couponModal,setCouponModal] = useState(false)
+    const [couponModal,setCouponModal] = useState(false)
     const setValue = (value: string) => {
         form.setFieldsValue({
             belongPeople: value
@@ -240,14 +240,14 @@ export default function ProjNew() {
                                     优惠券*
                                 </div>
                                 <Form.Item<ProjInfo>
-                                    // name="coupon"
+                                    name="coupon"
                                     rules={[{ required: true, message: '请选择优惠券' }]}
                                 >
                                     <Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px', color: '#3B3B3B' }} placeholder="请选择优惠券" disabled />
 
                                 </Form.Item>
                                 <div style={{ position: 'absolute', right: 23, fontSize: 16, color: " #1F79FF", cursor: 'pointer' }} onClick={() => {
-                                    // setCouponModal(true)
+                                    setCouponModal(true)
                                 }}>选择</div>
                             </div>
                             <div className='software-protocol'>
@@ -414,7 +414,7 @@ export default function ProjNew() {
 
                 <BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
             </Modal>
-            {/* <Modal title="选择优惠券"
+            <Modal title="选择优惠券"
                 destroyOnClose
 
                 open={couponModal}
@@ -426,7 +426,7 @@ export default function ProjNew() {
 
                 }}>
                     <div>优惠券</div>
-            </Modal> */}
+            </Modal>
             <Spin tip="正在提交..." spinning={loading} fullscreen />
         </>
     )