595 lines
23 KiB
TypeScript
595 lines
23 KiB
TypeScript
import envConfig from "../../env";
|
||
import { Comment, CommentResponse } from "./article";
|
||
|
||
|
||
interface IApp {
|
||
globalData: {
|
||
token: string;
|
||
userInfo: any;
|
||
rawCardData: any[];
|
||
processedCardsData: any[]; // 确保这里有定义
|
||
};
|
||
processedCardsData: any[]; // 也要在这里定义，因为您直接将其挂载在 App 实例上
|
||
}
|
||
const app = getApp<IApp>();
|
||
// 假设 Comment 和 CommentResponse 已经正确定义
|
||
// 比如在 article.ts 文件中
|
||
// export interface Comment { /* ... */ }
|
||
// export interface CommentResponse { success: boolean; message?: string; data: Comment[] | any; }
|
||
|
||
Component({
|
||
data: {
|
||
// 明确声明类型，解决 TypeScript 的 never[] 报错
|
||
comments: [] as Comment[],
|
||
loading: true,
|
||
error: null as string | null,
|
||
totalCommentsCount: 0, // *** 新增：存储所有评论的总数 (包括回复) ***
|
||
cardReviewData: null as any | null,
|
||
|
||
|
||
|
||
showReplyInput: false, // 控制输入框是否显示
|
||
currentReplyId: '', // 当前正在回复的评论ID
|
||
currentReplyUsername: '', // 当前正在回复的用户名（用于 placeholder）
|
||
replyContent: '', // 输入框中的内容
|
||
isSubmitDisabled: true,
|
||
|
||
|
||
|
||
},
|
||
|
||
properties: {
|
||
id: {
|
||
type: String,
|
||
value: ''
|
||
}
|
||
},
|
||
|
||
lifetimes: {
|
||
attached() {
|
||
// 组件被挂载时执行
|
||
const id = this.properties.id;
|
||
this.getCardDetail(id);
|
||
this.loadCardReviewData(id);
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
closeInput() {
|
||
if (this.data.showReplyInput) {
|
||
this.setData({
|
||
showReplyInput: false,
|
||
currentReplyId: null,
|
||
currentReplyUsername: '',
|
||
replyContent: '',
|
||
isSubmitDisabled: true,
|
||
keyboardHeight: 0
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 页面滚动时，调用关闭函数
|
||
*/
|
||
onPageScroll() {
|
||
this.closeInput();
|
||
},
|
||
|
||
/**
|
||
* 点击“空白”区域（现在是整个 scroll-view）时，调用关闭函数
|
||
*/
|
||
handleBlankTap() {
|
||
console.log("scroll-view 区域被点击，准备关闭输入框");
|
||
this.closeInput();
|
||
},
|
||
|
||
/**
|
||
* ✅ 核心修改：处理点击评论项的逻辑
|
||
*/
|
||
handleCommentTap(e: WechatMiniprogram.TouchEvent) {
|
||
const wasShowing = this.data.showReplyInput;
|
||
const tappedCommentId = e.currentTarget.dataset.item?.id;
|
||
|
||
// 步骤 1: 立刻关闭当前可能已打开的输入框
|
||
this.closeInput();
|
||
|
||
// 步骤 2: 使用延时来重新打开输入框
|
||
// 这是一个技巧，确保关闭操作完成后再执行打开操作，避免冲突
|
||
setTimeout(() => {
|
||
const commentData = e.currentTarget.dataset.item;
|
||
if (commentData) {
|
||
// 如果刚刚输入框是开着的，并且点的是同一个评论，那么我们其实是想关闭它，而不是重新打开
|
||
if (wasShowing && this.data.currentReplyId === tappedCommentId) {
|
||
return;
|
||
}
|
||
this.setData({
|
||
showReplyInput: true,
|
||
currentReplyId: commentData.id,
|
||
currentReplyUsername: commentData.username || '匿名用户',
|
||
replyContent: '',
|
||
isSubmitDisabled: true,
|
||
});
|
||
}
|
||
}, 50); // 50毫秒的延时足够
|
||
},
|
||
|
||
/**
|
||
* ✅ 核心修改：处理点击主评论入口的逻辑
|
||
*/
|
||
handleTapPrimaryCommentInput() {
|
||
// 同样，先关闭
|
||
this.closeInput();
|
||
|
||
// 延时后打开
|
||
setTimeout(() => {
|
||
this.setData({
|
||
showReplyInput: true,
|
||
currentReplyId: null,
|
||
currentReplyUsername: '',
|
||
});
|
||
}, 50);
|
||
},
|
||
|
||
/**
|
||
* ✅ 修改：提交时智能判断是“回复”还是“新评论”
|
||
*/
|
||
handleReplySubmit() {
|
||
if (this.data.isSubmitDisabled) return;
|
||
|
||
const { replyContent, currentReplyId, cardReviewData } = this.data;
|
||
const articleId = cardReviewData.article_id;
|
||
|
||
// 根据 currentReplyId 是否有值来判断
|
||
if (currentReplyId) {
|
||
// --- 这是回复 ---
|
||
console.log(`[提交回复] 内容: "${replyContent}" | 回复目标ID: ${currentReplyId} | 文章ID: ${articleId}`);
|
||
// 在此处对接您的【回复】API
|
||
// wx.request({ url: ..., data: { content: replyContent, parent_id: currentReplyId, article_id: articleId } })
|
||
} else {
|
||
// --- 这是新的一级评论 ---
|
||
console.log(`[提交新评论] 内容: "${replyContent}" | 文章ID: ${articleId}`);
|
||
// 在此处对接您的【发表新评论】API
|
||
// wx.request({ url: ..., data: { content: replyContent, article_id: articleId } })
|
||
}
|
||
|
||
wx.showToast({ title: '评论成功(模拟)', icon: 'success' });
|
||
|
||
// 提交后清空并隐藏输入框
|
||
this.setData({
|
||
showReplyInput: false,
|
||
currentReplyId: null,
|
||
currentReplyUsername: '',
|
||
replyContent: '',
|
||
isSubmitDisabled: true
|
||
});
|
||
|
||
// (可选) 成功后可以延时刷新评论列表
|
||
// setTimeout(() => {
|
||
// this.getCardDetail(this.properties.id);
|
||
// }, 1000);
|
||
},
|
||
|
||
|
||
/**
|
||
* 实时同步输入框内容
|
||
*/
|
||
|
||
noop() {
|
||
return;
|
||
},
|
||
|
||
/**
|
||
* 输入框失去焦点
|
||
*/
|
||
handleInputBlur() {
|
||
// 目前主要靠 handleBlankTap 和 handleReplySubmit 隐藏，此函数可留空
|
||
},
|
||
|
||
/**
|
||
* 提交回复
|
||
*/
|
||
handleReplySubmit() {
|
||
const { replyContent, currentReplyId } = this.data;
|
||
if (!replyContent.trim()) {
|
||
wx.showToast({ title: '回复内容不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
console.log(`[准备发送] 回复内容: "${replyContent}" | 回复目标评论ID: ${currentReplyId}`);
|
||
|
||
// --- 在此处对接您的后端API，发送回复请求 ---
|
||
// wx.request({ ... });
|
||
|
||
wx.showToast({ title: '回复成功(模拟)', icon: 'success' });
|
||
|
||
this.setData({
|
||
showReplyInput: false,
|
||
currentReplyId: '',
|
||
currentReplyUsername: '',
|
||
replyContent: ''
|
||
});
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
onShareAppMessage: function (res) {
|
||
// 1. 获取文评数据，添加容错（避免数据为空导致报错）
|
||
const { cardReviewData = {} } = this.data;
|
||
const {
|
||
article_title = "未命名文评", // 文评标题默认值
|
||
total_voters = 0, // 总投票人数默认值
|
||
vote_type = "单选", // 投票类型（单选/多选）默认值
|
||
options = [] // 选项列表默认空数组
|
||
} = cardReviewData;
|
||
|
||
// 2. 处理选项数据：拼接“选项名+投票数”（如“方案A15票/方案B13票”）
|
||
const optionText = options.length
|
||
? options.map(opt => `${opt.name || '未命名选项'}${opt.votes || 0}票`).join('/')
|
||
: "暂无选项数据"; // 无选项时的默认提示
|
||
|
||
// 3. 拼接最终分享标题（整合所有关键信息）
|
||
const shareTitle = `${article_title}（已有${total_voters}人投票：${optionText}）`;
|
||
|
||
// 4. 返回分享配置（不设置imageUrl，微信会自动使用页面截图作为分享图）
|
||
return {
|
||
title: shareTitle, // 整合了关键数据的标题
|
||
path: `/pages/articledetail/articledetail?id=${cardReviewData.article_id || ''}`, // 跳转路径（容错：避免id为空）
|
||
// 不设置imageUrl：微信会自动截取当前页面顶部区域作为分享图（确保页面顶部有文评相关内容）
|
||
success: (res) => {
|
||
console.log('分享成功', res);
|
||
// 可选：分享成功后给用户提示
|
||
wx.showToast({ title: '分享成功', icon: 'success', duration: 1500 });
|
||
},
|
||
fail: (res) => {
|
||
console.log('分享失败', res);
|
||
wx.showToast({ title: '分享失败', icon: 'none', duration: 1500 });
|
||
}
|
||
};
|
||
},
|
||
|
||
|
||
// *** 递归计算评论总数的辅助函数 ***
|
||
calculateTotalComments(comments: Comment[]): number {
|
||
let count = 0;
|
||
for (const comment of comments) {
|
||
// 1. 计入当前评论（顶级评论或回复）
|
||
count++;
|
||
|
||
// 2. 递归计入子评论
|
||
if (comment.replies && comment.replies.length > 0) {
|
||
count += this.calculateTotalComments(comment.replies);
|
||
}
|
||
}
|
||
return count;
|
||
},
|
||
|
||
getCardDetail(id: string) {
|
||
console.log("正在加载文章ID:", id);
|
||
|
||
const articleId = parseInt(id, 10);
|
||
if (isNaN(articleId) || articleId <= 0) {
|
||
this.setData({
|
||
loading: false,
|
||
error: "文章ID格式错误"
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 开始加载，重置状态
|
||
this.setData({ loading: true, error: null });
|
||
|
||
this.getComments(articleId)
|
||
.then(commentsData => {
|
||
// --- ✅ 核心修复逻辑在这里 ---
|
||
// 无论 commentsData 是有内容的数组还是空数组，都是成功状态
|
||
|
||
console.log("获取到 commentsData:", commentsData);
|
||
|
||
const totalCount = this.calculateTotalComments(commentsData);
|
||
console.log(`文章ID ${articleId} 评论获取成功，总评论数: ${totalCount}`);
|
||
|
||
this.setData({
|
||
comments: commentsData || [], // 确保 comments 是一个数组
|
||
totalCommentsCount: totalCount,
|
||
loading: false,
|
||
error: null // 确保成功时，error 状态被清空
|
||
});
|
||
})
|
||
.catch(error => {
|
||
// 只有当 getComments promise被 reject (即网络或服务器真出错了) 才会进入这里
|
||
console.error(`获取评论失败123: ${error.message}`);
|
||
this.setData({
|
||
loading: false,
|
||
// 这里只显示真实的错误信息
|
||
error: error.message || "获取评论失败，请检查网络"
|
||
});
|
||
});
|
||
},
|
||
|
||
getComments(articleId: number): Promise<Comment[]> {
|
||
return new Promise((resolve, reject) => {
|
||
wx.request({
|
||
url: `${envConfig.apiBaseUrl}/comment/get`,
|
||
method: "POST",
|
||
data: {
|
||
articleId: articleId
|
||
},
|
||
success: (res) => {
|
||
console.log('[getComments] 收到服务器原始响应:', res.data);
|
||
const response = res.data as CommentResponse;
|
||
|
||
// ✅ 核心修复 1: 同时接受 data 为数组 或 data 为 null 的情况
|
||
if (response.success && (Array.isArray(response.data) || response.data === null)) {
|
||
console.log('[getComments] 数据校验成功, resolve 数据');
|
||
|
||
// ✅ 核心修复 2: 如果 data 是 null，我们将其视为空数组 [] 返回
|
||
// 这样可以保证后续的 .then 代码接收到的永远是一个数组
|
||
resolve(response.data || []);
|
||
|
||
} else {
|
||
// 只有当服务器明确告知失败, 或数据格式不对时, 才 reject
|
||
console.error('[getComments] 服务器返回数据异常, reject 错误');
|
||
reject(new Error(response.message || "服务器返回数据格式不正确"));
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('[getComments] 网络请求失败, reject 错误:', err);
|
||
reject(new Error("网络请求失败，请检查连接"));
|
||
}
|
||
});
|
||
});
|
||
},
|
||
hasReplies(replies:Comment[]) {
|
||
|
||
console.log('检测子评论：', {
|
||
isArray: Array.isArray(replies), // 是否为数组
|
||
length: replies ? replies.length : '无数据', // 长度
|
||
rawData: replies // 原始数据
|
||
});
|
||
// 双重校验：1. 是标准数组 2. 长度大于0（避免空数组或非数组）
|
||
return Array.isArray(replies) && replies.length > 0;
|
||
},
|
||
|
||
loadCardReviewData(id: string) {
|
||
|
||
// 1. 检查 app 实例是否存在
|
||
const app = getApp<IApp>();
|
||
if (!app) {
|
||
console.error('无法获取 App 实例，请确保 App 已启动。');
|
||
return;
|
||
}
|
||
|
||
// 2. 检查 app.processedCardsData 是否存在且是数组
|
||
if (Array.isArray(app.processedCardsData) && app.processedCardsData.length > 0) {
|
||
console.log('app详情页获取到的文章数据：', app.globalData.processedCardsData);
|
||
|
||
// ⭐️ 核心修复：先对字符串 id 进行 trim()，再进行 Number() 转换
|
||
const targetId = Number(id.trim());
|
||
|
||
// 打印调试信息，确认转换后的数值
|
||
console.log(`调试：properties.id(原始): "${id}"`);
|
||
console.log(`调试：目标查找 ID (数值, trim后): ${targetId}`);
|
||
|
||
const cardData = app.processedCardsData.find(item => {
|
||
// 确保比较的是数值 === 数值
|
||
return item.article_id === targetId;
|
||
});
|
||
|
||
if (cardData) {
|
||
console.log(`从 app.ts 找到文评数据，ID: ${id}`);
|
||
this.setData({
|
||
cardReviewData: cardData
|
||
});
|
||
console.log("当前界面中cardReviewData:",this.data.cardReviewData)
|
||
} else {
|
||
console.log(`app.ts 中未找到 ID 为 ${id} 的文评数据。`);
|
||
}
|
||
} else {
|
||
console.warn('App.processedCardsData 不存在或格式错误，无法加载文评数据。');
|
||
if (app.processedCardsData === undefined || app.processedCardsData === null) {
|
||
console.warn('确认 app.ts 中 processedCardsData 是否在 App({}) 根部定义!');
|
||
}
|
||
}
|
||
},
|
||
formatIsoDateTime(isoString: string): string {
|
||
console.log("调用formatIsoDateTime:",isoString)
|
||
if (!isoString) return '';
|
||
|
||
// 处理ISO格式字符串（如2025-09-25T17:00:08+08:00）
|
||
const date = new Date(isoString);
|
||
|
||
// 提取日期部分
|
||
const year = date.getFullYear();
|
||
const month = this.padZero(date.getMonth() + 1); // 月份从0开始
|
||
const day = this.padZero(date.getDate());
|
||
|
||
// 提取时间部分
|
||
const hours = this.padZero(date.getHours());
|
||
const minutes = this.padZero(date.getMinutes());
|
||
|
||
// 格式化为 xx年xx月xx日 xx:xx
|
||
return `${year}年${month}月${day}日 ${hours}:${minutes}`;
|
||
},
|
||
|
||
// 数字补零辅助函数
|
||
padZero(num: number): string {
|
||
return num < 10 ? `0${num}` : num.toString();
|
||
},
|
||
// 修复核心：单选/多选逻辑（基于单个 cardReviewData 对象）
|
||
selectOption(e: WechatMiniprogram.TouchEvent) {
|
||
const { optionId, cardId } = e.currentTarget.dataset as {
|
||
optionId: number;
|
||
cardId: number
|
||
};
|
||
const { cardReviewData, maxSelectCount } = this.data;
|
||
|
||
// 1. 基础校验：卡片不存在/投票已结束，直接返回
|
||
if (!cardReviewData || cardReviewData.article_id !== cardId) {
|
||
console.error("未找到对应的卡片数据");
|
||
return;
|
||
}
|
||
if (cardReviewData.is_ended) {
|
||
wx.showToast({ title: '投票已结束，无法选择', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
// 2. 深拷贝卡片数据（避免直接修改原数据）
|
||
const newCardReviewData = JSON.parse(JSON.stringify(cardReviewData));
|
||
// 确保 selectedOptions 始终是数组
|
||
if (!Array.isArray(newCardReviewData.selectedOptions)) {
|
||
newCardReviewData.selectedOptions = [];
|
||
}
|
||
const currentOptions = newCardReviewData.options || [];
|
||
|
||
// 3. 多选逻辑（保持不变）
|
||
if (newCardReviewData.vote_type === 'multiple') {
|
||
const optionIndex = currentOptions.findIndex((o: any) => o.id === optionId);
|
||
if (optionIndex === -1) return;
|
||
|
||
const isAlreadySelected = newCardReviewData.selectedOptions.includes(optionId);
|
||
if (isAlreadySelected) {
|
||
// 取消选择：移除已选ID + 取消选项选中状态
|
||
newCardReviewData.selectedOptions = newCardReviewData.selectedOptions
|
||
.filter(id => id !== optionId);
|
||
currentOptions[optionIndex].isSelected = false;
|
||
} else {
|
||
// 新增选择：检查最大选择数限制
|
||
if (newCardReviewData.selectedOptions.length >= maxSelectCount) {
|
||
wx.showToast({
|
||
title: `最多只能选择${maxSelectCount}项`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
newCardReviewData.selectedOptions.push(optionId);
|
||
currentOptions[optionIndex].isSelected = true;
|
||
}
|
||
|
||
// 4. 单选逻辑（核心修改：支持取消选择）
|
||
} else if (newCardReviewData.vote_type === 'single') {
|
||
// 4.1 判断当前点击的选项是否已选中
|
||
const isCurrentSelected = newCardReviewData.selectedOptions.includes(optionId);
|
||
|
||
if (isCurrentSelected) {
|
||
// 👉 情况1：已选中 → 取消选择（清空所有选中状态）
|
||
currentOptions.forEach((option: any) => {
|
||
option.isSelected = false; // 取消所有选项的选中状态
|
||
});
|
||
newCardReviewData.selectedOptions = []; // 清空已选列表
|
||
|
||
} else {
|
||
// 👉 情况2：未选中 → 切换选择（取消其他选项，选中当前）
|
||
currentOptions.forEach((option: any) => {
|
||
option.isSelected = (option.id === optionId); // 只选中当前选项
|
||
});
|
||
newCardReviewData.selectedOptions = [optionId]; // 更新已选列表
|
||
}
|
||
}
|
||
|
||
// 5. 同步更新页面数据
|
||
this.setData({ cardReviewData: newCardReviewData }, () => {
|
||
console.log(`卡片 ${cardId} 当前选中项:`, newCardReviewData.selectedOptions);
|
||
});
|
||
},
|
||
|
||
submitVote(e: WechatMiniprogram.TouchEvent) {
|
||
const { cardId } = e.currentTarget.dataset as { cardId: number };
|
||
const { cardReviewData } = this.data;
|
||
// 从全局获取用户ID（需确保App.globalData中已存储uid，若从接口获取需调整）
|
||
console.log("全局用户uid:",getApp<IApp>().globalData.userInfo.uid)
|
||
const uid = getApp<IApp>().globalData.userInfo.uid;
|
||
|
||
// 1. 基础校验：数据不存在/投票已结束/无用户ID
|
||
if (!cardReviewData || cardReviewData.article_id !== cardId) {
|
||
wx.showToast({ title: '未找到投票数据', icon: 'none' });
|
||
return;
|
||
}
|
||
if (cardReviewData.is_ended) {
|
||
wx.showToast({ title: '投票已结束，无法提交', icon: 'none' });
|
||
return;
|
||
}
|
||
if (!uid) {
|
||
wx.showToast({ title: '用户未登录，请先登录', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
// 2. 处理已选选项：确保是数组且非空
|
||
const selectedOptions = Array.isArray(cardReviewData.selectedOptions)
|
||
? cardReviewData.selectedOptions
|
||
: [];
|
||
if (selectedOptions.length === 0) {
|
||
wx.showToast({ title: '请至少选择一个选项', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
// 3. 核心：根据投票类型动态构建请求参数
|
||
let voteParams: {
|
||
uid: string;
|
||
articleId: number;
|
||
optionId?: number;
|
||
optionIds?: number[]
|
||
} = {
|
||
uid: uid, // 从全局获取用户ID
|
||
articleId: cardId // 投票卡片ID（与article_id一致）
|
||
};
|
||
|
||
// 单选：添加optionId（取已选列表第一个值，因单选最多一个）
|
||
if (cardReviewData.vote_type === 'single') {
|
||
voteParams.optionId = selectedOptions[0]; // 单选已选列表仅1项，直接取第0个
|
||
}
|
||
// 多选：添加optionIds（直接传入已选数组）
|
||
else if (cardReviewData.vote_type === 'multiple') {
|
||
voteParams.optionIds = selectedOptions;
|
||
}
|
||
|
||
console.log("投票发送：",voteParams)
|
||
|
||
// 4. 发送投票请求（替换为实际接口地址，适配后端要求）
|
||
wx.request({
|
||
url: `${envConfig.apiBaseUrl}/article/vote`, // 实际投票提交接口
|
||
method: 'POST',
|
||
header: {
|
||
'Content-Type': 'application/json',
|
||
// 若需Token验证，添加Token头（根据后端要求）
|
||
// 'Authorization': `Bearer ${getApp<IApp>().globalData.token}`
|
||
},
|
||
data: voteParams, // 动态构建的差异化参数
|
||
success: (res) => {
|
||
// 假设后端返回格式：{ success: boolean; message: string }
|
||
const response = res.data;
|
||
if (response.success) {
|
||
wx.showToast({ title: '投票提交成功', icon: 'success' });
|
||
// 投票成功后：可更新卡片状态（如标记为已投票、禁用选项）
|
||
this.setData({
|
||
['cardReviewData.is_voted']: true, // 标记用户已投票（需卡片数据支持）
|
||
['cardReviewData.is_ended']: response.data?.is_ended || cardReviewData.is_ended // 若后端返回投票结束状态，同步更新
|
||
});
|
||
// // 通知父组件投票成功（如需）
|
||
// this.triggerEvent('voteSuccess', {
|
||
// cardId: cardId,
|
||
// selectedOptions: selectedOptions,
|
||
// voteParams: voteParams,
|
||
// timestamp: Date.now()
|
||
// });
|
||
} else {
|
||
wx.showToast({ title: response.message || '投票提交失败', icon: 'none' });
|
||
console.error('投票提交失败：', response.message);
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
wx.showToast({ title: '网络错误，投票失败', icon: 'none' });
|
||
console.error('投票请求失败：', err);
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
},
|
||
|
||
|
||
}) |