|
|
@ -14,7 +14,12 @@ |
|
|
@change="swiperChange" |
|
|
@change="swiperChange" |
|
|
> |
|
|
> |
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
|
|
<image class="top-banner" :src="item" mode="aspectFill" @click="previewImage(item)"></image> |
|
|
<image |
|
|
|
|
|
class="top-banner" |
|
|
|
|
|
:src="item" |
|
|
|
|
|
mode="aspectFill" |
|
|
|
|
|
@click="previewImage(item)" |
|
|
|
|
|
></image> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
|
|
|
|
|
|
@ -39,13 +44,13 @@ |
|
|
<view class="author-info"> |
|
|
<view class="author-info"> |
|
|
<text class="author-name">{{ noteDetail.nickname }}</text> |
|
|
<text class="author-name">{{ noteDetail.nickname }}</text> |
|
|
</view> |
|
|
</view> |
|
|
<!-- <view |
|
|
<view |
|
|
class="follow-btn" |
|
|
class="follow-btn" |
|
|
:class="{ followed: noteDetail.user.isFollowed }" |
|
|
:class="{ followed: noteDetail.user.isFollowed }" |
|
|
@click="toggleFollow" |
|
|
@click="toggleFollow" |
|
|
> |
|
|
> |
|
|
{{ noteDetail.user.isFollowed ? "已关注" : "关注" }} |
|
|
{{ noteDetail.user.isFollowed ? "已关注" : "关注" }} |
|
|
</view> --> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 笔记标题 --> |
|
|
<!-- 笔记标题 --> |
|
|
<view class="note-title"> |
|
|
<view class="note-title"> |
|
|
@ -91,7 +96,7 @@ |
|
|
<view class="comments-section"> |
|
|
<view class="comments-section"> |
|
|
<view class="comments-header"> |
|
|
<view class="comments-header"> |
|
|
<text class="comments-title" |
|
|
<text class="comments-title" |
|
|
>评论 ({{ noteDetail.comments.length }})</text |
|
|
>评论 ({{ noteDetail.commentCount || 0 }})</text |
|
|
> |
|
|
> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
@ -143,18 +148,14 @@ |
|
|
mode="widthFix" |
|
|
mode="widthFix" |
|
|
:src=" |
|
|
:src=" |
|
|
!noteDetail.userLiked |
|
|
!noteDetail.userLiked |
|
|
? showImg( |
|
|
? 'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png' |
|
|
'https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png' |
|
|
: 'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png' |
|
|
) |
|
|
|
|
|
: showImg( |
|
|
|
|
|
'https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png' |
|
|
|
|
|
) |
|
|
|
|
|
" |
|
|
" |
|
|
></image> |
|
|
></image> |
|
|
<text |
|
|
<text |
|
|
class="like-count" |
|
|
class="like-count" |
|
|
:class="{ 'liked-text': noteDetail.userLiked }" |
|
|
:class="{ 'liked-text': noteDetail.userLiked }" |
|
|
>{{ noteDetail.likeCount }}</text |
|
|
>{{ noteDetail.likeCount || 0 }}</text |
|
|
> |
|
|
> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -241,52 +242,6 @@ export default { |
|
|
uni.hideLoading(); |
|
|
uni.hideLoading(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 加载模拟数据 |
|
|
|
|
|
loadMockData() { |
|
|
|
|
|
this.noteDetail = { |
|
|
|
|
|
id: "mock001", |
|
|
|
|
|
title: "首期「桃园山河令」", |
|
|
|
|
|
content: |
|
|
|
|
|
"一周前，我们种下了一片想象中的桃园，并向江湖发出了一封「桃园山河令」，邀请你来分享属于自己的“桃园时刻”。未曾想到，这片初生的桃园，会迎来五湖四海如此多的“桃园客”——这是我们想送给每一位「EpicSoul交响」星球上「三个桃子」粉丝的名字。这些回响，来自每一位被「三个桃子」IP故事所触动的你。因为是你们，用一个个真实、温暖的故事，让我们想象中的那片桃园，迅速地枝繁叶茂，长满了沉甸甸的果实。", |
|
|
|
|
|
image: "https://des.dayunyuanjian.cn/epicSoul/canal-town.jpg", |
|
|
|
|
|
tags: ["时间里的约定", "审美", "治愈系调色"], |
|
|
|
|
|
likes: 30, |
|
|
|
|
|
isLiked: false, |
|
|
|
|
|
createTime: "2025-08-20 14:30:00", |
|
|
|
|
|
user: { |
|
|
|
|
|
id: "user001", |
|
|
|
|
|
name: "发布者", |
|
|
|
|
|
avatar: "/uploads/20250826/b4b7c64ce37481e75742454c037e6407.png", |
|
|
|
|
|
isFollowed: false, |
|
|
|
|
|
}, |
|
|
|
|
|
comments: [ |
|
|
|
|
|
{ |
|
|
|
|
|
id: "comment001", |
|
|
|
|
|
content: |
|
|
|
|
|
"我的「桃园时刻」是和发小一起玩耍，阳光透过桃叶洒下斑驳光影，空气中弥漫着桃子的香甜。我们一起摘桃子，分享秘密，笑声在桃园里回荡。", |
|
|
|
|
|
createTime: "2025-08-20 15:00:00", |
|
|
|
|
|
user: { |
|
|
|
|
|
id: "user002", |
|
|
|
|
|
name: "@小新", |
|
|
|
|
|
avatar: "/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: "comment002", |
|
|
|
|
|
content: |
|
|
|
|
|
"我的「桃园时刻」是和家人一起野餐，在桃树下享受美食，孩子们在周围嬉戏，欢声笑语让时光变得缓慢而美好。", |
|
|
|
|
|
createTime: "2025-08-20 16:20:00", |
|
|
|
|
|
user: { |
|
|
|
|
|
id: "user003", |
|
|
|
|
|
name: "Mr.曾", |
|
|
|
|
|
avatar: "/uploads/20250826/d68433653e8b8cceba9bc4a6ab2a394d.png", |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 预览图片 |
|
|
// 预览图片 |
|
|
previewImage(imageUrl) { |
|
|
previewImage(imageUrl) { |
|
|
uni.previewImage({ |
|
|
uni.previewImage({ |
|
|
@ -333,36 +288,69 @@ export default { |
|
|
|
|
|
|
|
|
// 切换点赞状态 |
|
|
// 切换点赞状态 |
|
|
async toggleLike() { |
|
|
async toggleLike() { |
|
|
|
|
|
if (!this.noteId) { |
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
title: "笔记ID不存在", |
|
|
|
|
|
icon: "none", |
|
|
|
|
|
}); |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
const action = this.noteDetail.isLiked ? "cancel" : "like"; |
|
|
// 保存原始状态，用于出错时回滚 |
|
|
const res = await this.Post( |
|
|
const originalLiked = this.noteDetail.userLiked; |
|
|
{ |
|
|
const originalLikeCount = this.noteDetail.likeCount || 0; |
|
|
method: "POST", |
|
|
|
|
|
noteId: this.noteId, |
|
|
|
|
|
action: action, |
|
|
|
|
|
}, |
|
|
|
|
|
"/framework/note/like", |
|
|
|
|
|
"DES" |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (res.code === 200) { |
|
|
// 乐观更新UI |
|
|
this.noteDetail.isLiked = !this.noteDetail.isLiked; |
|
|
this.noteDetail.userLiked = !this.noteDetail.userLiked; |
|
|
this.noteDetail.likes += this.noteDetail.isLiked ? 1 : -1; |
|
|
this.noteDetail.likeCount = |
|
|
|
|
|
(this.noteDetail.likeCount || 0) + |
|
|
|
|
|
(this.noteDetail.userLiked ? 1 : -1); |
|
|
|
|
|
|
|
|
|
|
|
// 根据当前状态决定调用哪个API |
|
|
|
|
|
const apiUrl = this.noteDetail.userLiked |
|
|
|
|
|
? "/framework/noteLike/add/" + this.noteId |
|
|
|
|
|
: "/framework/noteLike/cancel/" + this.noteId; |
|
|
|
|
|
|
|
|
|
|
|
const res = await this.Post({}, apiUrl, "DES"); |
|
|
|
|
|
|
|
|
// 可选：更新点赞数为接口返回的准确数值 |
|
|
if (res.code === 200) { |
|
|
|
|
|
// 成功时，如果API返回了准确的点赞数，则使用API返回的数据 |
|
|
if (res.data && res.data.likeCount !== undefined) { |
|
|
if (res.data && res.data.likeCount !== undefined) { |
|
|
this.noteDetail.likes = res.data.likeCount; |
|
|
this.noteDetail.likeCount = res.data.likeCount; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 发送事件通知 timeShopBank 页面更新数据 |
|
|
|
|
|
uni.$emit('note-like-change', { |
|
|
|
|
|
noteId: this.noteId, |
|
|
|
|
|
isLiked: this.noteDetail.userLiked, |
|
|
|
|
|
likeCount: this.noteDetail.likeCount |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 可以在这里添加成功的提示或动画效果 |
|
|
} else { |
|
|
} else { |
|
|
|
|
|
// 失败时回滚UI状态 |
|
|
|
|
|
this.noteDetail.userLiked = originalLiked; |
|
|
|
|
|
this.noteDetail.likeCount = originalLikeCount; |
|
|
|
|
|
|
|
|
uni.showToast({ |
|
|
uni.showToast({ |
|
|
title: res.msg || (action === "like" ? "点赞失败" : "取消点赞失败"), |
|
|
title: |
|
|
|
|
|
res.msg || |
|
|
|
|
|
(this.noteDetail.userLiked ? "点赞失败" : "取消点赞失败"), |
|
|
icon: "none", |
|
|
icon: "none", |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error("点赞操作失败:", error); |
|
|
console.error("点赞操作失败:", error); |
|
|
|
|
|
|
|
|
|
|
|
// 发生异常时也需要回滚UI状态 |
|
|
|
|
|
this.noteDetail.userLiked = !this.noteDetail.userLiked; |
|
|
|
|
|
this.noteDetail.likeCount = |
|
|
|
|
|
(this.noteDetail.likeCount || 0) + |
|
|
|
|
|
(this.noteDetail.userLiked ? 1 : -1); |
|
|
|
|
|
|
|
|
uni.showToast({ |
|
|
uni.showToast({ |
|
|
title: "操作失败", |
|
|
title: "网络异常，请稍后重试", |
|
|
icon: "none", |
|
|
icon: "none", |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
@ -629,7 +617,7 @@ export default { |
|
|
} |
|
|
} |
|
|
.comment-input-section-box { |
|
|
.comment-input-section-box { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
bottom: -1px; |
|
|
left: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
right: 0; |
|
|
z-index: 999; |
|
|
z-index: 999; |
|
|
|
1054425342@qq.com
4 weeks ago