Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优惠券等信息

Browse Source
This commit is contained in:
xixi 2024-09-06 17:26:09 +08:00
parent 0ccd04e96b
commit 8ff370701d
13 changed files with 537 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CorrectionModal/CorrectionModal.tsx
View File

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

302
src/components/CouponModal/HeadCouponModal.tsx
View File

@ -1,143 +1,251 @@
import { useState } from 'react' import { useEffect, useState } from 'react'
import './HeadCouponModal.css' import './HeadCouponModal.css'
import { get } from '../../util/AjaxUtils'
import {
Pagination,
message,
Empty,
Spin
} from 'antd';
// import { useNavigate } from 'react-router-dom'; // import { useNavigate } from 'react-router-dom';
// import { Empty } from 'antd' // import { Empty } from 'antd'
// import contentImg from '../../static/coupon/content.png' // import contentImg from '../../static/coupon/content.png'
import useLogo from '../../static/coupon/useLogo.png' import useLogo from '../../static/coupon/useLogo.png'
import overdueImg from '../../static/coupon/overdueImg.png' import overdueImg from '../../static/coupon/overdueImg.png'
export default function HeadCouponModal(props: any) { export default function HeadCouponModal(props: any) {
const [messageApi, contextHolder] = message.useMessage();
const [loading,setLoading] = useState(false)
const [title, setTitle] = useState('未使用') 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 ( return (
<div className='headModal'> <div className='headModal'>
{contextHolder}
<div className='headModal-top'> <div className='headModal-top'>
<div className={title == '未使用' ? 'top-active' : 'top-title'} <div className={title == '未使用' ? 'top-active' : 'top-title'}
onClick={() => { onClick={() => {
setTitle('未使用') setTitle('未使用')
setisUsed(0)
setisEffective(1)
setPage(1)
}} }}
>未使用</div> >未使用</div>
<div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }} <div className={title == '已使用' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
onClick={() => { onClick={() => {
setTitle('已使用') setTitle('已使用')
setisUsed(1)
setisEffective(1)
setPage(1)
}} }}
>已使用</div> >已使用</div>
<div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }} <div className={title == '已过期' ? 'top-active' : 'top-title'} style={{ marginLeft: 50 }}
onClick={() => { onClick={() => {
setTitle('已过期') setTitle('已过期')
setisUsed(0)
setisEffective(0)
setPage(1)
}} }}
>已过期</div> >已过期</div>
</div> </div>
<div className='headModal-bot'> <div className='headModal-bot'>
<div style={{ display: title == '未使用' ? 'block' : 'none' }}> <Spin tip="加载中，请稍后..." size="small" spinning={loading}>
<div className='couponList'> <div style={{ display: title == '未使用' ? 'block' : 'none' }}>
<div className='content'> {couponArray.map((item) => {
<div className='content-noUse-left'> return (
<div className='content-left-num'> <div className='couponList' key={item.couponId}>
<div <div className='content'>
style={{ marginTop: -10 }} <div className='content-noUse-left'>
> <div className='content-left-num'>
<span style={{ fontSize: 30 }}>￥</span> <div
<span style={{ fontSize: 60, fontWeight: 700 }}>100</span> style={{ marginTop: -10 }}
>
<span style={{ fontSize: 30 }}>￥</span>
<span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
</div>
</div>
</div>
<div className='content-right'>
<div className='content-text'>
可购买平台内任意软著时使用
</div>
<div className='content-bot'>
<div className='content-time'>
{item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
</div>
<div className='content-button' onClick={() => {
props.closeModal()
}}>
去使用
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
<div className='content-right'>
<div className='content-text'>
可购买平台内任意软著时使用
</div>
<div className='content-bot'>
<div className='content-time'>
2024.08.09 12:15:04
</div>
<div className='content-button' onClick={() => {
props.closeModal()
}}>
去使用
</div>
</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>
<div style={{ display: couponArray.length <= 0 ? 'unset' : 'none' }}>
</div> <div className='noDatebox'>
<Empty description="暂无 优惠券" />
{/* <div className='noDatebox'>
<Empty description="暂无优惠券" />
</div> */}
</div>
<div style={{ display: title == '已使用' ? 'block' : 'none' }}>
<div className='couponList'>
<div className='content'>
<div className='content-use-left'>
<div className='content-left-num'>
<div
style={{ marginTop: -10 }}
>
<span style={{ fontSize: 30 }}>￥</span>
<span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
</div>
</div>
</div> </div>
<div className='content-right'>
<div className='content-text' style={{ marginTop: 10 }}>
可购买平台内任意软著时使用
</div>
<div className='content-bot' style={{ marginTop: 5 }}>
<div className='content-time'>
2024.08.09 12:15:04
</div>
</div>
<div className='content-projName'>
xxxxxxx系统
</div>
</div>
</div>
<div className='use-img'>
<img src={useLogo} alt="" width={'100%'} height={'100%'} />
</div> </div>
</div> </div>
<div style={{ display: title == '已使用' ? 'block' : 'none' }}>
{couponArray.map((item) => {
return (
<div className='couponList' key={item.couponId}>
<div className='content'>
<div className='content-use-left'>
<div className='content-left-num'>
<div
style={{ marginTop: -10 }}
>
<span style={{ fontSize: 30 }}>￥</span>
<span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
</div>
</div>
</div>
<div className='content-right'>
<div className='content-text' style={{ marginTop: 10 }}>
可购买平台内任意软著时使用
</div>
<div className='content-bot' style={{ marginTop: 5 }}>
<div className='content-time'>
{item.coupon.gmtStart} 至 {item.coupon.gmtEnd}
</div>
</div>
<div className='content-projName'>
{/* 使用的产品 */}
{item.productName}
</div>
</div>
</div>
<div style={{ display: title == '已过期' ? 'block' : 'none' }}>
<div className='couponList'>
<div className='content'>
<div className='content-use-left'>
<div className='content-left-num'>
<div
style={{ marginTop: -10 }}
>
<span style={{ fontSize: 30 }}>￥</span>
<span style={{ fontSize: 60, fontWeight: 700 }}>100</span>
</div> </div>
<div className='use-img'>
</div> <img src={useLogo} alt="" width={'100%'} height={'100%'} />
</div>
<div className='content-right'>
<div className='content-text'>
可购买平台内任意软著时使用
</div>
<div className='content-bot'>
<div className='content-time'>
有效期至:2024.08.09 12:15:04
</div> </div>
</div> </div>
</div> )
<div className='use-img' style={{height:76,width:88}}> })}
<img src={overdueImg} alt="" width={'100%'} height={'100%'} /> <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> </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> {couponArray.map((item) => {
return (
<div className='couponList' key={item.couponId}>
<div className='content'>
<div className='content-use-left'>
<div className='content-left-num'>
<div
style={{ marginTop: -10 }}
>
<span style={{ fontSize: 30 }}>￥</span>
<span style={{ fontSize: 60, fontWeight: 700 }}>{item.coupon.amount / 100}</span>
</div>
</div>
</div>
<div className='content-right'>
<div className='content-text'>
可购买平台内任意软著时使用
</div>
<div className='content-bot'>
<div className='content-time'>
有效期至:{item.coupon.gmtEnd}
</div>
</div>
</div>
<div className='use-img' style={{ height: 76, width: 88 }}>
<img src={overdueImg} alt="" width={'100%'} height={'100%'} />
</div>
</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>
</Spin>
</div> </div>
</div> </div>
) )

2
src/components/CouponModal/SelectCouponModal.css
View File

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

182
src/components/CouponModal/SelectCouponModal.tsx
View File

@ -1,12 +1,62 @@
import { useState } from 'react' import { useState, useEffect } from 'react'
import { CheckOutlined } from '@ant-design/icons'; import { CheckOutlined } from '@ant-design/icons';
import './SelectCouponModal.css' import './SelectCouponModal.css'
import { get } from '../../util/AjaxUtils'
import {
Pagination,
message,
Button,
Spin
} from 'antd';
import coupon from '../../static/coupon/coupon.png' import coupon from '../../static/coupon/coupon.png'
import bigCoupon from '../../static/coupon/bigCoupon.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 ( return (
<div> <div>
{contextHolder}
<div className='select-top'> <div className='select-top'>
<div className='selectTop-left'> <div className='selectTop-left'>
<img src={coupon} alt="" width={39} height={39} style={{ marginLeft: 10 }} /> <img src={coupon} alt="" width={39} height={39} style={{ marginLeft: 10 }} />
@ -14,59 +64,105 @@ export default function SelectCouponModal() {
优惠券 优惠券
</div> </div>
</div> </div>
<div className='selectTop-right'> <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> </div>
<div className='select-use'> <div className='select-use'>
<div className='select-use-title'> <div className='select-use-title'>
可使用优惠券 可使用优惠券
</div> </div>
<Spin tip="加载中，请稍后..." size="small" spinning={loading}>
<div className='select-use-couBox'> <div className='select-use-couBox'>
<div {couponArray.map((item) => {
// className='use-coupon' return (<div
className={couponId == '1' ? 'use-coupon select-active' : 'use-coupon'} key={item.couponId}
onClick={() => { // className='use-coupon'
// setCouponId('1') className={selectCouponId == item.couponId ? 'use-coupon select-active' : 'use-coupon'}
if(couponId=='1'){ onClick={() => {
setCouponId('') // setCouponId('1')
}else{ if (selectCouponId == item.couponId) {
setCouponId('1') setSelectCouponId('')
} setSelectCouponNum(0)
}}> setSelectCouponTitle('')
<div className='use-coupon-left'> } else {
<img src={bigCoupon} alt="" width={81} height={73} /> setSelectCouponId(item.couponId)
<div className='use-coupon-text'> setSelectCouponNum(item.coupon.amount / 100)
<div className='use-coupon-title'> setSelectCouponTitle(item.coupon.title)
减100元 }
</div> }}>
<div className='use-coupon-time'> <div className='use-coupon-left'>
有效期至2024.08.29 12:12:07 <img src={bigCoupon} alt="" width={81} height={73} />
</div> <div className='use-coupon-text'>
</div> <div className='use-coupon-title'>
{/* 减{item.coupon.amount / 100}元 */}
</div> {item.coupon.title}
<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>
{
couponId == '1' ? (
<div className='select-box' >
<CheckOutlined />
</div> </div>
) : ( <div className='use-coupon-time'>
<div className='noselect-box' > 有效期至{item.coupon.gmtEnd}
</div> </div>
) </div>
}
</div>
<div className='use-coupon-right'>
<div className='coupon-right-num'>
<div style={{ fontSize: 16, fontWeight: 600 }}>减￥</div>
<div style={{ fontSize: 25, fontWeight: 700 }}>{(item.coupon.amount / 100).toFixed(2)}</div>
</div>
{
selectCouponId == item.couponId ? (
<div className='select-box' >
<CheckOutlined />
</div>
) : (
<div className='noselect-box' >
</div>
)
}
</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> </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> </div>
</div> </div>

2
src/components/RefunModal/RefunModal.tsx
View File

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

9
src/components/card/CardProj.tsx
View File

@ -339,16 +339,17 @@ export default function CardProj(props: any) {
<div className='cpbl-money' <div className='cpbl-money'
style={{ background: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#f7edce' : '#ebebeb' }} 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' }} 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' }} style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}
> >
{data.pay.payment / 100} {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>
<div className='otherMoney'> <div className='otherMoney'>
{/* <div>基础费用:{basicsValue}</div> */} {/* <div>基础费用:{basicsValue}</div> */}

15
src/components/card/card-proj.css
View File

@ -185,7 +185,9 @@
} }
.cpbl-money { .cpbl-money {
width: 210px; min-width: 210px;
padding: 0 20px;
box-sizing: border-box;
height: 47px; height: 47px;
/* padding-left: 27px; /* padding-left: 27px;
padding-right: 37px; */ padding-right: 37px; */
@ -207,8 +209,17 @@
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
color: #FF5D15; 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{ .otherMoney{
display: flex; display: flex;

2
src/components/menu/MenuWithTopButton.tsx
View File

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

4
src/route/Correction/Correction.tsx
View File

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

4
src/route/Refun/Refun.tsx
View File

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

82
src/route/index/Index.tsx
View File

@ -33,7 +33,7 @@ import {
CloseOutlined CloseOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import { useLocation } from 'react-router-dom'; 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 { setMenuActive } from '../../util/cache.ts'
import gpsImg from '../../static/right/gps.png' import gpsImg from '../../static/right/gps.png'
import backImg from '../../static/right/back.png' import backImg from '../../static/right/back.png'
@ -81,8 +81,7 @@ export default function Index() {
const belongArray = redxuState.belongArray const belongArray = redxuState.belongArray
// 优惠券弹窗 // 优惠券弹窗
const couponModal = redxuState.couponModal const couponModal = redxuState.couponModal
// 是否有优惠券
const [coupon, setCoupon] = useState(false)
// 编辑项目得项目名 // 编辑项目得项目名
const projName = redxuState.projName const projName = redxuState.projName
// 项目状态 查看还是编辑 // 项目状态 查看还是编辑
@ -484,14 +483,72 @@ export default function Index() {
const [showSearchBox, setShowSearchBox] = useState(true) const [showSearchBox, setShowSearchBox] = useState(true)
const [refunSearchBox, setRrefunSearchBox] = useState(false) const [refunSearchBox, setRrefunSearchBox] = useState(false)
const [correctionSearchBox, setCorrectionSearchBox] = useState(false) const [correctionSearchBox, setCorrectionSearchBox] = useState(false)
// 优惠券遮罩层是否i西安市
const [coupon, setCoupon] = useState(false)
//优惠券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(() => { useEffect(() => {
// const nowname = sessionStorage.getItem('now') // const nowname = sessionStorage.getItem('now')
if (location.pathname == '/') { if (location.pathname == '/') {
setCoupon(true) // setCoupon(true)
getCoupon()
} }
if (location.pathname.includes('/home')) { if (location.pathname.includes('/home')) {
setCoupon(true) // setCoupon(true)
getCoupon()
setNow('首页-项目') setNow('首页-项目')
// setPathArray([{ title: '首页' }]) // setPathArray([{ title: '首页' }])
setShowSearchBox(true) 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-box' style={{ display: coupon && (location.pathname == '/' || location.pathname.includes('/home')) ? 'unset' : 'none' }}>
<div className='couponMask'> <div className='couponMask'>
<div className='couponMask-img'> <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>
<div className='couponMask-close' onClick={() => { <div className='couponMask-close' onClick={() => {
setCoupon(false) setCoupon(false)

25
src/route/index/index.css
View File

@ -27,10 +27,25 @@
} }
.couponMask-img{ .couponMask-img{
width: 613px; width: 613px;
height: 556px; height: 475px;
background-color: skyblue; /* background-color: skyblue; */
cursor: pointer; /* 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 { .couponMask-close {
width: 65px; width: 65px;
@ -225,4 +240,4 @@
.custom-pagination .ant-pagination-prev, .custom-pagination .ant-pagination-prev,
.custom-pagination .ant-pagination-next { .custom-pagination .ant-pagination-next {
display: inline-block; display: inline-block;
} }

84
src/route/proj/ProjNew.tsx
View File

@ -85,6 +85,45 @@ export default function ProjNew() {
const [createProjId, setCreateProjId] = useState(''); const [createProjId, setCreateProjId] = useState('');
const oldlistProjChargeAdditional: string[] = []; const oldlistProjChargeAdditional: string[] = [];
const [listProjChargeAdditional, setlistProjChargeAdditional] = useState<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(() => { useEffect(() => {
get({ get({
messageApi: messageApi, messageApi: messageApi,
@ -99,7 +138,7 @@ export default function ProjNew() {
switch (pathParams.projChargeType) { switch (pathParams.projChargeType) {
case ProjChargeType.ALL: case ProjChargeType.ALL:
// price = charge.proj.all; // price = charge.proj.all;
price = charge.projTypes[0].price; price = charge.projTypes[0].price ;
break; break;
// case ProjChargeType.MATERIAL_AGENT: // case ProjChargeType.MATERIAL_AGENT:
// price = charge.proj.materialAgent; // price = charge.proj.materialAgent;
@ -108,7 +147,7 @@ export default function ProjNew() {
// price = charge.proj.materialAgentUrgent; // price = charge.proj.materialAgentUrgent;
// break; // break;
case ProjChargeType.MATERIAL: case ProjChargeType.MATERIAL:
price = charge.projTypes[1].price; price = charge.projTypes[1].price ;
break; break;
case ProjChargeType.FREE: case ProjChargeType.FREE:
price = charge.projTypes[2].price; price = charge.projTypes[2].price;
@ -150,6 +189,7 @@ export default function ProjNew() {
if (pathParams.projChargeType == 'FREE') { if (pathParams.projChargeType == 'FREE') {
setcouponShow(false) setcouponShow(false)
} }
getCouponData()
}, []); }, []);
return ( return (
@ -245,17 +285,22 @@ export default function ProjNew() {
<div style={{ display: couponShow ? 'unset' : 'none' }}> <div style={{ display: couponShow ? 'unset' : 'none' }}>
<div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}> <div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}>
<div className='formItem-title '> <div className='formItem-title '>
优惠券* 优惠券
</div> </div>
<Form.Item<ProjInfo> <Form.Item<ProjInfo>
name="coupon" 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> </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={() => {
setCouponModal(true) if (hasCoupon) {
setCouponModal(true)
// #1F79FF
} else {
messageApi.error('无可用优惠券')
}
}}>选择</div> }}>选择</div>
</div> </div>
</div> </div>
@ -351,7 +396,9 @@ export default function ProjNew() {
applyContactId: concatPeopleInfo.applyConcatId, applyContactId: concatPeopleInfo.applyConcatId,
applyContactName: concatPeopleInfo.applyContactName, applyContactName: concatPeopleInfo.applyContactName,
applyContactPhone: concatPeopleInfo.applyContactPhone, applyContactPhone: concatPeopleInfo.applyContactPhone,
projVersion: 'v1.0' projVersion: 'v1.0',
couponId:couponId?couponId:'',
}, },
onBefore() { onBefore() {
setLoading(true); setLoading(true);
@ -374,8 +421,10 @@ export default function ProjNew() {
}} }}
onCancel={() => { onCancel={() => {
setIsCreateModalOpen(false); setIsCreateModalOpen(false);
}}> }}>
<div>该操作会扣除 {chargePrice / 100} 元，确定操作码？</div> <div>该操作会扣除 {(chargePrice / 100 - couponNum)<0?0:chargePrice / 100 - couponNum} 元，确定操作码？</div>
</Modal> </Modal>
<Modal title="提示" <Modal title="提示"
okText="确定" okText="确定"
@ -434,7 +483,22 @@ export default function ProjNew() {
setCouponModal(false) 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> </Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen /> <Spin tip="正在提交..." spinning={loading} fullscreen />
</> </>