gypsy-crm-frontend-vu/components/cwg-file.vue

<template>
    <view class="file-preview">
        <!-- PDF 预览链接 -->
        <view v-if="isPdfFile" class="pdf-link" @click="handlePreviewPdf">
            <uni-icons type="document" size="20" color="#ff0000"></uni-icons>
            <text class="pdf-text">{{ displayFileName }}</text>
        </view>

        <!-- 图片预览 -->
        <view v-else-if="isImageFile" class="image-preview">
            <image :src="fullPath" mode="aspectFill" class="preview-image" @click="handlePreviewImage" />
        </view>

        <!-- 其他文件类型 -->
        <view v-else class="file-info">
            <uni-icons type="folder" size="20" color="#007aff"></uni-icons>
            <text class="file-name">{{ displayFileName }}</text>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'
import config from '@/config';
const props = defineProps({
    // 文件路径
    path: {
        type: String,
        default: ''
    },
    // 更新URL前缀
    updateUrl: {
        type: String,
        default: config.Host80
    },
    // 文件名称（可选）
    fileName: {
        type: String,
        default: ''
    }
})

// 完整的文件路径
const fullPath = computed(() => {
    console.log(props.updateUrl, props.path);
    
    if (!props.path) return ''
    return props.updateUrl + props.path
})

// 判断是否为PDF文件
const isPdfFile = computed(() => {
    if (!props.path) return false
    const ext = props.path.substr(-3).toLowerCase()
    return ext === 'pdf'
})

// 判断是否为图片文件
const isImageFile = computed(() => {
    if (!props.path) return false
    const ext = props.path.substr(-3).toLowerCase()
    return ['jpg', 'png', 'gif', 'jpeg', 'bmp', 'webp'].includes(ext) ||
        props.path.substr(-4).toLowerCase() === 'jpeg'
})

// 获取文件名
const displayFileName = computed(() => {
    if (props.fileName) return props.fileName
    if (!props.path) return '--'

    // 提取文件名
    const parts = props.path.split('/')
    return parts[parts.length - 1] || props.path
})

// 预览PDF
const handlePreviewPdf = () => {
    if (!fullPath.value) return

    // #ifdef H5
    window.open(fullPath.value, '_blank')
    // #endif

    // #ifdef APP-PLUS
    plus.runtime.openURL(fullPath.value)
    // #endif

    // #ifdef MP-WEIXIN
    uni.downloadFile({
        url: fullPath.value,
        success: (res) => {
            if (res.statusCode === 200) {
                uni.openDocument({
                    filePath: res.tempFilePath,
                    success: () => {
                        console.log('打开文档成功')
                    }
                })
            }
        }
    })
    // #endif
}

// 预览图片
const handlePreviewImage = () => {
    if (!fullPath.value) return

    uni.previewImage({
        urls: [fullPath.value],
        current: 0
    })
}
</script>

<style scoped lang="scss">
.pdf-link {
    display: flex;
    align-items: center;
    gap: px2rpx(8);
    padding: px2rpx(4) px2rpx(8);
    background-color: #fff1f0;
    border-radius: px2rpx(4);
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        background-color: #ffe7e6;
    }

    .pdf-text {
        color: #ff0000;
        font-size: px2rpx(14);
        max-width: px2rpx(200);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.image-preview {
    .preview-image {
        width: px2rpx(60);
        height: px2rpx(60);
        border-radius: px2rpx(4);
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.3s;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.file-info {
    display: flex;
    align-items: center;

    .file-name {
        color: #666;
        font-size: px2rpx(14);
        max-width: px2rpx(200);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>