Skip to content

Z
ZZH_SalaryWish-20250609
Commit a887ee99 authored by 王勇霞's avatar 王勇霞
Browse files
Options

feat: banner调整

parent 001e2c79
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 48 deletions
dist/index.html
View file @ a887ee99
<!doctype html><html lang="zh"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="dns-prefetch" href="//yun.duiba.com.cn"/><link rel="preconnect" href="//embedlog.duiba.com.cn"/><title>薪水心愿</title>
<script id="monitorjs" src="//yun.duiba.com.cn/woodpecker/sdk/0.0.36/woodpecker_outer.js" ></script>
<script id="registerMonitor">
// 烽火台注入前端监控脚本，请勿修改
try {
woodpecker.setConfig({
projectId: "p16fceb94",
developer: [
"c65fa0f82b012fed50a970205ca42350"
],
});
} catch (e) {
console.error(e);
}
</script>
<script>if (localStorage && localStorage.isWebp) {
<!doctype html><html lang="zh"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="dns-prefetch" href="//yun.duiba.com.cn"/><link rel="preconnect" href="//embedlog.duiba.com.cn"/><title>薪水心愿</title><script>if (localStorage && localStorage.isWebp) {
document.getElementsByTagName("html")[0].setAttribute("duiba-webp", "true");
}</script><script src="//yun.duiba.com.cn/spark/v2/spark.base.fz.wxpollyfill.js"></script><script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script><script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script><script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><link rel="stylesheet" href="//yun.duiba.com.cn/h5/lib/reset.css"/><script src="https://cdn2.h5no1.com/cbsp-telegraph/opfStatisticSdk.v3.min.js"></script><script>"use strict";
......@@ -88,6 +73,6 @@ if (CFG.projectId == "p16fceb94") {
CFG.MER_ID = getUrlParam("merId") || "10478";
if (!getUrlParam("appID")) {
// alert("【警告】检测到活动url中没有appID参数\n缺少该参数会导致埋点、分享、app信息获取错误。")
}</script><link href="//yun.duiba.com.cn/spark/v2/temp_base/1749694210224/styles/main.94ca292fc3ad549d51ec.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"use strict";
}</script><link href="//yun.duiba.com.cn/spark/v2/temp_base/1749723026817/styles/main.a88f37134dfa1b330abe.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>"use strict";
CFG.___G___ = 'qiqi%3Bdev%3Borigin%09git%40gitlab2.dui88.com%3Asparkprojects%2Fzzh_salarywish-20250609.git%20(fetch)%3Borigin%09git%40gitlab2.dui88.com%3Asparkprojects%2Fzzh_salarywish-20250609.git%20(push)%3B';</script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749694210224/js/runtime-main.c00fc532.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749694210224/js/vendors.8237ef09.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749694210224/js/main.240fd290.js" crossorigin="anonymous"></script></body></html>
\ No newline at end of file
CFG.___G___ = 'dev%3Bqiqi%3Borigin%09git%40gitlab2.dui88.com%3Asparkprojects%2Fzzh_salarywish-20250609.git%20(fetch)%3Borigin%09git%40gitlab2.dui88.com%3Asparkprojects%2Fzzh_salarywish-20250609.git%20(push)%3B';</script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749723026817/js/runtime-main.19908711.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749723026817/js/vendors.8237ef09.js" crossorigin="anonymous"></script><script src="//yun.duiba.com.cn/spark/v2/temp_base/1749723026817/js/main.52e8915d.js" crossorigin="anonymous"></script></body></html>
\ No newline at end of file
dist/js/main.240fd290.js deleted 100644 → 0
View file @ 001e2c79
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/main.240fd290.js.map deleted 100644 → 0
View file @ 001e2c79
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/main.52e8915d.js 0 → 100644
View file @ a887ee99
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/main.52e8915d.js.map 0 → 100644
View file @ a887ee99
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/runtime-main.c00fc532.js → dist/js/runtime-main.19908711.js
View file @ a887ee99
!function(e){function r(r){for(var n,a,l=r[0],i=r[1],p=r[2],c=0,s=[];c<l.length;c++)a=l[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="//yun.duiba.com.cn/spark/v2/temp_base/1749694210224/";var l=window.webpackJsonp=window.webpackJsonp||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=i;t()}([]);
//# sourceMappingURL=runtime-main.c00fc532.js.map
\ No newline at end of file
!function(e){function r(r){for(var n,a,l=r[0],i=r[1],p=r[2],c=0,s=[];c<l.length;c++)a=l[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="//yun.duiba.com.cn/spark/v2/temp_base/1749723026817/";var l=window.webpackJsonp=window.webpackJsonp||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var p=0;p<l.length;p++)r(l[p]);var f=i;t()}([]);
//# sourceMappingURL=runtime-main.19908711.js.map
\ No newline at end of file
loc.json
View file @ a887ee99
{"numOfComponents":5048,"numOfProject":1593}
\ No newline at end of file
{"numOfComponents":5048,"numOfProject":1659}
\ No newline at end of file
mock/common/homeInfo.js
View file @ a887ee99
......@@ -5,47 +5,65 @@ module.exports = {
data: {
bannerInfo: [
{
activityId: "25年一期一年大额存单",
index: 1,
appUrl:
"BOCBANK://search/depositManagementLargeDeposit",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/gtdqpo-oci4sfjqigsi7d.png",
wxUrl: "https://mbs.boc.cn/v/a/N0U0KUT5w6",
},
{
activityId: "人民币结构性存款(新客薪享专属)250268",
index: 1,
appUrl: "BOCBANK://search/wealthManagementProductDetail?productCode=GRSDR250268",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/pbst1hqnfepbpwurxoyqz.png",
wxUrl: "https://ccsa.ebsnew.boc.cn/shareFinace/shareVue/structuredDeposit/index.html#/productDetail?unctionCode=wealthManagementProductDetail&productCode=GRSDR250268&functionCode=wealthManagementProductDetail",
},
{
activityId: "人民币结构性存款(新客薪享专属)250269",
index: 1,
appUrl: "BOCBANK://search/wealthManagementProductDetail?productCode=GRSDR250269",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/adnluv8xm4ql3wdpk-ruv.png",
wxUrl: "https://ccsa.ebsnew.boc.cn/shareFinace/shareVue/structuredDeposit/index.html#/productDetail?unctionCode=wealthManagementProductDetail&productCode=GRSDR250269&functionCode=wealthManagementProductDetail",
},
{
activityId: "中银理财-怡享天天85号",
index: 2,
appUrl: "BOCBANK://search/bocFinanceProductDetail?productId=0YIXTT085A",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/n7xaogiz7jtwpp8qm99tm.png",
wxUrl: "https://ebsnew.boc.cn/bocphone/VueLocalCli4/bocFinanceDetail/index.html#/productDetail?functionCode=bocFinanceProductDetail&productId=0YIXTT085A&lastShortUrl=nOJ4DyeDrS",
},
{
activityId: "(薪享）中银理财-稳富中短久期30天持有期A",
index: 2,
appUrl: "BOCBANK://search/bocFinanceProductDetail?productId=CYQWFZDJQ30DA",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/7q2yb0uvjrmgyvthi88pz.png",
wxUrl: "https://ebsnew.boc.cn/bocphone/VueLocalCli4/bocFinanceDetail/index.html#/productDetail?functionCode=bocFinanceProductDetail&productId=CYQWFZDJQ30DA&lastShortUrl=RO84BS3kaG",
},
{
activityId: "中银理财“福”（18个月）最短持有期固收增强理财产品2号",
index: 2,
appUrl: "BOCBANK://search/bocFinanceProductDetail?productId=FCYQZQ18M02L",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/brjve-wbjkryfz8bmrxhp.png",
wxUrl: "https://ebsnew.boc.cn/bocphone/VueLocalCli4/bocFinanceDetail/index.html#/productDetail?functionCode=bocFinanceProductDetail&productId=FCYQZQ18M02L&lastShortUrl=bOr43D41ef",
},
{
activityId: "活钱宝",
index: 3,
appUrl: "BOCBANK://search/balance_0000",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/d9wjnqz79shq3lycsusht.png",
wxUrl: "https://mbas.mbs.boc.cn/WeiBankFront/weixinVue/openApp/index.html#/openApp?lastShortUrl=Dzx4CdY1sb",
},
{
activityId: "海富通沪深300指数增强A",
index: 3,
appUrl: "BOCBANK://search/fundProductDetail?productId=004513",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/cwhmiaxa3qwzbg5pjfxqa.png",
wxUrl: "https://ebsnew.boc.cn/bocphone/VueLocalCli4/fundDetail/index.html#/productDetail?productId=004513&lastShortUrl=QOY4KlFaRm",
},
{
activityId: "招商信用增强债券A",
index: 3,
appUrl: "BOCBANK://search/fundProductDetail?productId=217023",
bannerImg: "https://yun.tuisnake.com/ZZH_SalaryWish/t7b-ohhrmk2zajkpt2ser.png",
wxUrl: "https://ebsnew.boc.cn/bocphone/VueLocalCli4/fundDetail/index.html#/productDetail?productId=217023&lastShortUrl=7OT4cZxAyL",
......
spark.config.json
View file @ a887ee99
{"proName":"中总行新客九重礼-20250408","proDesc":"","proPath":"/Users/duibagroup/Downloads/duiba-wyx/2025/ZZH_SalaryWish-20250609","createTime":1744082788556}
{"proName":"中总行薪水心愿-20250610","proDesc":"","proPath":"/Users/duibagroup/Downloads/duiba-wyx/2025/ZZH_SalaryWish-20250609","createTime":1744082788556}
sparkrc.js
View file @ a887ee99
......@@ -9,6 +9,6 @@ module.exports ={
"IMAGE_Q1": 0.6,
"IMAGE_Q2": 0.8,
"RES_PATH": "/src/assets/",
"RES_PATH_PROD": "//yun.duiba.com.cn/spark/v2/temp_base/1749694202592",
"JS_PATH_PROD": "https://yun.duiba.com.cn/spark/v2/temp_base/1749694210224/js"
"RES_PATH_PROD": "//yun.duiba.com.cn/spark/v2/temp_base/1749723015943",
"JS_PATH_PROD": "https://yun.duiba.com.cn/spark/v2/temp_base/1749723026817/js"
}
\ No newline at end of file
src/pages/HomePage/index.jsx
View file @ a887ee99
......@@ -14,6 +14,11 @@ import { Toast } from "@spark/ui";
@observer
class ShouYe extends React.Component {
state = {
firstList: [],
secondList: [],
thirdList: [],
};
constructor(props) {
super(props);
}
......@@ -23,6 +28,7 @@ class ShouYe extends React.Component {
await store.fetchHomeInfo();
// 获取用户信息
await store.getUserInfo();
this.handleBannerList();
// 埋点注册
await store.initStatistic();
// 首页曝光埋点
......@@ -35,6 +41,52 @@ class ShouYe extends React.Component {
});
}
handleBannerList = () => {
const data = this.groupByOrderTo2DArray(store.homeInfo.bannerInfo);
const firstList = data?.[0] || [];
const secondList = data?.[1] || [];
const thirdList = data?.[2] || [];
console.log("data", data);
this.setState({
firstList,
secondList,
thirdList,
});
/** 薪有所定 */
firstList.map((item, index) => {
handleLogExposure(1, 6, item.activityId, index + 1);
});
/** 薪享安心 */
secondList.map((item, index) => {
handleLogExposure(1, 7, item.activityId, index + 1);
});
/** 薪投外部 */
thirdList.map((item, index) => {
handleLogExposure(1, 8, item.activityId, index + 1);
});
};
groupByOrderTo2DArray(data) {
if (!Array.isArray(data)) return [];
const result = [];
let prevOrder = null;
data
.slice() // 创建副本避免修改原数组
.sort((a, b) => a.index - b.index) // 按 order 排序
.forEach((item) => {
if (prevOrder === null || item.index !== prevOrder) {
result.push([]); // 新建子数组
}
result[result.length - 1].push(item);
prevOrder = item.index;
});
return result;
}
handleClickJump = _asyncThrottle(async (item, index) => {
await store.appAuth(() => {
handleLogClick(1, 3, `${index + 1}_${item.remark}分会场活动按钮`);
......@@ -55,24 +107,25 @@ class ShouYe extends React.Component {
});
}, 500);
handleClickBanner = _asyncThrottle(async (item, index) => {
handleClickBanner = _asyncThrottle(async (item, index, type) => {
if (noUrl(item)) return;
await store.appAuth(() => {
handleLogClick(1, 6, `第${index + 1}个card`);
opfStatisticSdkClick(`card-${index + 1}`, `第${index + 1}个card`);
handleLogClick(1, type, item.activityId, index + 1);
opfStatisticSdkClick(`level-${type - 5}-card-${index + 1}`, item.activityId);
setTimeout(() => store.jumpLink(item));
});
}, 500);
handleClickShare = _asyncThrottle(async () => {
handleLogClick(1, 2);
opfStatisticSdkClick(`share-btn`, '首页-分享按');
opfStatisticSdkClick(`share-btn`, "首页-分享按");
shareStore.doShare();
}, 1000);
render() {
const { activityInfo = [], bannerInfo = [] } = store.homeInfo;
const { activityInfo = [] } = store.homeInfo;
const { pageBgImg } = store.frontVariable;
const { firstList = [], secondList = [], thirdList = [] } = this.state;
return (
<div className="shouYe">
......@@ -88,14 +141,36 @@ class ShouYe extends React.Component {
))}
</div>
<div className="bannerInfo">
{bannerInfo?.map((banner, index) => (
<span
key={"banner_" + index}
className={`banner banner_${index}`}
onClick={() => this.handleClickBanner(banner, index)}>
<img src={banner.bannerImg} alt="" />
</span>
))}
<div className={`scroll-wrapper ${firstList?.length <= 3 ? "scroll-wrapper-center" : ""}`}>
{firstList?.map((item, index) => (
<span
key={"banner_" + index}
className={`banner banner_${index}`}
onClick={() => this.handleClickBanner(item, index, 6)}>
<img src={item.bannerImg} alt="" />
</span>
))}
</div>
<div className={`scroll-wrapper ${secondList?.length <= 3 ? "scroll-wrapper-center" : ""}`}>
{secondList?.map((item, index) => (
<span
key={"banner_" + index}
className={`banner banner_${index}`}
onClick={() => this.handleClickBanner(item, index, 7)}>
<img src={item.bannerImg} alt="" />
</span>
))}
</div>
<div className={`scroll-wrapper ${thirdList?.length <= 3 ? "scroll-wrapper-center" : ""}`}>
{thirdList?.map((item, index) => (
<span
key={"banner_" + index}
className={`banner banner_${index}`}
onClick={() => this.handleClickBanner(item, index, 8)}>
<img src={item.bannerImg} alt="" />
</span>
))}
</div>
</div>
<span className="share" onClick={this.handleClickShare}></span>
......
src/pages/HomePage/index.less
View file @ a887ee99
......@@ -57,23 +57,31 @@
}
.bannerInfo {
width: 636px;
width: 616px;
height: auto;
left: 50%;
top: 1423px;
position: absolute;
transform: translateX(-50%);
padding-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.scroll-wrapper {
width: 100%;
height: 232px;
display: flex;
overflow-x: scroll;
margin-bottom: 82px;
}
.scroll-wrapper-center {
justify-content: center;
}
.banner {
display: block;
width: 184px;
height: 222px;
margin: 0 10px 82px;
margin: 0 10px;
flex-shrink: 0;
}
}
......
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