feat: 新增详情页和个人主页功能及组件优化

- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现
- 新增多个图片资源用于UI展示
- 优化item-head、item-bottom等组件的数据绑定和交互逻辑
- 添加公共工具函数(public.js)包括时间处理和网络请求
- 完善CSS样式文件,增加响应式布局和交互效果
- 实现用户信息展示、帖子详情、相关帖子推荐等功能模块
- 添加签到、投币等交互功能
- 优化组件模板结构和数据传递方式
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-28 19:10:26 +08:00
parent 89703bf025
commit 7d81e02d3d
48 changed files with 4809 additions and 689 deletions

View File

@@ -5,10 +5,6 @@ const { defineComponent, ref } = Vue;
export const itemBottom = defineComponent({
name: "item-bottom",
props: {
title: {
type: String,
default: "默认标题",
},
itemdata: {
type: Object,
default: () => {},
@@ -17,8 +13,11 @@ export const itemBottom = defineComponent({
setup(props) {
let item = ref({ ...props.itemdata });
const likeClick = (item) => {
console.log("item", item);
};
return { item };
},
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"> <img 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 like flexacenter"> <img class="icon" src="./img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </div> <div class="bottom-item like flexacenter"> <img class="icon" src="./img/share-gray.png" /> <div class="text">转发</div> </div></div>`,
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>`,
});

View File

@@ -3,25 +3,29 @@
<div class="text one-line-display">{{ item?.commentreviews?.content }}</div>
</div>
<div class="bottom flexacenter">
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/like-icon.png" />
<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 like flexacenter">
<div class="bottom-item flexacenter">
<img class="icon" src="./img/discuss-icon.png" />
<div class="text">{{ item.comments || "讨论" }}</div>
</div>
<div class="bottom-item like flexacenter">
<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 like flexacenter">
<div class="bottom-item flexacenter">
<img class="icon" src="./img/share-gray.png" />
<div class="text">转发</div>
</div>