新增文案审核详情页面

liubp

2025-12-10 a35f2066002cfe785dae9475c83e05724e70683a

新增文案审核详情页面

 src/views/copywritingReview/CopywritingList.vue

@@ -178,11 +178,18 @@
   * 详情
   */
  function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: false,
    });
    try {
      router.push({
        path: '/copywritingReview/detail/index',
        query: {
          id: record.id || '',
        },
      });
    } catch (error) {
      console.error('路由跳转失败:', error);
      // 如果路由跳转失败，尝试使用完整路径
      window.location.href = '/#/copywritingReview/detail/index?id=' + (record.id || '');
    }
  }

  /**

 src/views/copywritingReview/detail/index.vue

New file
@@ -0,0 +1,302 @@
<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> -->
        <p>推荐平台：{{ reviewForm.recommendedPlatform || '- 暂无推荐平台 -' }}</p>
        <!-- 审核意见文本框 -->
        <!-- <a-form-item label="审核意见" name="reviewOpinion">
          <a-textarea v-model:value="reviewForm.reviewOpinion" placeholder="请输入审核意见" :rows="4" show-count :maxlength="500" />
        </a-form-item> -->
        <p>审核意见：{{ reviewForm.reviewOpinion || '- 暂无审核意见 -' }}</p>
        <!-- 按钮区域 -->
        <!-- <a-form-item>
          <div class="action-buttons" style="display: flex; justify-content: flex-end;">
            <a-button type="primary" danger @click="handleReject" :loading="loading.reject"> 驳回 </a-button>
            <a-button type="primary" @click="handleApprove" :loading="loading.approve" style="margin-left: 12px"> 通过 </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)
          .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)
          .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>

 src/views/copywritingReview/review/index.vue

@@ -23,7 +23,7 @@

    <!-- 审核表单区域 -->
    <div class="review-form-section">
      <a-form :model="reviewForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" @finish="handleSubmit">
      <a-form :model="reviewForm" layout="vertical" @finish="handleSubmit">
        <!-- 推荐平台输入框 -->
        <a-form-item label="推荐平台" name="recommendedPlatform">
          <a-input v-model:value="reviewForm.recommendedPlatform" placeholder="请输入推荐发布的平台" allow-clear />
@@ -35,10 +35,10 @@
        </a-form-item>

        <!-- 按钮区域 -->
        <a-form-item :wrapper-col="{ offset: 4, span: 18 }">
          <div class="action-buttons">
            <a-button type="primary" danger @click="handleReject" :loading="loading.reject"> 驳回 </a-button>
            <a-button type="primary" @click="handleApprove" :loading="loading.approve" style="margin-left: 12px"> 通过 </a-button>
        <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>