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:
lyp 2025-08-05 15:30:31 +08:00
parent f186c37dd7
commit a3e0c07467
13 changed files with 590 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@ -144,7 +144,7 @@ const App: React.FC = () => {
// } // }
// } // }
// const nav = useNavigate(); // const nav = useNavigate();
useEffect(() => { useEffect(() => {
@ -198,7 +198,6 @@ const App: React.FC = () => {
<GlobalDispatchContext.Provider value={dispatch}> <GlobalDispatchContext.Provider value={dispatch}>
<Head /> <Head />
<Body /> <Body />
{/* <Foot/> */}
</GlobalDispatchContext.Provider> </GlobalDispatchContext.Provider>
</GlobalContext.Provider> </GlobalContext.Provider>
</Provider> </Provider>

245
src/components/payment/Payment.tsx
View File

@ -20,7 +20,7 @@ import {
import { import {
ReloadOutlined ReloadOutlined
} from '@ant-design/icons' } from '@ant-design/icons'
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState, useContext } from "react";
import locale from 'antd/locale/zh_CN'; import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; import 'dayjs/locale/zh-cn';
@ -38,9 +38,11 @@ import type {
import wx from '../../static/wx.png'; import wx from '../../static/wx.png';
import zfb from '../../static/zfb.png'; import zfb from '../../static/zfb.png';
import dg from '../../static/dg.png'; import dg from '../../static/dg.png';
import yue from '../../static/yue.png';
import nodate from '../../static/nodate.png'; import nodate from '../../static/nodate.png';
import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts"
// import { log } from 'console'; // import { log } from 'console';
import { balanceBuyPackage } from '../../request/api.ts'
// import { render } from 'react-dom'; // import { render } from 'react-dom';
interface DataType { interface DataType {
key: React.Key; key: React.Key;
@ -48,6 +50,7 @@ interface DataType {
packageMoney: number; packageMoney: number;
packageDescription: string; packageDescription: string;
packageInfoId: string; packageInfoId: string;
packageCount: number;
} }
dayjs.locale('zh-cn'); dayjs.locale('zh-cn');
@ -80,7 +83,8 @@ type PaySystemBank = {
enum ThirdPartyEnum { enum ThirdPartyEnum {
WX = '微信', WX = '微信',
ZFB = '支付宝', ZFB = '支付宝',
DGZZ = '对公转账' DGZZ = '对公转账',
YEZF = '余额支付'
} }
interface IPaymentProps { interface IPaymentProps {
@ -89,8 +93,33 @@ interface IPaymentProps {
handleCancel(): void; handleCancel(): void;
show: boolean; show: boolean;
} }
import { useDispatch } from 'react-redux'
// import { GlobalContext } from "../../context/GlobalContext.ts"; // import { GlobalContext } from "../../context/GlobalContext.ts";
export default function Payment(props: IPaymentProps) { export default function Payment(props: IPaymentProps) {
const dispath = useDispatch()
const getMyPackNum = () => {
get<any>({
messageApi,
url: `/api/proj/servicepkg/packageorder/count/self`,
onBefore() {
},
onSuccess({ data }) {
dispath({
type: 'upPackNum',
val: {
ALL: data.ALL,
MATERIAL: data.MATERIAL,
}
})
},
onFinally() {
}
})
}
const globalDispatchContext = useContext(GlobalDispatchContext);
const globalContext = useContext(GlobalContext);
// const globalContext = useContext(GlobalContext); // const globalContext = useContext(GlobalContext);
const token = sessionStorage.getItem('token') const token = sessionStorage.getItem('token')
// 服务包相关 // 服务包相关
@ -110,6 +139,11 @@ export default function Payment(props: IPaymentProps) {
}; };
const [packList, setPackList] = useState<any[]>([]); const [packList, setPackList] = useState<any[]>([]);
const [packageInfoId, setPackageInfoId] = useState('');//单选 服务包id const [packageInfoId, setPackageInfoId] = useState('');//单选 服务包id
const [packageName, setPackageName] = useState('');//单选 服务包名称
const [packageMoney, setPackageMoney] = useState(0);//单选 服务包价格
const [packageCount, setPackageCount] = useState(0);//单选 服务包件数
// 余额支付弹窗
const [balancePayModal, setBalancePayModal] = useState(false);
// 获取套餐列表 // 获取套餐列表
const getPackageList = (value: string, page: number) => { const getPackageList = (value: string, page: number) => {
get<any>({ get<any>({
@ -156,8 +190,8 @@ export default function Payment(props: IPaymentProps) {
// // } // // }
// setShowWX(data.isWxPay == 1 ? true : false); // setShowWX(data.isWxPay == 1 ? true : false);
// setShowZFB(data.isZfbPay == 1 ? true : false); // setShowZFB(data.isZfbPay == 1 ? true : false);
// } // }
// }) // })
// }) // })
@ -247,6 +281,9 @@ export default function Payment(props: IPaymentProps) {
onClick={() => { onClick={() => {
if (!packageInfoId) { if (!packageInfoId) {
setPackageInfoId(record.packageInfoId); setPackageInfoId(record.packageInfoId);
setPackageName(record.packageName);
setPackageMoney(record.packageMoney);
setPackageCount(record.packageCount);
form.setFieldValue('rechargeMoney', (record.packageMoney) / 100); form.setFieldValue('rechargeMoney', (record.packageMoney) / 100);
getPay(record.packageInfoId); getPay(record.packageInfoId);
} }
@ -259,9 +296,19 @@ export default function Payment(props: IPaymentProps) {
color: '#0B4AFF' color: '#0B4AFF'
}} }}
onClick={() => { onClick={() => {
// setThirdParty(ThirdPartyEnum.DGZZ);
// return
setPackageInfoId(''); setPackageInfoId('');
form.setFieldValue('rechargeMoney', 280); form.setFieldValue('rechargeMoney', 280);
getPay(''); if (thirdParty !== '余额支付') {
getPay('');
} else {
setThirdParty(ThirdPartyEnum.DGZZ);
form.setFieldValue('thirdParty', '对公转账');
}
}} }}
>取消</div> >取消</div>
</div> </div>
@ -418,7 +465,10 @@ export default function Payment(props: IPaymentProps) {
setThirdParty(ThirdPartyEnum.DGZZ) setThirdParty(ThirdPartyEnum.DGZZ)
return; return;
} }
getPay(packageInfoId); if (thirdParty !== '余额支付') {
getPay(packageInfoId);
}
// countdown() // countdown()
}, [thirdParty, refreshQrCodeCount]); }, [thirdParty, refreshQrCodeCount]);
@ -742,6 +792,97 @@ export default function Payment(props: IPaymentProps) {
</div> </div>
) )
} }
if (thirdParty == '余额支付') {
return (
<>
<div style={{
marginLeft: 20,
}}>
<div className='codeTitle'>余额支付</div>
<div style={{
background: '#FAFCFF',
height: '610px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'column',
padding: '10px',
boxSizing: 'border-box',
}}>
<div style={{
width: '100%',
}}>
<div className='balancePayMonye'>
<div className='balancePayMonyeTop'>您的余额</div>
<div className='balancePayMonyeBot'> {globalContext.user.balance}<span style={{
fontSize: 16,
marginLeft: 5
}}>元</span></div>
</div>
<div className='balancePayInfo'>
名称：{packageName}
</div>
<div className='balancePayInfo'>
价格：{packageMoney / 100}元
</div>
<div className='balancePayInfo'>
次数：{packageCount}
</div>
</div>
<div style={{
width: '100%',
padding: '10px',
boxSizing: 'border-box',
textAlign: 'right'
}}>
<div className='balancePayInfo'>
<span>需支付金额：</span>
<span style={{
fontSize: 30,
fontWeight: 'bold',
color: '#FF2222'
}}>{packageMoney / 100}</span>
<span style={{
// fontSize: 16,
marginLeft: 5
}}>元</span>
</div>
<div className='balancePayInfo' style={{
display: Number(globalContext.user.balance) - (packageMoney / 100) < 0 ? 'none' : 'unset',
}}>
支付后余额：{(Number(globalContext.user.balance) - (packageMoney / 100)).toFixed(2)}元
</div>
<div className='balancePayInfo' style={{
display: Number(globalContext.user.balance) - (packageMoney / 100) >= 0 ? 'none' : 'unset',
color: 'red',
}}>
余额不足，请充值！
</div>
<div>
<Button type='primary'
disabled={Number(globalContext.user.balance) - (packageMoney / 100) < 0}
style={{
width: '100px',
height: 40,
marginTop: 10
}} onClick={() => {
setBalancePayModal(true);
}} >
确认支付
</Button>
</div>
</div>
</div>
</div>
</>
)
}
return <> return <>
<Flex gap="middle" align="center" justify="center" vertical> <Flex gap="middle" align="center" justify="center" vertical>
<div className="qr-code" style={{ position: 'relative' }}> <div className="qr-code" style={{ position: 'relative' }}>
@ -969,20 +1110,27 @@ export default function Payment(props: IPaymentProps) {
label="支付方式" label="支付方式"
name="thirdParty" name="thirdParty"
rules={[{ required: true }]} rules={[{ required: true }]}
>
<Radio.Group onChange={(e) => {
form.setFieldValue('thirdParty', e.target.value);
setThirdParty(e.target.value);
// console.log(e.target.value);
// setPackageInfoId('');
setIsRechargeMoneyEdit(false)
// setValue('')
// form.setFieldValue('rechargeMoney', 280);
// setSelectedRowKeys([]);
}}> >
<Radio.Group
onChange={(e) => {
if (e.target.value == '余额支付') {
setThirdParty(e.target.value);
// reloadUser(messageApi, globalDispatchContext)
return
}
form.setFieldValue('thirdParty', e.target.value);
setThirdParty(e.target.value);
// setPackageInfoId('');
setIsRechargeMoneyEdit(false)
// setValue('')
// form.setFieldValue('rechargeMoney', 280);
// setSelectedRowKeys([]);
}}>
<span style={{ <span style={{
display:showWX=='1'?'unset':'none' display: showWX == '1' ? 'unset' : 'none'
}}> }}>
<Radio value="微信" > <Radio value="微信" >
<Image src={wx} width={27} height={25} preview={false} /> <Image src={wx} width={27} height={25} preview={false} />
@ -990,7 +1138,7 @@ export default function Payment(props: IPaymentProps) {
</Radio> </Radio>
</span> </span>
<span style={{ <span style={{
display:showZFB == '1'?'unset':'none' display: showZFB == '1' ? 'unset' : 'none'
}}> }}>
<Radio value="支付宝" > <Radio value="支付宝" >
<Image src={zfb} width={27} height={25} preview={false} /> <Image src={zfb} width={27} height={25} preview={false} />
@ -1003,6 +1151,16 @@ export default function Payment(props: IPaymentProps) {
/> />
<span style={{ marginLeft: 5 }}>对公转账</span> <span style={{ marginLeft: 5 }}>对公转账</span>
</Radio> </Radio>
<span style={{
display: packageInfoId ? 'unset' : 'none'
}}>
<Radio value="余额支付" >
<Image src={yue} width={23} height={25}
preview={false}
/>
<span style={{ marginLeft: 5 }}>余额支付</span>
</Radio>
</span>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
@ -1202,6 +1360,53 @@ export default function Payment(props: IPaymentProps) {
<div style={{ fontSize: 20, fontWeight: 700 }}>确定对公转账<span style={{ color: 'red' }}>￥<span style={{ fontSize: 30 }}>{form.getFieldValue('rechargeMoney')}</span></span> 吗？不确定请修改金额。</div> <div style={{ fontSize: 20, fontWeight: 700 }}>确定对公转账<span style={{ color: 'red' }}>￥<span style={{ fontSize: 30 }}>{form.getFieldValue('rechargeMoney')}</span></span> 吗？不确定请修改金额。</div>
</div> </div>
</Modal> </Modal>
<Modal title="提示"
centered
okText="确定"
cancelText="取消"
open={balancePayModal}
okButtonProps={{
style: {
backgroundColor: 'var(--color-primary)', // 设置背景颜色
},
}}
onOk={async () => {
try {
setBalancePayModal(false);
setIsLoading(true);
await balanceBuyPackage(packageInfoId);
getMyPackNum()
setIsLoading(false);
reloadUser(messageApi, globalDispatchContext).then(() => {
messageApi.success('已购买套餐包');
});
setTimeout(() => {
props.handleConfirm();
}, 1000);
} catch (error: any) {
// setLoading(false)
if (error.response) {
const data = error.response.data;
messageApi.open({
type: 'error',
content: data.msg ? data.msg : `${data.path}(${data.status})`,
});
}
}
}}
onCancel={() => {
setBalancePayModal(false);
}}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 10 }}>
<div style={{ fontSize: 20, fontWeight: 700 }}>确定使用余额支付<span style={{ color: 'red' }}>￥<span style={{ fontSize: 30 }}>{packageMoney / 100}</span></span>元吗？</div>
</div>
</Modal>
</div> </div>
) )
} }

32
src/components/payment/payment.css
View File

@ -84,6 +84,36 @@
text-align: center; text-align: center;
} }
.balancePayMonye {
width: 100%;
height: 109px;
background: #E7F0FF;
padding: 20px 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.balancePayMonyeTop {
font-size: 17px;
color: #6B778D;
}
.balancePayMonyeBot {
font-weight: 800;
font-size: 36px;
color: #F29C38;
}
.balancePayInfo{
font-size: 18px;
width: 100%;
padding:0 10px;
box-sizing: border-box;
margin-top: 10px;
/* color: #6B778D; */
}
.paytip { .paytip {
margin-top: 10px; margin-top: 10px;
} }
@ -94,5 +124,5 @@
background: #abc8ff; background: #abc8ff;
text-align: center; text-align: center;
line-height: 36px; line-height: 36px;
color: #FFFFFF ; color: #FFFFFF;
} }

19
src/layout/head/Head.tsx
View File

@ -21,7 +21,7 @@ import {
// Empty, // Empty,
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Dropdown, MenuProps, message, Modal, Space, Spin, Input,
// Table, // Table,
Form, Button Form, Button
// Form, Button, InputNumber // Form, Button, InputNumber
} from "antd"; } from "antd";
// import { // import {
@ -33,6 +33,7 @@ import line from '../../static/Phone/line.png'
import pack from '@theme/img/pack.png' import pack from '@theme/img/pack.png'
import PackAgeModal from '../../components/PackageModal/PackageModal.tsx' import PackAgeModal from '../../components/PackageModal/PackageModal.tsx'
import active from '../../static/active.gif'
// import pack from '@theme/pack.png' // import pack from '@theme/pack.png'
// import type { TableProps, FormProps } from 'antd'; // import type { TableProps, FormProps } from 'antd';
// interface DataType { // interface DataType {
@ -382,6 +383,7 @@ export default function Head() {
// const [packageType, setPackageType] = useState('') // const [packageType, setPackageType] = useState('')
const packNum = redxuState.packNum const packNum = redxuState.packNum
const phoneModal = redxuState.phoneModal const phoneModal = redxuState.phoneModal
// const activityModal = redxuState.activityModal
// const packItems: MenuProps['items'] = [ // const packItems: MenuProps['items'] = [
// { // {
// key: '1', // key: '1',
@ -424,6 +426,7 @@ export default function Head() {
// ] // ]
// 消息通知弹窗 // 消息通知弹窗
const [noticeModal, setNoticeModal] = useState(false) const [noticeModal, setNoticeModal] = useState(false)
// 客服弹窗 // 客服弹窗
@ -1282,6 +1285,20 @@ export default function Head() {
{/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */} {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
<div className="right"> <div className="right">
<div style={{
marginRight: 20,
cursor:'pointer'
}}
onClick={() => {
// setActivityModal(true)
dispath({
type: 'setActivityModal',
val: true,
})
}}
>
<img src={active} alt="" height={36} />
</div>
<div className='kf' onClick={() => { <div className='kf' onClick={() => {
setkfModal(true) setkfModal(true)
}}> }}>

5
src/layout/head/head.css
View File

@ -487,4 +487,7 @@
font-size: 14px; font-size: 14px;
color: #B6B6B6; color: #B6B6B6;
cursor: pointer; cursor: pointer;
} }

7
src/request/api.ts
View File

@ -1,4 +1,4 @@
import {request,aiShopRequest,phoneRequest,newRequest} from './request' import {request,aiShopRequest,phoneRequest,newRequest,activityRequset} from './request'
// import newRequest from './request' // import newRequest from './request'
// 开票功能operatorPluginBaseUrl------------------------------------------------------------------------------------------------------------------------------------------------------- // 开票功能operatorPluginBaseUrl-------------------------------------------------------------------------------------------------------------------------------------------------------
// 获取登录标志 // 获取登录标志
@ -7,6 +7,11 @@ export const getLoginflag = (userId: string) => request.get(`/operator-plugin/ap
export const getInvoiceRecordList = (userId: string, params: any) => request.get(`/operator-plugin/api/invoicerecharge/listpage/${userId}`, { params }) export const getInvoiceRecordList = (userId: string, params: any) => request.get(`/operator-plugin/api/invoicerecharge/listpage/${userId}`, { params })
// 获取开票信息数组 // 获取开票信息数组
export const getInvoiceList = (userId: string, params: any) => request.get(`/operator-plugin/api/invoice-config/listpage/${userId}`, { params }) export const getInvoiceList = (userId: string, params: any) => request.get(`/operator-plugin/api/invoice-config/listpage/${userId}`, { params })
// 获取活动信息
export const activityData = () => activityRequset.get(`/operator-plugin/api/user/invite/get`)
// 余额购买套餐包
export const balanceBuyPackage = (packageInfoId: string) => activityRequset.post(`/operator-plugin/api/packageorder/buy/${packageInfoId} `)
// 新增开票信息 // 新增开票信息
export const addInvoiceInfo = (userId: string, params: any) => request.post(`/operator-plugin/api/invoice-config/save/${userId}`, params) export const addInvoiceInfo = (userId: string, params: any) => request.post(`/operator-plugin/api/invoice-config/save/${userId}`, params)

51
src/request/request.ts
View File

@ -62,7 +62,54 @@ request.interceptors.response.use(
); );
//----------------------------------------------------------------------------------------- //-----------------------------------------------------------------------------------------
// 获取活动信息----------------------------------------------------------------------------
const activityRequset = axios.create({
// baseURL: operatorPluginBaseUrl,
baseURL: 'http://192.168.0.115:8099',
timeout: 5000,
});
activityRequset.interceptors.request.use(
(config) => {
// 有token带token
const token = sessionStorage.getItem('token')
config.headers = config.headers || {}
config.headers['Auth'] = token ? `Bearer ${token}` : '';
// config.headers['Content-Type'] = 'application/json';
// config.data = { unused: 0 }
if (config.method === 'get' ) {
if (!config.data) {
config.data = { unused: 0 }
}
}
if (config.method === 'put') {
if (!config.data) {
config.data = { unused: 0 }
}
}
if (config.method === 'post') {
if (!config.data) {
config.data = { unused: 0 }
}
}
if (config.method === 'delete') {
if (!config.data) {
config.data = { unused: 0 }
}
}
return config;
},
(err) => Promise.reject(err)
);
activityRequset.interceptors.response.use(
(res) => {
return res.data;
},
(err) => Promise.reject(err)
);
// ---------------------------------------------------------------------------------------
// 买卖功能(交易中心/APP电子软著)---------------------------------------------------------------------------- // 买卖功能(交易中心/APP电子软著)----------------------------------------------------------------------------
const aiShopRequest = axios.create({ const aiShopRequest = axios.create({
@ -188,6 +235,8 @@ newRequest.interceptors.response.use(
// 下载发票 // 下载发票
export const downloadInvoice = (id: string) => { export const downloadInvoice = (id: string) => {
return `${operatorPluginBaseUrl}/operator-plugin/route/file/download/false/${id}` return `${operatorPluginBaseUrl}/operator-plugin/route/file/download/false/${id}`
//测试
// return `http://192.168.0.115:8099/operator-plugin/route/file/download/false/${id}`
}; };
@ -229,4 +278,4 @@ export const uploadDeputeUrl = () => {
return `${aiShopBaseUrl}/aishop/api/trademark/upload-weituo-file ` return `${aiShopBaseUrl}/aishop/api/trademark/upload-weituo-file `
} }
export { request,aiShopRequest,phoneRequest,newRequest}; export { request,aiShopRequest,phoneRequest,newRequest,activityRequset};

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

@ -8,8 +8,10 @@ import {
Modal, Modal,
// Row, // Row,
DatePicker, DatePicker,
InputNumber InputNumber,
Checkbox
} from 'antd'; } from 'antd';
import { downloadInvoice } from '../../request/request.ts'
import locale from 'antd/es/date-picker/locale/zh_CN'; import locale from 'antd/es/date-picker/locale/zh_CN';
import type { DatePickerProps, InputNumberProps } from 'antd'; import type { DatePickerProps, InputNumberProps } from 'antd';
import dayjs, { } from 'dayjs'; import dayjs, { } from 'dayjs';
@ -58,7 +60,8 @@ import {
import { import {
// getLanguageList, getSoftTypeList // getLanguageList, getSoftTypeList
appGoodsList, appGoodsList,
buyAppGoods, appOrderList, trademarkGoodsList buyAppGoods, appOrderList, trademarkGoodsList,
activityData
} from '../../request/api' } from '../../request/api'
import { import {
setMenuActive, setMenuActive,
@ -100,7 +103,58 @@ import yes from '../../static/trademark/yes.png'
import firImg from '../../static/fir.png' import firImg from '../../static/fir.png'
import noFirImg from '../../static/noFir.png' import noFirImg from '../../static/noFir.png'
export default function Index() { export default function Index() {
// 活动图片
const [activityImg, setActivityImg] = useState('')
// 活动名称
const [activityTitle, setActivityTitle] = useState('')
// 活动内容
const [activityText, setActivityText] = useState('')
// 活动不显示天数
const [activityCycle, setActivityCycle] = useState(0)
// 活动邀请码
const [activityCode, setActivityCode] = useState('')
// 活动钱数
const [activityMoney, setActivityMoney] = useState(0)
// 是否选中近期不在提示
const [activityChecked, setActivityChecked] = useState(false)
const closeActivityModal = document.cookie.replace(/(?:(?:^|.*;\s*)closeActivityModal\s*=\s*([^;]*).*$)|^.*$/, "$1");
// 获取活动信息
const getActivityData = async () => {
try {
const res: any = await activityData()
// console.log('活动信息', res);
if (closeActivityModal) {
setActivityChecked(true)
}
if (res.title && !closeActivityModal) {
dispath({
type: 'setActivityModal',
val: true,
})
}
setActivityImg(downloadInvoice(res.image))
setActivityTitle(res.title)
setActivityText(res.help)
setActivityCycle(res.cycle)
setActivityMoney(res.money)
setActivityCode(res.code)
} catch (error: any) {
if (error.response) {
const data = error.response.data;
messageApi.open({
type: 'error',
content: data.msg ? data.msg : `${data.path}(${data.status})`,
});
} else {
console.error(error)
}
}
}
const globalDispatchContext = useContext(GlobalDispatchContext); const globalDispatchContext = useContext(GlobalDispatchContext);
// const height = window.innerHeight - 180; // const height = window.innerHeight - 180;
const columns: TableColumnsType<DataType> = [ const columns: TableColumnsType<DataType> = [
@ -232,7 +286,11 @@ export default function Index() {
//redux的belongArray //redux的belongArray
const redxuState: any = useSelector(state => state) const redxuState: any = useSelector(state => state)
const phoneModal = redxuState.phoneModal const phoneModal = redxuState.phoneModal
const activityModal = redxuState.activityModal
// const belongArray = redxuState.belongArray // const belongArray = redxuState.belongArray
//监听cookie里面如果有closeActivityModal这个值 则打印这个值
// const belongArrayList = belongArray.map((item:any) => ({ // const belongArrayList = belongArray.map((item:any) => ({
// value: item.projOwnerId , // value: item.projOwnerId ,
@ -1129,7 +1187,7 @@ export default function Index() {
const [trademarkModal, setTrademarkModal] = useState(false) // 申请商标弹窗 const [trademarkModal, setTrademarkModal] = useState(false) // 申请商标弹窗
const [trademarkNewKeywords, setTrademarkNewKeywords] = useState('') // 临时关键字 const [trademarkNewKeywords, setTrademarkNewKeywords] = useState('') // 临时关键字
const [trademarkKeywords, setTrademarkKeywords] = useState('') // 关键字 const [trademarkKeywords, setTrademarkKeywords] = useState('') // 关键字
const [trademarkStatus,setTrademarkStatus] = useState<string | null>(null) const [trademarkStatus, setTrademarkStatus] = useState<string | null>(null)
const trademarkKeyWordshandleSearch = () => { const trademarkKeyWordshandleSearch = () => {
setTrademarkKeywords(trademarkNewKeywords) setTrademarkKeywords(trademarkNewKeywords)
} }
@ -1149,12 +1207,12 @@ export default function Index() {
nav('/trademark-mall', { nav('/trademark-mall', {
state: { state: {
keywords: trademarkKeywords, keywords: trademarkKeywords,
trademarkStatus:trademarkStatus trademarkStatus: trademarkStatus
} }
}) })
} }
}, [trademarkKeywords,trademarkStatus]) }, [trademarkKeywords, trademarkStatus])
// const [toRradeMarkModal, setToRradeMarkModal] = useState(false) // 申请商标编辑弹窗 // const [toRradeMarkModal, setToRradeMarkModal] = useState(false) // 申请商标编辑弹窗
// ---------------------------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------------------------
@ -1948,6 +2006,11 @@ export default function Index() {
// getSoftTypeListDate() // getSoftTypeListDate()
// getTrademarkGoodsList() // getTrademarkGoodsList()
getActivityData()
// 获取cookie里面的closeActivityModal的值
// console.log(closeActivityModal);
}, []); }, []);
useEffect(() => { useEffect(() => {
// loactionStorage里的activeMenu // loactionStorage里的activeMenu
@ -4370,10 +4433,10 @@ export default function Index() {
</div> </div>
<div style={{ <div style={{
marginTop:10, marginTop: 10,
fontSize:16, fontSize: 16,
fontWeight:700, fontWeight: 700,
color:'red' color: 'red'
}}>注:下证时间以提交盖章页第二个工作日算起</div> }}>注:下证时间以提交盖章页第二个工作日算起</div>
<div className='appGoodsBtnBox'> <div className='appGoodsBtnBox'>
<div className='appGoodsBtn' onClick={async () => { <div className='appGoodsBtn' onClick={async () => {
@ -4672,7 +4735,119 @@ export default function Index() {
</div> </div>
</div> </div>
{/* <Modal
title="活动"
destroyOnClose={true}
open={activityModal}
footer={null}
maskClosable={false} // 禁止通过点击蒙层关闭
onCancel={() => {
dispath({
type: 'setActivityModal',
val: false,
})
}}
okButtonProps={{ style: { background: 'red', color: 'white' } }}
width={592}
centered
>
活动
</Modal> */}
<div className='couponMask-box'
style={{
display: activityModal && (location.pathname == '/' || location.pathname.includes('/home')) ? 'unset' : 'none',
zIndex: 100
}}
>
<div className='couponMask' >
<div style={{
// background: 'skyblue',
// 背景图设置为activityImg
// backgroundImage: `url(${downloadUrl(activityImg, false)})`,
backgroundImage: `url(${activityImg})`,
// 背景图尺寸为100% 100%
backgroundSize: '100% 100%',
width: 655,
height: 597,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
<div className='activityTitle'>
{activityTitle}
</div>
<div className='activityMoney'>
{activityMoney}<span>元红包</span>
</div>
<div className='activitytext'>
{activityText}
</div>
<div className='activityButton'
onClick={() => {
// 优先使用 Clipboard API
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(
'http://127.0.0.1:5500/Register.html?code=' + activityCode
).then(() => {
messageApi.success('邀请码已复制到剪贴板');
}).catch(() => {
messageApi.error('复制失败，请手动复制');
});
} else {
// 兼容旧浏览器
const input = document.createElement('input');
input.value = 'http://127.0.0.1:5500/Register.html?code=' + activityCode;
document.body.appendChild(input);
input.select();
try {
document.execCommand('copy');
messageApi.success('邀请码已复制到剪贴板');
} catch {
messageApi.error('复制失败，请手动复制');
}
document.body.removeChild(input);
}
}}
>一键复制邀请码</div>
<div className='activityCycle'
style={{
display: closeActivityModal ? 'none' : 'unset',
}}
>
{/* 多选框 */}
<Checkbox
checked={activityChecked}
onChange={(e) => {
setActivityChecked(e.target.checked)
}}
style={{
color: 'white',
}}></Checkbox>
<span style={{
marginLeft: 5,
}}>近期不再提示</span>
</div>
</div>
<div className='activityMask-close' onClick={() => {
dispath({
type: 'setActivityModal',
val: false,
})
// 当activityChecked为true时 再cooke中存入一个维持activityCycle天数的值
if (activityChecked) {
const date = new Date();
date.setDate(date.getDate() + activityCycle);
document.cookie = `closeActivityModal=${activityCycle}; expires=${date.toUTCString()}; path=/`;
}
}}>
<CloseOutlined />
</div>
</div>
</div>
</> </>
) )

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

@ -970,9 +970,11 @@
box-sizing: border-box; box-sizing: border-box;
margin-top: 15px; margin-top: 15px;
} }
.trademarkArrayItemText{
.trademarkArrayItemText {
margin-left: 10px; margin-left: 10px;
} }
.trademarkTextArrayBox { .trademarkTextArrayBox {
font-size: 16px; font-size: 16px;
color: #625A31; color: #625A31;
@ -1010,4 +1012,67 @@
color: #CBC1B0; color: #CBC1B0;
/* 文字中线 */ /* 文字中线 */
text-decoration: line-through; text-decoration: line-through;
}
.activityMask-close {
width: 65px;
height: 65px;
border-radius: 50%;
border: 2px solid #E5E5E5;
color: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
margin-top: 10px;
cursor: pointer;
}
.activityTitle {
margin-top: 204px;
color: #7D451B;
font-size: 30px;
font-weight: 700;
}
.activityMoney {
margin-top: 72px;
color: #7D451B;
font-size: 30px;
font-weight: 700;
}
.activitytext {
margin-top: 10px;
font-size: 18px;
color: #BF8102;
width: 300px;
text-align: center;
/* background-color: skyblue; */
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.activityButton {
width: 363px;
height: 58px;
background: #FFD4AF;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #7D451B;
margin-top: 30px;
cursor: pointer;
}
.activityCycle {
margin-top: 20px;
/* font-size: 18px; */
color: #7D451B;
display: flex;
justify-content: center;
align-items: center;
} }

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

@ -750,7 +750,7 @@ export default function ProjNew() {
position: 'absolute', left: 165, position: 'absolute', left: 165,
display: showTip ? 'unset' : 'none', display: showTip ? 'unset' : 'none',
color: 'green', color: 'green',
}}>系统全称建议以“软件”、“系统”、“平台”或“APP”结尾，禁止使用英文单引号</div> }}>系统全称建议以“软件”、“系统”、“平台”或“APP”结尾</div>
</div> </div>
<div style={{ <div style={{
display: 'flex', display: 'flex',

BIN
src/static/active.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 KiB

BIN
src/static/yue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

4
src/store/index.ts
View File

@ -29,6 +29,7 @@ const baseState = {
replaceArray: [], replaceArray: [],
replaceTotal: 0, replaceTotal: 0,
newReplace: false, newReplace: false,
activityModal:false, //活动弹窗
} }
// 创建仓库 // 创建仓库
@ -96,6 +97,9 @@ const reducer = (state = baseState, action: any) => {
} }
if (action.type == 'newReplace') { if (action.type == 'newReplace') {
nstate.newReplace = action.val nstate.newReplace = action.val
}
if (action.type == 'setActivityModal') {
nstate.activityModal = action.val
} }
return nstate return nstate
} }