fix(homepage): 修复个人主页样式和功能问题
修复个人主页的响应式布局问题，优化移动端显示效果 调整分类和排序区域的样式，移除不必要的margin-left 更新投票组件的内容显示类名为one-line-display-v2 修复主页加载逻辑，优化数据获取和分页处理 移除未使用的代码和注释，清理CSS样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -1,307 +1,371 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
import { itemOffer } from "../component/item-offer/item-offer.js";
|
||||
import { itemSummary } from "../component/item-summary/item-summary.js";
|
||||
import { itemVote } from "../component/item-vote/item-vote.js";
|
||||
import { itemMj } from "../component/item-mj/item-mj.js";
|
||||
import { itemTenement } from "../component/item-tenement/item-tenement.js";
|
||||
import { headTop } from "../component/head-top/head-top.js";
|
||||
(async function () {
|
||||
const { itemForum } = await import(withVer("../component/item-forum/item-forum.js"));
|
||||
const { itemOffer } = await import(withVer("../component/item-offer/item-offer.js"));
|
||||
const { itemSummary } = await import(withVer("../component/item-summary/item-summary.js"));
|
||||
const { itemVote } = await import(withVer("../component/item-vote/item-vote.js"));
|
||||
const { itemMj } = await import(withVer("../component/item-mj/item-mj.js"));
|
||||
const { itemTenement } = await import(withVer("../component/item-tenement/item-tenement.js"));
|
||||
const { headTop } = await import(withVer("../component/head-top/head-top.js"));
|
||||
const { loadBox } = await import(withVer("../component/load-box/load-box.js"));
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
getUserInfoWin();
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
const tokenRef = ref(null);
|
||||
|
||||
init();
|
||||
onMounted(() => {
|
||||
getUserInfoWin();
|
||||
// init();
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
const params = getUrlParams();
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (params.classify) {
|
||||
classify.value = params.classify;
|
||||
}
|
||||
if (params.type) typeValue.value = params.type;
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
const preLoader = document.getElementById("pre-loader");
|
||||
if (preLoader) preLoader.style.display = "none";
|
||||
});
|
||||
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 40) getList();
|
||||
};
|
||||
const handleScroll = () => {
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = ref({
|
||||
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
|
||||
groupid: 3,
|
||||
nickname: "肖荣豪",
|
||||
realname: 1,
|
||||
token: "01346a38444d71aaadb3adad52b52c39",
|
||||
uid: 500144,
|
||||
uin: 4238049,
|
||||
});
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = window.innerHeight;
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
permissions.value = user?.authority || [];
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 200) getList();
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
let uid = ref(0);
|
||||
let uin = ref(0);
|
||||
let isLogin = ref(false);
|
||||
let realname = ref(0); // 是否已经实名
|
||||
let userInfoWin = ref({});
|
||||
|
||||
let permissions = ref([]);
|
||||
|
||||
const getUserInfoWin = () => {
|
||||
const checkUser = () => {
|
||||
const user = window.userInfoWin;
|
||||
if (!user) return;
|
||||
document.removeEventListener("getUser", checkUser);
|
||||
realname.value = user.realname;
|
||||
userInfoWin.value = user;
|
||||
if (user?.uin > 0 || user?.uid > 0) isLogin.value = true;
|
||||
permissions.value = user?.authority || [];
|
||||
|
||||
uid.value = user.uid;
|
||||
uin.value = user.uin;
|
||||
init();
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isLogin.value = true;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
document.addEventListener("closeAttest", handleAttestClose);
|
||||
loadAttest(2);
|
||||
};
|
||||
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
// 跳转登录
|
||||
const goLogin = () => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (window["userInfoWin"] && Object.keys(window["userInfoWin"]).length !== 0) {
|
||||
if (window["userInfoWin"]["uid"]) isLogin.value = true;
|
||||
else ajax_login();
|
||||
} else ajax_login();
|
||||
};
|
||||
|
||||
let schoolTags = ref([]);
|
||||
let gtercoin = ref(0);
|
||||
let info = ref({});
|
||||
let medallist = ref([]);
|
||||
let introduction = ref("");
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
|
||||
let avatar = "";
|
||||
const init = () => {
|
||||
ajax(`/v2/api/forum/postUserDetail`)
|
||||
.then((res) => {
|
||||
if (res.code == 401) {
|
||||
goLogin();
|
||||
const init = () => {
|
||||
uid.value = 500144
|
||||
uin.value = 4238049
|
||||
ajaxGet(`/v2/api/forum/getSpaceDetail?uid=${uid.value}&uin=${uin.value}`).then((res) => {
|
||||
if (res.code != 200) {
|
||||
creationAlertBox("error", res.message);
|
||||
return;
|
||||
}
|
||||
let data = res.data;
|
||||
|
||||
const data = res.data;
|
||||
|
||||
const allValues = Object.values(data.schoolTags || []);
|
||||
const onlyArrays = allValues.filter((item) => Array.isArray(item));
|
||||
let schoolTagsData = onlyArrays.flat();
|
||||
schoolTags.value = schoolTagsData;
|
||||
|
||||
gtercoin.value = data.gtercoin;
|
||||
data.info["lastlogintime"] = timeago(data.info.lastlogintime, 2);
|
||||
data.info["gtercoin"] = Math.floor(data.info.gtercoin || 0);
|
||||
|
||||
info.value = data.info || {};
|
||||
medallist.value = data.medal || [];
|
||||
introduction.value = data?.urls?.introduction;
|
||||
avatar = data?.info?.avatar || "";
|
||||
schoolTags.value = schoolTagsData;
|
||||
|
||||
getCount();
|
||||
getList();
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
calculateCreationType(data.count);
|
||||
|
||||
let createCount = ref(0);
|
||||
let count = ref(0);
|
||||
let creation = ref([]);
|
||||
let interaction = ref({});
|
||||
nextTick(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const getCount = () => {
|
||||
ajax("/v2/api/forum/postUserStatistic").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data;
|
||||
|
||||
count.value = data.count;
|
||||
creation.value = data.create || [];
|
||||
createCount.value = creation.value.reduce((sum, item) => {
|
||||
const validCount = Number(item.count) || 0;
|
||||
return sum + validCount;
|
||||
}, 0);
|
||||
|
||||
interaction.value = data.interaction || [];
|
||||
|
||||
calculateCreationType(creation.value, createCount.value);
|
||||
});
|
||||
};
|
||||
|
||||
let creationType = ref([]);
|
||||
|
||||
// 计算出创作分类
|
||||
const calculateCreationType = (creation, creationCount) => {
|
||||
let value = {};
|
||||
creation.forEach((element) => {
|
||||
value[element.type] = element.count;
|
||||
});
|
||||
|
||||
let obj = {
|
||||
offer: "offer",
|
||||
offer_summary: "总结",
|
||||
interviewexperience: "面经",
|
||||
const nickname = data.info.nickname || "";
|
||||
document.title = `${nickname}的个人主页 -- 寄托天下`;
|
||||
});
|
||||
// .finally(() => wx.hideLoading());
|
||||
};
|
||||
|
||||
let arr = [];
|
||||
let accumulation = 0; // 累加
|
||||
for (const key in obj) {
|
||||
accumulation += value[key] || 0;
|
||||
arr.push({
|
||||
text: obj[key],
|
||||
number: value[key] || 0,
|
||||
});
|
||||
}
|
||||
let schoolTags = ref([]);
|
||||
let gtercoin = ref(0);
|
||||
let info = ref({});
|
||||
let medallist = ref([]);
|
||||
let introduction = ref("");
|
||||
|
||||
arr.push({
|
||||
text: "其他",
|
||||
number: creationCount - accumulation || 0,
|
||||
});
|
||||
let avatar = "";
|
||||
// const init = () => {
|
||||
// ajax(`/v2/api/forum/postUserDetail`)
|
||||
// .then((res) => {
|
||||
// if (res.code == 401) {
|
||||
// goLogin();
|
||||
// return;
|
||||
// }
|
||||
// let data = res.data;
|
||||
|
||||
creationType.value = arr;
|
||||
};
|
||||
// const allValues = Object.values(data.schoolTags || []);
|
||||
// const onlyArrays = allValues.filter((item) => Array.isArray(item));
|
||||
// let schoolTagsData = onlyArrays.flat();
|
||||
// schoolTags.value = schoolTagsData;
|
||||
|
||||
let typeList = ref([
|
||||
{
|
||||
text: "收藏",
|
||||
type: "collection",
|
||||
},
|
||||
{
|
||||
text: "发布",
|
||||
type: "creation",
|
||||
},
|
||||
{
|
||||
text: "评论",
|
||||
type: "comment",
|
||||
},
|
||||
{
|
||||
text: "点赞",
|
||||
type: "like",
|
||||
},
|
||||
{
|
||||
text: "足迹",
|
||||
type: "footprint",
|
||||
},
|
||||
]);
|
||||
// gtercoin.value = data.gtercoin;
|
||||
// info.value = data.info || {};
|
||||
// medallist.value = data.medal || [];
|
||||
// introduction.value = data?.urls?.introduction;
|
||||
// avatar = data?.info?.avatar || "";
|
||||
|
||||
let typeValue = ref("collection");
|
||||
// getCount();
|
||||
// getList();
|
||||
// })
|
||||
// .catch(() => {});
|
||||
// };
|
||||
|
||||
const classifyList = ref([
|
||||
{
|
||||
text: "全部",
|
||||
type: "",
|
||||
},
|
||||
{
|
||||
text: "帖子",
|
||||
type: "thread",
|
||||
},
|
||||
{
|
||||
text: "Offer",
|
||||
type: "offer",
|
||||
},
|
||||
{
|
||||
text: "总结",
|
||||
type: "offer_summary",
|
||||
},
|
||||
{
|
||||
text: "面经",
|
||||
type: "interviewexperience",
|
||||
},
|
||||
{
|
||||
text: "投票",
|
||||
type: "vote",
|
||||
},
|
||||
{
|
||||
text: "租房",
|
||||
type: "tenement",
|
||||
},
|
||||
]);
|
||||
let createCount = ref(0);
|
||||
let count = ref(0);
|
||||
let creation = ref([]);
|
||||
let interaction = ref({});
|
||||
|
||||
let classify = ref("");
|
||||
|
||||
let list = ref([]);
|
||||
let page = ref(1);
|
||||
let total = ref(0);
|
||||
|
||||
let loading = ref(false);
|
||||
const getList = () => {
|
||||
if (page.value == 0 || loading.value) return;
|
||||
loading.value = true;
|
||||
let url = `/v2/api/forum/postUserCollect`;
|
||||
if (typeValue.value == "comment") url = `/v2/api/forum/postUserComment`;
|
||||
if (typeValue.value == "like") url = `/v2/api/forum/postUserLike`;
|
||||
if (typeValue.value == "footprint") url = `/v2/api/forum/postUserFootprint`;
|
||||
|
||||
ajax(url, {
|
||||
page: page.value,
|
||||
type: classify.value,
|
||||
})
|
||||
.then((res) => {
|
||||
const getCount = () => {
|
||||
ajax("/v2/api/forum/postUserStatistic").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || [];
|
||||
const data = res.data;
|
||||
|
||||
let targetList = data.data || [];
|
||||
count.value = data.count;
|
||||
creation.value = data.create || [];
|
||||
createCount.value = creation.value.reduce((sum, item) => {
|
||||
const validCount = Number(item.count) || 0;
|
||||
return sum + validCount;
|
||||
}, 0);
|
||||
|
||||
targetList.forEach((element) => element.comment_list?.forEach((ele) => (ele["avatar"] = avatar)));
|
||||
interaction.value = data.interaction || [];
|
||||
|
||||
total.value = data.count;
|
||||
list.value = [...list.value, ...targetList];
|
||||
page.value = list.value.length >= data.count ? 0 : page.value + 1;
|
||||
calculateCreationType(creation.value, createCount.value);
|
||||
});
|
||||
};
|
||||
|
||||
let creationType = ref([]);
|
||||
|
||||
// 计算出创作分类
|
||||
const calculateCreationType = (creation, creationCount) => {
|
||||
let value = {};
|
||||
creation.forEach((element) => {
|
||||
value[element.type] = element.count;
|
||||
});
|
||||
|
||||
let obj = {
|
||||
offer: "offer",
|
||||
offer_summary: "总结",
|
||||
interviewexperience: "面经",
|
||||
};
|
||||
|
||||
let arr = [];
|
||||
let accumulation = 0; // 累加
|
||||
for (const key in obj) {
|
||||
accumulation += value[key] || 0;
|
||||
arr.push({
|
||||
text: obj[key],
|
||||
number: value[key] || 0,
|
||||
});
|
||||
}
|
||||
|
||||
arr.push({
|
||||
text: "其他",
|
||||
number: creationCount - accumulation || 0,
|
||||
});
|
||||
|
||||
creationType.value = arr;
|
||||
};
|
||||
|
||||
let typeList = ref([
|
||||
{
|
||||
text: "收藏",
|
||||
type: "collection",
|
||||
},
|
||||
{
|
||||
text: "发布",
|
||||
type: "creation",
|
||||
},
|
||||
{
|
||||
text: "评论",
|
||||
type: "comment",
|
||||
},
|
||||
{
|
||||
text: "点赞",
|
||||
type: "like",
|
||||
},
|
||||
{
|
||||
text: "足迹",
|
||||
type: "footprint",
|
||||
},
|
||||
]);
|
||||
|
||||
let typeValue = ref("collection");
|
||||
// 监听 typeValue == creation 时 变量 listType 为 edit
|
||||
watch(
|
||||
() => typeValue.value,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal == "creation") listType.value = "edit";
|
||||
else listType.value = "";
|
||||
}
|
||||
);
|
||||
|
||||
let listType = ref(""); // edit
|
||||
|
||||
const classifyList = ref([
|
||||
{
|
||||
text: "全部",
|
||||
type: "",
|
||||
},
|
||||
{
|
||||
text: "帖子",
|
||||
type: "thread",
|
||||
},
|
||||
{
|
||||
text: "Offer",
|
||||
type: "offer",
|
||||
},
|
||||
{
|
||||
text: "总结",
|
||||
type: "offer_summary",
|
||||
},
|
||||
{
|
||||
text: "面经",
|
||||
type: "interviewexperience",
|
||||
},
|
||||
{
|
||||
text: "投票",
|
||||
type: "vote",
|
||||
},
|
||||
{
|
||||
text: "租房",
|
||||
type: "tenement",
|
||||
},
|
||||
]);
|
||||
|
||||
let classify = ref("");
|
||||
|
||||
let list = ref([]);
|
||||
let page = ref(1);
|
||||
let total = ref(0);
|
||||
|
||||
let loading = ref(false);
|
||||
const getList = () => {
|
||||
if (page.value == 0 || loading.value) return;
|
||||
loading.value = true;
|
||||
let url = `/v2/api/forum/postUserCollect`;
|
||||
if (typeValue.value == "creation") url = `/v2/api/forum/postUserPublish`;
|
||||
if (typeValue.value == "like") url = `/v2/api/forum/postUserLike`;
|
||||
if (typeValue.value == "footprint") url = `/v2/api/forum/postUserFootprint`;
|
||||
|
||||
ajax(url, {
|
||||
page: page.value,
|
||||
type: classify.value,
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || [];
|
||||
|
||||
// 取消操作后的删除
|
||||
const cancelOperate = (type, token) => {
|
||||
if (typeValue.value != type) return;
|
||||
const index = list.value.findIndex((item) => item.token == token);
|
||||
if (index == -1) return;
|
||||
list.value.splice(index, 1);
|
||||
total.value--;
|
||||
};
|
||||
let targetList = data.data || [];
|
||||
|
||||
provide("cancelOperate", cancelOperate);
|
||||
targetList.forEach((element) => element.comment_list?.forEach((ele) => (ele["avatar"] = avatar)));
|
||||
|
||||
const classifyChange = (type) => {
|
||||
if (classify.value == type) return;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
total.value = 0;
|
||||
classify.value = type;
|
||||
getList();
|
||||
};
|
||||
total.value = data.count;
|
||||
list.value = [...list.value, ...targetList];
|
||||
page.value = list.value.length >= data.count ? 0 : page.value + 1;
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
|
||||
const typeChange = (type) => {
|
||||
if (typeValue.value == type) return;
|
||||
typeValue.value = type;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
total.value = 0;
|
||||
classify.value = "";
|
||||
// 取消操作后的删除
|
||||
const cancelOperate = (type, token) => {
|
||||
if (typeValue.value != type) return;
|
||||
const index = list.value.findIndex((item) => item.token == token);
|
||||
if (index == -1) return;
|
||||
list.value.splice(index, 1);
|
||||
total.value--;
|
||||
};
|
||||
|
||||
getList();
|
||||
};
|
||||
provide("cancelOperate", cancelOperate);
|
||||
|
||||
const copy = (text) => copyUid(text);
|
||||
const classifyChange = (type) => {
|
||||
if (classify.value == type) return;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
total.value = 0;
|
||||
classify.value = type;
|
||||
getList();
|
||||
};
|
||||
|
||||
return { typeChange, page, loading, classifyChange, total, list, classifyList, classify, typeValue, typeList, creationType, gtercoin, info, medallist, schoolTags, introduction, copy };
|
||||
},
|
||||
});
|
||||
const typeChange = (type) => {
|
||||
if (typeValue.value == type) return;
|
||||
typeValue.value = type;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
total.value = 0;
|
||||
classify.value = "";
|
||||
|
||||
appSectionIndex.component("itemForum", itemForum);
|
||||
appSectionIndex.component("itemOffer", itemOffer);
|
||||
appSectionIndex.component("itemSummary", itemSummary);
|
||||
appSectionIndex.component("itemVote", itemVote);
|
||||
appSectionIndex.component("itemMj", itemMj);
|
||||
appSectionIndex.component("itemTenement", itemTenement);
|
||||
appSectionIndex.component("headTop", headTop);
|
||||
getList();
|
||||
};
|
||||
|
||||
appSectionIndex.mount("#homepage-me");
|
||||
const copy = (text) => copyForumUid(text);
|
||||
|
||||
const handleDelete = (token) => {
|
||||
const index = list.value.findIndex((item) => item.token == token);
|
||||
if (index == -1) return;
|
||||
list.value.splice(index, 1);
|
||||
total.value--;
|
||||
};
|
||||
|
||||
provide("handleDelete", handleDelete);
|
||||
|
||||
return { listType, typeChange, page, loading, classifyChange, total, list, classifyList, classify, typeValue, typeList, creationType, gtercoin, info, medallist, schoolTags, introduction, copy };
|
||||
},
|
||||
});
|
||||
|
||||
appSectionIndex.component("itemForum", itemForum);
|
||||
appSectionIndex.component("itemOffer", itemOffer);
|
||||
appSectionIndex.component("itemSummary", itemSummary);
|
||||
appSectionIndex.component("itemVote", itemVote);
|
||||
appSectionIndex.component("itemMj", itemMj);
|
||||
appSectionIndex.component("itemTenement", itemTenement);
|
||||
appSectionIndex.component("headTop", headTop);
|
||||
appSectionIndex.component("loadBox", loadBox);
|
||||
|
||||
appSectionIndex.mount("#homepage-me");
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user