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

feat: 添加点赞动画效果及更新点赞图标

Browse Source 
- 在details.css和details.less中添加点赞动画效果
- 更新Item.vue组件中的点赞图标为like-red-pitch.png
- 在index.html/index.vue中添加点赞动画组件Like
- 更新http.js中的测试session token
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-08-22 11:25:26 +08:00
parent 205252739c
commit e2182f9c79
93 changed files with 620 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/details/[id].vue
View File

@@ -342,7 +342,7 @@
</div>
<img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index)">
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
<div class="like-quantity">{{ item["likenum"] || 0 }}</div>
</div>
@@ -431,7 +431,7 @@
</div>
<img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index, i)">
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-red-pitch.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
<div class="like-quantity">{{ ite["likenum"] || 0 }}</div>
</div>
@@ -526,23 +526,23 @@
<div class="floor-left flexacenter">
<div class="item flexacenter" v-if="isBrowser" style="cursor: auto">
<img class="icon h8" src="@/assets/img/eye-icon-black.svg" />
{{ info["views"] }}
<div>{{ info["views"] }}</div>
</div>
<div class="item flexacenter" @click="handleLike" v-if="true">
<img class="icon h16" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
<img class="icon h16 pitch" v-if="islike == 1" src="@/assets/img/like-red-pitch.png" />
<img class="icon h16" v-else src="@/assets/img/like-icon.png" />
{{ info["likenum"] || "" }}
<div>{{ info["likenum"] || "" }}</div>
</div>
<div class="item flexacenter" v-else>
<img class="icon h16" src="@/assets/img/riposte-icon.png" />
{{ ripostecount.total || 0 }}
<div>{{ ripostecount.total || 0 }}</div>
</div>
<div class="item flexacenter" @click="handleScrollComments()"><img class="icon h15" src="@/assets/img/comment-icon.png" />{{ commentComments }}</div>
<ClientOnly>
<div class="item flexacenter" @click="handleCollect()">
<img class="icon h16" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
<img class="icon h16" v-else src="@/assets/img/collect-icon.png" />
{{ info["favnum"] || "收藏" }}
<div>{{ info["favnum"] || "收藏" }}</div>
</div>
</ClientOnly>
<ClientOnly>
@@ -690,6 +690,7 @@
</div>
</template>
</el-dialog>
<Like v-if="isLikeGif"></Like>
</template>
<script setup>
@@ -1023,15 +1024,25 @@ const commentLike = (index, i) => {
if (res.code != 200) return;
let data = res.data;
const status = data["status"];
if (i != null) {
targetCommentList[index]["child"][i].islike = data["status"];
targetCommentList[index]["child"][i].islike = status;
targetCommentList[index]["child"][i].likenum = data["likenum"];
} else {
targetCommentList[index].islike = data["status"];
targetCommentList[index].islike = status;
targetCommentList[index].likenum = data["likenum"];
}
ElMessage.success(res.message);
if (status) {
isLikeGif.value = false;
nextTick(() => {
isLikeGif.value = true;
setTimeout(() => (isLikeGif.value = false), 2000);
});
}
});
};
@@ -1240,6 +1251,9 @@ let copyText = (text) => {
copyText();
};
// 点赞
let isLikeGif = ref(false);
// 点击点赞
const handleLike = () => {
if (realname.value == 0 && user.value.uin > 0) {
@@ -1257,11 +1271,20 @@ const handleLike = () => {
operateLikeHttp({ token }).then((res) => {
if (res.code != 200) return;
let data = res.data;
const status = data["status"];
info.value["likenum"] = data["count"];
islike.value = data["status"];
islike.value = status;
isdisplay.value = true;
ElMessage.success(res.message);
if (status) {
isLikeGif.value = false;
nextTick(() => {
isLikeGif.value = true;
setTimeout(() => (isLikeGif.value = false), 2000);
});
}
});
};
@@ -1361,7 +1384,7 @@ provide("getDetails", getDetails);
const { $cache } = useNuxtApp();
// seo的
if (process.server && process.env.NODE_ENV != "development") {
if (process.server && process.env.NODE_ENV != "development") {
try {
const detailKey = `details_${uniqid}`;
const cachedData = $cache.get(detailKey);