diff --git a/src/components/CouponModal/HeadCouponModal.css b/src/components/CouponModal/HeadCouponModal.css new file mode 100644 index 0000000..1e07b99 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/components/CouponModal/HeadCouponModal.tsx b/src/components/CouponModal/HeadCouponModal.tsx new file mode 100644 index 0000000..554ebe7 --- /dev/null +++ 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 ( +
+
+
{ + setTitle('未使用') + }} + >未使用
+
{ + setTitle('已使用') + }} + >已使用
+
{ + setTitle('已过期') + }} + >已过期
+
+
+
+
+
+
+ {/* */} +
+
+ + 100 +
+ {/*
+ 满100可用 +
*/} +
+
+
+
+ 可购买平台内任意软著时使用 +
+
+ 2024.08.09 12:15:04 +
+ +
+
+
+
+
+ 已使用 +
+
+ 已过期 +
+
+
+ ) +} diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx index 20d4ff5..1d27775 100644 --- 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: ( +
+ + 优惠券 +
+ ), + 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() { }}> + { + setCouponModal(false) + // setUnRead(0) + }}> + + + {contextHolder} {modalHolder} diff --git a/src/route/proj/ProjNew.tsx b/src/route/proj/ProjNew.tsx index 6e5c2bc..eef2f06 100644 --- 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() { 优惠券* - // name="coupon" + name="coupon" rules={[{ required: true, message: '请选择优惠券' }]} >
{ - // setCouponModal(true) + setCouponModal(true) }}>选择
@@ -414,7 +414,7 @@ export default function ProjNew() { { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}> - {/*
优惠券
-
*/} + ) diff --git a/src/static/coupon/nouse.png b/src/static/coupon/nouse.png new file mode 100644 index 0000000..fae565d Binary files /dev/null and b/src/static/coupon/nouse.png differ