dong_k
/
zhapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<template>
	<view class="page">
		<image class="ePolicy-back" :src="detailbackimg" mode=""></image>
		<uni-NavBar headerTitle="电子保单" background="transparent" :isShared="false" :isSlot="false"></uni-NavBar>
		<view class="ePolicy-tabs ">
			<text v-for="(item,index) in tabslist" :key="index" @click="tabclick(item)"
				:class="{active:tabsvalue===item.name}">{{item.name}}</text>
		</view>
		<view class="pdf-container">
			<template v-if="pdfUrl">
				<pdf-viewer v-if="pdfLoaded" :pdfUrl="pdfUrl" :key="pdfUrl" />
				<view v-else class="loading">加载中...</view>
			</template>
			<u-empty v-else mode="car" icon="/static/image/Empty1.png" text="暂无相关保单数据">
			</u-empty>
		</view>
		<view class="footer">
			<view class="btn" @click="downloadPolicy">
				下载文件
			</view>
			<view class="btn">
				分享
			</view>
		</view>
	</view>
</template>
<script>
	var wv; //计划创建的webview
	import PdfViewer from '@/components/PdfViewer/PdfViewer.nvue'; // 引入组件
	import {
		turnBase64Image
	} from '@/plugins/utils.js';
	export default {
		components: {
			PdfViewer
		},
		data() {
			return {
				tabsvalue: '交强险',
				tabslist: [{
						name: '交强险',
						url: 'https://sxzgkj.baoxianzhanggui.com/web-api/upload/file/2025/03/21/c9396840fb34be4a2775435357bd49e8.pdf',
					},
					{
						name: '商业险',
						url: null,
					},
					{
						name: '交强险标志',
						url: null
					},
					{
						name: '驾意险',
						url: null,
					}
				],
				detailbackimg: "", //背景图
				pdfUrl: '', // 动态 PDF 地址
				pdfLoaded: false, //控制webview重新渲染
			};
		},
		computed: {},
		watch: {
			pdfUrl(newVal) {
				if (!newVal) {
					this.pdfLoaded = false;
					return;
				}
				this.pdfLoaded = false;
				// 添加延迟确保DOM更新
				this.$nextTick(() => {
					this.pdfLoaded = true;
					// APP端特殊处理
					// #ifdef APP-PLUS
					setTimeout(() => {
						const currentWebview = this.$scope.$getAppWebview();
						const wv = currentWebview.children()[0];
						if (wv) {
							wv.setStyle({
								top: '128px',
								height: '75%',
							})
							// wv.loadURL(newVal);
						}
					}, 300);
					// #endif
				});
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			var currentWebview = this.$scope
				.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({
					top: '128px',
					height: '75%',
				})
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		},
		async mounted() {
			this.detailbackimg = await turnBase64Image('/static/image/ePolicy.png');

		},
		async onLoad(options) {
			if (options.ordersNo) {
				let res = await this.$http.post('/unify/order/downloadPolicy', {
					order: {
						ordersNo: options.ordersNo
					}
				});
				if (res.code == '200') {
					// this.tabslist[0].url = res.data.jqUrl;
					// this.tabslist[1].url = res.data.syUrl;
					// this.tabslist[2].url = res.data.jqSignUrl;
					// this.tabslist[3].url = res.data.jyUrl;
				}
			}
			this.pdfUrl = this.tabslist[0].url;
		},
		methods: {
			downloadPolicy() {
				let file = this.tabslist.find(val => val.name == this.tabsvalue).url;
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '文件下载中'
				});
				let index = file.lastIndexOf("\/")
				let licensename = file.substring(index + 1, file.length)
				let dtask = plus.downloader.createDownload(file, {
					filename: "_downloads/" + 'this.name' + '-' + '-' + licensename
				}, function(d, status) {
					if (status == 200) {
						uni.hideLoading()
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d
							.filename);
						plus.runtime.openFile(d.filename); //选择软件打开文件
					} else {
						uni.hideLoading()
						//下载失败
						plus.downloader.clear(); //清除下载任务
					}
				})

				dtask.start();
				//#endif
				//#ifdef H5
				var win = window.open();
				win.document.write(
					'<body style="margin:0px;"><object data="' +
					file +
					'" type="application/pdf" width="100%" height="100%"><iframe src="' +
					file +
					'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
				);
				//#endif
			},
			tabclick(item) {
				setTimeout(() => {
					this.tabsvalue = item.name;
					this.pdfUrl = item.url;
				}, 50); // 50ms的过渡间隙
			},
			// openDeviceText() {
			// 	uni.navigateTo({
			// 		url: "/pages/quote/pdfView?pdfUrl=https://sxzgkj.baoxianzhanggui.com/web-api/upload/file/2025/03/21/c9396840fb34be4a2775435357bd49e8.pdf",
			// 	})

			// },
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	/* 背景图 */
	.ePolicy-back {
		width: 100%;
		height: 256rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.ePolicy-tabs {
		position: fixed;
		top: 180rpx;
		left: 0;
		width: 100%;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		z-index: 9999;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 30rpx;
			color: rgba(51, 51, 51, 0.7);
			text-align: center;
		}

		.active {
			font-weight: bold;
			color: #333;
			font-size: 32rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(0, #FFFFFF 0%, rgba(255, 254, 245, 0.8) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx 68rpx;
		box-sizing: border-box;
		backdrop-filter: blur(40rpx);
		z-index: 9999;
	}

	.footer .btn {
		width: 330rpx;
		height: 88rpx;
		background: #FDE935;
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
	}

	.loading {
		height: 80vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
	}

	.pdf-container {
		transition: opacity 0.3s;
	}

	.u-empty {
		width: 100%;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%);
	}
</style>