// 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: {
itemdata: {
type: Object,
default: () => {},
},
},
setup(props) {
let item = ref({ ...props.itemdata });
let postsTab = ref("newest"); // newest essence
onMounted(() => {
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();
});
});
};
let topList = ref([]);
const topicHandpicked = () => {
ajaxget(`/v2/api/forum/topicHandpicked`).then((res) => {
const data = res.data;
topList.value = data;
nextTick(() => {
count += 1;
examineCount();
});
});
};
// 检验 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`);
boxbox.classList.add(`box-${key}`);
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 targetHeight = targetTabNode.offsetHeight;
// 修改全局背景状态的
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 { tabPostsItem, postsTab, topList, latestList, item };
},
components: {
itemBottom,
itemHead,
},
template: ``,
});
