|
|
@@ -52,7 +52,7 @@
|
|
|
<div v-for="item in contentList" :key="item.id" class="content-card" @click="handleCardClick(item)">
|
|
|
<!-- 封面图片/视频区域 -->
|
|
|
<div class="content-cover-wrapper">
|
|
|
- <img v-if="item.coverUrl" :src="item.coverUrl" :alt="item.title" class="content-cover" />
|
|
|
+ <img v-if="item.imagePath" :src="getCoverImage(item)" :alt="item.title" class="content-cover" />
|
|
|
<div v-else class="cover-placeholder">
|
|
|
<el-icon :size="48" color="#999">
|
|
|
<Picture />
|
|
|
@@ -60,7 +60,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 视频播放按钮 -->
|
|
|
- <div v-if="item.type === 'video'" class="play-overlay">
|
|
|
+ <div v-if="isVideoItem(item)" class="play-overlay">
|
|
|
<el-icon :size="40" color="#fff">
|
|
|
<VideoPlay />
|
|
|
</el-icon>
|
|
|
@@ -91,7 +91,7 @@
|
|
|
<div v-for="item in dianZanList" :key="item.id" class="content-card" @click="handleCardClick(item)">
|
|
|
<!-- 封面图片/视频区域 -->
|
|
|
<div class="content-cover-wrapper">
|
|
|
- <img v-if="item.imagePath" :src="item.imagePath" :alt="item.title" class="content-cover" />
|
|
|
+ <img v-if="item.imagePath" :src="getCoverImage(item)" :alt="item.title" class="content-cover" />
|
|
|
<div v-else class="cover-placeholder">
|
|
|
<el-icon :size="48" color="#999">
|
|
|
<Picture />
|
|
|
@@ -99,7 +99,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 视频播放按钮 -->
|
|
|
- <div v-if="item.type === 'video'" class="play-overlay">
|
|
|
+ <div v-if="isVideoItem(item)" class="play-overlay">
|
|
|
<el-icon :size="40" color="#fff">
|
|
|
<VideoPlay />
|
|
|
</el-icon>
|
|
|
@@ -368,9 +368,7 @@
|
|
|
@click="handleLikeComment(item)"
|
|
|
style="display: flex; align-items: center"
|
|
|
>
|
|
|
- <el-icon :size="16" :color="item.isLiked ? '#f56c6c' : '#999'">
|
|
|
- <Star /> </el-icon
|
|
|
- >
|
|
|
+ <el-icon :size="16" :color="item.isLiked ? '#f56c6c' : '#999'"> <Star /> </el-icon>
|
|
|
<span>{{ item.likeCount || 0 }}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -666,6 +664,7 @@ interface ContentItem {
|
|
|
id: number;
|
|
|
title: string;
|
|
|
coverUrl: string;
|
|
|
+ imagePath?: string;
|
|
|
type: "image" | "video";
|
|
|
viewCount: number;
|
|
|
liulanCount?: number;
|
|
|
@@ -696,6 +695,7 @@ interface DetailItem extends ContentItem {
|
|
|
phoneId?: string; // 发布者店铺ID
|
|
|
storeUserId?: string | number; // 小店用户ID（用于举报和拉黑）
|
|
|
userType?: number; // 发布者用户类型：1商家，2用户
|
|
|
+ imagePath?: string; // 图片路径
|
|
|
}
|
|
|
|
|
|
interface RelationUser {
|
|
|
@@ -924,7 +924,7 @@ const handleVideoPlay = (index: number) => {
|
|
|
|
|
|
// 查看用户主页
|
|
|
const handleViewUserProfile = () => {
|
|
|
- ElMessage.info("查看用户主页功能开发中");
|
|
|
+ // ElMessage.info("查看用户主页功能开发中");
|
|
|
};
|
|
|
|
|
|
// 详情页点赞
|
|
|
@@ -1159,7 +1159,7 @@ const handleLikeComment = async (comment: any) => {
|
|
|
// 回复评论
|
|
|
const handleReplyComment = (comment: any) => {
|
|
|
replyingComment.value = comment;
|
|
|
- commentInput.value = `@${comment.userName} `;
|
|
|
+ commentInput.value = ``;
|
|
|
// 聚焦到输入框
|
|
|
setTimeout(() => {
|
|
|
const textarea = document.querySelector(".comment-input-wrapper textarea") as HTMLTextAreaElement;
|
|
|
@@ -1468,6 +1468,40 @@ const loadUserInfo = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+// 判断是否是视频项
|
|
|
+const isVideoItem = (item: any) => {
|
|
|
+ if (!item.imagePath) return false;
|
|
|
+ const files = item.imagePath
|
|
|
+ .split(",")
|
|
|
+ .map((url: string) => url.trim())
|
|
|
+ .filter((url: string) => url);
|
|
|
+ const firstFile = files[0] || "";
|
|
|
+ return firstFile.toLowerCase().endsWith(".mp4") || firstFile.toLowerCase().includes(".mp4");
|
|
|
+};
|
|
|
+
|
|
|
+// 获取封面图片
|
|
|
+const getCoverImage = (item: any) => {
|
|
|
+ console.log(item.imagePath);
|
|
|
+ if (!item.imagePath) return "";
|
|
|
+
|
|
|
+ const files = item.imagePath
|
|
|
+ .split(",")
|
|
|
+ .map((url: string) => url.trim())
|
|
|
+ .filter((url: string) => url);
|
|
|
+
|
|
|
+ // 检查第一个文件是否是视频
|
|
|
+ const firstFile = files[0] || "";
|
|
|
+ const isVideo = firstFile.toLowerCase().endsWith(".mp4") || firstFile.toLowerCase().includes(".mp4");
|
|
|
+
|
|
|
+ // 如果第一个文件是视频，取第二个文件（jpg缩略图）
|
|
|
+ if (isVideo && files.length > 1) {
|
|
|
+ return files[1]; // 第二个是jpg缩略图
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果是图片或只有一个文件，取第一个
|
|
|
+ return files[0] || "";
|
|
|
+};
|
|
|
+
|
|
|
// 加载草稿数量
|
|
|
const loadDraftCount = async () => {
|
|
|
try {
|
|
|
@@ -1492,15 +1526,6 @@ const loadDraftCount = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 加载内容列表
|
|
|
-const loadContentList = async () => {
|
|
|
- // 根据当前 tab 调用不同的接口
|
|
|
- if (activeTab.value === "dynamic") {
|
|
|
- getDyanmicList();
|
|
|
- } else if (activeTab.value === "liked") {
|
|
|
- getDianZan();
|
|
|
- }
|
|
|
-};
|
|
|
const dianZanList = ref<any[]>([]);
|
|
|
const getDianZan = async () => {
|
|
|
const phone = userStore.userInfo?.phone || "";
|
|
|
@@ -2234,9 +2259,6 @@ onMounted(() => {
|
|
|
padding: 8px;
|
|
|
font-size: 24px;
|
|
|
color: #ffffff;
|
|
|
- &:hover {
|
|
|
- background: rgb(255 255 255 / 10%);
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
.detail-content {
|
zhuli