From 5b0f18bc3cf3cfc249a53babb3379872f5b97511 Mon Sep 17 00:00:00 2001 From: lyp Date: Thu, 7 Aug 2025 10:10:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E5=8F=8A=E5=A5=97=E9=A4=90?= =?UTF-8?q?=E5=8C=85=E4=BD=99=E9=A2=9D=E8=B4=AD=E4=B9=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/head/Head.tsx | 50 ++++++++++++++++-- src/request/request.ts | 4 +- src/route/index/Index.tsx | 105 +++++++++++++++++++++++++++++++------- src/store/index.ts | 13 ++++- 4 files changed, 145 insertions(+), 27 deletions(-) diff --git a/src/layout/head/Head.tsx b/src/layout/head/Head.tsx index 999f9f1..7ebfddb 100644 --- a/src/layout/head/Head.tsx +++ b/src/layout/head/Head.tsx @@ -127,7 +127,7 @@ import active from '../../static/active.gif' import { DownOutlined, UserOutlined, QuestionCircleOutlined, BellOutlined, KeyOutlined, LogoutOutlined, GiftOutlined, AccountBookOutlined, ContainerOutlined, MenuFoldOutlined, UsergroupAddOutlined, TableOutlined } from "@ant-design/icons"; import { useContext, useEffect, useState, - // useRef + useRef } from "react"; import { put, get, @@ -159,6 +159,40 @@ import NoticeModal from '../../components/NoticeModal/NoticeModal.tsx'; // import { log } from 'console'; // import HeadCouponModal from '../../components/CouponModal/HeadCouponModal.tsx' export default function Head() { + + + + const activeBtnRef = useRef(null); + // 计算元素中心点坐标的函数 + const calculateCenterPoint = () => { + // 先检查 ref 是否存在，避免 null 错误 + if (activeBtnRef.current) { + const rect = activeBtnRef.current.getBoundingClientRect(); + const centerX = rect.left + rect.width / 2; + const centerY = rect.top + rect.height / 2; + // setCenterPoint({ x: centerX, y: centerY }); + // console.log(`元素中心点坐标: (${centerX}, ${centerY})`); + dispath({ + type: 'upCenterPoint', + val: { x: centerX, y: centerY } + }) + } + }; + + // 组件挂载后计算一次（确保元素已渲染） + useEffect(() => { + calculateCenterPoint(); + + // 监听窗口大小变化，重新计算（如果元素位置可能因窗口变化而改变） + const handleResize = () => { + calculateCenterPoint(); + }; + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); // const currentUrl = window.location.href; // const formRef = useRef(null); // const triggerFormSubmit = () => { @@ -166,6 +200,8 @@ export default function Head() { // formRef.current.submit(); // } // }; + + // lyp const [form] = Form.useForm(); const [isUpdateWxUsernamePhone, setIsUpdateWxUsernamePhone] = useState(false); // 绑定手机号号弹窗 @@ -383,6 +419,7 @@ export default function Head() { // const [packageType, setPackageType] = useState('') const packNum = redxuState.packNum const phoneModal = redxuState.phoneModal + const activityImgShow = redxuState.activityImgShow //是否显示互动图片 // const activityModal = redxuState.activityModal // const packItems: MenuProps['items'] = [ // { @@ -1285,10 +1322,13 @@ export default function Head() { {/*
*/}
-
{ // setActivityModal(true) dispath({ diff --git a/src/request/request.ts b/src/request/request.ts index 95e1c99..82f6a22 100644 --- a/src/request/request.ts +++ b/src/request/request.ts @@ -234,9 +234,9 @@ newRequest.interceptors.response.use( // 下载发票 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}` + return `http://192.168.0.115:8099/operator-plugin/route/file/download/false/${id}` }; diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx index 0709d26..dfe98ef 100644 --- a/src/route/index/Index.tsx +++ b/src/route/index/Index.tsx @@ -105,6 +105,7 @@ import noFirImg from '../../static/noFir.png' export default function Index() { + // 活动图片 const [activityImg, setActivityImg] = useState('') // 活动名称 @@ -135,6 +136,12 @@ export default function Index() { val: true, }) } + if (!res.title) { + dispath({ + type: 'setActivityImgShow', + val: false, + }) + } setActivityImg(downloadInvoice(res.image)) setActivityTitle(res.title) setActivityText(res.help) @@ -287,6 +294,42 @@ export default function Index() { const redxuState: any = useSelector(state => state) const phoneModal = redxuState.phoneModal const activityModal = redxuState.activityModal + const centerPoint = redxuState.centerPoint + + // 动画状态管理---------------------------------------------- + const [isClosing, setIsClosing] = useState(false); + const animationDuration = 300; // 动画持续时间(毫秒) + // 定义收缩的目标坐标（固定点）- 可以根据需求调整 + // const targetPosition = { + // x: 50, // 目标X坐标（从左侧开始计算） + // y: 50 // 目标Y坐标（从顶部开始计算） + // }; + + const handleClose = () => { + // 开始关闭动画 + setIsClosing(true); + + // 动画结束后执行状态更新 + setTimeout(() => { + dispath({ + type: 'setActivityModal', + val: false, + }); + + // 当勾选"近期不再提示"时设置cookie + if (activityChecked) { + const date = new Date(); + date.setDate(date.getDate() + activityCycle); + document.cookie = `closeActivityModal=${activityCycle}; expires=${date.toUTCString()}; path=/`; + } + + // 重置关闭状态，为下次显示做准备 + setIsClosing(false); + }, animationDuration); + } + + // 动画完毕 --------------------------------------- + // const belongArray = redxuState.belongArray //监听cookie里面如果有closeActivityModal这个值 则打印这个值 @@ -2010,7 +2053,7 @@ export default function Index() { // 获取cookie里面的closeActivityModal的值 // console.log(closeActivityModal); - + }, []); useEffect(() => { // loactionStorage里的activeMenu @@ -4757,10 +4800,31 @@ export default function Index() {
-
+
{ messageApi.success('邀请码已复制到剪贴板'); }).catch(() => { - messageApi.error('复制失败，请手动复制'); + messageApi.error('复制失败'); }); } else { // 兼容旧浏览器 const input = document.createElement('input'); - input.value = 'http://127.0.0.1:5500/Register.html?code=' + activityCode; + 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('复制失败，请手动复制'); + messageApi.error('复制失败'); } document.body.removeChild(input); } @@ -4832,18 +4896,23 @@ export default function Index() {
-
{ - 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=/`; - } - }}> +
{ + // 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=/`; + // } + // } + + // 动画 + handleClose + }>
diff --git a/src/store/index.ts b/src/store/index.ts index c647582..f77efa2 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -29,7 +29,10 @@ const baseState = { replaceArray: [], replaceTotal: 0, newReplace: false, - activityModal:false, //活动弹窗 + activityModal: false, //活动弹窗 + activityImgShow: true, //活动图片是否展示 + // 坐标 + centerPoint: { x: 0, y: 0 }, } // 创建仓库 @@ -98,9 +101,15 @@ const reducer = (state = baseState, action: any) => { if (action.type == 'newReplace') { nstate.newReplace = action.val } - if (action.type == 'setActivityModal') { + if (action.type == 'setActivityModal') { nstate.activityModal = action.val } + if (action.type == 'upCenterPoint') { + nstate.centerPoint = action.val + } + if (action.type == 'setActivityImgShow') { + nstate.activityImgShow = action.val + } return nstate } const store = createStore(reducer)