From 8ff370701d49141b617bf422a015d4be488637b2 Mon Sep 17 00:00:00 2001 From: xixi <123@qq.com> Date: Fri, 6 Sep 2024 17:26:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=E7=AD=89=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CorrectionModal/CorrectionModal.tsx | 4 +- .../CouponModal/HeadCouponModal.tsx | 302 ++++++++++++------ .../CouponModal/SelectCouponModal.css | 2 +- .../CouponModal/SelectCouponModal.tsx | 182 ++++++++--- src/components/RefunModal/RefunModal.tsx | 2 +- src/components/card/CardProj.tsx | 9 +- src/components/card/card-proj.css | 15 +- src/components/menu/MenuWithTopButton.tsx | 2 +- src/route/Correction/Correction.tsx | 4 +- src/route/Refun/Refun.tsx | 4 +- src/route/index/Index.tsx | 82 ++++- src/route/index/index.css | 25 +- src/route/proj/ProjNew.tsx | 84 ++++- 13 files changed, 537 insertions(+), 180 deletions(-) diff --git a/src/components/CorrectionModal/CorrectionModal.tsx b/src/components/CorrectionModal/CorrectionModal.tsx index 6204cd6..36431b6 100644 --- a/src/components/CorrectionModal/CorrectionModal.tsx +++ b/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 diff --git a/src/components/CouponModal/HeadCouponModal.tsx b/src/components/CouponModal/HeadCouponModal.tsx index d74b4c1..687eb3f 100644 --- a/src/components/CouponModal/HeadCouponModal.tsx +++ b/src/components/CouponModal/HeadCouponModal.tsx @@ -1,143 +1,251 @@ -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([]) + // 获取优惠券信息 + 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 (
+ {contextHolder}
{ setTitle('未使用') + setisUsed(0) + setisEffective(1) + setPage(1) }} >未使用
{ setTitle('已使用') + setisUsed(1) + setisEffective(1) + setPage(1) }} >已使用
{ setTitle('已过期') + setisUsed(0) + setisEffective(0) + setPage(1) }} >已过期
-
-
-
-
-
-
- ￥ - 100 + +
+ {couponArray.map((item) => { + return ( +
+
+
+
+
+ ￥ + {item.coupon.amount / 100} +
+ +
+
+
+
+ 可购买平台内任意软著时使用 +
+
+
+ {item.coupon.gmtStart} 至 {item.coupon.gmtEnd} +
+
{ + props.closeModal() + }}> + 去使用 +
+
+
+
-
-
-
- 可购买平台内任意软著时使用 -
-
-
- 2024.08.09 12:15:04 -
-
{ - props.closeModal() - }}> - 去使用 -
-
-
+ ) + })} + +
10 ? 'unset' : 'none' }}> +
+ { + setPage(value) + }} + /> +
- -
- - - - - {/*
- -
*/} -
-
-
-
-
-
-
- ￥ - 100 -
- -
+
+
+
-
-
- 可购买平台内任意软著时使用 -
-
-
- 2024.08.09 12:15:04 -
- -
-
- xxxxxxx系统 -
-
- -
-
-
+
+ {couponArray.map((item) => { + return ( +
+
+
+
+
+ ￥ + {item.coupon.amount / 100} +
+ +
+
+
+
+ 可购买平台内任意软著时使用 +
+
+
+ {item.coupon.gmtStart} 至 {item.coupon.gmtEnd} +
+ +
+
+ {/* 使用的产品 */} + {item.productName} +
+
-
-
-
-
-
-
-
- ￥ - 100
- -
-
-
-
- 可购买平台内任意软著时使用 -
-
-
- 有效期至:2024.08.09 12:15:04 +
+
-
-
- + ) + })} +
10 ? 'unset' : 'none' }}> +
+ { + setPage(value) + }} />
- - +
+
+ +
+
+
- -
+
+ {couponArray.map((item) => { + return ( +
+
+
+
+
+ ￥ + {item.coupon.amount / 100} +
+ +
+
+
+
+ 可购买平台内任意软著时使用 +
+
+
+ 有效期至:{item.coupon.gmtEnd} +
+
+
+
+ +
+
+ + +
+ ) + })} +
10 ? 'unset' : 'none' }}> +
+ { + setPage(value) + }} + /> +
+
+
+
+ +
+
+
+
) diff --git a/src/components/CouponModal/SelectCouponModal.css b/src/components/CouponModal/SelectCouponModal.css index c23ba5c..7b83049 100644 --- a/src/components/CouponModal/SelectCouponModal.css +++ b/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; diff --git a/src/components/CouponModal/SelectCouponModal.tsx b/src/components/CouponModal/SelectCouponModal.tsx index 3f834cc..d9ee118 100644 --- a/src/components/CouponModal/SelectCouponModal.tsx +++ b/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() { - const [couponId, setCouponId] = useState('') +export default function SelectCouponModal(props: any) { + const [loading,setLoading] = useState(false) + const [messageApi, contextHolder] = message.useMessage(); + // 分页 + const [page, setPage] = useState(1) + const [total, setTotal] = useState(0) + // 展示的优惠券数组 + const [couponArray, setCouponArray] = useState([]) + // 已选优惠券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 (
+ {contextHolder}
@@ -14,59 +64,105 @@ export default function SelectCouponModal() { 优惠券
-
-
共减￥
-
100.00
+
+ +
共减￥
+
{sleectCouponNum.toFixed(2)}
+
可使用优惠券
+
-
{ - // setCouponId('1') - if(couponId=='1'){ - setCouponId('') - }else{ - setCouponId('1') - } - }}> -
- -
-
- 减100元 -
-
- 有效期至2024.08.29 12:12:07 -
-
- -
-
-
-
减￥
-
100.00
-
- { - couponId == '1' ? ( -
- + {couponArray.map((item) => { + return (
{ + // setCouponId('1') + if (selectCouponId == item.couponId) { + setSelectCouponId('') + setSelectCouponNum(0) + setSelectCouponTitle('') + } else { + setSelectCouponId(item.couponId) + setSelectCouponNum(item.coupon.amount / 100) + setSelectCouponTitle(item.coupon.title) + } + }}> +
+ +
+
+ {/* 减{item.coupon.amount / 100}元 */} + {item.coupon.title}
- ) : ( -
+
+ 有效期至{item.coupon.gmtEnd}
- ) - } +
+ +
+
+
+
减￥
+
{(item.coupon.amount / 100).toFixed(2)}
+
+ { + selectCouponId == item.couponId ? ( +
+ +
+ ) : ( +
+
+ ) + } +
+
) + })} + +
10 ? 'unset' : 'none' }}> +
+ { + setPage(value) + }} />
- + + +
+ +
+ +
diff --git a/src/components/RefunModal/RefunModal.tsx b/src/components/RefunModal/RefunModal.tsx index d3690ff..6e1b9b2 100644 --- a/src/components/RefunModal/RefunModal.tsx +++ b/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, diff --git a/src/components/card/CardProj.tsx b/src/components/card/CardProj.tsx index 8e3f762..5612f1d 100644 --- a/src/components/card/CardProj.tsx +++ b/src/components/card/CardProj.tsx @@ -339,16 +339,17 @@ export default function CardProj(props: any) {
- 金额(￥) : - 金额(￥) :
+
{data.pay.payment / 100} - +
+
(已优惠{data.pay.couponAmount/100}元)
{/*
基础费用:{basicsValue}
*/} diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css index 5257876..1ba3339 100644 --- a/src/components/card/card-proj.css +++ b/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,8 +209,17 @@ 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{ display: flex; diff --git a/src/components/menu/MenuWithTopButton.tsx b/src/components/menu/MenuWithTopButton.tsx index aedcf4a..402c869 100644 --- a/src/components/menu/MenuWithTopButton.tsx +++ b/src/components/menu/MenuWithTopButton.tsx @@ -33,7 +33,7 @@ export default function MenuWithTopButton(props: IMenuWithTopButton) {
  • { 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 == '项目') { diff --git a/src/route/Correction/Correction.tsx b/src/route/Correction/Correction.tsx index b550bbf..50cea79 100644 --- a/src/route/Correction/Correction.tsx +++ b/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: { diff --git a/src/route/Refun/Refun.tsx b/src/route/Refun/Refun.tsx index 625c69f..32d7f30 100644 --- a/src/route/Refun/Refun.tsx +++ b/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: { diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx index ef5feb6..5c5f27e 100644 --- a/src/route/index/Index.tsx +++ b/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) + // 优惠券遮罩层是否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({ + 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) + // 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() {
    - { - setCoupon(false) - setMenuActive('ALL') - nav('/proj-create') - }} /> + { + + }} + className='testImg' + /> +
    { + receiveCoupon() + }}> + 立即领取 +
    { setCoupon(false) diff --git a/src/route/index/index.css b/src/route/index/index.css index ea18d50..94bde3f 100644 --- a/src/route/index/index.css +++ b/src/route/index/index.css @@ -27,10 +27,25 @@ } .couponMask-img{ width: 613px; - height: 556px; - background-color: skyblue; - cursor: pointer; - + height: 475px; + /* 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; @@ -225,4 +240,4 @@ .custom-pagination .ant-pagination-prev, .custom-pagination .ant-pagination-next { display: inline-block; -} \ No newline at end of file +} diff --git a/src/route/proj/ProjNew.tsx b/src/route/proj/ProjNew.tsx index 669d54c..95a63bd 100644 --- a/src/route/proj/ProjNew.tsx +++ b/src/route/proj/ProjNew.tsx @@ -85,6 +85,45 @@ export default function ProjNew() { const [createProjId, setCreateProjId] = useState(''); const oldlistProjChargeAdditional: string[] = []; const [listProjChargeAdditional, setlistProjChargeAdditional] = useState([]) + // 是否可用优惠券 + 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, @@ -99,7 +138,7 @@ export default function ProjNew() { switch (pathParams.projChargeType) { case ProjChargeType.ALL: // price = charge.proj.all; - price = charge.projTypes[0].price; + price = charge.projTypes[0].price ; break; // case ProjChargeType.MATERIAL_AGENT: // price = charge.proj.materialAgent; @@ -108,7 +147,7 @@ export default function ProjNew() { // price = charge.proj.materialAgentUrgent; // break; case ProjChargeType.MATERIAL: - price = charge.projTypes[1].price; + price = charge.projTypes[1].price ; break; case ProjChargeType.FREE: price = charge.projTypes[2].price; @@ -150,6 +189,7 @@ export default function ProjNew() { if (pathParams.projChargeType == 'FREE') { setcouponShow(false) } + getCouponData() }, []); return ( @@ -245,17 +285,22 @@ export default function ProjNew() {
    - 优惠券* + 优惠券
    name="coupon" - rules={[{ required: true, message: '请选择优惠券' }]} + // rules={[{ required: true, message: '请选择优惠券' }]} > - + -
    { - setCouponModal(true) +
    { + if (hasCoupon) { + setCouponModal(true) + // #1F79FF + } else { + messageApi.error('无可用优惠券') + } }}>选择
    @@ -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); + + }}> -
    该操作会扣除 {chargePrice / 100} 元，确定操作码？
    +
    该操作会扣除 {(chargePrice / 100 - couponNum)<0?0:chargePrice / 100 - couponNum} 元，确定操作码？
    - + { + setCouponId(value) + }} + couponNum = {couponNum} + setCouponNum={(value: number) => { + setCouponNum(value) + }} + setCouponTitle={(value: string) => { + setCouponTitle(value) + }} + closeModal={() => { + setCouponModal(false) + }} + >