subject_gxj/xj_project_app/pages/oversee/detail/index.vue

<template>
	<view class="container">
		<page-title>问题查看</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<view class="card-item" :class="index === 0?'first-card-item':''" v-for="(item,index) in companyInfoList"
					:key="index">
					<view class="card-item-name">{{item.description}}</view>

					<view class="card-item-content" @click="showFile(item.description,item.fileAddre)">{{item.value ?? "--"}}
					</view>
				</view>
			</view>

			<view class="card only-card">
				<view class="card-item" :class="index === 0?'first-card-item':''" v-for="(item,index) in projectInfoList"
					:key="index">
					<view class="card-item-name">{{item.description}}</view>

					<view class="card-item-content">{{item.value ?? "--"}}</view>
				</view>
			</view>
		</view>

		<u-overlay :show="isDownload">
			<view class="download-box">
				<view class="loading-box">
					<view class="loading-icon">
						<u-loading-icon v-if="downloadPrecent !== '100'" size="40"></u-loading-icon>
						<u-icon v-else name="checkmark" size="40"></u-icon>
					</view>

					<view class="loading-text">附件下载中</view>

					<view class="loading-progress">
						<u-line-progress :percentage="downloadPrecent" activeColor="#1869F6"></u-line-progress>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

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

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

	import {
		getOverseeDetail,
	} from "@/api/work/oversee.js"

	function backToBefore() {
		uni.navigateBack({})
	};

	let companyInfoList = ref([{
		description: '问题类型',
		key: "kind_typeid",
		value: ''
	}, {
		description: '问题来源',
		key: "kind_sourceid",
		value: ''
	}, {
		description: '要求完成时间',
		key: "kind_sourceid",
		value: ''
	}, {
		description: '问题描述',
		key: "title",
		value: ''
	}, {
		description: '附件',
		key: "fileName",
		value: '',
		isFile: true,
	}])

	let projectInfoList = ref([{
		description: '督察单位',
		key: "unit_id",
		value: ''
	}, {
		description: '责任领导',
		key: "nameLead",
		value: '',
	}, {
		description: '联系人',
		key: "nameLxr",
		value: '',
	}, {
		description: '联系电话',
		key: "tel",
		value: '',
		type: 'number'
	}])

	function filterData(obj) {
		for (let i in companyInfoList.value) {
			companyInfoList.value[i].value = obj[companyInfoList.value[i].key] || "--"
		}

		for (let i in projectInfoList.value) {
			projectInfoList.value[i].value = obj[projectInfoList.value[i].key] || "--"
		}

		fileAddre = obj.fileAddre;
	}

	let isDownload = ref(false); // 是否正在下载
	let downloadPrecent = ref(0)
	let fileAddre = null; // 文件下载地址
	// 文件预览
	function showFile(description) {
		if (description !== "附件" || !fileAddre) return;
		// uni.navigateTo({
		// 	url: `/pages/projectInfo/media/index?type=pdf&filePath=${fileAddre}`
		// })
		isDownload.value = true;
		let downloadTask = uni.downloadFile({
			url: fileAddre,
			success: function(res) {
				console.log(res)
				isDownload.value = false;
				let filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);

				setTimeout(
					() =>
					uni.openDocument({
						filePath: filepathss,
						showMenu: false,
						success: function() {
							console.log("打开文档成功");
						},
						fail: function() {
							uni.showToast({
								title: '暂不支持此类型',
								duration: 2000,
								icon: "none",
							});
						}
					}),
					1000
				);
			},
			fail: function(res) {
				isDownload.value = false;
			}
		});

		downloadTask.onProgressUpdate(res => {
			downloadPrecent.value = res.progress;
		})
	}

	onLoad((option) => {
		getOverseeDetail({
			id: option.id
		}).then(res => {
			filterData(res.data.problemInfo)
		})
	})
</script>

<style lang="scss" scoped>
	.download-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.loading-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 360rpx;
			height: 360rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 40rpx;
		}

		.loading-icon {
			flex: 4;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.loading-text {
			flex: 1;
			display: flex;
			align-items: flex-end;
			text-align: center;
		}

		.loading-progress {
			flex: 1;
			display: flex;
			align-items: flex-end;
		}
	}
</style>