refactor(mobile/pages/licenses/report): 新增：勤策App_证照中心质检报告内页面列表数据展示

src/views/mobile/pages/licenses/report/index.vue

@@ -17,18 +17,24 @@
         finished-text="没有更多了"
         @load="onLoad">
         <van-cell-group inset>
-          <van-swipe-cell v-for="item in planList"
-            :key="item.id">
-            <van-cell :title="item.prdName + '\n料号: ' + item.prdCode">
-              <template #label>
-                <p>批号：{{ item.manufactureBatchNo }}</p>
-                <p>厂家：{{ item.manufactureDate }}</p>
-              </template>
-              <template #value>
-
-              </template>
-            </van-cell>
-          </van-swipe-cell>
+          <van-cell :title="item.prdName + '\n料号: ' + item.prdCode"
+            v-for="item, index in planList"
+            :key="item.id"
+            :class="{ 'zebra-row': index % 2 === 1 }">
+            <template #label>
+              <p>批号：{{ item.manufactureBatchNo }}</p>
+              <p>厂家：{{ item.manufacturersName }}</p>
+              <p>发货时间：{{ parseTime(item.shipDate, '{y}-{m}-{d}') }}</p>
+            </template>
+            <template #value>
+              <el-link v-if="item.qualityUrl"
+                type="primary"
+                @click="handleReportClick(item.qualityUrl)">
+                {{ getReportLinkText(item.qualityUrl) }}
+              </el-link>
+              <span v-else>无文件</span>
+            </template>
+          </van-cell>
         </van-cell-group>
       </van-list>
     </van-pull-refresh>
@@ -37,6 +43,8 @@
 
 <script setup>
 import { getQualityInsPageList } from '@/api'
+import { parseTime } from '@/utils'
+import { showImagePreview } from 'vant';
 const router = useRouter()
 
 /*************** 导航栏 ***************/
@@ -77,12 +85,77 @@ const getPlanListFn = async () => {
 }
 getPlanListFn()
 
+/*************** 附件类型/预览 ***************/
+// 判断文件类型
+const isImageFile = (url) => {
+  if (!url) return false
+  const imageExtensions = ['.png', '.jpg', '.jpeg', '.webp']
+  return imageExtensions.some(ext => url.toLowerCase().includes(ext))
+}
+const isPdfFile = (url) => {
+  if (!url) return false
+  return url.toLowerCase().includes('.pdf')
+}
+const isZipFile = (url) => {
+  if (!url) return false
+  const zipExtensions = ['.zip', '.rar', '.7z']
+  return zipExtensions.some(ext => url.toLowerCase().includes(ext))
+}
+const getReportLinkText = (url) => {
+  if (isImageFile(url)) {
+    return '预览图片'
+  } else if (isPdfFile(url)) {
+    return '查看报告'
+  } else if (isZipFile(url)) {
+    return '下载压缩包'
+  } else {
+    return '查看文件'
+  }
+}
 
+// 处理报告点击事件
+const handleReportClick = (url) => {
+  if (isImageFile(url)) {
+    // 图片文件：预览
+    showImagePreview([url])
+  } else if (isPdfFile(url)) {
+    // PDF文件：打开新链接
+    // 把 url 的域名替换掉，改成自己的然后拼接原来的资源路径
+    const originDomain = import.meta.env.VITE_APP_OSS_ORIGIN_DOMAIN
+    const customDomain = import.meta.env.VITE_APP_OSS_CUSTOM_DOMAIN
+    url = url.replace(originDomain, customDomain)
+    window.open(url, '_blank')
+  } else {
+    // 其他文件类型：默认打开新链接
+    window.open(url, '_blank')
+  }
+}
 </script>
 
 <style scoped
   lang="scss">
-  ::v-deep(.van-cell__label) {
+
+  /* 添加斑马纹样式 */
+  .van-cell-group {
     margin: 0;
+
+    .van-cell {
+      padding-right: 40px !important;
+      padding-left: 40px !important;
+
+      +.zebra-row {
+        background-color: #f9f9f9;
+      }
+
+      .van-cell__label {
+        p {
+          margin: 0;
+        }
+      }
+    }
   }
+
+  /* ::v-deep(.zebra-row) {
+    background-color: #f9f9f9;
+  } */
 </style>
\ No newline at end of file