|
|
@@ -0,0 +1,275 @@
|
|
|
+<template>
|
|
|
+ <view :class="['container',{'noPpopup':!props.showCloseBtn}]">
|
|
|
+ <view class="file_content" @click="open">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cjx-previewOffice-container" :style="{ height: pagesHeight }">
|
|
|
+ <template v-if="props.showHeader">
|
|
|
+ <view class="cjx-previewOffice-header" v-if="!$slots.header">
|
|
|
+ <view class="icon" ></view>
|
|
|
+ <view class="name">
|
|
|
+ {{ name }}
|
|
|
+ </view>
|
|
|
+ <uni-icons class="icon" @click="close" type="close" size="40" style="color: #999999;font-size: 40rpx;"></uni-icons>
|
|
|
+ <!-- <icon class="icon" @click="close" type="cancel"></icon> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cjx-previewOffice-header" v-else>
|
|
|
+ <slot name="header"></slot>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <view class="webview">
|
|
|
+ <!-- #ifdef H5 -->
|
|
|
+ <iframe
|
|
|
+ class="cjx-previewOffice-iframe"
|
|
|
+ :webview-styles="webviewStyles"
|
|
|
+ :src="`${typeMapSrc[type]}${encodeURIComponent(props.value)}&safeBottom=${safeBottom}`"
|
|
|
+ />
|
|
|
+ <!-- #endif -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="cjx-previewOffice-mask"
|
|
|
+ :style="{
|
|
|
+ zIndex: pagesHeight !== '0' ? zIndex : '-1',
|
|
|
+ opacity: pagesHeight !== '0' ? 1 : 0,
|
|
|
+ }"
|
|
|
+ @click="closeOnClickModalChange"
|
|
|
+ >
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import type { CSSProperties } from 'vue'
|
|
|
+import { previewOfficeProps, FileType } from './interface'
|
|
|
+// <!-- #ifdef H5 -->
|
|
|
+// <!-- #endif -->
|
|
|
+const props = defineProps(previewOfficeProps())
|
|
|
+
|
|
|
+const showWebviewArr: FileType[] = ['excel', 'pdf', 'word', 'txt']
|
|
|
+
|
|
|
+
|
|
|
+ const webviewStyles = ref<CSSProperties>({
|
|
|
+ zIndex: '9999',
|
|
|
+ })
|
|
|
+
|
|
|
+const typeMapSrc = {
|
|
|
+ word: 'uni_modules/cjx-previewOffice/static/hybrid/word.html?file=',
|
|
|
+ pdf: 'uni_modules/cjx-previewOffice/static/hybrid/pdf/web/viewer.html?file=',
|
|
|
+ excel: 'uni_modules/cjx-previewOffice/static/hybrid/excel.html?file=',
|
|
|
+ txt: 'uni_modules/cjx-previewOffice/static/hybrid/txt.html?file=',
|
|
|
+}
|
|
|
+
|
|
|
+const pagesHeight = ref<string>('0')
|
|
|
+
|
|
|
+
|
|
|
+const safeBottom = ref<number>(0)
|
|
|
+let webview: any = null
|
|
|
+
|
|
|
+
|
|
|
+const open = () => {
|
|
|
+ if (pagesHeight.value === '85vh') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // #ifdef H5
|
|
|
+ setTimeout(() => {
|
|
|
+ pagesHeight.value = '85vh'
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ // console.log(11, uni.getSystemInfoSync())
|
|
|
+ const { statusBarHeight, windowHeight, screenHeight } = uni.getSystemInfoSync()
|
|
|
+ pagesHeight.value = Number(windowHeight) - Number(statusBarHeight) + 'px'
|
|
|
+ let headerFootHeight = 44;
|
|
|
+ if(!props.showCloseBtn){
|
|
|
+ headerFootHeight = rpxToPx(220) + rpxToPx(170)
|
|
|
+ }
|
|
|
+
|
|
|
+ webview = plus.webview.create(
|
|
|
+ `${typeMapSrc[props.type]}${encodeURIComponent(props.value)}&safeBottom=${safeBottom.value}`,
|
|
|
+ 'id',
|
|
|
+ {
|
|
|
+ bottom: !props.showCloseBtn?rpxToPx(170):0,
|
|
|
+ height: windowHeight - statusBarHeight - headerFootHeight,
|
|
|
+ },
|
|
|
+
|
|
|
+ );
|
|
|
+ const pages = getCurrentPages();
|
|
|
+ const page: any = pages[pages.length - 1];
|
|
|
+ const currentWebview = page.$getAppWebview();
|
|
|
+
|
|
|
+ currentWebview.append(webview);
|
|
|
+ webview.show('id', 'slide-in-bottom')
|
|
|
+ // #endif
|
|
|
+}
|
|
|
+const rpxToPx = (rpx)=> {
|
|
|
+ const sys = uni.getSystemInfoSync()
|
|
|
+ return rpx * sys.screenWidth / 750
|
|
|
+}
|
|
|
+const close = () => {
|
|
|
+
|
|
|
+ pagesHeight.value = '0'
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ webview.setStyle({
|
|
|
+ height: 0,
|
|
|
+ })
|
|
|
+ webview.close('slide-in-bottom')
|
|
|
+ // #endif
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const closeOnClickModalChange = () => {
|
|
|
+ if (props.closeOnClickModal) {
|
|
|
+ pagesHeight.value = '0'
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ webview.setStyle({
|
|
|
+ height: 0,
|
|
|
+ })
|
|
|
+ webview.close('slide-in-bottom')
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ open,
|
|
|
+ close
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ safeBottom.value = 0
|
|
|
+ // #ifdef H5
|
|
|
+
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res.safeArea); // 输出安全区域信息
|
|
|
+ safeBottom.value = res.screenHeight - res.safeArea.bottom; // 计算底部安全区域高度
|
|
|
+ console.log('底部安全区域高度:', safeBottom.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // if (props.type === 'image') {
|
|
|
+ // uni.previewImage({
|
|
|
+ // urls: ['https://img2.baidu.com/it/u=412966049,488862975&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800'],
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" >
|
|
|
+ iframe {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 44px !important;
|
|
|
+ // height: calc(100vh - 44px) !important;
|
|
|
+ // position: absolute;
|
|
|
+ z-index: 9999 !important;
|
|
|
+ border:0;
|
|
|
+ top: calc(15vh + 44px) !important;
|
|
|
+ // height: calc(100% - 70rpx) !important;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ &.noPpopup{
|
|
|
+ height: 100%;
|
|
|
+ .file_content{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .cjx-previewOffice-container{
|
|
|
+ position: static;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ .webview{
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ .cjx-previewOffice-iframe{
|
|
|
+ top:0 !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ .cjx-previewOffice-mask{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .file_content{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .cjx-previewOffice-iframe {
|
|
|
+ // z-index: 9999 !important;
|
|
|
+ width: 100vw;
|
|
|
+ top: 44px !important;
|
|
|
+ height: calc(100% - 12px) !important;
|
|
|
+ }
|
|
|
+ .cjx-previewOffice-container {
|
|
|
+ position: fixed;
|
|
|
+ left: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 998;
|
|
|
+ // height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ bottom: 0;
|
|
|
+ transition: all ease 0.2s;
|
|
|
+ background-color: #fff;
|
|
|
+ // position: relative;
|
|
|
+ .cjx-previewOffice-header {
|
|
|
+ background-color: #fff;
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0;
|
|
|
+ height: 44px;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .name {
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 40rpx;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .webview {
|
|
|
+ // height: calc(100vh - 44px) !important;
|
|
|
+ height: calc(100% - 70rpx) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cjx-previewOffice-mask {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 990;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all ease 0.2s;
|
|
|
+ }
|
|
|
+</style>
|
