feat: 新增编辑页面和分享功能，优化链接跳转和样式
- 添加edit.html编辑页面及相关CSS样式 - 实现内容编辑区的富文本功能 - 为item-bottom组件添加分享功能，包括复制链接和微信转发 - 更新多个组件的链接跳转地址 - 优化CSS样式，包括圆角、阴影和hover效果 - 修复部分样式问题和布局错位 - 移除不再使用的section-index.html文件
This commit is contained in:
A1300399510
233
js/section.js
Normal file
233
js/section.js
Normal file
@@ -0,0 +1,233 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
|
||||
import { itemForum } from "../component/item-forum/item-forum.js";
|
||||
import { latestList } from "../component/latest-list/latest-list.js";
|
||||
|
||||
const appSectionIndex = createApp({
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
const params = getUrlParams();
|
||||
const id = params.section || "";
|
||||
if (id) {
|
||||
section.value = id;
|
||||
init();
|
||||
}
|
||||
|
||||
section.value = id;
|
||||
|
||||
getSectionList();
|
||||
|
||||
handpick();
|
||||
getTags();
|
||||
getList();
|
||||
getTopicLatest();
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
});
|
||||
|
||||
const handleScroll = () => {
|
||||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
const scrollHeight = document.documentElement.scrollHeight;
|
||||
const clientHeight = document.documentElement.clientHeight;
|
||||
|
||||
// 列表下 滑动到底部 获取新数据
|
||||
if (scrollTop + clientHeight >= scrollHeight - 40) getList();
|
||||
};
|
||||
|
||||
let sectionList = ref([]);
|
||||
let section = ref("");
|
||||
|
||||
const getSectionList = () => {
|
||||
ajaxget("/v2/api/forum/getSectionList").then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || [];
|
||||
|
||||
let obj = {};
|
||||
|
||||
data.forEach((element) => (obj[element.cid] = element));
|
||||
const list = insertLineBetweenCategories(data, "cid");
|
||||
sectionList.value = list;
|
||||
console.log(list, "list");
|
||||
if (!section.value) {
|
||||
const uniqid = list[0].uniqid;
|
||||
section.value = uniqid;
|
||||
updateUrlParams({ section: uniqid });
|
||||
init();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 将版块按 cid 分格开
|
||||
const insertLineBetweenCategories = (arr) => {
|
||||
if (!arr.length) return [];
|
||||
|
||||
const sortedArr = [...arr].sort((a, b) => {
|
||||
if (a["cid"] < b["cid"]) return -1;
|
||||
if (a["cid"] > b["cid"]) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
const result = [sortedArr[0]];
|
||||
let prevCategory = sortedArr[0]["cid"];
|
||||
|
||||
for (let i = 1; i < sortedArr.length; i++) {
|
||||
const current = sortedArr[i];
|
||||
const currentCategory = current["cid"];
|
||||
|
||||
if (currentCategory !== prevCategory) {
|
||||
result.push({
|
||||
key: "line",
|
||||
});
|
||||
prevCategory = currentCategory;
|
||||
}
|
||||
result.push(current);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
let info = ref({});
|
||||
|
||||
const init = () => {
|
||||
ajaxget(`/v2/api/forum/getSectionDetails?sectionid=${section.value}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
info.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
let handpickList = ref([]);
|
||||
const handpick = () => {
|
||||
ajaxget(`/v2/api/forum/topicHandpicked?sectionid=${section.value}`).then((res) => {
|
||||
let data = res.data || [];
|
||||
handpickList.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
let tagsList = ref([]);
|
||||
const getTags = () => {
|
||||
ajaxget(`/v2/api/forum/sectionTags?sectionid=${section.value}`).then((res) => {
|
||||
if (res.code != 200) return;
|
||||
const data = res.data || {};
|
||||
tagsList.value = data;
|
||||
});
|
||||
};
|
||||
|
||||
let loading = false;
|
||||
let page = ref(1);
|
||||
let count = ref(0);
|
||||
let list = ref([]);
|
||||
const getList = () => {
|
||||
if (loading || page.value == 0) return;
|
||||
loading = true;
|
||||
ajaxget(`/v2/api/forum/topicLists?type=thread&page=${page.value || 1}§ionid=${section.value}`)
|
||||
.then((res) => {
|
||||
if (res.code != 200) return;
|
||||
let data = res.data;
|
||||
list.value = list.value.concat(data.data);
|
||||
page.value = data.count > data.limit * data.page ? page.value + 1 : 0;
|
||||
count.value = data.count;
|
||||
loading = false;
|
||||
console.log(list.value[0]);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
|
||||
err = err.data;
|
||||
if (err.code == 401) openLoginBtnState();
|
||||
loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => getUserInfoWin());
|
||||
|
||||
let isLogin = ref(true);
|
||||
let realname = ref(1); // 是否已经实名
|
||||
let userInfoWin = 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;
|
||||
};
|
||||
document.addEventListener("getUser", checkUser);
|
||||
};
|
||||
|
||||
const openAttest = () => {
|
||||
const handleAttestClose = () => {
|
||||
document.removeEventListener("closeAttest", handleAttestClose);
|
||||
realname.value = window.userInfoWin?.realname || 0;
|
||||
};
|
||||
// 启动认证流程时添加监听
|
||||
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();
|
||||
};
|
||||
|
||||
provide("isLogin", isLogin);
|
||||
provide("userInfoWin", userInfoWin);
|
||||
provide("realname", realname);
|
||||
provide("openAttest", openAttest);
|
||||
provide("goLogin", goLogin);
|
||||
|
||||
const changeSection = (uniqid) => {
|
||||
section.value = uniqid;
|
||||
handpickList.value = [];
|
||||
info.value = {};
|
||||
tagsList.value = [];
|
||||
|
||||
count.value = 0;
|
||||
page.value = 1;
|
||||
list.value = [];
|
||||
|
||||
init();
|
||||
handpick();
|
||||
getTags();
|
||||
getList();
|
||||
|
||||
updateUrlParams({ section: uniqid });
|
||||
|
||||
};
|
||||
|
||||
let offer = ref([]); // 面经列表
|
||||
let vote = ref([]); // 面经列表
|
||||
let interviewexperience = ref([]); // 面经列表
|
||||
const getTopicLatest = () => {
|
||||
ajaxget(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
|
||||
const data = res.data || [];
|
||||
console.log("data99999999999999", data);
|
||||
|
||||
data.vote.forEach((item) => {
|
||||
if (!item.title) {
|
||||
item.title = item.content;
|
||||
item.content = "";
|
||||
}
|
||||
});
|
||||
|
||||
console.log("data", data);
|
||||
offer.value = data.offer;
|
||||
vote.value = data.vote;
|
||||
interviewexperience.value = data.interviewexperience;
|
||||
|
||||
console.log("interviewexperience", interviewexperience.value);
|
||||
});
|
||||
};
|
||||
|
||||
return { offer, vote, interviewexperience, changeSection, sectionList, section, info, handpickList, tagsList, list, count };
|
||||
},
|
||||
});
|
||||
appSectionIndex.component("item-forum", itemForum);
|
||||
appSectionIndex.component("latest-list", latestList);
|
||||
appSectionIndex.mount("#sectionIndex");
|
||||
Reference in New Issue
Block a user