mirror of
https://github.com/qaiu/netdisk-fast-download.git
synced 2025-12-17 04:43:02 +00:00
118 lines
3.1 KiB
Vue
118 lines
3.1 KiB
Vue
<template>
|
||
<div class="show-file-page">
|
||
<div v-if="loading" style="text-align:center;margin-top:40px;">加载中...</div>
|
||
<div v-else-if="error" style="color:red;text-align:center;margin-top:40px;">{{ error }}</div>
|
||
<div v-else>
|
||
<div v-if="parseResult.code">
|
||
<div class="file-meta-info-card">
|
||
<div class="file-meta-row">
|
||
<span class="file-meta-label">下载链接：</span>
|
||
<a :href="downloadUrl" target="_blank" class="file-meta-link">点击下载</a>
|
||
</div>
|
||
<div class="file-meta-row">
|
||
<span class="file-meta-label">文件名：</span>{{ fileTypeUtils.extractFileNameAndExt(downloadUrl).name }}
|
||
</div>
|
||
<div class="file-meta-row">
|
||
<span class="file-meta-label">文件类型：</span>{{ fileTypeUtils.getFileTypeClass({ fileName: fileTypeUtils.extractFileNameAndExt(downloadUrl).name }) }}
|
||
</div>
|
||
<div class="file-meta-row" v-if="parseResult.data?.sizeStr">
|
||
<span class="file-meta-label">文件大小：</span>{{ parseResult.data.sizeStr }}
|
||
</div>
|
||
<div class="file-meta-row">
|
||
<span class="file-meta-label">在线预览：</span>
|
||
<a :href="previewBaseUrl + encodeURIComponent(downloadUrl)" target="_blank" class="preview-btn">点击在线预览</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else style="text-align:center;margin-top:40px;">未获取到有效解析结果</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
import fileTypeUtils from '@/utils/fileTypeUtils'
|
||
import { previewBaseUrl } from '@/views/Home.vue'
|
||
|
||
export default {
|
||
name: 'ShowFile',
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
error: '',
|
||
parseResult: {},
|
||
downloadUrl: '',
|
||
fileTypeUtils,
|
||
previewBaseUrl
|
||
}
|
||
},
|
||
methods: {
|
||
async fetchFile() {
|
||
const url = this.$route.query.url
|
||
if (!url) {
|
||
this.error = '缺少 url 参数'
|
||
this.loading = false
|
||
return
|
||
}
|
||
try {
|
||
const res = await axios.get('/json/parser', { params: { url } })
|
||
this.parseResult = res.data
|
||
this.downloadUrl = res.data.data?.directLink
|
||
} catch (e) {
|
||
this.error = '解析失败'
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchFile()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.show-file-page {
|
||
max-width: 600px;
|
||
margin: 40px auto;
|
||
}
|
||
.file-meta-info-card {
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
padding: 18px 24px 12px 24px;
|
||
font-size: 1.02rem;
|
||
color: #333;
|
||
}
|
||
.file-meta-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
font-size: 1.01em;
|
||
}
|
||
.file-meta-label {
|
||
min-width: 90px;
|
||
color: #888;
|
||
font-weight: 500;
|
||
margin-right: 8px;
|
||
}
|
||
.file-meta-link {
|
||
color: #409eff;
|
||
word-break: break-all;
|
||
text-decoration: underline;
|
||
}
|
||
.preview-btn {
|
||
display: inline-block;
|
||
padding: 4px 16px;
|
||
background: #409eff;
|
||
color: #fff;
|
||
border-radius: 5px;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
margin-left: 8px;
|
||
transition: background 0.2s;
|
||
}
|
||
.preview-btn:hover {
|
||
background: #1867c0;
|
||
}
|
||
</style> |