// 1. 创建组件模板和样式（内置到 JS 中，无需外部 HTML/Template） const template = document.createElement("template"); template.innerHTML = `

该帖子已获得

个寄托币

投币

你当前共有

寄托币 [挣币攻略]

`; // 2. 定义组件类 class BiCard extends HTMLElement { constructor() { super(); this.coins = 0; this.token = ""; this.pagetpye = ""; // 创建 Shadow DOM 并挂载模板 this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this.strategyEl = this.shadowRoot.querySelector(".coins-info .strategy"); this.mybalanceEl = this.shadowRoot.querySelector(".coins-info .sum"); this.coinsAreaEl = this.shadowRoot.querySelector(".coins-area"); 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.coinSubmitEl.addEventListener("click", () => this.coinSubmit()); this.closeCoinBoxEl.addEventListener("click", () => this.closeCoinBox()); this.input = this.shadowRoot.querySelector(".coins-input .input"); this.coinListAreaEl = this.shadowRoot.querySelector(".coins-list-area"); this.defaultcoinnum = 0; // 将实例存储到全局变量中，以便外部调用 window.biComponent = this; } // 监听的属性列表 static get observedAttributes() { return ["coins", "token", "pagetpye"]; } // 属性变化回调 attributeChangedCallback(attrName, oldVal, newVal) { this[attrName] = newVal; // 同步属性值到变量 } init() { this.getCoinConfig(); if (!this.coinListAreaEl.querySelector(".list")) this.getCoinRankList(); } getCoinConfig() { this.$ajaxget(`https://api.gter.net/v2/api/forum/getCoinConfig`).then((res) => { const data = res.data; const strategy = data.config.strategy.url || 0; const mybalance = data.mybalance || 0; const defaultcoinnum = data.defaultcoinnum || 0; // 替换策略链接 this.strategyEl.href = strategy; this.mybalanceEl.textContent = mybalance; this.coinsEl.textContent = this.coins; this.defaultcoinnum = defaultcoinnum; this.coinsAreaEl.style.display = "flex"; }); } getCoinRankList() { this.$ajaxget(`https://api.gter.net/v2/api/forum/getCoinRankList?token=${this.token}&limit=1000`).then((res) => { const data = res.data; this.coinListAreaEl.innerHTML = ""; const coinNubmer = data.nubmer; if (coinNubmer == 0) return const total = `

共

${coinNubmer}

人参与投币：

`; const coinList = data.data; let list = coinList .map((item) => { return `

${item.rank}

${item.user.nickname || "匿名用户"}

${item.coins}

币

`; }) .join(""); list = `

${list}

`; const listHTML = total + list; this.coinListAreaEl.innerHTML = listHTML; }); } coinSubmit() { const num = Number(this.input.value || this.defaultcoinnum) || 0; this.$ajax(`https://api.gter.net/v2/api/forum/postTopicCoin`, { token: this.token, num, }).then((res) => { if (res.code == 200) creationAlertBox("success", res.message); else creationAlertBox("error", res.message); if (res.code != 200) return; let data = res.data; this.mybalanceEl.textContent = Number(this.mybalanceEl.textContent) - num || 0; this.input.value = ""; const coins = data.coins; this.coinsEl.textContent = coins || 0; if (this.pagetpye == "forum") document.querySelector(".action-bar-item.coins .text").textContent = coins || 0; this.getCoinRankList(); }); } closeCoinBox() { this.coinsAreaEl.style.display = "none"; } // 静态方法，用于在外部调用组件初始化 static initComponent() { if (window.biComponent) { window.biComponent.init(); return true; } console.warn("bi组件尚未加载或挂载"); return false; } // 生命周期：组件挂载 connectedCallback() {} // 生命周期：组件卸载 disconnectedCallback() { console.log(`用户卡片 ${this.getAttribute("username")} 已卸载`); } $ajax(url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return new Promise(function (resolve, reject) { axios .post(url, data, { emulateJSON: true, withCredentials: true, }) .then(function (res) { var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data; if (data.code == 401) { // 需要登录 showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { cover: true, }); reject(); } resolve(data); }) .catch((err) => { if (err.response.status == 401) showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { cover: true, }); }); }); } $ajaxget(url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; return new Promise(function (resolve, reject) { axios .get( url, {}, { emulateJSON: true, withCredentials: true, } ) .then(function (res) { var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data; if (data.code == 401) { // 需要登录 showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { cover: true, }); reject(); } resolve(data); }) .catch((error) => { reject(error); }); }); } } // 3. 注册组件（确保只注册一次） if (!customElements.get("bi-card")) customElements.define("bi-card", BiCard); // 4. 导出组件类，以便在外部直接调用 window.BiComponent = BiCard;