renkang/ranking_list_h5
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加了请求锁，缩小了背景图

Browse Source
This commit is contained in:
17792275749
2026-01-05 10:59:00 +08:00
parent b24c83282e
commit 56c72e9a2c
3 changed files with 272 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/dietaryNutritionTips/bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

src/views/dietaryNutritionTips/dietaryNutritionTips8.vue
+168 -208
View File
@@ -9,7 +9,7 @@
<div class="title">
<div></div>
<div>
<div>体重管理行动（{{dataConfig.personnelType === 'staff' ? '员工' : '部门'}}）</div>
<div>体重管理行动（{{ dataConfig.personnelType === 'staff' ? '员工' : '部门' }}）</div>
<div>
<div>{{ dataConfig.currentDate }}</div>
<div>
@@ -71,8 +71,9 @@ export default {
name: "dietaryNutritionTips",
data() {
return {
isLoading: false, // 极限规避：请求锁
rankingConfig: {
personnelType: "department", // 员工：staff / 部门：department
personnelType: "department",
requestConfig: {
agreement: "https",
url: "api.cqygjk.com",
@@ -80,220 +81,144 @@ export default {
urlPrefix: "/health-weight/api/anon",
orgCode: ""
},
setTimeOutFun: null
},
dataConfig: {
personnelType: "department", // 员工：staff / 部门：department
personnelType: "department",
currentDate: "",
doingDay: "",
list: [],
startDay: "-",
},
scrollConfig: {
scrollAnimationFrameId: null, // 用于存储 requestAnimationFrame 的 ID
scrollSpeed: 2, // 滚动速度，每帧移动的像素数
// 这里的 scrollWaitTime 将在 startOneTimeScroll 中动态决定
// 1秒用于有数据且能滚动，5秒用于无数据或数据不足以滚动
dynamicScrollWaitTime: 1 // 动态等待时间，默认为1秒
scrollAnimationFrameId: null,
scrollSpeed: 2,
dynamicScrollWaitTime: 6
}
};
},
created() {
let url = this.$route.query.url;
if (url) {
this.rankingConfig.requestConfig.url = Array.isArray(url) ? url[0] : url;
}
let code = this.$route.query.orgCode;
if (code) {
this.rankingConfig.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
}
this.load();
this.dailyTaskScheduler();
this.initParams();
this.load("department");
this.initDailyScheduler(); // 启动时间更新与零点刷新逻辑
},
beforeDestroy() {
this.stopAllLoops();
},
methods: {
dailyTaskScheduler() {
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = (now.getDate()).toString().padStart(2, "0");
const week = now.getDay();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
this.dataConfig.currentDate = year + "年" + month + "月" + day + "日 " + weekDays[week];
this.dataConfig.doingDay = this.daysSinceDate("2025-05-07");
this.dataConfig.startDay = "2025年5月7日";
if (hours === 23 && minutes === 59 && seconds === 50) {
sessionStorage.removeItem('staff');
sessionStorage.removeItem('department');
}
if (hours === 0 && minutes === 0 && seconds === 10) {
this.load();
}
setTimeout(this.dailyTaskScheduler, 1000);
initParams() {
let url = this.$route.query.url;
if (url) this.rankingConfig.requestConfig.url = Array.isArray(url) ? url[0] : url;
let code = this.$route.query.orgCode;
if (code) this.rankingConfig.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
},
// 极限规避：时间管理与凌晨 0 点强制刷新
initDailyScheduler() {
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
setInterval(() => {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 1. 每秒更新一次界面日期信息
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = (now.getDate()).toString().padStart(2, "0");
const week = now.getDay();
this.dataConfig.currentDate = `${year}年${month}月${day}日 ${weekDays[week]}`;
this.dataConfig.doingDay = this.daysSinceDate("2025-05-07");
this.dataConfig.startDay = "2025年5月7日";
// 2. 极限规避：凌晨 00:00:00 强制刷新整个页面
// 彻底释放内存、清除过期缓存、重置字体渲染引擎
if (hours === 0 && minutes === 0 && seconds === 0) {
sessionStorage.clear();
window.location.reload();
}
}, 1000);
},
stopAllLoops() {
if (this.scrollConfig.scrollAnimationFrameId) {
cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
this.scrollConfig.scrollAnimationFrameId = null;
}
// 清除可能存在的 setTimeout，避免重复请求
if (this.rankingConfig.setTimeOutFun) {
clearTimeout(this.rankingConfig.setTimeOutFun);
this.rankingConfig.setTimeOutFun = null;
}
},
load(targetType) {
if (this.isLoading) return; // 锁死，防止并发
this.stopAllLoops();
this.rankingConfig.personnelType = targetType;
const org = this.rankingConfig.requestConfig.orgCode;
const cacheKey = `weight_${targetType}_${org}`;
const localData = sessionStorage.getItem(cacheKey);
if (localData) {
const parsedData = JSON.parse(localData);
if (parsedData && parsedData.length) {
this.renderUI(parsedData, targetType);
return;
}
}
this.loadDataUrl(targetType);
},
loadDataUrl(type) {
this.isLoading = true;
const _this = this;
const config = _this.rankingConfig.requestConfig;
const serve = `${config.agreement}://${config.url}${config.suffix}${config.urlPrefix}`;
const apiPath = type === "staff" ? "/userRank" : "/deptRank";
const pageSize = type === "staff" ? "300" : "100";
const fullUrl = `${serve}${apiPath}?pageNo=1&pageSize=${pageSize}&orgCode=`;
Promise.all([
_this.orgCodeRequest(fullUrl + "A01A86"),
_this.orgCodeRequest(fullUrl + "A01A37"),
]).then((res) => {
const processedData = _this.combineAndSortAndTakeTop50(res[0], res[1], type);
// 存储带 OrgCode 的唯一缓存
const cacheKey = `weight_${type}_${config.orgCode}`;
sessionStorage.setItem(cacheKey, JSON.stringify(processedData));
// 只有类型匹配才更新渲染
if (_this.rankingConfig.personnelType === type) {
_this.renderUI(processedData, type);
}
}).catch(() => {
if (_this.rankingConfig.personnelType === type) {
_this.dataConfig.list = [];
_this.startBannerLoop();
}
}).finally(() => {
_this.isLoading = false;
});
},
renderUI(data, type) {
this.dataConfig.personnelType = type;
this.dataConfig.list = data;
this.$nextTick(() => {
this.startOneTimeScroll();
});
},
orgCodeRequest(requestUrl) {
return new Promise((resolve, reject) => {
httpRequest("POST", requestUrl, {}, {}).then((res) => {
resolve(res.result.rankList);
}).catch(() => {
reject();
});
})
},
load() {
let _this = this;
_this.rankingConfig.personnelType = _this.rankingConfig.personnelType === "staff" ? "department" : "staff";
let data = sessionStorage.getItem(_this.rankingConfig.personnelType) || null;
if(data) {
let dataLength = JSON.parse(data);
if(dataLength && dataLength.length) {
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
_this.dataConfig.list = JSON.parse(data);
_this.$nextTick(() => {
_this.startOneTimeScroll();
});
} else {
_this.loadDataUrl();
}
} else {
_this.loadDataUrl();
}
},
loadDataUrl() {
let _this = this;
let serve = _this.rankingConfig.requestConfig.agreement + "://" + _this.rankingConfig.requestConfig.url + _this.rankingConfig.requestConfig.suffix + _this.rankingConfig.requestConfig.urlPrefix;
let url = serve + (_this.rankingConfig.personnelType === "staff" ? "/userRank" : "/deptRank") + "?pageNo=1&pageSize=" + (_this.rankingConfig.personnelType === "staff" ? "300" : "100") + "&orgCode=";
Promise.all([
_this.orgCodeRequest(url + "A01A86"),
_this.orgCodeRequest(url + "A01A37"),
]).then((res) => {
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
let data = _this.combineAndSortAndTakeTop50(res[0], res[1], _this.dataConfig.personnelType);
sessionStorage.setItem(_this.rankingConfig.personnelType, JSON.stringify(data));
if (data && data.length) {
_this.dataConfig.list = data;
_this.$nextTick(() => {
_this.startOneTimeScroll();
});
} else {
_this.startBannerLoop();
}
}).catch((error) => {
_this.dataConfig.list = [];
_this.startBannerLoop();
})
},
daysSinceDate(targetDateString) {
const targetDate = new Date(targetDateString);
const currentDate = new Date(); // 当前日期
// 将日期部分归零，只比较天数差，避免时区和时间的影响
targetDate.setHours(0, 0, 0, 0);
currentDate.setHours(0, 0, 0, 0);
const differenceInTime = currentDate.getTime() - targetDate.getTime();
const differenceInDays = differenceInTime / (1000 * 3600 * 24);
return Math.floor(differenceInDays); // 返回整数天数
},
combineAndSortAndTakeTop50(arr1, arr2, personnelType) {
const combinedArray = arr1.concat(arr2);
let processedArray = [];
if(personnelType === "department") {
let filteredArray = combinedArray.filter(item => {
const isExcluded = item.orgName === "" || item.orgName === null || item.orgName === "公司机关";
return !isExcluded;
});
processedArray = filteredArray;
}
if(personnelType === "staff") {
const departmentsToReplace = [
"综合管理部",
"人力资源部",
"计划财务部",
"安全与设备管理部",
"矿区建设中心",
"物业后勤中心",
"健康服务中心",
"社会服务中心",
"机关事务中心",
"交通服务中心"
];
let filteredArray = combinedArray.filter(item => {
const isExcluded = item.departName === "部领导" || item.departName === "助理副总师";
return !isExcluded;
});
let filteredArrayMap = filteredArray.map(item => {
if (departmentsToReplace.includes(item.departName)) {
item.departName = "公共事务中心";
return item;
}
return item;
});
processedArray = filteredArrayMap;
}
let processedArraySort = processedArray.sort((a, b) => {
const valueA = parseFloat(a.value);
const valueB = parseFloat(b.value);
return valueB - valueA;
resolve(res.result.rankList || []);
}).catch(() => reject());
});
let currentRank = 1;
let previousValue = null;
let processedArraySortMap = processedArraySort.map((item, index) => {
const currentValue = parseFloat(item.value);
if (index === 0) {
previousValue = currentValue;
item.rank = currentRank;
return item;
} else {
if (currentValue !== previousValue) {
currentRank++;
}
previousValue = currentValue;
item.rank = currentRank;
return item;
}
});
const top50Array = processedArraySortMap.filter(item => {
return item.rank <= 50;
});
return top50Array;
},
startOneTimeScroll() {
@@ -301,33 +226,22 @@ export default {
if (!container) return;
const maxScrollTop = container.scrollHeight - container.clientHeight;
this.scrollConfig.dynamicScrollWaitTime = 6;
// 根据是否可滚动来设置动态等待时间
if (maxScrollTop <= 0) {
console.log('内容不足以滚动，等待 5 秒并请求下一批数据');
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为5秒
} else {
console.log('内容可滚动，等待 1 秒并请求下一批数据');
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为1秒
}
container.scrollTop = 0; // 确保每次开始都从顶部滚动
container.scrollTop = 0;
let currentScrollTop = 0;
const animateScroll = () => {
if (currentScrollTop < maxScrollTop) {
currentScrollTop += this.scrollConfig.scrollSpeed;
if (currentScrollTop > maxScrollTop) {
currentScrollTop = maxScrollTop;
}
if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
container.scrollTop = currentScrollTop;
this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
} else {
// 滚动完成后
console.log(`列表滚动完成，等待 ${this.scrollConfig.dynamicScrollWaitTime} 秒并请求下一批数据`);
this.scrollConfig.scrollAnimationFrameId = null;
this.rankingConfig.setTimeOutFun = setTimeout(() => {
this.load();
const nextType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
this.load(nextType);
}, this.scrollConfig.dynamicScrollWaitTime * 1000);
}
};
@@ -336,10 +250,56 @@ export default {
},
startBannerLoop() {
setTimeout(() => {
this.stopAllLoops();
this.load();
}, 5000)
this.rankingConfig.setTimeOutFun = setTimeout(() => {
const nextType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
this.load(nextType);
}, 5000);
},
daysSinceDate(targetDateString) {
const targetDate = new Date(targetDateString);
const currentDate = new Date();
targetDate.setHours(0, 0, 0, 0);
currentDate.setHours(0, 0, 0, 0);
return Math.floor((currentDate - targetDate) / (1000 * 3600 * 24));
},
combineAndSortAndTakeTop50(arr1, arr2, personnelType) {
const combinedArray = arr1.concat(arr2);
let processedArray = [];
if(personnelType === "department") {
processedArray = combinedArray.filter(item =>
item.orgName && item.orgName !== "公司机关"
);
} else {
const departmentsToReplace = [
"综合管理部", "人力资源部", "计划财务部", "安全与设备管理部",
"矿区建设中心", "物业后勤中心", "健康服务中心", "社会服务中心",
"机关事务中心", "交通服务中心"
];
processedArray = combinedArray.filter(item =>
item.departName !== "部领导" && item.departName !== "助理副总师"
).map(item => {
if (departmentsToReplace.includes(item.departName)) {
return { ...item, departName: "公共事务中心" };
}
return item;
});
}
const sorted = processedArray.sort((a, b) => parseFloat(b.value) - parseFloat(a.value));
let currentRank = 1;
let previousValue = null;
return sorted.map((item, index) => {
const val = parseFloat(item.value);
if (index !== 0 && val !== previousValue) {
currentRank++;
}
previousValue = val;
return { ...item, rank: currentRank };
}).filter(item => item.rank <= 50);
}
}
};
@@ -357,8 +317,10 @@ export default {
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
background-image: url("@/assets/images/dietaryNutritionTips/bg.jpg");
font-family: "Microsoft YaHei";
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
.tips {
width: 100%;
@@ -481,11 +443,9 @@ export default {
padding: 105px 24px 0;
box-sizing: border-box;
border: 2px solid #ffc548;
background: linear-gradient(
180deg,
rgba(225, 225, 225, 0) 0%,
rgba(225, 225, 225, 0.3) 100%
);
background: linear-gradient(180deg,
rgba(225, 225, 225, 0) 0%,
rgba(225, 225, 225, 0.3) 100%);
.contentHeader {
width: 100%;
src/views/dietaryNutritionTips/dietaryNutritionTips9.vue
+104 -133
View File
@@ -71,8 +71,9 @@ export default {
name: "dietaryNutritionTips",
data() {
return {
isLoading: false, // 极限规避：请求锁
rankingConfig: {
personnelType: "department", // 员工：staff / 部门：department
personnelType: "department",
requestConfig: {
agreement: "https",
url: "yyjk.cqygjk.com",
@@ -82,51 +83,55 @@ export default {
canteenId: "1599670511042785282,1746801170592919553",
pageSize: 0
},
setTimeOutFun: null
},
dataConfig: {
personnelType: "department", // 员工：staff / 部门：department
personnelType: "department",
currentDate: "",
dinnerType: "",
userNum: "-",
list: [],
startDay: "-",
},
scrollConfig: {
scrollAnimationFrameId: null, // 用于存储 requestAnimationFrame 的 ID
scrollSpeed: 2, // 滚动速度，每帧移动的像素数
// 这里的 scrollWaitTime 将在 startOneTimeScroll 中动态决定
// 1秒用于有数据且能滚动，5秒用于无数据或数据不足以滚动
dynamicScrollWaitTime: 1 // 动态等待时间，默认为1秒
scrollAnimationFrameId: null,
scrollSpeed: 2,
dynamicScrollWaitTime: 6
}
};
},
created() {
let url = this.$route.query.url;
if (url) {
this.rankingConfig.requestConfig.url = Array.isArray(url) ? url[0] : url;
}
let code = this.$route.query.orgCode;
if (code) {
this.rankingConfig.requestConfig.orgCode = Array.isArray(code) ? code[0] : code;
}
let canteenId = this.$route.query.canteenId;
if (canteenId) {
this.rankingConfig.requestConfig.canteenId = Array.isArray(canteenId) ? canteenId[0] : canteenId;
}
this.initParams();
this.loadDataUrl();
this.initDailyRefresh(); // 启动凌晨刷新逻辑
},
beforeDestroy() {
this.stopAllLoops();
},
methods: {
initParams() {
const { query } = this.$route;
if (query.url) this.rankingConfig.requestConfig.url = Array.isArray(query.url) ? query.url[0] : query.url;
if (query.orgCode) this.rankingConfig.requestConfig.orgCode = Array.isArray(query.orgCode) ? query.orgCode[0] : query.orgCode;
if (query.canteenId) this.rankingConfig.requestConfig.canteenId = Array.isArray(query.canteenId) ? query.canteenId[0] : query.canteenId;
},
// 极限规避：凌晨 0 点强制刷新页面，解决汉字消失和内存碎片的终极方案
initDailyRefresh() {
setInterval(() => {
const now = new Date();
if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
sessionStorage.clear();
window.location.reload();
}
}, 1000);
},
stopAllLoops() {
if (this.scrollConfig.scrollAnimationFrameId) {
cancelAnimationFrame(this.scrollConfig.scrollAnimationFrameId);
this.scrollConfig.scrollAnimationFrameId = null;
}
// 清除可能存在的 setTimeout，避免重复请求
if (this.rankingConfig.setTimeOutFun) {
clearTimeout(this.rankingConfig.setTimeOutFun);
this.rankingConfig.setTimeOutFun = null;
@@ -134,98 +139,84 @@ export default {
},
loadDataUrl() {
let _this = this;
_this.stopAllLoops(); // 在请求数据前，停止所有正在进行的循环
if (this.isLoading) return; // 锁死并发
_this.dataConfig.currentDate = getCurrentDate();
_this.rankingConfig.personnelType = _this.rankingConfig.personnelType === "staff" ? "department" : "staff";
_this.rankingConfig.requestConfig.pageSize = _this.rankingConfig.personnelType === "staff" ? 50 : 100;
this.stopAllLoops();
let serve = _this.rankingConfig.requestConfig.agreement + "://" + _this.rankingConfig.requestConfig.url;
let requestUrl = serve + _this.rankingConfig.requestConfig.suffix + _this.rankingConfig.requestConfig.urlPrefix + (_this.rankingConfig.personnelType === "staff" ? "/getNutritionRankings" : "/getDepartRankings");
// 1. 确定本次加载的目标类型并锁定
const targetType = this.rankingConfig.personnelType === "staff" ? "department" : "staff";
this.rankingConfig.personnelType = targetType;
let params = {
orgCode: _this.rankingConfig.requestConfig.orgCode,
canteenId: _this.rankingConfig.requestConfig.canteenId,
no: _this.rankingConfig.requestConfig.pageSize,
const config = this.rankingConfig.requestConfig;
const pageSize = targetType === "staff" ? 50 : 100;
const dataKey = targetType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
// 2. 尝试从带 OrgCode 标识的缓存读取
const cacheKey = `${dataKey}_${config.orgCode}`;
const localData = sessionStorage.getItem(cacheKey);
if (localData) {
this.renderData(JSON.parse(localData), targetType);
return;
}
// 3. 真正发起请求
this.isLoading = true;
this.dataConfig.currentDate = getCurrentDate();
const serve = `${config.agreement}://${config.url}`;
const apiPath = targetType === "staff" ? "/getNutritionRankings" : "/getDepartRankings";
const requestUrl = `${serve}${config.suffix}${config.urlPrefix}${apiPath}`;
const params = {
orgCode: config.orgCode,
canteenId: config.canteenId,
no: pageSize,
};
httpRequest("GET", requestUrl, params, {
'X-Sign': signMd5Utils.getSign(requestUrl, params),
'X-TIMESTAMP': signMd5Utils.getDateTimeToString(requestUrl, params),
}).then((res) => {
_this.getSessionStorageData(res);
// if (res.success && res.result) {
// _this.dataConfig.dinnerType = res.result.dinnerType ? res.result.dinnerType : "-";
// _this.dataConfig.userNum = res.result.userNum ? res.result.userNum : "-";
// _this.dataConfig.startDay = "2025年5月7日";
//
// _this.dataConfig.personnelType = _this.rankingConfig.personnelType;
// let dataKey = _this.dataConfig.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
// let list = res.result[dataKey];
//
// if (list && list.length) {
// list.map(item => {
// if(item.departName === "行政事务管理处") {
// item.departName = "公共事务中心";
// }
// })
// _this.dataConfig.list = list;
//
// _this.$nextTick(() => {
// _this.startOneTimeScroll();
// });
// } else {
// _this.startBannerLoop();
// }
// } else {
// _this.startBannerLoop();
// }
}).catch((error) => {
console.error("请求失败：", error);
_this.getSessionStorageData(null);
if (res && res.success && res.result) {
// 数据脱敏/替换
const list = res.result[dataKey];
if (list && list.length) {
list.forEach(item => {
if (item.departName === "行政事务管理处") item.departName = "公共事务中心";
});
}
// 存储缓存
sessionStorage.setItem(cacheKey, JSON.stringify(res.result));
// 渲染（传入 targetType 确保一致性）
this.renderData(res.result, targetType);
} else {
this.startBannerLoop();
}
}).catch(() => {
this.startBannerLoop();
}).finally(() => {
this.isLoading = false;
});
},
getSessionStorageData(res) {
let _this = this;
_this.dataConfig.list = [];
_this.dataConfig.personnelType = _this.rankingConfig.personnelType;
let dataKey = _this.dataConfig.personnelType === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
if (res && res.success && res.result) {
console.log('有新数据，并且写入了。');
renderData(dataObj, type) {
// 只有当前视图类型依然匹配时，才允许渲染，防止慢接口覆盖新视图
if (this.rankingConfig.personnelType !== type) return;
if (res.result[dataKey] && res.result[dataKey].length) {
res.result[dataKey].map(item => {
if(item.departName === "行政事务管理处") {
item.departName = "公共事务中心";
}
})
}
const dataKey = type === "staff" ? 'nutritionRankingsVos' : 'departRankingsVos';
this.dataConfig.personnelType = type;
this.dataConfig.dinnerType = dataObj.dinnerType || "-";
this.dataConfig.userNum = dataObj.userNum || "-";
this.dataConfig.startDay = "2025年5月7日";
this.dataConfig.list = dataObj[dataKey] || [];
sessionStorage.setItem(dataKey, JSON.stringify(res.result));
}
let data = sessionStorage.getItem(dataKey) || null;
if(data) {
let data_ = JSON.parse(data);
_this.dataConfig.dinnerType = data_.dinnerType ? data_.dinnerType : "-";
_this.dataConfig.userNum = data_.userNum ? data_.userNum : "-";
_this.dataConfig.startDay = "2025年5月7日";
if (data_[dataKey] && data_[dataKey].length) {
_this.dataConfig.list = data_[dataKey];
_this.$nextTick(() => {
_this.startOneTimeScroll();
});
} else {
_this.startBannerLoop();
}
if (this.dataConfig.list.length > 0) {
this.$nextTick(() => {
this.startOneTimeScroll();
});
} else {
_this.startBannerLoop();
this.startBannerLoop();
}
},
@@ -234,31 +225,18 @@ export default {
if (!container) return;
const maxScrollTop = container.scrollHeight - container.clientHeight;
this.scrollConfig.dynamicScrollWaitTime = maxScrollTop <= 0 ? 6 : 6;
// 根据是否可滚动来设置动态等待时间
if (maxScrollTop <= 0) {
console.log('内容不足以滚动，等待 5 秒并请求下一批数据');
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为5秒
} else {
console.log('内容可滚动，等待 1 秒并请求下一批数据');
this.scrollConfig.dynamicScrollWaitTime = 6; // 设置为1秒
}
console.log(this.scrollConfig.dynamicScrollWaitTime);
container.scrollTop = 0; // 确保每次开始都从顶部滚动
container.scrollTop = 0;
let currentScrollTop = 0;
const animateScroll = () => {
if (currentScrollTop < maxScrollTop) {
currentScrollTop += this.scrollConfig.scrollSpeed;
if (currentScrollTop > maxScrollTop) {
currentScrollTop = maxScrollTop;
}
if (currentScrollTop > maxScrollTop) currentScrollTop = maxScrollTop;
container.scrollTop = currentScrollTop;
this.scrollConfig.scrollAnimationFrameId = requestAnimationFrame(animateScroll);
} else {
// 滚动完成后
console.log(`列表滚动完成，等待 ${this.scrollConfig.dynamicScrollWaitTime} 秒并请求下一批数据`);
this.scrollConfig.scrollAnimationFrameId = null;
this.rankingConfig.setTimeOutFun = setTimeout(() => {
this.loadDataUrl();
@@ -270,27 +248,17 @@ export default {
},
maskUserName(fullName) {
if (!fullName || typeof fullName !== 'string' || fullName.length === 0) {
return '';
}
let len = fullName.length;
if (len === 1) {
return fullName;
} else if (len === 2) {
return fullName.charAt(0) + '*';
} else {
let firstChar = fullName.charAt(0);
let lastChar = fullName.charAt(len - 1);
let maskedPart = '*'.repeat(len - 2);
return firstChar + maskedPart + lastChar;
}
if (!fullName || typeof fullName !== 'string') return '';
const len = fullName.length;
if (len <= 1) return fullName;
if (len === 2) return fullName[0] + '*';
return fullName[0] + '*'.repeat(len - 2) + fullName[len - 1];
},
startBannerLoop() {
setTimeout(() => {
this.stopAllLoops();
this.rankingConfig.setTimeOutFun = setTimeout(() => {
this.loadDataUrl();
}, 5000)
}, 5000);
}
}
};
@@ -308,7 +276,10 @@ export default {
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
background-image: url("@/assets/images/dietaryNutritionTips/bg.png");
background-image: url("@/assets/images/dietaryNutritionTips/bg.jpg");
font-family: "Microsoft YaHei";
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
.tips {
width: 100%;