优化部分代码
This commit is contained in:
parent
c21fd11637
commit
8c69f3c29f
@ -1,7 +1,3 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// This flag is used by the router guard to know if a navigation
|
||||
// is occurring immediately after a successful login.
|
||||
// If true, the guard can choose to bypass an immediate session check (e.g., getUserInfo)
|
||||
// for that first navigation, assuming the new token is valid.
|
||||
export const justLoggedIn = ref(false);
|
||||
@ -42,6 +42,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 回复查看表单，联系方式，昵称，相关建议-->
|
||||
<div v-if="replyModal" class="modal-overlay" @click="closeReplyModal">
|
||||
<div class="modal-content" @click.stop>
|
||||
@ -51,6 +52,24 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="add-modal-form" @submit.prevent="submitReply">
|
||||
<div class="form-row">
|
||||
<span class="label">昵称：</span>
|
||||
<input
|
||||
v-model="addForm.author"
|
||||
class="input"
|
||||
placeholder="请输入您的昵称"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="label">QQ号：</span>
|
||||
<input
|
||||
v-model="addForm.author_contact"
|
||||
class="input"
|
||||
placeholder="请输入您的QQ号"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<span class="label">相关建议：</span>
|
||||
<textarea
|
||||
@ -60,6 +79,7 @@
|
||||
rows="3"
|
||||
ref="autoTextarea"
|
||||
@input="autoResize"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
<div v-if="addError" class="error">{{ addError }}</div>
|
||||
@ -118,7 +138,14 @@
|
||||
</div>
|
||||
<div v-else class="no-reply">
|
||||
<div v-if="selectedDemand?.sendcontent">
|
||||
<div class="reply-content">{{ selectedDemand.sendcontent }}</div>
|
||||
<div v-for="(reply, index) in selectedDemand.sendcontent.split('|')" :key="index" class="reply-content">
|
||||
<div class="reply-with-avatar">
|
||||
<img :src="`https://q1.qlogo.cn/g?b=qq&nk=${reply.match(/\((\d+)\)/)?.[1] || ''}&s=40`" alt="User Avatar" class="reply-avatar" />
|
||||
<div class="reply-text">
|
||||
<b>{{ reply.split(')：')[0] + '）' }}</b>{{ reply.split(')：')[1] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
暂无回复
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user