f

src/pages/admin/certification-reviews/index.vue

@@ -43,6 +43,7 @@
     </div>
 
     <el-table
+      v-if="!isMobile"
       v-loading="loading"
       :data="list"
       stripe
@@ -76,6 +77,31 @@
       </el-table-column>
     </el-table>
 
+    <div v-else v-loading="loading" class="mobile-list">
+      <div v-if="list.length" class="mobile-card-list">
+        <article v-for="row in list" :key="row.id" class="mobile-card">
+          <div class="mobile-card-header">
+            <div class="mobile-company">{{ row.company_name || '-' }}</div>
+            <el-tag :type="statusTagType(row)" size="small">
+              {{ certificationStatusDisplay(row?.certification_status) }}
+            </el-tag>
+          </div>
+          <div class="mobile-card-info"><span>提交时间：</span>{{ formatDate(row.submit_at) }}</div>
+          <div class="mobile-card-info"><span>法人：</span>{{ row.legal_person_name || '-' }}</div>
+          <div class="mobile-card-info"><span>手机号：</span>{{ row.legal_person_phone || '-' }}</div>
+          <div class="mobile-card-info"><span>统一代码：</span>{{ row.unified_social_code || '-' }}</div>
+          <div class="mobile-card-actions">
+            <el-button type="primary" plain size="small" @click="openDetail(row.id)">查看详情</el-button>
+            <template v-if="canShowApproveReject(row)">
+              <el-button type="success" plain size="small" @click="handleApprove(row)">通过</el-button>
+              <el-button type="danger" plain size="small" @click="handleReject(row)">拒绝</el-button>
+            </template>
+          </div>
+        </article>
+      </div>
+      <el-empty v-else description="暂无数据" />
+    </div>
+
     <div class="pagination-wrap">
       <el-pagination
         v-model:current-page="page"
@@ -92,7 +118,7 @@
     <el-drawer
       v-model="drawerVisible"
       title="企业信息详情"
-      size="560"
+      :size="isMobile ? '100%' : '560px'"
       direction="rtl"
       :close-on-click-modal="false"
     >
@@ -200,7 +226,7 @@
     </el-drawer>
 
     <!-- 通过弹窗 -->
-    <el-dialog v-model="approveDialogVisible" title="审核通过" width="400px">
+    <el-dialog v-model="approveDialogVisible" title="审核通过" :width="isMobile ? '92%' : '400px'">
       <el-form label-width="80">
         <el-form-item label="审核备注">
           <el-input v-model="approveRemark" type="textarea" :rows="3" placeholder="选填" />
@@ -213,7 +239,7 @@
     </el-dialog>
 
     <!-- 拒绝弹窗 -->
-    <el-dialog v-model="rejectDialogVisible" title="审核拒绝" width="400px">
+    <el-dialog v-model="rejectDialogVisible" title="审核拒绝" :width="isMobile ? '92%' : '400px'">
       <el-form label-width="80">
         <el-form-item label="拒绝原因" required>
           <el-input v-model="rejectRemark" type="textarea" :rows="3" placeholder="必填" />
@@ -250,6 +276,12 @@ const rejectRemark = ref('')
 const actionLoading = ref(false)
 const pendingRecordId = ref('')
 const pendingUserId = ref('')
+const isMobile = ref(false)
+
+function updateMobileState() {
+  if (typeof window === 'undefined') return
+  isMobile.value = window.innerWidth <= 768
+}
 
 function formatDate(val) {
   if (!val) return '-'
@@ -453,8 +485,14 @@ async function confirmReject() {
 }
 
 onMounted(() => {
+  updateMobileState()
+  window.addEventListener('resize', updateMobileState)
   loadList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateMobileState)
+})
 </script>
 
 <style scoped>
@@ -477,6 +515,8 @@ onMounted(() => {
 }
 .toolbar {
   display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 }
@@ -485,6 +525,48 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
 }
+.mobile-list {
+  min-height: 200px;
+}
+.mobile-card-list {
+  display: grid;
+  gap: 12px;
+}
+.mobile-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 12px;
+  background: #fff;
+}
+.mobile-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.mobile-company {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e293b;
+  word-break: break-word;
+}
+.mobile-card-info {
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+.mobile-card-info span {
+  color: #64748b;
+}
+.mobile-card-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 .drawer-title {
   margin-right: 12px;
 }
@@ -584,4 +666,37 @@ onMounted(() => {
   height: 100%;
   object-fit: cover;
 }
+
+@media (max-width: 768px) {
+  .certification-reviews-page {
+    padding: 12px;
+  }
+  .page-title {
+    font-size: 18px;
+  }
+  .page-subtitle {
+    font-size: 13px;
+  }
+  .toolbar > * {
+    width: 100% !important;
+  }
+  .pagination-wrap {
+    justify-content: center;
+  }
+  .detail-content {
+    padding-right: 0;
+  }
+  .drawer-actions {
+    gap: 6px;
+  }
+  .detail-dl {
+    grid-template-columns: 88px 1fr;
+    gap: 6px 10px;
+  }
+  .image-link {
+    width: 88px;
+    height: 88px;
+    line-height: 88px;
+  }
+}
 </style>