hookehuyr

feat: 产品详情页附件列表添加文件类型显示

- 在文件大小前面显示文件类型(如:PDF · 2.5MB)
- 使用 getDocumentLabel 工具函数自动识别文件类型
- 支持常见文件格式:PDF、Word、Excel、PPT、图片、视频等
......@@ -12,6 +12,10 @@
- 在"相关附件"标题下方添加灰色提示文字
- 提示用户"如无法下载,可在预览页点击右上角「...」转发至其他设备"
- 优化附件下载的用户体验
- 附件列表添加文件类型显示
- 在文件大小前面显示文件类型(如:PDF · 2.5MB)
- 使用 `getDocumentLabel` 工具函数自动识别文件类型
- 支持常见文件格式:PDF、Word、Excel、PPT、图片、视频等
---
......
......@@ -69,7 +69,7 @@
<div v-if="productDetail.documents && productDetail.documents.length" class="px-[32rpx] mt-[32rpx]">
<div class="bg-white rounded-[32rpx] p-[40rpx]">
<h2 class="text-[#1F2937] text-[32rpx] font-bold mb-[16rpx]">相关附件</h2>
<text class="text-[#9CA3AF] text-[24rpx] mb-[24rpx] block">如无法下载,可在预览页点击右上角「...」转发至其他设备</text>
<text class="text-[#9CA3AF] text-[24rpx] mb-[24rpx] block">如下载,可在预览页点击右上角「...」转发至其他设备</text>
<div class="flex flex-col gap-[24rpx]">
<div
v-for="(doc, index) in productDetail.documents"
......@@ -85,7 +85,7 @@
/>
<div class="flex flex-col">
<span class="text-[#1F2937] text-[28rpx] font-medium mb-[4rpx] line-clamp-1">{{ doc.file_name }}</span>
<span class="text-[#9CA3AF] text-[24rpx]">{{ doc.file_size_formatted }}</span>
<span class="text-[#9CA3AF] text-[24rpx]">{{ getDocumentLabel(doc.file_name) }} · {{ doc.file_size_formatted }}</span>
</div>
</div>
<IconFont name="eye" size="20" color="#2563EB" @tap="viewDocument(doc)" />
......@@ -108,7 +108,7 @@ import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
import { useFileOperation } from '@/composables/useFileOperation'
import Taro, { useLoad } from '@tarojs/taro'
import { getDocumentIcon } from '@/utils/documentIcons'
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'
import { detailAPI } from '@/api/get_product'
const { viewFile } = useFileOperation()
......