workApp/pages/notice/mine/preview.vue

<template>
	<view class="page_preview">
		<common-header :title="fileName" @back="goBack"></common-header>
		
		<web-view 
			v-if="previewUrl" 
			:src="previewUrl" 
			class="preview_webview"
			@error="handleWebViewError"
			@load="handleWebViewLoad"
		></web-view>
		
		<view v-if="showRetry" class="retry_container">
			<text class="retry_text">预览加载失败，正在尝试其他服务...</text>
		</view>
		
		<view v-if="showLoading" class="loading_container">
			<text class="loading_text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import CommonHeader from '@/components/common-header.vue';

const fileUrl = ref('');
const fileName = ref('文件预览');
const currentServiceIndex = ref(0);
const showRetry = ref(false);
const showLoading = ref(true);

const isPdf = computed(() => {
	const ext = fileUrl.value.split('.').pop()?.toLowerCase();
	return ext === 'pdf';
});

const previewServices = [
	(fileUrl) => `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`,
	(fileUrl) => `http://api.idocv.com/view/url?url=${encodeURIComponent(fileUrl)}&name=${encodeURIComponent(fileName.value)}`,
	(fileUrl) => fileUrl
];

const previewUrl = computed(() => {
	const ext = fileUrl.value.split('.').pop()?.toLowerCase();
	if (!ext) return fileUrl.value;
	
	if (ext === 'pdf') {
		return `/static/pdfh5/index.html?url=${encodeURIComponent(fileUrl.value)}`;
	}
	
	if (['docx', 'doc', 'xlsx', 'xls', 'ppt', 'pptx', 'txt', 'csv', 'wps', 'dps', 'et'].includes(ext)) {
		return previewServices[currentServiceIndex.value](fileUrl.value);
	}
	
	return fileUrl.value;
});

const handleWebViewError = () => {
	if (!isPdf.value && currentServiceIndex.value < previewServices.length - 1) {
		showRetry.value = true;
		currentServiceIndex.value++;
		setTimeout(() => {
			showRetry.value = false;
		}, 2000);
	} else {
		showLoading.value = false;
		uni.showToast({
			title: '预览失败，请重试',
			icon: 'none'
		});
	}
};

const handleWebViewLoad = () => {
	showLoading.value = false;
	showRetry.value = false;
};

onLoad((options) => {
	if (options && options.url) {
		fileUrl.value = decodeURIComponent(options.url);
	}
	if (options && options.name) {
		fileName.value = decodeURIComponent(options.name);
	}
});

onMounted(() => {
	if (!previewUrl.value) {
		showLoading.value = false;
	}
});

const goBack = () => {
	uni.navigateBack();
};
</script>

<style lang="scss">
.page_preview {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
}

.preview_webview {
	flex: 1;
	margin-top: 96rpx;
}

.retry_container {
	position: fixed;
	top: 120rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	padding: 20rpx 40rpx;
	border-radius: 12rpx;
	z-index: 100;
	
	.retry_text {
		font-size: 26rpx;
		color: #FFFFFF;
	}
}

.loading_container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.5);
	padding: 40rpx 60rpx;
	border-radius: 12rpx;
	z-index: 1000;
	
	.loading_text {
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
</style>