Commit d37ae2d2 authored by 周宏民's avatar 周宏民

pref: 演示过渡页添加 宣传页

parent 13c1765f
Pipeline #95987 passed with stages
This diff was suppressed by a .gitattributes entry.
......@@ -25,7 +25,7 @@ const BottomItem = props => {
const toPage = (url, col) => {
if (!url.includes('https')) return;
if (!url.includes('user/noscret') || projectConfig[col['平台名称']]) {
return handToPage(url);
return handToPage(url, col['平台名称']);
}
message.warning('该账号没有权限,请联系管理人员');
};
......
......@@ -17,7 +17,7 @@ const LeftItem = props => {
if (row?.['产品地址']) {
if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误,请联系管理人员');
handToProduct(row['产品地址'], row['产品名称']);
handToProduct(row['产品地址'], row['产品名称'], row['产品类型']);
} else {
return message.warning('未配置产品地址,请联系管理人员');
}
......
......@@ -16,7 +16,7 @@ const RightItem = props => {
if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误,请联系管理人员');
if (row['产品地址'] && row['产品地址'].includes('https')) {
handToProduct(row['产品地址'], row['产品名称']);
handToProduct(row['产品地址'], row['产品名称'], row['产品名称']);
}
};
const renderRow = (row, index) => {
......
......@@ -53,6 +53,8 @@ const Demonstration = props => {
boxHeight: 910,
});
const [linkUrl, setLinkUrl] = useState('');
const [pageData, setPageData] = useState({}); // 宣传页配置
const [transitionImg, setTransitionImg] = useState(''); // 宣传页过渡图
const [projectData, setProjectData] = useState([]);
const [configData, setConfigData] = useState([]);
const [productData, setProductData] = useState([]);
......@@ -94,6 +96,15 @@ const Demonstration = props => {
}
}, 100);
};
const startLoading = name => {
console.log('🚀 ~ name:', name, pageData[name]);
if (pageData?.[name]) {
setTransitionImg(pageData[name]);
} else {
setJumpLoading(true);
jumpProgressStart();
}
};
const jumpProgressEnd = () => {
setProgressValue2(100);
timer2.current && clearInterval(timer2.current);
......@@ -110,11 +121,10 @@ const Demonstration = props => {
timer2.current = null;
}, time * 1000);
};
const handToProduct = (url, name) => {
console.log('🚀 ~ url, name:', url, name, productConfig);
const handToProduct = (url, name, type) => {
console.log('🚀 ~ url, name:', url, name, type, productConfig);
if (!productConfig?.[name]) return message.warning('该账号没有权限,请联系管理员');
setJumpLoading(true);
jumpProgressStart();
startLoading(type);
setLinkUrl(url);
let time = 15;
......@@ -166,11 +176,10 @@ const Demonstration = props => {
}
};
const handToPage = url => {
const handToPage = (url, name) => {
if (!url) return message.warning('该环境未配置,请联系管理员');
if (!url.includes('https')) return;
setJumpLoading(true);
jumpProgressStart();
startLoading(name);
setLinkUrl(url);
startTiming(4);
};
......@@ -334,6 +343,52 @@ const Demonstration = props => {
setProductConfig(obj);
});
};
const imgLoad = data =>
new Promise((resolve, reject) => {
const img = new Image();
img.src = data.url;
img.onload = () => {
resolve(data);
};
img.onerror = () => {
resolve(null);
};
});
const getConfig = () => {
const params = {
ignoreSite: true,
accountName: '宣传页',
isAll: true,
};
appService.getAccountPageList(params).then(res => {
const dataStr1 = res?.data?.jsonData || '';
const data1 = dataStr1 ? JSON.parse(dataStr1) : [];
const obj = {};
const reqArr = [];
data1.forEach(d => {
const key = d['名称'];
if (key) {
const url = `/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${d['图片']}`;
reqArr.push(
imgLoad({
name: key,
url,
}),
);
}
});
Promise.all(reqArr).then(result => {
if (result.length > 0) {
result.forEach(r => {
if (r) {
obj[r.name] = r.url;
}
});
setPageData(obj);
}
});
});
};
const getData = () => {
setLoading(true);
const req1 = appService.getAccountPageList({
......@@ -399,8 +454,12 @@ const Demonstration = props => {
setNewProductData(newList);
setLoading(false);
getConfig();
});
};
const onEndPage = () => {
setTransitionImg('');
};
const onendLoading = () => {
jumpProgressEnd();
};
......@@ -498,7 +557,15 @@ const Demonstration = props => {
</div>
</div>
) : null} */}
{jumpLoading ? (
{transitionImg ? (
<div className={styles.demonstrationLoadPage} key="jumpLoading">
<div className={styles.demonstrationLoadPageImg}>
<img src={transitionImg} alt="" />
<div className={classNames(styles.demonstrationLoadPageBtn)} onClick={onEndPage} />
</div>
</div>
) : null}
{jumpLoading && !transitionImg ? (
<div className={styles.demonstrationLoad} key="jumpLoading">
<div style={{ width: '285px' }}>
<LoadPage percent={progressValue2 / 100} text="页面加载中~" />
......
......@@ -83,6 +83,42 @@
}
.demonstrationLoadPage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1090;
overflow-y: auto;
}
.demonstrationLoadPageImg {
height: auto;
width: 100%;
position: relative;
img {
width: 100%;
}
.demonstrationLoadPageBtn {
position: absolute;
bottom: 15px;
left: calc(50% - 188px);
width: 376px;
height: 90px;
background: url('@{imgSrc}/jumpBtn.png') no-repeat center center;
background-size: 100% 100%;
z-index: 1095;
cursor: pointer;
transition: all 0.2s;
}
.demonstrationLoadPageBtn:hover {
transform: scale(1.1);
}
}
.demonstrationLoad {
width: 100%;
......@@ -416,4 +452,5 @@
visibility: visible;
-webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
\ No newline at end of file
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment