提交 27aec413 作者: 方治民

feat(page): 新增通用 pdf 预览页面

上级 454de184
......@@ -83,9 +83,11 @@
"dayjs": "^1.11.6",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nanoid": "^4.0.0",
"pinia": "^2.0.23",
"qs": "~6.9.7",
"stompjs": "^2.3.3",
"urijs": "^1.19.11",
"vue": "3.2.41",
"vue-i18n": "^9.2.2",
"vue-types": "^4.2.1"
......@@ -103,6 +105,7 @@
"@types/prettier": "^2.7.1",
"@types/qs": "^6.9.7",
"@types/stompjs": "^2.3.5",
"@types/urijs": "^1.19.19",
"@typescript-eslint/eslint-plugin": "^5.42.1",
"@typescript-eslint/parser": "^5.42.1",
"commitizen": "^4.2.5",
......
......@@ -26,6 +26,7 @@ specifiers:
'@types/prettier': ^2.7.1
'@types/qs': ^6.9.7
'@types/stompjs': ^2.3.5
'@types/urijs': ^1.19.19
'@typescript-eslint/eslint-plugin': ^5.42.1
'@typescript-eslint/parser': ^5.42.1
'@vue/runtime-core': 3.2.41
......@@ -48,6 +49,7 @@ specifiers:
lint-staged: ^13.0.3
lodash-es: ^4.17.21
mockjs: ^1.1.0
nanoid: ^4.0.0
npm-run-all: ^4.1.5
picocolors: ^1.0.0
pinia: ^2.0.23
......@@ -72,6 +74,7 @@ specifiers:
typescript: ^4.8.4
unplugin-auto-import: ^0.11.4
unplugin-vue-components: ^0.22.9
urijs: ^1.19.11
vite: 3.2.2
vue: 3.2.41
vue-eslint-parser: ^9.1.0
......@@ -98,9 +101,11 @@ dependencies:
dayjs: 1.11.6
lodash-es: 4.17.21
mockjs: 1.1.0
nanoid: 4.0.0
pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
qs: 6.9.7
stompjs: 2.3.3
urijs: 1.19.11
vue: 3.2.41
vue-i18n: 9.2.2_vue@3.2.41
vue-types: 4.2.1_vue@3.2.41
......@@ -118,6 +123,7 @@ devDependencies:
'@types/prettier': 2.7.1
'@types/qs': 6.9.7
'@types/stompjs': 2.3.5
'@types/urijs': 1.19.19
'@typescript-eslint/eslint-plugin': 5.42.1_2udltptbznfmezdozpdoa2aemq
'@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy
commitizen: 4.2.5
......@@ -1418,6 +1424,10 @@ packages:
'@types/node': 18.11.9
dev: true
/@types/urijs/1.19.19:
resolution: {integrity: sha512-FDJNkyhmKLw7uEvTxx5tSXfPeQpO0iy73Ry+PmYZJvQy0QIWX8a7kJ4kLWRf+EbTPJEPDSgPXHaM7pzr5lmvCg==}
dev: true
/@types/web-bluetooth/0.0.16:
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
......@@ -4722,6 +4732,12 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
/nanoid/4.0.0:
resolution: {integrity: sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==}
engines: {node: ^14 || ^16 || >=18}
hasBin: true
dev: false
/natural-compare-lite/1.4.0:
resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
dev: true
......@@ -6498,6 +6514,10 @@ packages:
punycode: 2.1.1
dev: true
/urijs/1.19.11:
resolution: {integrity: sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==}
dev: false
/user-home/2.0.0:
resolution: {integrity: sha512-KMWqdlOcjCYdtIJpicDSFBQ8nFwS2i9sslAd6f4+CBGcU4gist2REnr2fxj2YocvJFxSF3ZOHLYLVZnUxv4BZQ==}
engines: {node: '>=0.10.0'}
......
<template>
<view class="empty" :style="[{ background: bgColor }]">
<!-- 暂无数据/空数据 -->
<image src="../../static/images/empty.png" />
<!-- 提示内容 -->
<view class="empty-tips" :style="[{ color: tipsColor }]">{{ tips }}</view>
</view>
</template>
<script>
export default {
props: {
tips: {
type: String,
default: '',
},
tipsColor: {
type: String,
default: '#9C9C9C',
},
bgColor: {
type: String,
default: 'transparent',
},
},
}
</script>
<style>
.empty {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.empty image {
display: flex;
width: 500rpx;
height: 500rpx;
}
.empty .empty-tips {
display: flex;
font-size: 30rpx;
color: #999999;
}
</style>
......@@ -8,6 +8,15 @@
}
},
// === PDF 文件预览 ===
{
"path": "pages/common/pdf/pdf-viewer",
"style": {
"titleNView": true,
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
// === 空页面(开发中...) ===
{
"path": "pages/common/coding/coding",
......
<script lang="ts" setup>
import URI from 'urijs'
import { getExtranetUrl } from '/@/utils/proxy'
const link = ref<string>('')
const name = ref<string>('')
onLoad(({ uri }) => {
link.value = getExtranetUrl(uri)
name.value = URI(uri).filename()
console.log(uri, link.value, name.value)
// 设置标题栏为文件名
uni.setNavigationBarTitle({
title: decodeURI(name.value),
})
})
const images = computed(() => {
const size = link.value.replace(/^.*\.P(\d+)\..*$/, '$1')
if (size === link.value) {
return []
}
return Array(Number(size))
.fill(0)
.map((_, index) => ({
src: `${link.value}.${index + 1}.jpg`,
}))
})
const preview = (index: number) => {
uni.previewImage({
urls: images.value.map((item: { src: string }) => item.src),
current: index,
})
}
</script>
<template>
<view class="wrap">
<template v-if="images.length > 0">
<fui-lazyload
class="image"
v-for="(item, index) in images"
:key="item.src"
:src="item.src"
width="750"
:radius="0"
@tap="preview(index)"
/>
</template>
<!-- empty -->
<view class="empty-wrap" v-else>
<Empty tips="资源不见了~" />
</view>
</view>
</template>
<style lang="less" scoped>
.image {
height: auto;
+ .image {
margin-top: 4rpx;
}
}
.empty-wrap {
height: calc(100vh - 44px - var(--status-bar-height) - env(safe-area-inset-top));
}
</style>
......@@ -7,6 +7,7 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
Empty: typeof import('./../src/components/Empty/index.vue')['default']
FDragItem: typeof import('./../src/components/firstui/fui-drag/f-drag-item.vue')['default']
FIndexListItem: typeof import('./../src/components/firstui/fui-index-list/f-index-list-item.vue')['default']
FuiActionsheet: typeof import('./../src/components/firstui/fui-actionsheet/fui-actionsheet.vue')['default']
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论