-
{{ selectedDemand.sendcontent }}
+
+
+
![User Avatar]()
+
+ {{ reply.split('):')[0] + ')' }}{{ reply.split('):')[1] }}
+
+
+
暂无回复
@@ -193,7 +220,9 @@ const addForm = ref({
content: '',
reward: '',
qq_code: '',
- sendcontent: ''
+ sendcontent: '',
+ author: '',
+ author_contact: ''
})
const addLoading = ref(false)
const autoTextarea = ref(null)
@@ -239,9 +268,25 @@ const showReply = (demand) => {
reply.value = demand
replyModal.value = true
}
-//关闭回复弹窗
+
+// 关闭回复弹窗
const closeReplyModal = () => {
- replyModal.value = false
+ replyModal.value = false;
+ resetReplyForm();
+}
+
+// 重置回复表单
+const resetReplyForm = () => {
+ addForm.value = {
+ sendcontent: '',
+ author: '',
+ author_contact: ''
+ };
+ addError.value = '';
+ // 重置文本框高度
+ if (autoTextarea.value) {
+ autoTextarea.value.style.height = 'auto';
+ }
}
// 显示详情弹窗
@@ -257,16 +302,10 @@ const closeModal = () => {
}
// 打开弹窗
-function openAddModal() {
- addForm.value = {
- requester: '',
- content: '',
- reward: '',
- qq_code: '',
- sendcontent: ''
- }
- addError.value = ''
- showAddModal.value = true
+const openAddModal = (demand) => {
+ reply.value = demand;
+ replyModal.value = true;
+ resetReplyForm();
}
// 关闭弹窗
@@ -313,27 +352,47 @@ const submitReply = async () => {
addError.value = '回复内容不能为空';
return;
}
+ if (!addForm.value.author?.trim()) {
+ addError.value = '昵称不能为空';
+ return;
+ }
+ if (!addForm.value.author_contact?.trim()) {
+ addError.value = 'QQ号不能为空';
+ return;
+ }
+ // 验证QQ号是否为纯数字
+ if (!/^\d+$/.test(addForm.value.author_contact)) {
+ addError.value = 'QQ号必须为纯数字';
+ return;
+ }
+
addLoading.value = true;
addError.value = '';
try {
const now = new Date();
const dateStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;
+
+ // 拼接回复内容
+ const newReply = `${addForm.value.author}(${addForm.value.author_contact}):${addForm.value.sendcontent}`;
+ const formattedContent = reply.value.sendcontent
+ ? `${reply.value.sendcontent}|${newReply}`
+ : newReply;
+
const payload = {
requester: reply.value.requester || '',
- sendcontent: addForm.value.sendcontent,
+ sendcontent: formattedContent,
content: reply.value.content,
reward: reply.value.reward || '',
date: dateStr,
- qq_code: reply.value.qq_code || ''
+ qq_code: reply.value.qq_code || '',
+ author: addForm.value.author,
+ author_contact: addForm.value.author_contact
};
console.log('提交的回复数据:', payload);
await updateDemand(reply.value.id, payload);
replyModal.value = false;
- addForm.value.sendcontent = '';
- if (autoTextarea.value) {
- autoTextarea.value.style.height = 'auto';
- }
+ resetReplyForm();
fetchDemands(); // 刷新列表
} catch (e) {
console.error('提交回复失败:', e);
@@ -641,15 +700,15 @@ function autoResize() {
}
.reply-list {
- max-height: 300px;
- overflow-y: auto;
+ background: none;
+ border-radius: 0;
+ padding: 0 0 0 0;
}
.reply-item {
- background: #f7faff;
- border-radius: 8px;
- padding: 15px;
- margin-bottom: 15px;
+ background: none;
+ border-radius: 0;
+ padding: 0 0 0 0;
}
.reply-header {
@@ -693,4 +752,46 @@ function autoResize() {
background: transparent;
box-shadow: none;
}
+
+.reply-with-avatar {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.reply-with-avatar:last-child {
+ margin-bottom: 0;
+}
+
+.reply-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: none;
+ object-fit: cover;
+ flex-shrink: 0;
+ background: #f3f6fa;
+}
+
+.reply-text {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-height: 40px;
+ font-size: 15px;
+ color: #222;
+ line-height: 1.7;
+ padding-left: 14px;
+ background: none;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.reply-text b {
+ font-weight: 600;
+ margin-right: 6px;
+ color: #2563eb;
+ font-size: 15px;
+}
\ No newline at end of file