优惠券等信息

src/components/CorrectionModal/CorrectionModal.tsx

@@ -127,7 +127,7 @@ export default function CorrectionModal(props: any) {
     const getData = () => {
         get({
             messageApi,
-            url: `/api/proj/correction/apply/listpage`,
+            url: `/api/proj/correction/apply/listpage/self`,
             config: {
                 params: {
                     page: 1,
@@ -166,7 +166,7 @@ export default function CorrectionModal(props: any) {
 
             },
             onSuccess(data: any) {
-                console.log(data);
+                // console.log(data);
                 // const newArray = (data.data).map((item: { projId: any; projName: any; }) => ({
                 //     value: item.projId,
                 //     label: item.projName

src/components/CouponModal/HeadCouponModal.tsx

@@ -1,35 +1,96 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import './HeadCouponModal.css'
+import { get } from '../../util/AjaxUtils'
+import {
+    Pagination,
+    message,
+    Empty,
+    Spin
+} from 'antd';
 // import { useNavigate } from 'react-router-dom';
 // import {  Empty } from 'antd'
 // import contentImg from '../../static/coupon/content.png'
 import useLogo from '../../static/coupon/useLogo.png'
 import overdueImg from '../../static/coupon/overdueImg.png'
 export default function HeadCouponModal(props: any) {
-
+    const [messageApi, contextHolder] = message.useMessage();
+    const [loading,setLoading] = useState(false)
     const [title, setTitle] = useState('未使用')
+    // 分页
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    // 是否有效
+    const [isEffective, setisEffective] = useState(1)
+    const [isUsed, setisUsed] = useState(0)
+    // 展示的优惠券数组
+    const [couponArray, setCouponArray] = useState<any[]>([])
+    // 获取优惠券信息
+    const getCouponData = () => {
+        get({
+            messageApi,
+            url: `/api/coupon/user/listpage/self`,
+            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 10,
+                    isEffective,
+                    isUsed,
+                }
+            },
+            onBefore() {
+                setLoading(true)
+            },
+            onSuccess(data: any) {
+                setTotal(data.data.total)
+                setCouponArray(data.data.rows)
+            },
+            onFinally() {
+                setLoading(false)
+            },
+        })
+    }
+    useEffect(() => {
+        getCouponData()
+    }, [])
+    useEffect(() => {
+        getCouponData()
+    }, [page, isEffective, isUsed])
     return (
         <div className='headModal'>
+            {contextHolder}
             <div className='headModal-top'>
                 <div className={title == '未使用' ? 'top-active' : 'top-title'}
                     onClick={() => {
                         setTitle('未使用')
+                        setisUsed(0)
+                        setisEffective(1)
+                        setPage(1)
                     }}
                 >未使用</div>
                 <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                     onClick={() => {
                         setTitle('已使用')
+                        setisUsed(1)
+                        setisEffective(1)
+                        setPage(1)
                     }}
                 >已使用</div>
                 <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
                     onClick={() => {
                         setTitle('已过期')
+                        setisUsed(0)
+                        setisEffective(0)
+                        setPage(1)
                     }}
                 >已过期</div>
             </div>
             <div className='headModal-bot'>
+                <Spin tip="加载中，请稍后..." size="small" spinning={loading}>
                     <div style={{ display: title == '未使用' ? 'block' : 'none' }}>
-                    <div className='couponList'>
+                        {couponArray.map((item) => {
+                            return (
+                                <div className='couponList' key={item.couponId}>
                                     <div className='content'>
                                         <div className='content-noUse-left'>
                                             <div className='content-left-num'>
@@ -37,7 +98,7 @@ export default function HeadCouponModal(props: any) {
                                                     style={{ marginTop: -10 }}
                                                 >
                                                     <span style={{ fontSize: 30 }}>￥</span>
-                                        <span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
+                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                 </div>
 
                                             </div>
@@ -48,7 +109,7 @@ export default function HeadCouponModal(props: any) {
                                             </div>
                                             <div className='content-bot'>
                                                 <div className='content-time'>
-                                        2024.08.09  12:15:04
+                                                    {item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
                                                 </div>
                                                 <div className='content-button' onClick={() => {
                                                     props.closeModal()
@@ -62,15 +123,28 @@ export default function HeadCouponModal(props: any) {
 
                                 </div>
 
+                            )
+                        })}
 
-
+                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
-
+                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    {/* <div className='noDatebox'>
+                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
+                                    onChange={(value) => {
+                                        setPage(value)
+                                    }}
+                                />
+                            </div>
+                        </div>
+                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
+                            <div className='noDatebox'>
                                 <Empty description="暂无    优惠券" />
-                    </div> */}
+                            </div>
+                        </div>
                     </div>
                     <div style={{ display: title == '已使用' ? 'block' : 'none' }}>
-                    <div className='couponList'>
+                        {couponArray.map((item) => {
+                            return (
+                                <div className='couponList' key={item.couponId}>
                                     <div className='content'>
                                         <div className='content-use-left'>
                                             <div className='content-left-num'>
@@ -78,7 +152,7 @@ export default function HeadCouponModal(props: any) {
                                                     style={{ marginTop: -10 }}
                                                 >
                                                     <span style={{ fontSize: 30 }}>￥</span>
-                                        <span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
+                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                 </div>
 
                                             </div>
@@ -89,12 +163,13 @@ export default function HeadCouponModal(props: any) {
                                             </div>
                                             <div className='content-bot' style={{ marginTop: 5 }}>
                                                 <div className='content-time'>
-                                        2024.08.09  12:15:04
+                                                    {item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
                                                 </div>
 
                                             </div>
                                             <div className='content-projName'>
-                                    xxxxxxx系统
+                                                {/* 使用的产品 */}
+                                                {item.productName}
                                             </div>
                                         </div>
 
@@ -103,10 +178,27 @@ export default function HeadCouponModal(props: any) {
                                         <img src={useLogo} alt="" width={'100%'} height={'100%'} />
                                     </div>
                                 </div>
+                            )
+                        })}
+                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
+                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
+                                    onChange={(value) => {
+                                        setPage(value)
+                                    }} />
+                            </div>
+                        </div>
+                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
+                            <div className='noDatebox'>
+                                <Empty description="无已使用优惠券" />
+                            </div>
+                        </div>
 
                     </div>
                     <div style={{ display: title == '已过期' ? 'block' : 'none' }}>
-                    <div className='couponList'>
+                        {couponArray.map((item) => {
+                            return (
+                                <div className='couponList' key={item.couponId}>
                                     <div className='content'>
                                         <div className='content-use-left'>
                                             <div className='content-left-num'>
@@ -114,7 +206,7 @@ export default function HeadCouponModal(props: any) {
                                                     style={{ marginTop: -10 }}
                                                 >
                                                     <span style={{ fontSize: 30 }}>￥</span>
-                                        <span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
+                                                    <span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
                                                 </div>
 
                                             </div>
@@ -125,7 +217,7 @@ export default function HeadCouponModal(props: any) {
                                             </div>
                                             <div className='content-bot'>
                                                 <div className='content-time'>
-                                        有效期至:2024.08.09  12:15:04
+                                                    有效期至:{item.coupon.gmtEnd}
                                                 </div>
                                             </div>
                                         </div>
@@ -136,9 +228,25 @@ export default function HeadCouponModal(props: any) {
 
 
                                 </div>
-                    
+                            )
+                        })}
+                        <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
+                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                                <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
+                                    onChange={(value) => {
+                                        setPage(value)
+                                    }}
+                                />
                             </div>
                         </div>
+                        <div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
+                            <div className='noDatebox'>
+                                <Empty description="无已过期优惠券" />
+                            </div>
+                        </div>
+                    </div>
+                </Spin>
+            </div>
         </div>
     )
 }

src/components/CouponModal/SelectCouponModal.css

@@ -37,7 +37,7 @@
 
 .select-use-couBox {
     margin-top: 10px;
-    height: 420px;
+    max-height: 420px;
     /* background-color: skyblue; */
     overflow: auto;
 

src/components/CouponModal/SelectCouponModal.tsx

@@ -1,12 +1,62 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { CheckOutlined } from '@ant-design/icons';
 import './SelectCouponModal.css'
+import { get } from '../../util/AjaxUtils'
+import {
+    Pagination,
+    message,
+    Button,
+    Spin
+} from 'antd';
 import coupon from '../../static/coupon/coupon.png'
 import bigCoupon from '../../static/coupon/bigCoupon.png'
-export default function SelectCouponModal() {
+export default function SelectCouponModal(props: any) {
-    const [couponId, setCouponId] = useState('')
+    const [loading,setLoading] = useState(false)
+    const [messageApi, contextHolder] = message.useMessage();
+    // 分页
+    const [page, setPage] = useState(1)
+    const [total, setTotal] = useState(0)
+    // 展示的优惠券数组
+    const [couponArray, setCouponArray] = useState<any[]>([])
+    // 已选优惠券id
+    const [selectCouponId, setSelectCouponId] = useState(props.couponId?props.couponId:'')
+    // 已选的优惠券优惠金额
+    const [sleectCouponNum, setSelectCouponNum] = useState(0)
+    // 已选优惠券信息
+    const [selectCouponTitle, setSelectCouponTitle] = useState('')
+    // 获取优惠券信息
+    const getCouponData = () => {
+        get({
+            messageApi,
+            url: `/api/coupon/user/listpage/self`,
+            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
+            config: {
+                params: {
+                    page: page,
+                    rows: 10,
+                    isEffective: 1,
+                    isUsed: 0,
+                }
+            },
+            onBefore() {
+                setLoading(true)
+            },
+            onSuccess(data: any) {
+                setTotal(data.data.total)
+                console.log(data.data.rows);
+                setCouponArray(data.data.rows)
+            },
+            onFinally() {
+                setLoading(false)
+            },
+        })
+    }
+    useEffect(() => {
+        getCouponData()
+    }, [])
     return (
         <div>
+            {contextHolder}
             <div className='select-top'>
                 <div className='selectTop-left'>
                     <img src={coupon} alt="" width={39} height={39} style={{ marginLeft: 10 }} />
@@ -15,34 +65,44 @@ export default function SelectCouponModal() {
                     </div>
                 </div>
                 <div className='selectTop-right' >
-                    <div style={{ fontSize: 18, fontWeight: 600 }}>共减￥</div>
+
-                    <div style={{ fontSize: 26, fontWeight: 700 }}>100.00</div>
+                    <div style={{ fontSize: 18, fontWeight: 600, display: sleectCouponNum ? 'unset' : 'none' }}>共减￥</div>
+                    <div style={{ fontSize: 26, fontWeight: 700, display: sleectCouponNum ? 'unset' : 'none' }}>{sleectCouponNum.toFixed(2)}</div>
+
                 </div>
             </div>
             <div className='select-use'>
                 <div className='select-use-title'>
                     可使用优惠券
                 </div>
+                <Spin tip="加载中，请稍后..." size="small" spinning={loading}>
                 <div className='select-use-couBox'>
-                    <div
+                    {couponArray.map((item) => {
+                        return (<div
+                            key={item.couponId}
                             // className='use-coupon'
-                        className={couponId == '1' ? 'use-coupon select-active' : 'use-coupon'}
+                            className={selectCouponId == item.couponId ? 'use-coupon select-active' : 'use-coupon'}
                             onClick={() => {
                                 // setCouponId('1')
-                            if(couponId=='1'){
+                                if (selectCouponId == item.couponId) {
-                                setCouponId('')
+                                    setSelectCouponId('')
+                                    setSelectCouponNum(0)
+                                    setSelectCouponTitle('')
                                 } else {
-                                setCouponId('1')
+                                    setSelectCouponId(item.couponId)
+                                    setSelectCouponNum(item.coupon.amount / 100)
+                                    setSelectCouponTitle(item.coupon.title)
                                 }
                             }}>
                             <div className='use-coupon-left'>
                                 <img src={bigCoupon} alt="" width={81} height={73} />
                                 <div className='use-coupon-text'>
                                     <div className='use-coupon-title'>
-                                    减100元
+                                        {/* 减{item.coupon.amount / 100}元 */}
+                                        {item.coupon.title}
                                     </div>
                                     <div className='use-coupon-time'>
-                                    有效期至2024.08.29 12:12:07
+                                        有效期至{item.coupon.gmtEnd}
                                     </div>
                                 </div>
 
@@ -50,10 +110,10 @@ export default function SelectCouponModal() {
                             <div className='use-coupon-right'>
                                 <div className='coupon-right-num'>
                                     <div style={{ fontSize: 16, fontWeight: 600 }}>减￥</div>
-                                <div style={{ fontSize: 25, fontWeight: 700 }}>100.00</div>
+                                    <div style={{ fontSize: 25, fontWeight: 700 }}>{(item.coupon.amount / 100).toFixed(2)}</div>
                                 </div>
                                 {
-                                couponId == '1' ? (
+                                    selectCouponId == item.couponId ? (
                                         <div className='select-box' >
                                             <CheckOutlined />
                                         </div>
@@ -64,9 +124,45 @@ export default function SelectCouponModal() {
                                 }
 
 
+                            </div>
+                        </div>)
+                    })}
+
+                    <div style={{ display: couponArray.length > 10 ? 'unset' : 'none' }}>
+                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                            <Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false}
+                                onChange={(value) => {
+                                    setPage(value)
+                                }} />
                         </div>
                     </div>
 
+
+                </div>
+                </Spin>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', paddingBottom: 10 }}>
+                    <Button size='large'
+                        onClick={() => {
+                            props.closeModal()
+                        }}
+                    >取消</Button>
+                    <Button size='large' type="primary" style={{ marginLeft: 10 }}
+                        onClick={() => {
+                            console.log(selectCouponId);
+                            if (selectCouponId) {
+                                props.setCouponId(selectCouponId)
+                                props.setCouponNum(sleectCouponNum)
+                                props.setCouponTitle(selectCouponTitle)
+                                props.closeModal()
+                            } else{
+                                props.setCouponId('')
+                                props.setCouponNum('')
+                                props.setCouponTitle('')
+                                props.closeModal()
+                            }
+
+                        }}
+                    >确定</Button>
                 </div>
             </div>
         </div>

src/components/RefunModal/RefunModal.tsx

@@ -121,7 +121,7 @@ export default function RefunModal(props: any) {
     const getData = () => {
         get({
             messageApi,
-            url: `/api/proj/refund/apply/listpage`,
+            url: `/api/proj/refund/apply/listpage/self`,
             config: {
                 params: {
                     page: 1,

src/components/card/CardProj.tsx

@@ -339,16 +339,17 @@ export default function CardProj(props: any) {
                                 <div className='cpbl-money'
                                     style={{ background: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#f7edce' : '#ebebeb' }}
                                 >
-                                    <span className='money'
+                                    <div className='money'
                                         style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}
 
-                                    >金额(￥) : </span>
+                                    >金额(￥) : </div>
-                                    <span className='num'
+                                    <div className='num'
                                         style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}
 
                                     >
                                         {data.pay.payment / 100}
-                                    </span>
+                                    </div>
+                                    <div className='coupon-num' style={{display:data.pay.couponAmount?'unset':'none',color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}>(已优惠{data.pay.couponAmount/100}元)</div>
                                 </div>
                                 <div className='otherMoney'>
                                     {/* <div>基础费用:{basicsValue}</div> */}

src/components/card/card-proj.css

@@ -185,7 +185,9 @@
 }
 
 .cpbl-money {
-    width: 210px;
+    min-width: 210px;
+    padding: 0 20px;
+    box-sizing: border-box;
     height: 47px;
     /* padding-left: 27px;
     padding-right: 37px; */
@@ -207,7 +209,16 @@
     font-weight: bold;
     font-size: 24px;
     color: #FF5D15;
-    margin-left: 15px;
+    margin-left: 10px;
+
+}
+.coupon-num{
+    font-size: 12px;
+    color: #FF5D15;
+    margin-left: 5px;
+    font-weight: 700;
+    /* background-color: red; */
+    margin-top: 8px;
    
 }
 .otherMoney{

src/components/menu/MenuWithTopButton.tsx

@@ -33,7 +33,7 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
         <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
             props.handleListItem(e, index, item);
             setMenuActive(item.id)
-            console.log(item.id);
+            // console.log(item.id);
 
             // const goHome = item.id == 'ALL' || item.id == 'PROCESSING' || item.id == 'COMPLETE'
             // if (props.button.name == '项目') {

src/route/Correction/Correction.tsx

@@ -582,7 +582,7 @@ export default function Correction() {
     const getData = (page: number) => {
         get({
             messageApi,
-            url: `/api/proj/correction/apply/listpage`,
+            url: `/api/proj/correction/apply/listpage/self`,
             // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
             config: {
                 params: {
@@ -630,7 +630,7 @@ export default function Correction() {
                 messageApi.success('已撤销');
                 get({
                     messageApi,
-                    url: `/api/proj/correction/apply/listpage`,
+                    url: `/api/proj/correction/apply/listpage/self`,
                     // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
                     config: {
                         params: {

src/route/Refun/Refun.tsx

@@ -408,7 +408,7 @@ export default function Refun() {
     const getData = (page: number) => {
         get({
             messageApi,
-            url: `/api/proj/refund/apply/listpage`,
+            url: `/api/proj/refund/apply/listpage/self`,
             // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
             config: {
                 params: {
@@ -454,7 +454,7 @@ export default function Refun() {
                 messageApi.success('已撤销');
                 get({
                     messageApi,
-                    url: `/api/proj/refund/apply/listpage`,
+                    url: `/api/proj/refund/apply/listpage/self`,
                     // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
                     config: {
                         params: {

src/route/index/Index.tsx

@@ -33,7 +33,7 @@ import {
     CloseOutlined
 } from '@ant-design/icons';
 import { useLocation } from 'react-router-dom';
-import { get } from '../../util/AjaxUtils.ts'
+import { get, downloadUrl,post } from '../../util/AjaxUtils.ts'
 import { setMenuActive } from '../../util/cache.ts'
 import gpsImg from '../../static/right/gps.png'
 import backImg from '../../static/right/back.png'
@@ -81,8 +81,7 @@ export default function Index() {
     const belongArray = redxuState.belongArray
     // 优惠券弹窗
     const couponModal = redxuState.couponModal
-    // 是否有优惠券
+
-    const [coupon, setCoupon] = useState(false)
     // 编辑项目得项目名
     const projName = redxuState.projName
     // 项目状态 查看还是编辑
@@ -484,14 +483,72 @@ export default function Index() {
     const [showSearchBox, setShowSearchBox] = useState(true)
     const [refunSearchBox, setRrefunSearchBox] = useState(false)
     const [correctionSearchBox, setCorrectionSearchBox] = useState(false)
-    useEffect(() => {
+    // 优惠券遮罩层是否i西安市
-        // const nowname = sessionStorage.getItem('now')
+    const [coupon, setCoupon] = useState(false)
-        if (location.pathname == '/') {
+    //优惠券id
+    const [couponId, setCouponId] = useState('')
+    // 优惠券图片   const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${data.data.couponId}`;
+    const [cpuponImg, setCouponImg] = useState('')
+    // 获取是否有优惠券信息
+    const getCoupon = () => {
+        get({
+            messageApi,
+            url: `/api/coupon/get-can-claim`,
+            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
+            config: {
+                params: {
+
+                }
+            },
+            onBefore() {
+
+            },
+            onSuccess(data: any) {
+                // console.log(data.data);
+                if (data.data.couponId) {
+                    setCouponId(data.data.couponId)
+                    setCouponImg(data.data.logo)
                     setCoupon(true)
                 }
 
+            },
+            onFinally() {
+
+            },
+        })
+    }
+    // 领取优惠券
+    const receiveCoupon = () => {
+        post<any>({
+            messageApi,
+            url: `/api/coupon/user/save`,
+            body: {
+                couponId:couponId
+            },
+            onBefore() {
+                
+            },
+            onSuccess() {
+               messageApi.success('领取成功')
+               setTimeout(()=>{
+                    setCoupon(false)
+               },500)
+            },
+            onFinally() {
+               
+            }
+        })
+     }
+    useEffect(() => {
+        // const nowname = sessionStorage.getItem('now')
+        if (location.pathname == '/') {
+            // setCoupon(true)
+            getCoupon()
+        }
+
         if (location.pathname.includes('/home')) {
-            setCoupon(true)
+            // setCoupon(true)
+            getCoupon()
             setNow('首页-项目')
             // setPathArray([{ title: '首页' }])
             setShowSearchBox(true)
@@ -1516,12 +1573,17 @@ export default function Index() {
             <div className='couponMask-box' style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) ? 'unset' : 'none' }}>
                 <div className='couponMask'>
                     <div className='couponMask-img'>
-                        <img src={gpsImg} alt="" width={'100%'} height={'100%'} onClick={() => {
-                            setCoupon(false)
-                            setMenuActive('ALL')
-                            nav('/proj-create')
 
-                        }} />
+                        <img src={downloadUrl(cpuponImg, false)} alt="" width={'100%'} height={'100%'} onClick={() => {
+
+                        }}
+                            className='testImg'
+                        />
+                        <div className='couponMask-btn' onClick={() => {
+                            receiveCoupon()
+                        }}>
+                            立即领取
+                        </div>
                     </div>
                     <div className='couponMask-close' onClick={() => {
                         setCoupon(false)

src/route/index/index.css

@@ -27,10 +27,25 @@
 }
 .couponMask-img{
     width: 613px;
-    height: 556px;
+    height: 475px;
-    background-color: skyblue;
+    /* background-color: skyblue; */
+    /* cursor: pointer; */
+    position: relative;
+}
+.couponMask-btn{
+    position: absolute;
+    bottom: -20px;
+    left: 156.5px;
+    width: 300px;
+    height: 60px;
+    border-radius: 30px;
+    color: white;
+    font-size: 25px;
+    text-align: center;
+    line-height: 60px;
+    font-weight: 700;
+    background-color: #4180FF;
     cursor:  pointer;
-
 }
 .couponMask-close {
     width: 65px;

src/route/proj/ProjNew.tsx

@@ -85,6 +85,45 @@ export default function ProjNew() {
     const [createProjId, setCreateProjId] = useState('');
     const oldlistProjChargeAdditional: string[] = [];
     const [listProjChargeAdditional, setlistProjChargeAdditional] = useState<string[]>([])
+    // 是否可用优惠券
+    const [hasCoupon, setHasCoupon] = useState(false)
+    // 给优惠券栏赋值
+    const setCouponTitle = (value: string) => {
+        form.setFieldsValue({
+            coupon: value
+        });
+    }
+    // 优惠券id
+    const [couponId, setCouponId] = useState('')
+    // 优惠券减的钱数
+    const [couponNum, setCouponNum] = useState(0)
+    // 查看是否有可用获取优惠券信息
+    const getCouponData = () => {
+        get({
+            messageApi,
+            url: `/api/coupon/user/listpage/self`,
+            // url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
+            config: {
+                params: {
+                    page: 1,
+                    rows: 10,
+                    isEffective: 1,
+                    isUsed: 0,
+                }
+            },
+            onBefore() {
+
+            },
+            onSuccess(data: any) {
+                if (data.data.rows.length > 0) {
+                    setHasCoupon(true)
+                }
+            },
+            onFinally() {
+
+            },
+        })
+    }
     useEffect(() => {
         get({
             messageApi: messageApi,
@@ -150,6 +189,7 @@ export default function ProjNew() {
         if (pathParams.projChargeType == 'FREE') {
             setcouponShow(false)
         }
+        getCouponData()
     }, []);
 
     return (
@@ -245,17 +285,22 @@ export default function ProjNew() {
                             <div style={{ display: couponShow ? 'unset' : 'none' }}>
                                 <div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}>
                                     <div className='formItem-title '>
-                                        优惠券*
+                                        优惠券
                                     </div>
                                     <Form.Item<ProjInfo>
                                         name="coupon"
-                                        rules={[{ required: true, message: '请选择优惠券' }]}
+                                    // rules={[{ required: true, message: '请选择优惠券' }]}
                                     >
-                                        <Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px', color: '#3B3B3B' }} placeholder="请选择优惠券" disabled />
+                                        <Input style={{ background: '#eeeeee', fontSize: 16, width: '800px', height: '50px', color: '#3B3B3B' }} placeholder={hasCoupon ? '请选择优惠券' : '暂无可用优惠券'} disabled />
 
                                     </Form.Item>
-                                    <div style={{ position: 'absolute', right: 23, fontSize: 16, color: " #1F79FF", cursor: 'pointer' }} onClick={() => {
+                                    <div style={{ position: 'absolute', right: 23, fontSize: 16, color: hasCoupon ? '#1F79FF' : '#676767', cursor: 'pointer' }} onClick={() => {
+                                        if (hasCoupon) {
                                             setCouponModal(true)
+                                            // #1F79FF
+                                        } else {
+                                            messageApi.error('无可用优惠券')
+                                        }
                                     }}>选择</div>
                                 </div>
                             </div>
@@ -351,7 +396,9 @@ export default function ProjNew() {
                             applyContactId: concatPeopleInfo.applyConcatId,
                             applyContactName: concatPeopleInfo.applyContactName,
                             applyContactPhone: concatPeopleInfo.applyContactPhone,
-                            projVersion: 'v1.0'
+                            projVersion: 'v1.0',
+
+                            couponId:couponId?couponId:'',
                         },
                         onBefore() {
                             setLoading(true);
@@ -374,8 +421,10 @@ export default function ProjNew() {
                 }}
                 onCancel={() => {
                     setIsCreateModalOpen(false);
+                 
+                    
                 }}>
-                <div>该操作会扣除 {chargePrice / 100} 元，确定操作码？</div>
+                <div>该操作会扣除 {(chargePrice / 100 - couponNum)<0?0:chargePrice / 100 - couponNum} 元，确定操作码？</div>
             </Modal>
             <Modal title="提示"
                 okText="确定"
@@ -434,7 +483,22 @@ export default function ProjNew() {
                     setCouponModal(false)
 
                 }}>
-                <SelectCouponModal ></SelectCouponModal>
+                <SelectCouponModal
+                    couponId={couponId}
+                    setCouponId={(value: string) => {
+                        setCouponId(value)
+                    }}
+                    couponNum = {couponNum}
+                    setCouponNum={(value: number) => {
+                        setCouponNum(value)
+                    }}
+                    setCouponTitle={(value: string) => {
+                        setCouponTitle(value)
+                    }}
+                    closeModal={() => {
+                        setCouponModal(false)
+                    }}
+                ></SelectCouponModal>
             </Modal>
             <Spin tip="正在提交..." spinning={loading} fullscreen />
         </>