PC-Light-Forum/js/index.js

const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
import { headTop } from "../component/head-top/head-top.js";
import { itemForum } from "../component/item-forum/item-forum.js";
import { latestList } from "../component/latest-list/latest-list.js";
import { loadBox } from "../component/load-box/load-box.js";

const appIndex = createApp({
    setup() {
        onMounted(() => getUserInfoWin());

        let isLogin = ref(false);
        let realname = ref(0); // 是否已经实名
        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);

        let pastList = ref([]);

        onMounted(() => {
            offerListScrolling();
            getSectionList();

            getList();

            window.addEventListener("scroll", handleScroll);

            getTalkingRecommend();
            getTopicHandpicked();
            getTopicLatest();
        });

        let ongoingbj = ref({}); // 话题数据

        const getTalkingRecommend = () => {
            ajaxGet("/v2/api/forum/talkingRecommend").then((res) => {
                if (res.code != 200) return;
                let data = res["data"] || [];

                const getTargetItem = (arr) => {
                    const target = arr.find((item) => item.state === 1);
                    return target !== undefined ? target : arr.length > 0 ? arr[0] : null;
                };

                ongoingbj.value = getTargetItem(data.ongoing || []);
                pastList.value = data.past || [];
            });
        };

        let topicHandpickedList = ref([]); // 精选列表
        const getTopicHandpicked = (uniqid) => {
            ajaxGet(`/v2/api/forum/topicHandpicked?limit=16`).then((res) => {
                if (res.code != 200) return;
                let data = res["data"] || [];
                topicHandpickedList.value = data;
            });
        };

        let offer = ref([]); // 面经列表
        let vote = ref([]); // 面经列表
        let interviewexperience = ref([]); // 面经列表
        const getTopicLatest = () => {
            ajaxGet(`/v2/api/forum/getTopicLatest?limit=4`).then((res) => {
                const data = res.data || [];

                data.vote.forEach((item) => {
                    if (!item.title) {
                        item.title = item.content;
                        item.content = "";
                    }
                });

                offer.value = data.offer;
                vote.value = data.vote;
                interviewexperience.value = data.interviewexperience;

                nextTick(() => {});
            });
        };

        const sidebarFixed = ref(false);

        const handleScroll = () => {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            const clientHeight = window.innerHeight;

            // 列表下 滑动到底部 获取新数据
            if (scrollTop + clientHeight >= scrollHeight - 200) getList();

            // // 侧边栏滚动固定
            // if (scrollTop >= matterRef.value.offsetTop + sidebarRef.value.offsetHeight - clientHeight) sidebarFixed.value = true;
            // else sidebarFixed.value = false;

            sidebarHeight.value = -(sidebarRef.value.offsetHeight - window.innerHeight);

            if (sidebarHeight.value > 0) sidebarHeight.value = 12;
        };

        let offerlist = ref([]); // offer 列表滚动 数据

        const offerListRef = ref(null);
        const custom_2AdvRef = ref(null);

        // 处理 offer 列表滚动
        const offerListScrolling = (data) => {
            ajax("https://forum.gter.net/api/index/dynamic").then((res) => {
                if (res.code == 200) {
                    let data = res["data"] || [];

                    data.forEach((item) => (item.date = strtimeago(item.date)));

                    let targetValue = [];
                    targetValue = [...data, ...data.slice(0, 6)];

                    offerlist.value = targetValue;
                    nextTick(() => autoOfferListScroll());
                }
            });
        };

        let offerTimer = null;

        let scrollup = null;
        // offer list 滚动
        const autoOfferListScroll = () => {
            console.log("autoOfferListScroll");

            if (typeof ScrollText !== "function") {
                setTimeout(() => autoOfferListScroll(), 500);
                return;
            }
            console.log("scrollup");

            if (scrollup) return;
            scrollup = new ScrollText("offer-box");
            scrollup.LineHeight = 55;
            scrollup.Amount = 1;
            scrollup.Delay = 1;
            scrollup.Start();
            scrollup.Direction = "up";
        };

        // 鼠标移入
        const offerMouseover = (event) => {
            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) clearInterval(offerTimer);
        };

        // 鼠标移出
        const offerMouseout = (event) => {
            if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) autoOfferListScroll();
        };

        const popList = [
            {
                title: "26FALL",
                subtitle: "申请群",
                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
            },
            {
                title: "申请求助",
                subtitle: "寄托院校君",
                img: "https://u.gter.net/assistantwxqrcode.png",
            },
            {
                title: "香港租房",
                subtitle: "交流群",
                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-5kpcnzqqsgFptxhcq_cQnrlJKN1WgxCBq_D-81qNDQyOQ~~",
            },
            {
                title: "香港租房顾问",
                subtitle: "寄托方同学",
                img: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_JkpcHnqqsgFptxhcq_cQnrlcaF2WQQQBq_D-81qNDQyOQ~~",
            },
        ];

        let sectionList = 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));
                sectionList.value = groupByCid(data);
            });
        };

        const groupByCid = (arr) => {
            const groups = arr.reduce((acc, item) => {
                const cid = item.cid ?? "default"; // 若 cid 不存在，归为 'default' 组
                if (!acc[cid]) {
                    acc[cid] = [];
                }
                acc[cid].push(item);
                return acc;
            }, {});

            return Object.values(groups);
        };

        let loading = ref(false);
        let page = ref(1);
        let list = ref([]);
        const getList = () => {
            if (loading.value || page.value == 0) return;
            loading.value = true;
            ajaxGet(`/v2/api/forum/topicLists?type=thread&page=${page.value || 1}`)
                .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;

                    loading.value = false;
                })
                .catch((err) => {
                    err = err.data;
                    if (err.code == 401) goLogin();
                    loading.value = false;
                });
        };

        const sidebarRef = ref(null);
        const matterRef = ref(null);

        let sidebarHeight = ref(0);

        return { sidebarHeight, matterRef, sidebarFixed, sidebarRef, loading, interviewexperience, vote, offer, topicHandpickedList, list, sectionList, popList, custom_2AdvRef, ongoingbj, pastList, offerMouseover, offerMouseout, offerlist, offerListRef };
    },
});

appIndex.component("headTop", headTop);
appIndex.component("itemForum", itemForum);
appIndex.component("latestList", latestList);
appIndex.component("load-box", loadBox);

appIndex.mount("#appIndex");