PC-Light-Forum/js/section-index.js

const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
import { itemForum } from "../component/item-forum/item-forum.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();
            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}&sectionid=${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 });
        };

        return { changeSection, sectionList, section, info, handpickList, tagsList, list, count };
    },
});
appSectionIndex.component("item-forum", itemForum);
appSectionIndex.mount("#sectionIndex");