dou_fire/pages/user/contract.vue

<template>
	<view class="content">
		<!-- 合同信息 -->
		<view class="block">
			<view class="block-flex">
				<label>合同ID</label>
				<view class="block-val">{{id}}</view>
			</view>
			<view class="block-flex">
				<label>合同数量</label>
				<view class="nowrap block-val">{{files.length}}</view>
			</view>
			<view class="block-flex">
				<label>附件数量</label>
				<view class="nowrap block-val">{{attachments.length}}</view>
			</view>
			<view class="block-flex">
				<label>创建时间</label>
				<view class="nowrap block-val">{{created_at || '-'}}</view>
			</view>
			<view class="block-flex">
				<label>更新时间</label>
				<view class="nowrap block-val">{{updated_at || '-'}}</view>
			</view>
		</view>
		<!-- 合同文件 -->
		<view class="files-title">合同文件列表</view>
		<view class="files">
			<view class="files-flex" v-for="(item, index) in files" :key="index" @click="isX5(item.fileName, item.downloadUrl)">
				<view class="files-flex-title">{{item.fileName}}</view>
				<view class="files-flex-id">{{item.fileId}}</view>
				<u-icon class="files-flex-icon" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<!-- 附件文件 -->
		<view class="files-title">附件文件列表</view>
		<view class="files">
			<view class="files-flex" v-for="(item, index) in attachments" :key="index" @click="isX5(item.fileName, item.downloadUrl)">
				<view class="files-flex-title">{{item.fileName}}</view>
				<view class="files-flex-id">{{item.fileId}}</view>
				<u-icon class="files-flex-icon" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	// const plugin = uni.requireNativePlugin('Pdf-Plugin')
	const open = uni.requireNativePlugin("Html5App-openFile");
	
	import { getFlows } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				user		: { name: '', mobile: '' },
				id			: '',
				created_at	: '',
				updated_at	: '',
				files		: [],
				attachments	: []
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
				uni.setUserCaptureScreen({
					enable: false,
				})
			// #endif
		},
		created() {
			// 获取合同数据
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			getFlows(this.$Route.query.id).then(res => {
				const { sign_flow_id, files, attachments, created_at, updated_at, user } = res
				this.user		 = user
				this.id			 = sign_flow_id
				this.created_at	 = created_at
				this.updated_at	 = updated_at
				this.files		 = files
				this.attachments = attachments
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			isX5(name, url){
				// #ifdef APP-PLUS
					if (uni.getSystemInfoSync().platform === 'android') {
						let iswxX5 = open.isLoadTbs();
						if(!iswxX5){
							uni.showLoading({
								title: '内核下载中...',
								mask : true
							})
							uni.downloadFile({
								url		: 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/tbs_core_046239_20230210162827_nolog_fs_obfs_arm64-v8a_release.tbs',
								success	: x5 => {
									open.installLocalTbs({
										tbsFilePath	: plus.io.convertLocalFileSystemURL(x5.tempFilePath),
										isdelete	: true
									}, (installTabsRes) => {
										switch(installTabsRes.code){
											case '1':
												uni.showLoading({
													title: '内核安装中...',
													mask : true
												})
												break;
											case '0':
												this.onPdf(name, url)
												break;
											case '-2':
												uni.showToast({
													title: '工具安装失败，请稍后重试, 错误码: ' + installTabsRes.msg,
												})
												break;
											default:
												uni.showToast({
													title: installTabsRes.msg,
													icon : 'none'
												})
										}
									})
								},
								fail	: x5Err => {
									uni.showToast({
										title: '工具安装失败，合同打开失败，请检查您的网络并稍后重试',
										icon : 'none'
									})
								}
							})
							return
						}
						this.onPdf(name, url)
					}
				// #endif
			},
			onPdf(name, url){
				uni.downloadFile({
					url,
					success: path => {
						open.openFile({
							filename		: plus.io.convertLocalFileSystemURL(path.tempFilePath),
							isShowBackIcon	: true
						}, res => {
							console.log(res)
						})
					}
				})
				// plugin.showPdf({
				// 	title		: name,
				// 	url  		: url,
				// 	maxScale	: '20',
				// 	waterMark	: '河北抖火法律咨询服务有限公司',
				// 	// this.user.name + ' ' + this.user.mobile,
				// })
			}
		},
		onUnload() {
			// #ifdef APP-PLUS
				uni.setUserCaptureScreen({
					enable: true
				})
			// #endif
		}
	}
</script>

<style lang="scss">
	.content{ padding: 10rpx 30rpx; }
	
	// 合同信息统计
	.block {
		background: white;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		border-radius: $radius;
		&-flex{
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 60rpx;
			label{ color: gray; }
			.block-val{ width: calc(100% - 200rpx); text-align: right; word-break:break-all; word-wrap: break-word; }
		}
	}
	
	// 合同列表
	.files{
		background: white;
		margin-bottom: 30rpx;
		padding: 30rpx;
		border-radius: $radius;
		&-flex{
			position: relative;
			padding-right: 40rpx;
			.files-flex-title{ font-weight: bold; font-size: 32rpx; }
			.files-flex-id{ font-size: 28rpx; color: gray; }
			.files-flex-icon{ position: absolute; right: 0; top: 50%; margin-top: -14rpx;}
		}
	}
	.files-title{ padding-bottom: 20rpx; color: gray; font-size: 28rpx; }
</style>