<template>
|
<div class="copywriting-review-page">
|
<!-- 页面标题 -->
|
<div class="page-header">
|
<h2>文案审核</h2>
|
</div>
|
|
<!-- 文案内容显示区域 -->
|
<div class="content-section">
|
<div class="section-title">
|
<span>待审核文案</span>
|
</div>
|
<div class="content-display">
|
<div class="content-text" v-if="copywritingContent" v-html="copywritingContent"></div>
|
<div class="empty-content" v-else>
|
<a-empty description="暂无文案内容" />
|
</div>
|
</div>
|
</div>
|
|
<!-- 横线分隔符 -->
|
<a-divider />
|
|
<!-- 审核表单区域 -->
|
<div class="review-form-section">
|
<a-form :model="reviewForm" layout="vertical" @finish="handleSubmit">
|
<!-- 推荐平台输入框 -->
|
<a-form-item label="推荐平台" name="recommendedPlatform">
|
<a-input v-model:value="reviewForm.recommendedPlatform" placeholder="请输入推荐发布的平台" allow-clear />
|
</a-form-item>
|
|
<!-- 审核意见文本框 -->
|
<a-form-item label="审核意见" name="reviewOpinion">
|
<a-textarea v-model:value="reviewForm.reviewOpinion" placeholder="请输入审核意见" :rows="4" show-count :maxlength="500" />
|
</a-form-item>
|
|
<!-- 按钮区域 -->
|
<a-form-item>
|
<div class="action-buttons" style="align-items: center; justify-content: center; ">
|
<a-button type="primary" danger @click="handleReject" :loading="loading.reject" style="margin-right: 12px"> 驳回 </a-button>
|
<a-button type="primary" @click="handleApprove" :loading="loading.approve"> 通过 </a-button>
|
</div>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" name="copywriting-review" setup>
|
import { reactive, onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { message, Modal } from 'ant-design-vue';
|
import { reviewCopywriting, queryById } from '../Copywriting.api';
|
import { useUserStore } from '/@/store/modules/user';
|
|
// 路由实例
|
const route = useRoute();
|
const router = useRouter();
|
|
// 文案ID
|
const copywritingId = route.query.id as string;
|
|
// 文案详情数据
|
const copywritingDetail = ref<any>(null);
|
const copywritingContent = ref<string>('');
|
|
// 审核表单数据
|
const reviewForm = reactive({
|
recommendedPlatform: '',
|
reviewOpinion: '',
|
});
|
|
// 加载状态
|
const loading = reactive({
|
reject: false,
|
approve: false,
|
detail: false,
|
});
|
|
/**
|
* 获取文案详情
|
*/
|
const getCopywritingDetail = async () => {
|
if (!copywritingId) {
|
message.error('未获取到文案ID，请返回列表页重新选择');
|
return;
|
}
|
|
loading.detail = true;
|
try {
|
const result = await queryById({ id: copywritingId });
|
copywritingDetail.value = result;
|
|
// 根据实际返回的数据结构设置文案内容
|
// 这里假设返回的数据中有content字段，如果没有请根据实际字段调整
|
if (result && result.content) {
|
copywritingContent.value = result.content;
|
} else if (result && result.text) {
|
copywritingContent.value = result.text;
|
} else {
|
// 如果接口没有返回具体内容，使用模拟数据
|
copywritingContent.value = `文案标题：${result.title || '待审核文案'}
|
|
语义词：${result.semanticWord?.word || '未指定'}
|
签约排名：${result.semanticWord?.ranking || '未指定'}
|
|
文案内容：${result.description || result.remark || '暂无具体文案内容'}
|
|
请认真审核以上内容，并在下方填写审核意见。`;
|
}
|
} catch (error) {
|
console.error('获取文案详情失败:', error);
|
message.error('获取文案详情失败，请稍后重试');
|
// 如果接口调用失败，使用模拟数据
|
copywritingContent.value = `文案标题：待审核文案
|
|
语义词：未指定
|
签约排名：未指定
|
|
这是一段需要审核的文案内容，来自接口数据。文案内容可以包含各种信息，比如产品描述、营销文案、新闻稿等。审核人员需要仔细阅读并给出专业的审核意见。
|
|
文案审核要点：
|
1. 内容是否符合法律法规
|
2. 语言表达是否准确清晰
|
3. 是否有敏感词汇
|
4. 是否符合品牌调性
|
5. 是否有语法错误或错别字
|
|
请认真审核以上内容，并在下方填写审核意见。`;
|
} finally {
|
loading.detail = false;
|
}
|
};
|
|
// 生命周期
|
onMounted(() => {
|
getCopywritingDetail();
|
});
|
|
// 提交处理
|
const handleSubmit = (values: any) => {
|
console.log('表单数据:', values);
|
};
|
|
// 驳回处理
|
const handleReject = () => {
|
if (!reviewForm.reviewOpinion.trim()) {
|
message.warning('请填写审核意见');
|
return;
|
}
|
|
loading.reject = true;
|
|
Modal.confirm({
|
title: '确认驳回',
|
content: '确定要驳回该文案吗？',
|
onOk: () => {
|
// 调用驳回接口
|
const params = {
|
id: copywritingId,
|
status: 4, // 4：驳回
|
auditer: '', // 审核人员（可以从用户信息获取）
|
remark: reviewForm.reviewOpinion,
|
platform: reviewForm.recommendedPlatform,
|
};
|
|
reviewCopywriting(params, {
|
successMessageMode: 'none' // 禁用默认成功消息
|
})
|
.then(() => {
|
loading.reject = false;
|
message.success('文案已驳回');
|
// 审核完成后返回列表页
|
setTimeout(() => {
|
router.push('/copywritingReview/copywritingList');
|
}, 1500);
|
})
|
.catch((error) => {
|
loading.reject = false;
|
message.error('驳回失败：' + (error.message || '网络错误'));
|
});
|
},
|
onCancel: () => {
|
loading.reject = false;
|
},
|
});
|
};
|
|
// 通过处理
|
const handleApprove = () => {
|
loading.approve = true;
|
|
Modal.confirm({
|
title: '确认通过',
|
content: '确定要通过该文案吗？',
|
onOk: () => {
|
// 调用通过接口
|
const userStore = useUserStore();
|
const userInfo = userStore.getUserInfo;
|
const userId = userInfo?.id || userInfo?.username || 'unknown';
|
const params = {
|
id: copywritingId,
|
status: 3, // 3：通过
|
auditer: userId, // 审核人员（可以从用户信息获取）
|
remark: reviewForm.reviewOpinion,
|
platform: reviewForm.recommendedPlatform,
|
};
|
|
reviewCopywriting(params, {
|
successMessageMode: 'none' // 禁用默认成功消息
|
})
|
.then(() => {
|
loading.approve = false;
|
message.success('文案已通过');
|
// 审核完成后返回列表页
|
setTimeout(() => {
|
router.push('/copywritingReview/copywritingList');
|
}, 1500);
|
})
|
.catch((error) => {
|
loading.approve = false;
|
message.error('通过失败：' + (error.message || '网络错误'));
|
});
|
},
|
onCancel: () => {
|
loading.approve = false;
|
},
|
});
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.copywriting-review-page {
|
padding: 24px;
|
background: #fff;
|
min-height: calc(100vh - 48px);
|
|
.page-header {
|
margin-bottom: 24px;
|
|
h2 {
|
margin: 0;
|
font-size: 20px;
|
font-weight: 600;
|
color: #262626;
|
}
|
}
|
|
.content-section {
|
margin-bottom: 24px;
|
|
.section-title {
|
margin-bottom: 16px;
|
|
span {
|
font-size: 16px;
|
font-weight: 500;
|
color: #262626;
|
}
|
}
|
|
.content-display {
|
border: 1px solid #d9d9d9;
|
border-radius: 6px;
|
padding: 16px;
|
background: #fafafa;
|
min-height: 120px;
|
|
.content-text {
|
white-space: pre-wrap;
|
line-height: 1.6;
|
color: #595959;
|
}
|
|
.empty-content {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 120px;
|
}
|
}
|
}
|
|
.review-form-section {
|
.action-buttons {
|
display: flex;
|
justify-content: flex-start;
|
}
|
}
|
}
|
|
// 响应式设计
|
@media (max-width: 768px) {
|
.copywriting-review-page {
|
padding: 16px;
|
|
.page-header h2 {
|
font-size: 18px;
|
}
|
|
.content-section .content-display {
|
padding: 12px;
|
}
|
}
|
}
|
</style>
|
