Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(页面): 新增文件预览页面

Browse Source
This commit is contained in:
ZF Sun
2026-01-12 15:28:04 +08:00
parent 8b01d8f8ec
commit ce26a9be5f
2 changed files with 198 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages.json
View File

@@ -912,16 +912,22 @@
},
//******************文件模块******************
{
"path": "files/list",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "查看文件"
}
"path": "files/list",
"style": {
// #ifdef APP-PLUS
"navigationStyle": "custom",
// #endif
"navigationBarTitleText": "查看文件"
}
]
}
},
{
"path": "file-preview/file-preview",
"style": {
"navigationBarTitleText": "文件预览"
}
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

183
pages_tool/file-preview/file-preview.vue Normal file
View File

@@ -0,0 +1,183 @@
<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>