<template>
	<view>
		<view v-if="downLoadOk==false" class="loading">正在加载请稍后...</view>
		<view v-else class="tishi">
			<view class="tishi2">
				<view>文档打开后</view>
				<view>点击右上角按钮，然后选择“保存到手机”即可下载</view>
			</view>
			<view class="ok" @click="openfile()">
				我知道了,打开文档
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	let downLoadOk = ref(false);
	onLoad((e) => {
		console.log(e)
		tiao(e)
	})
	let filePath = ref('');
	const tiao = (e) => {
		console.log("开始下载")
		uni.downloadFile({
			url: e.url,
			success: function(res) {
				downLoadOk.value = true
				filePath.value = res.tempFilePath;

			},
		});

	}
	const openfile = () => {
		uni.openDocument({
			filePath: filePath.value,
			showMenu: true,
			fileType:"pdf",
			success: function(res) {
				console.log("打开文档成功");
				wx.navigateBack({
					delta: 1
				})
			},
		});
	}
</script>

<style scoped>
	.loading {
		margin-top: 200rpx;
		width: 100%;
		text-align: center;
	}

	.tishi {
		width: 100%;
		height: calc(100vh - 200rpx);
		background-color: black;
		opacity: 0.5;
		color: #fff;
		padding-top: 200rpx;
	}

	.tishi2 {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.ok {
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		border: 1px solid #fff;
		margin-top: 70%;
		padding: 20rpx;
		border-radius: 20rpx;
	}
</style>