PC-Light-Forum/component/latest-list/latest-list.js

// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref, onMounted, nextTick } = Vue;
import { itemBottom } from "../item-bottom/item-bottom.js";
import { itemHead } from "../item-head/item-head.js";

// 定义组件（直接使用模板）
export const latestList = defineComponent({
    name: "latestList",
    props: {
        boxtype: {
            type: String,
            default: "",
        },
        itemdata: {
            type: Object,
            default: () => {},
        },
    },

    setup(props) {
        let item = ref({ ...props.itemdata });
        let postsTab = ref("newest"); // newest  essence

        let boxtype = ref(props.boxtype);
        console.log(boxtype.value);
        onMounted(() => {
            if (props.boxtype == "newest") {
                // boxtype.value = "newest";
                getTopicLatest();
            } else if (props.boxtype == "essence") {
                // boxtype.value = "essence";
                topicHandpicked();
            } else {
                getTopicLatest();
                topicHandpicked();
            }
        });

        let count = 0;

        let latestList = ref([]);
        const getTopicLatest = () => {
            ajaxget(`/v2/api/forum/getTopicLatest?type=thread`).then((res) => {
                const data = res.data;
                const list = data.thread || [];
                latestList.value = list;

                nextTick(() => {
                    count += 1;
                    examineCount();
                    if (props.boxtype == "newest") {
                        tabPostsItem("newest");
                    }
                });
            });
        };

        let topList = ref([]);
        const topicHandpicked = () => {
            ajaxget(`/v2/api/forum/topicLists?simple=1&best=1`).then((res) => {
                const data = res.data;
                topList.value = data.data;
                nextTick(() => {
                    count += 1;
                    examineCount();
                    if (props.boxtype == "essence") {
                        tabPostsItem("essence");
                    }
                });
            });
        };

        // 检验 count 是否等于 2
        function examineCount() {
            if (count == 2) tabPostsItem(tabPostsArr[Math.floor(Math.random() * tabPostsArr.length)]);
        }

        const tabPostsArr = ["newest", "essence"];
        const tabPostsItem = (key) => {
            if (key == postsTab.value) return;
            const boxbox = document.querySelector(`.posts-box.boxtype-${boxtype.value}`);
            boxbox.classList.add(`box-${key}`);
            boxbox.classList.remove(`box-${postsTab.value}`);

            // let index = tabPostsArr.indexOf(key);

            // 修改 tab 状态的
            // if (postsTab.value) {
            //     let oldNode = boxbox.querySelector(`.slideshow-box .tab-item.${postsTab.value}`);
            //     oldNode.classList.toggle("pitch");
            //     boxbox.classList.remove(`box-${postsTab.value}`);
            // }

            // let targetTabNode = boxbox.querySelector(`.slideshow-box .tab-item.${key}`);
            // targetTabNode.classList.toggle("pitch");

            // // 修改全局背景状态的
            // let targetContentNode = boxbox.querySelector(`.slideshow-content .${key}-side-box`);
            // let targetContentHeight = targetContentNode.offsetHeight;

            // boxbox.style.height = targetContentHeight + 66 + "px";

            // let slideshowContent = boxbox.querySelector(".slideshow-content");
            // slideshowContent.scrollTo({
            //     left: 290 * index,
            //     behavior: "smooth",
            // });

            postsTab.value = key;
        };

        return { boxtype, tabPostsItem, postsTab, topList, latestList, item };
    },

    components: {
        itemBottom,
        itemHead,
    },

    template: `<div class="posts-box box-newest " :class="['boxtype-' + boxtype]">    <div v-if="boxtype == 'newest'" class="box-newest-head flexacenter">        <img class="icon" src="/img/newest-icon.png" alt="" />        最新    </div>    <div v-else-if="boxtype == 'essence'" class="box-newest-head flexacenter">        <img class="icon" src="/img/essence.png" alt="" />        精华阅读    </div>    <div v-else class="slideshow-box">        <div class="tab-list flexacenter">            <div class="tab-item newest" :class="{'pitch': postsTab == 'newest'}" @click="tabPostsItem('newest')">最新</div>            <div class="tab-item essence" :class="{'pitch': postsTab == 'essence'}" @click="tabPostsItem('essence')">精华</div>        </div>    </div>    <div class="slideshow-content flexflex">        <!-- newest 最新 -->        <div class="newest-side-box side-box">            <img class="bounding" src="/img/bounding-circle-green.svg" alt="" />            <div class="box">                <a v-for="(item, index) in latestList" :key="index" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank">                    <div class="dot dot-green"></div>                    <div class="text one-line-display">{{ item.title }}</div>                </a>            </div>        </div>        <!-- essence 精选 -->        <div class="essence-side-box side-box">            <img class="bounding" src="/img/bounding-circle-blue.svg" alt="" />            <div class="box">                <a v-for="(item, index) in topList" :key="index" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank">                    <div class="dot"></div>                    <div class="text one-line-display">{{ item.title }}</div>                </a>            </div>        </div>    </div></div>`,
});