159 lines
3.3 KiB
Vue
159 lines
3.3 KiB
Vue
![]() |
<route lang="json5" type="page">
|
||
|
{
|
||
|
layout: 'default',
|
||
|
style: {
|
||
|
navigationStyle: 'custom',
|
||
|
navigationBarTitleText: '在线预览',
|
||
|
},
|
||
|
}
|
||
|
</route>
|
||
|
<template>
|
||
|
<view :class="{ 'gray': appStore.isGray == 1 }">
|
||
|
<wd-navbar left-text="返回" left-arrow
|
||
|
custom-style="padding-top: var(--status-bar-height, 0); background-image: linear-gradient(to right, #1890ff, #096dd9); color: #fff;"
|
||
|
@click-left="handleClickLeft">
|
||
|
</wd-navbar>
|
||
|
<view class="serveBox">
|
||
|
<view class="title">
|
||
|
<view class="dot"></view>
|
||
|
<wd-text text="文件预览"></wd-text>
|
||
|
</view>
|
||
|
<view class="f-col">
|
||
|
<view v-if="ifH5">
|
||
|
<!-- 在线预览 by 闵 -->
|
||
|
<wd-text color="#1890ff" lines=1 style="font-size: 40rpx;padding-left: 25rpx;padding-top: 25rpx;" decoration="underline" @click="onlinePreview(`/pages/onlinePreview/onlinePreviewH5?data=${JSON.stringify(item)}`)"
|
||
|
v-for="item,i in detailArr" :text="captureText(item)">
|
||
|
|
||
|
</wd-text>
|
||
|
</view>
|
||
|
<view v-else>
|
||
|
<!-- 在线预览 by 闵 -->
|
||
|
<wd-text color="#1890ff" lines=1 style="font-size: 40rpx;padding-left: 25rpx;padding-top: 25rpx;" decoration="underline" @click="onlinePreview(`/pages/onlinePreview/onlinePreview?data=${JSON.stringify(item)}`)"
|
||
|
v-for="item,i in detailArr" :text="captureText(item)">
|
||
|
</wd-text>
|
||
|
</view>
|
||
|
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import {
|
||
|
useAppStore
|
||
|
} from '@/store'
|
||
|
import {
|
||
|
ref
|
||
|
} from 'vue'
|
||
|
import {
|
||
|
onLoad,
|
||
|
onShow
|
||
|
} from '@dcloudio/uni-app';
|
||
|
const appStore = useAppStore();
|
||
|
const detail = ref({})
|
||
|
const detailArr = ref([])
|
||
|
//判断是否h5 by 闵
|
||
|
var ifH5 = false;
|
||
|
|
||
|
const onlinePreview = (url)=>{ //在线预览文件 by 闵
|
||
|
uni.navigateTo({
|
||
|
url:url
|
||
|
})
|
||
|
}
|
||
|
|
||
|
|
||
|
const handleClickLeft = () => {
|
||
|
uni.navigateBack()
|
||
|
}
|
||
|
|
||
|
const captureText = (text)=>{ //截取字符串显示
|
||
|
const match = text.match(/\/([^_]+)(?=_)/);
|
||
|
console.log(match)
|
||
|
return match ? match[1] : '';
|
||
|
}
|
||
|
|
||
|
onLoad((options) => {
|
||
|
detail.value = options.data
|
||
|
detailArr.value = options.data.split(",");
|
||
|
//#ifdef H5 || MP-WEIXIN
|
||
|
ifH5 = true;
|
||
|
//#endif
|
||
|
//判断是否只有一个文件
|
||
|
if(detailArr.value&&detailArr.value.length==1){
|
||
|
let url = '/pages/onlinePreview/onlinePreview';
|
||
|
if(ifH5) url = '/pages/onlinePreview/onlinePreviewH5'
|
||
|
onlinePreview(url+`?data=${JSON.stringify(options.data)}`);
|
||
|
}
|
||
|
})
|
||
|
|
||
|
onShow (()=>{
|
||
|
// if(detailArr.value&&detailArr.value.length==1){
|
||
|
// uni.navigateBack()
|
||
|
// }
|
||
|
})
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
/* page{
|
||
|
background-color: #f8f8f8;
|
||
|
} */
|
||
|
</style>
|
||
|
<style lang="scss" scoped>
|
||
|
.content {
|
||
|
padding: 0 30rpx;
|
||
|
}
|
||
|
|
||
|
.title_box {
|
||
|
|
||
|
.title {
|
||
|
font-size: 32rpx;
|
||
|
color: #333333;
|
||
|
padding: 30rpx 0 20rpx 0;
|
||
|
}
|
||
|
|
||
|
.time {
|
||
|
font-size: 24rpx;
|
||
|
color: #888888;
|
||
|
padding-bottom: 30rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.document {
|
||
|
text {
|
||
|
font-size: 28rpx;
|
||
|
color: #333333;
|
||
|
white-space: nowrap;
|
||
|
}
|
||
|
|
||
|
view {
|
||
|
font-size: 28rpx;
|
||
|
color: #5A79F8;
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.serveBox {
|
||
|
margin-bottom: 32upx;
|
||
|
background-color: #fff;
|
||
|
.title {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
padding-left: 30upx;
|
||
|
height: 52px;
|
||
|
|
||
|
.dot {
|
||
|
width: 14upx;
|
||
|
height: 14upx;
|
||
|
background-color: #0081ff;
|
||
|
border-radius: 100%;
|
||
|
margin-right: 20upx;
|
||
|
}
|
||
|
|
||
|
.wd-text {
|
||
|
color: #666;
|
||
|
font-size: 15px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|