Files
PC-Light-Forum/component/head-top/head-top.js
DESKTOP-RQ919RC\Pc dc871d80c0 feat: 添加BI组件并优化多个页面样式和功能
refactor: 重构slideshow-box组件,移除帖子标签

fix: 修复item-bottom组件中QR码加载状态显示问题

style: 调整多个页面的CSS样式,包括字体大小和间距

perf: 优化save.js文件同步逻辑,支持更多模板格式

docs: 更新组件文档和注释

chore: 添加bi组件相关文件并配置监听同步

test: 更新测试用例以适应组件变更
2025-11-07 19:42:19 +08:00

61 lines
4.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// my-component.js
// 引入全局 Vue 对象(因在 HTML 中通过 script 引入Vue 已挂载到 window
const { defineComponent, ref, onMounted, nextTick } = Vue;
// 定义组件(直接使用模板)
export const headTop = defineComponent({
name: "headTop",
props: {
page: {
type: String,
default: "",
},
},
setup(props) {
onMounted(() => {});
let state = ref(0); // 是否已经签到
let userInfoWinTimerCount = 0;
const userInfoWinTimer = setInterval(() => {
if (todaysignedState) {
state.value = todaysigned;
clearInterval(userInfoWinTimer);
}
userInfoWinTimerCount++;
if (userInfoWinTimerCount >= 3000) clearInterval(userInfoWinTimer);
}, 50);
const signIn = () => {
ajax("/v2/api/forum/sign").then((res) => {
if (res.code != 200) {
creationAlertBox("error", res.message);
return;
}
let data = res.data;
state.value = 1;
creationAlertBox("success", res.message || "签到成功");
});
};
let input = ref("");
let defaultSearchText = ref("屯特");
const goSearch = () => {
const searchText = input.value || defaultSearchText.value;
redirectToExternalWebsite("/search/" + searchText);
};
let pitchState = ref(false);
let page = ref(...props.page);
// console.log("page", page.value);
return { page, pitchState, state, signIn, input, defaultSearchText, goSearch };
},
template: `<div class="head-top flexacenter"> <a href="/" class="flexacenter" target="_blank"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> </a> <div class="flex1"></div> <div class="input-box flexacenter" :class="{'pitch': pitchState}"> <input class="input flex1" type="text" :placeholder="'大家都在搜:' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" /> <img class="icon" src="/img/search-icon.svg" @click="goSearch" /> </div> <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else> <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="/img/sign-go.svg" /> GO </div> <img class="petal1" src="/img/petal1.png" /> <img class="petal2" src="/img/petal2.png" /> <img class="petal3" src="/img/petal3.png" /> </div> <div class="sign-in sign-in-already flexcenter" v-else> <img class="sign-icon" src="/img/sign-icon.png" /> <span>已签到,明天再来</span> </div> </template></div>`,
});