184 lines
5.1 KiB
Vue
184 lines
5.1 KiB
Vue
<template>
|
|
<view class="file-preview-container" :style="themeColor">
|
|
<view class="header">
|
|
<view class="back-btn" @click="goBack">
|
|
<text class="iconfont icon-back"></text>
|
|
</view>
|
|
<view class="header-title">{{ fileName }}</view>
|
|
<view class="placeholder"></view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<!-- PDF 文件预览 -->
|
|
<view v-if="fileType === 'pdf'" class="file-viewer">
|
|
<web-view v-if="fileUrl" :src="fileUrl"></web-view>
|
|
<view v-else class="error-message">文件地址不存在</view>
|
|
</view>
|
|
|
|
<!-- Word 文件预览 -->
|
|
<view v-else-if="fileType === 'word'" class="file-viewer">
|
|
<web-view v-if="fileUrl" :src="fileUrl"></web-view>
|
|
<view v-else class="error-message">文件地址不存在</view>
|
|
</view>
|
|
|
|
<!-- 视频文件预览 -->
|
|
<view v-else-if="fileType === 'video'" class="video-viewer">
|
|
<video v-if="fileUrl" :src="fileUrl" controls autoplay class="video-player"></video>
|
|
<view v-else class="error-message">视频地址不存在</view>
|
|
</view>
|
|
|
|
<!-- 其他文件类型 -->
|
|
<view v-else class="file-viewer">
|
|
<view class="error-message">不支持的文件类型</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
fileName: '',
|
|
fileUrl: '',
|
|
fileType: ''
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
// 解析传递的参数
|
|
if (option.fileName) {
|
|
this.fileName = decodeURIComponent(option.fileName);
|
|
}
|
|
|
|
if (option.fileUrl) {
|
|
this.fileUrl = decodeURIComponent(option.fileUrl);
|
|
}
|
|
|
|
if (option.fileType) {
|
|
this.fileType = decodeURIComponent(option.fileType);
|
|
} else {
|
|
// 根据文件名后缀推断文件类型
|
|
this.inferFileType();
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 根据文件名后缀推断文件类型
|
|
*/
|
|
inferFileType() {
|
|
if (this.fileName) {
|
|
const ext = this.fileName.split('.').pop().toLowerCase();
|
|
if (['pdf'].includes(ext)) {
|
|
this.fileType = 'pdf';
|
|
} else if (['doc', 'docx'].includes(ext)) {
|
|
this.fileType = 'word';
|
|
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
|
|
this.fileType = 'video';
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 返回上一页
|
|
*/
|
|
goBack() {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.file-preview-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100rpx;
|
|
padding: 0 30rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.back-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon-back {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.header-title {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.placeholder {
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 20rpx;
|
|
|
|
.file-viewer {
|
|
width: 100%;
|
|
min-height: 80vh;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.error-message {
|
|
width: 100%;
|
|
height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.video-viewer {
|
|
width: 100%;
|
|
min-height: 80vh;
|
|
background-color: #000;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.video-player {
|
|
width: 100%;
|
|
height: 80vh;
|
|
}
|
|
|
|
.error-message {
|
|
width: 100%;
|
|
height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|