A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增图片资源及组件功能优化

Browse Source 
style: 调整CSS样式及修复链接样式问题

refactor: 重构item-head和item-bottom组件逻辑

fix: 修复section-index页面导航链接问题

perf: 优化滚动加载及URL参数处理

docs: 更新组件文档及注释

test: 添加组件测试用例

build: 更新依赖配置

chore: 清理无用代码及资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-29 19:01:33 +08:00
parent 7d81e02d3d
commit c9c34feaf2
35 changed files with 4456 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
component/item-bottom/item-bottom.js
View File

@@ -1,6 +1,7 @@
// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref } = Vue;
const { defineComponent, ref, inject } = Vue;
import { like } from "../like/like.js";
// 定义组件（直接使用模板）
export const itemBottom = defineComponent({
name: "item-bottom",
@@ -13,11 +14,82 @@ export const itemBottom = defineComponent({
setup(props) {
let item = ref({ ...props.itemdata });
const likeClick = (item) => {
console.log("item", item);
let isLogin = inject("isLogin");
let userInfoWin = inject("userInfoWin");
let realname = inject("realname");
let goLogin = inject("goLogin");
let openAttest = inject("openAttest");
let isLikeGif = ref(false);
const likeClick = () => {
if (realname.value == 0 && userInfoWin.value?.uin > 0) {
openAttest();
return;
}
if (!isLogin.value) {
goLogin();
return;
}
const token = item.value.token || "";
ajax(`/v2/api/forum/postTopicLike`, {
token,
})
.then((res) => {
if (res.code != 200) return;
let data = res.data;
item.value["is_like"] = data.status;
item.value["likes"] = data.likes;
if (data.status) {
isLikeGif.value = true;
setTimeout(() => (isLikeGif.value = false), 2000);
} else {
creationAlertBox("success", res.message);
// this.triggerEvent("unlike", item.token);
}
// wx.hideLoading();
})
.catch(() => {});
};
return { item };
const collectClick = () => {
if (!isLogin.value) {
goLogin();
return;
}
const token = item.value.token || "";
ajax(`https://api.gter.net/v2/api/forum/postTopicCollect`, {
token,
})
.then((res) => {
if (res.code != 200) return;
const data = res.data || {};
item.value["is_collect"] = data.status;
item.value["collections"] = data.collections;
creationAlertBox("success", res.message);
// this.triggerEvent("uncollect", item.token);
})
.catch((err) => {
if (err?.code == 401) goLogin();
});
};
return { collectClick, item, likeClick, isLogin, isLikeGif };
},
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick(item)"> <image wx:if="{{ item.is_like }}" class="icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/like-red.png"></image> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/collect-golden.svg" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div>`,
components: {
like,
},
template: `<div class="comment flexacenter" v-if="!Array.isArray(item?.commentreviews)"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content }}</div></div><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()"> <img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" /> <img v-else class="icon" src="./img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" /> <img v-else class="icon" src="./img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div><like v-if="isLikeGif"></like>`,
});

14
component/item-bottom/item-bottom.txt
View File

@@ -3,16 +3,14 @@
<div class="text one-line-display">{{ item?.commentreviews?.content }}</div>
</div>
<div class="bottom flexacenter">
<div class="bottom-item like flexacenter" @click="likeClick(item)">
<image wx:if="{{ item.is_like }}" class="icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/like-red.png"></image>
<div class="bottom-item like flexacenter" @click="likeClick()">
<img v-if="item.is_like" class="icon" src="./img/like-red-icon.png" />
<img v-else class="icon" src="./img/like-icon.png" />
<div class="text">{{ item.likes || "赞" }}</div>
</div>
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/collect-golden.svg" />
<div class="bottom-item flexacenter" @click="collectClick()">
<img v-if="item.is_collect" class="icon" src="./img/collect-golden.svg" />
<img v-else class="icon" src="./img/collect-gray.png" />
<div class="text">{{ item.collections || "收藏" }}</div>
</div>
<div class="bottom-item flexacenter">
@@ -29,4 +27,6 @@
<img class="icon" src="./img/share-gray.png" />
<div class="text">转发</div>
</div>
</div>
</div>
<like v-if="isLikeGif"></like>