暂存

2024-08-30 15:53:34 +08:00 · 2024-08-30 15:53:34 +08:00 · fbfd247a55
commit fbfd247a55
parent c341fc0b11
5 changed files with 167 additions and 7 deletions
--- a/src/components/CouponModal/HeadCouponModal.css
+++ b/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;
+}
--- a/src/components/CouponModal/HeadCouponModal.tsx
+++ b/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>
+    )
+}
--- a/src/layout/head/Head.tsx
+++ b/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',
@ -387,6 +404,7 @@ export default function Head() {
                window.location.href = '/copyright/logout'
            }
        },
+       

    ]

@ -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}
--- a/src/route/proj/ProjNew.tsx
+++ b/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 />
        </>
    )
--- a/src/static/coupon/nouse.png
+++ b/src/static/coupon/nouse.png