From aea14650ff940319298cb8d56e40d30e30f9176e Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Thu, 13 Nov 2025 19:20:10 +0800 Subject: [PATCH] =?UTF-8?q?feat(bi=E7=BB=84=E4=BB=B6):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=A7=A3=E9=94=81=E5=86=85=E5=AE=B9=E5=92=8C=E5=B8=81?= =?UTF-8?q?=E4=B8=8D=E8=B6=B3=E5=BC=B9=E7=AA=97=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在bi组件中新增解锁内容和币不足的弹窗样式及逻辑 - 添加根据用户币数量显示不同弹窗的功能 - 优化投币逻辑，支持解锁内容场景 - 修复学校链接显示条件判断 - 调整CSS样式增加底部间距 --- component/bi/bi.js | 81 ++++++++++++++----- component/bi/bi.txt | 144 +++++++++++++++++++++++++++++++++- component/item-mj/item-mj.js | 2 +- component/item-mj/item-mj.txt | 2 +- css/details.css | 1 + css/details.less | 1 + css/public.css | 1 + css/public.less | 1 + js/index.js | 4 + 9 files changed, 213 insertions(+), 24 deletions(-) diff --git a/component/bi/bi.js b/component/bi/bi.js index 7b3d714..04788f5 100644 --- a/component/bi/bi.js +++ b/component/bi/bi.js @@ -1,6 +1,6 @@ // 1. 创建组件模板和样式（内置到 JS 中，无需外部 HTML/Template） const template = document.createElement("template"); -template.innerHTML = `
该帖子已获得
个寄托币
投币
你当前共有
寄托币 [挣币攻略]
`; +template.innerHTML = `
该已获得
个寄托币
投币
你当前共有
寄托币 [挣币攻略]
作者设置了阅读限制，解锁所有内容仅需 寄托币
投币解锁
你共有 寄托币
你的寄托币不够，快去发帖挣币吧
攒币指南
`; // 2. 定义组件类 class BiCard extends HTMLElement { @@ -10,6 +10,7 @@ class BiCard extends HTMLElement { this.coins = 0; this.token = ""; this.pagetpye = ""; + this.displaytips = ""; // 创建 Shadow DOM 并挂载模板 this.attachShadow({ mode: "open" }); @@ -20,10 +21,12 @@ class BiCard extends HTMLElement { this.coinsEl = this.shadowRoot.querySelector(".coins-area .coins-head .sum"); this.coinSubmitEl = this.shadowRoot.querySelector(".coins-input .coinSubmit"); - this.closeCoinBoxEl = this.shadowRoot.querySelector(".coins-area .closeCoinBox"); + this.closeCoinBoxEl = this.shadowRoot.querySelectorAll(".coins-area .closeCoinBox"); + this.closeCoinBoxEl.forEach((item) => { + item.addEventListener("click", () => this.closeCoinBox()); + }); this.coinSubmitEl.addEventListener("click", () => this.coinSubmit()); - this.closeCoinBoxEl.addEventListener("click", () => this.closeCoinBox()); this.input = this.shadowRoot.querySelector(".coins-input .input"); @@ -32,11 +35,19 @@ class BiCard extends HTMLElement { this.defaultcoinnum = 0; // 将实例存储到全局变量中，以便外部调用 window.biComponent = this; + + this.pagetpyeText = this.shadowRoot.querySelector(".pagetpyeText"); + + this.coinsBoxEl = this.shadowRoot.querySelector(".coins-box"); + + // 解锁插入币弹窗 + this.coinsUnlock = this.shadowRoot.querySelector(".unlock-insertcoins-box"); + this.coinsNoBi = this.shadowRoot.querySelector(".no-jituobi-pop-box"); } // 监听的属性列表 static get observedAttributes() { - return ["coins", "token", "pagetpye"]; + return ["coins", "token", "pagetpye", "displaytips"]; } // 属性变化回调 @@ -44,18 +55,9 @@ class BiCard extends HTMLElement { this[attrName] = newVal; // 同步属性值到变量 } - init() { - this.getCoinConfig(); - if (!this.coinListAreaEl.querySelector(".list")) this.getCoinRankList(); - } - - getCoinConfig() { + init(type) { this.fetchGetData(`https://api.gter.net/v2/api/forum/getCoinConfig`).then((res) => { - console.log("res", res); - const data = res.data; - console.log("data", data); - const strategy = data.config.strategy.url || 0; const mybalance = data.mybalance || 0; const defaultcoinnum = data.defaultcoinnum || 0; @@ -67,7 +69,38 @@ class BiCard extends HTMLElement { this.defaultcoinnum = defaultcoinnum; this.coinsAreaEl.style.display = "flex"; + + if (type == "unlock") { + if (mybalance >= defaultcoinnum) { + this.coinsBoxEl.style.display = "none"; + this.coinsNoBi.style.display = "none"; + this.coinsUnlock.style.display = "flex"; + this.coinsUnlock.querySelector(".coinNum").textContent = defaultcoinnum; + this.coinsUnlock.querySelector(".balance").textContent = mybalance; + this.coinsUnlock.querySelector(".unlock-insertcoins-btn").addEventListener("click", () => this.coinSubmit(type)); + } else { + this.coinsBoxEl.style.display = "none"; + this.coinsUnlock.style.display = "none"; + this.coinsNoBi.style.display = "flex"; + } + } else { + this.coinsUnlock.style.display = "none"; + this.coinsNoBi.style.display = "none"; + this.coinsBoxEl.style.display = "flex"; + } }); + + if (!this.coinListAreaEl.querySelector(".list")) this.getCoinRankList(); + + const obj = { + offer: "Offer", + summary: "总结", + mj: "面经", + thread: "帖子", + vote: "投票", + }; + + this.pagetpyeText.textContent = obj[this.pagetpye]; } getCoinRankList() { @@ -83,7 +116,7 @@ class BiCard extends HTMLElement { .map((item) => { return `
${item.rank}
- +
${item.user.nickname || "匿名用户"}
 @@ -100,7 +133,7 @@ class BiCard extends HTMLElement { }); } - coinSubmit() { + coinSubmit(type) { const num = Number(this.input.value || this.defaultcoinnum) || 0; this.fetchData(`https://api.gter.net/v2/api/forum/postTopicCoin`, { token: this.token, @@ -112,6 +145,11 @@ class BiCard extends HTMLElement { if (res.code != 200) return; let data = res.data; + if (this.displaytips == "coindisplayuser") { + setTimeout(() => window.location.reload(), 1000); + return; + } + this.mybalanceEl.textContent = Number(this.mybalanceEl.textContent) - num || 0; this.input.value = ""; const coins = data.coins; @@ -121,6 +159,7 @@ class BiCard extends HTMLElement { if (this.pagetpye == "vote") document.querySelector(".coinText").textContent = coins || 0; if (this.pagetpye == "mj") document.querySelector(".coinText").textContent = coins || 0; if (this.pagetpye == "offer") document.querySelector(".broadside-text.cursorpointer.coinText").textContent = (coins || 0) + " 寄托币"; + if (this.pagetpye == "summary") document.querySelector(".broadside-text.cursorpointer.coinText").textContent = (coins || 0) + " 寄托币"; this.getCoinRankList(); }); } @@ -129,10 +168,10 @@ class BiCard extends HTMLElement { this.coinsAreaEl.style.display = "none"; } - // 静态方法，用于在外部调用组件初始化 - static initComponent() { + // 静态方法，用于在外部调用组件初始化 type normal 展示正常的投币和列表 unlock 解锁插入币弹窗 或者 币不足 + static initComponent(type = "normal") { if (window.biComponent) { - window.biComponent.init(); + window.biComponent.init(type); return true; } console.warn("bi组件尚未加载或挂载"); @@ -156,7 +195,7 @@ class BiCard extends HTMLElement { xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); - if (["127.0.0.1","localhost"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b"); + if (["127.0.0.1", "localhost", "192.168.18.219"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { @@ -175,7 +214,7 @@ class BiCard extends HTMLElement { xhr.withCredentials = true; xhr.open("GET", url, true); - if (["127.0.0.1","localhost"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b"); + if (["127.0.0.1", "localhost", "192.168.18.219"].includes(location.hostname)) xhr.setRequestHeader("Authorization", "3b01343c65e3b2fa3ce32ae26feb3a9b"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { diff --git a/component/bi/bi.txt b/component/bi/bi.txt index e5c95c6..5bc46a0 100644 --- a/component/bi/bi.txt +++ b/component/bi/bi.txt @@ -54,6 +54,10 @@ display: none; } + .coins-area * { + box-sizing: border-box; + } + .coins-area a { text-decoration: none; } @@ -66,6 +70,7 @@ flex-direction: column; padding: 40px 30px 35px; position: relative; + display: none; } .coins-area .coins-box .fork { @@ -221,6 +226,111 @@ font-size: 13px; margin-left: 2px; } + + .unlock-insertcoins-box { + width: 520px; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 11px; + flex-direction: column; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + display: none; + } + + .unlock-insertcoins-box .unlock-insertcoins-close { + width: 16px; + height: 16px; + padding: 10px; + align-self: self-end; + box-sizing: content-box; + cursor: pointer; + } + + .unlock-insertcoins-box .unlock-insertcoins-head { + font-size: 14px; + color: #555555; + margin: 10px auto 35px; + } + + .unlock-insertcoins-box .unlock-insertcoins-head .bi-icon { + width: 40px; + height: 48px; + } + + .unlock-insertcoins-box .unlock-insertcoins-btn { + width: 175px; + height: 43px; + border-radius: 45px; + background-color: #50e3c2; + cursor: pointer; + } + + .unlock-insertcoins-box .in-all { + color: #555555; + font-size: 13px; + margin-top: 17px; + margin-bottom: 54px; + } + + .unlock-insertcoins-box .in-all span { + font-weight: 650; + } + + .no-jituobi-pop-box { + width: 520px; + flex-direction: column; + border: 1px solid #e5e5e5; + background-color: #fff; + border-radius: 11px; + display: flex; + -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.21); + padding-bottom: 55px; + display: none; + } + + .no-jituobi-pop-box .no-jituobi-close { + width: 16px; + height: 16px; + padding: 10px; + align-self: flex-end; + cursor: pointer; + box-sizing: content-box; + } + + .no-jituobi-pop-box .no-jituobi-head { + font-size: 16px; + color: #333; + margin: 23px auto 42px; + } + + .no-jituobi-pop-box .no-jituobi-head .bi-icon { + width: 50px; + height: 60px; + } + + .no-jituobi-pop-box .strategy-btn { + width: 198px; + height: 43px; + color: #000; + font-size: 16px; + border-radius: 100px; + margin: 0 auto; + cursor: pointer; + } + + .no-jituobi-pop-box .strategy-btn .strategy-icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + + .greenBj { + background-color: #50e3c2; + border-color: #50e3c2 !important; + }
@@ -229,7 +339,7 @@
- 该帖子已获得 + 该已获得
个寄托币
@@ -249,4 +359,36 @@
+ + +
+ +
+ + 作者设置了阅读限制，解锁所有内容仅需 + 寄托币 +
+
投币解锁
+
你共有 寄托币
+
+ + +
+ +
+ + 你的寄托币不够，快去发帖挣币吧 +
+ + +
+ 攒币指南 + +
+ +
\ No newline at end of file diff --git a/component/item-mj/item-mj.js b/component/item-mj/item-mj.js index 4545afe..ec7e0c5 100644 --- a/component/item-mj/item-mj.js +++ b/component/item-mj/item-mj.js @@ -29,5 +29,5 @@ export const itemMj = defineComponent({ itemHead, }, - template: `
{{ item.data.schoolname }}
{{ item.data.project ? '专业' : '项目/专业' }}
{{ item.data.professional }}
项目
{{ item.data.project }}
面试
{{ item.data.interviewtime }}
 {{ item.content }}
`, + template: `
{{ item.data.schoolname }}
{{ item.data.project ? '专业' : '项目/专业' }}
{{ item.data.professional }}
项目
{{ item.data.project }}
面试
{{ item.data.interviewtime }}
 {{ item.content }}
`, }); diff --git a/component/item-mj/item-mj.txt b/component/item-mj/item-mj.txt index 02116c3..70ccc18 100644 --- a/component/item-mj/item-mj.txt +++ b/component/item-mj/item-mj.txt @@ -1,6 +1,6 @@
- +
{{ item.data.schoolname }}
 diff --git a/css/details.css b/css/details.css index 6ce8c57..d65fe73 100644 --- a/css/details.css +++ b/css/details.css @@ -1203,6 +1203,7 @@ } .answer-discuss .edit-comment .box .input-box { margin-right: 0; + padding-top: 10px; } .answer-discuss .edit-comment .box .btn-list { padding: 15px 0; diff --git a/css/details.less b/css/details.less index 688aa9a..5b4d532 100644 --- a/css/details.less +++ b/css/details.less @@ -1405,6 +1405,7 @@ } .answer-discuss .edit-comment .box .input-box { margin-right: 0; + padding-top: 10px; } .answer-discuss .edit-comment .box .input-box .bottom { // border-top: 1px solid #ebebeb; diff --git a/css/public.css b/css/public.css index 1e154eb..b8fb899 100644 --- a/css/public.css +++ b/css/public.css @@ -541,6 +541,7 @@ body { } .item-box.item-mj .message { margin-top: 13px; + margin-bottom: 15px; font-size: 14px; color: #555555; display: block; diff --git a/css/public.less b/css/public.less index 66a2dd2..c7a5d07 100644 --- a/css/public.less +++ b/css/public.less @@ -645,6 +645,7 @@ body { .message { margin-top: 13px; + margin-bottom: 15px; font-size: 14px; color: #555555; display: block; diff --git a/js/index.js b/js/index.js index 0990ff9..990a0e2 100644 --- a/js/index.js +++ b/js/index.js @@ -107,6 +107,10 @@ const appIndex = createApp({ getTalkingRecommend(); getTopicHandpicked(); getTopicLatest(); + + setTimeout(() => { + BiComponent.initComponent('unlock'); + }, 1000); }); let ongoingbj = ref({}); // 话题数据