c9e229a5cd
feat(item-bottom): 实现二维码弹窗自适应右侧边界 添加判断逻辑使二维码弹窗在靠近右侧边界时向左弹出 refactor(public.js): 优化ajax请求配置和登录跳转逻辑 统一设置axios默认配置，提取登录跳转函数 style(public.css): 调整QRcode-box.right的定位 修复二维码弹窗靠近右侧时的显示问题 fix(details.js): 修复粗体标记正则匹配多行内容 使用[\s\S]*?匹配可能的多行内容 refactor(index.js): 优化列表加载和滚动逻辑 移除模拟数据，添加加载状态，调整滚动加载阈值 chore: 更新html模板中的唯一标识和广告类名
93 lines
4.9 KiB
JavaScript
93 lines
4.9 KiB
JavaScript
// 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);
|
||
onMounted(() => {
|
||
if (props.boxtype == "newest") getTopicLatest();
|
||
else if (props.boxtype == "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/getHomebestRecommend?limit=15&type=thread`).then((res) => {
|
||
const data = res.data;
|
||
console.log('data', data);
|
||
topList.value = 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}`);
|
||
|
||
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"> <template v-for="(item, index) in latestList" :key="index"> <a v-if="item.title || item.content" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank"> <div class="dot dot-green"></div> <div class="text one-line-display">{{ item.title || item.content }}</div> </a> </template> </div> </div> <!-- essence 精选 --> <div class="essence-side-box side-box"> <img class="bounding" src="/img/bounding-circle-blue.svg" alt="" /> <div class="box"> <template v-for="(item, index) in topList" :key="index"> <a v-if="item.title || item.content" class="item flexacenter vuehide" :href="'/details/' + item.uniqid" target="_blank"> <div class="dot"></div> <div class="text one-line-display">{{ item.title || item.content }}</div> </a> </template> </div> </div> </div></div>`,
|
||
});
|