对接数据

2025-10-24 15:45:38 +08:00
parent 672a2f4c90
commit d3375a347f
138 changed files with 16904 additions and 1026 deletions
--- a/pages/ToolDetail/components/ThumbBtn.vue
+++ b/pages/ToolDetail/components/ThumbBtn.vue
@ -0,0 +1,97 @@
+<script>
+export default {
+	props: {
+		likeCount: {
+			type: Number,
+			default: 0
+		},
+		id: {
+			type: Number,
+			default: 0,
+		},
+		type: {
+			type: String,
+			default: 'tool',
+		},
+	},
+	data() {
+		return {
+			isActive: false,
+			throttleTimer: null,
+		}
+	},
+	methods: {
+		// 添加点赞
+		async addLike() {
+			// 节流控制 - 如果已有定时器则阻止执行
+			if (this.throttleTimer) {
+				return false;
+			}
+
+			// 设置节流定时器
+			this.throttleTimer = setTimeout(() => {
+				this.throttleTimer = null;
+			}, 3000);
+
+			if (!this.id) {
+				// 清除定时器
+				clearTimeout(this.throttleTimer);
+				this.throttleTimer = null;
+				return false;
+			}
+
+			if (this.type === 'tool') {
+				const {data: res} = await this.$api.tool.clickToolLike(this.id);
+				const {code} = res;
+				if (code === 0) {
+					this.$message.success('Like successful');
+					this.$emit('like-success');
+				} else {
+					// 请求失败时清除定时器，允许重新点击
+					clearTimeout(this.throttleTimer);
+					this.throttleTimer = null;
+				}
+			} else {
+				const {data: res} = await this.$api.article.clickArticleLike(this.id);
+				const {code} = res;
+				if (code === 0) {
+					this.$message.success('Like successful');
+					this.$emit('like-success');
+				} else {
+					// 请求失败时清除定时器，允许重新点击
+					clearTimeout(this.throttleTimer);
+					this.throttleTimer = null;
+				}
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="box flex flex-col items-center" :style="{background: !isActive && '#FFFFFF'}" @click="addLike">
+		<img :src="isActive ? '/ToolDetail/icon_thumb_selected.png' : '/ToolDetail/icon_thumb.png'" alt="" />
+		<span :style="{color: isActive ? '#ffffffcc' : '#64748b'}">{{ likeCount }}</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.box {
+	width: 48px;
+	height: 48px;
+	border-radius: 12px;
+	box-shadow: 0 4px 6px 0 #0000000d;
+	background: $header-backgroungd;
+	padding: 5px;
+	font-family: 'Poppins-Regular', serif;
+	font-size: 12px;
+	cursor: pointer;
+	img {
+		width: 20px;
+		height: 20px;
+	}
+	&:active {
+		opacity: 0.8;
+	}
+}
+</style>