feat(reportProblems): 问题答复列表增加接口原始 JSON 调试弹窗

Made-with: Cursor

src/subPages/pages/reportProblems/index.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { addQuestionReportData,REPORTDATA, getQuestionTypeList, pageQuestionReportData,getPerson } from '@/api/questionReqort'
-import { AddQuestionReportDataReq, QuestionListRes, QuestionType, QuestionTypeListRes } from '@/api/questionReqort/types'
+import { AddQuestionReportDataReq, PageQuestionReportDataReq, QuestionListRes, QuestionType, QuestionTypeListRes } from '@/api/questionReqort/types'
+import type { ApiResponse, PageResp } from '@/api/types'
 import { getCachedWecomVisitorProfile, getWecomInternalUser } from '@/api/wecom'
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import GridAddress from '@/components/address/gridAddress/index.vue'
 import { showNotify } from 'vant'
 import dayjs from 'dayjs';
@@ -221,6 +222,21 @@ const finished = ref(false)
 const listInitialized = ref(false)
 const listRequesting = ref(false)
 
+/** 列表接口调试：最近一次请求参数与完整响应 */
+const showListRawJsonPopup = ref(false)
+const listLastReqParams = ref<PageQuestionReportDataReq | null>(null)
+const listLastApiResponse = ref<ApiResponse<PageResp<QuestionListRes>> | null>(null)
+
+const listReqParamsJson = computed(() => {
+  if (!listLastReqParams.value) return '{}'
+  return JSON.stringify(listLastReqParams.value, null, 2)
+})
+
+const listApiRawJson = computed(() => {
+  if (!listLastApiResponse.value) return '{}'
+  return JSON.stringify(listLastApiResponse.value, null, 2)
+})
+
 const resetQuestionList = () => {
   list.value = []
   pageInfo.value.pageNumber = 1
@@ -236,12 +252,15 @@ const questList = async () => {
   loading.value = true
   try {
     const currentPage = pageInfo.value.pageNumber
-    const { data } = await pageQuestionReportData({
+    const reqParams: PageQuestionReportDataReq = {
       pageNumber: currentPage,
       pageSize: pageInfo.value.pageSize,
       token: userState.getUserTokenInfo || '',
-    })
-    const records = data.records || []
+    }
+    listLastReqParams.value = reqParams
+    const res = await pageQuestionReportData(reqParams)
+    listLastApiResponse.value = res
+    const records = res.data.records || []
 
     list.value = currentPage === 1 ? records : list.value.concat(records)
     pageInfo.value.pageNumber = currentPage + 1
@@ -363,6 +382,9 @@ watch(active, async (value) => {
     </van-tab>
     <van-tab title="问题答复">
       <view class="tab-container">
+        <view class="mb-[8px]">
+          <van-button size="small" plain type="primary" @click="showListRawJsonPopup = true">查看接口原始JSON</van-button>
+        </view>
         <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="questList">
           <view v-for="item in list" :key="item.uuid" class="list-item-style">
             <view class="top">
@@ -383,6 +405,23 @@ watch(active, async (value) => {
             </view>
           </view>
         </van-list>
+        <van-popup
+          v-model:show="showListRawJsonPopup"
+          round
+          position="bottom"
+          :style="{ height: '75%' }"
+        >
+          <view class="json-popup">
+            <view class="json-title">请求参数</view>
+            <scroll-view scroll-y class="json-scroll json-scroll--small">
+              <text class="json-text">{{ listReqParamsJson }}</text>
+            </scroll-view>
+            <view class="json-title">列表接口完整JSON</view>
+            <scroll-view scroll-y class="json-scroll">
+              <text class="json-text">{{ listApiRawJson }}</text>
+            </scroll-view>
+          </view>
+        </van-popup>
       </view>
     </van-tab>
   </van-tabs>
@@ -447,4 +486,38 @@ watch(active, async (value) => {
     }
   }
 }
+
+.json-popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.json-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.json-scroll {
+  flex: 1;
+  overflow: hidden;
+  background: #f7f8fa;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.json-scroll--small {
+  flex: 0 0 auto;
+  max-height: 120px;
+  margin-bottom: 10px;
+}
+
+.json-text {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 13px;
+  line-height: 20px;
+}
 </style>