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

<script setup>
	import {
		ref
	} from "vue";

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

	import {
		getIntermediaryDetail,
	} from "@/api/work/intermediaryService.js";

	// 主要信息
	let pageData = ref({});
	const getDetail = id => {
		getIntermediaryDetail({
			id
		}).then(res => {
			pageData.value = res.data;
			conbineFileList(res.data.listFile)
		})
	}

	// 附件信息
	const conbineFileList = list => {
		// 照片附件
		listPhoto.value = list.filter(item => ['101', '102', '103', '104', '105'].includes(item.fileType));
		listPhotoPreview = listPhoto.value.map(item => item.fileId);

		// 视频附件
		listVideo.value = list.filter(item => ['202', '203'].includes(item.fileType));

		// 其他附件
		let exceptPhotoList = list.filter(item => !listPhoto.value.includes(item));
		uploadListFile.value = exceptPhotoList.filter(item => !listVideo.value.includes(item));
	}

	// 图片附件
	let listPhoto = ref([]);
	let listPhotoPreview = [];
	const showImage = index => {
		uni.previewImage({
			current: index,
			urls: listPhotoPreview,
			longPressActions: true,
		});
	}

	// 视频附件
	let listVideo = ref([]);

	//列表--文件
	let uploadListFile = ref([]);
	const showFile = url => {
		let downloadTask = uni.downloadFile({
			url,
			success: function(res) {
				isDownload.value = false;
				let filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);
				setTimeout(
					() =>
					uni.openDocument({
						filePath: filepathss,
						showMenu: false,
						success: function() {},
						fail: function(failRes) {
							uni.showToast({
								title: '暂不支持此类型',
								duration: 2000,
								icon: "none",
							});
						}
					}),
					1000
				);
			},
			fail: function(failRes) {
				isDownload.value = false;
			}
		});

	}

	let isDownload = ref(false); // 是否正在下载
	let downloadPrecent = ref(0); //下载进度

	onLoad(options => {
		getDetail(options.id);
	})
</script>

<template>
	<view class="container">
		<page-title>详情</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">机构类型</view>
					<view class="card-item-content">{{pageData.typeName ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">单位名称</view>
					<view class="card-item-content">{{pageData.title ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">统一社会信用代码</view>
					<view class="card-item-content">{{pageData.groupCode ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">单位地址</view>
					<view class="card-item-content">{{pageData.addr?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">法人姓名</view>
					<view class="card-item-content">{{pageData.legalName ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">法人联系电话号码</view>
					<view class="card-item-content">{{pageData.legalPhone ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">业务负责人姓名</view>
					<view class="card-item-content">{{pageData.businessOwner ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">业务负责人职务</view>
					<view class="card-item-content">{{pageData.businessJob ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">业务负责人电话</view>
					<view class="card-item-content">{{pageData.businessPhone ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">该单位主要业务</view>
				</view>
				<view class="card-item">
					<view class="item-textarea">{{pageData.mainBusiness ?? "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">备注</view>
				</view>
				<view class="card-item">
					<view class="item-textarea">{{pageData.remark ?? "--"}}</view>
				</view>
			</view>

			<view class="card">
				<!-- 附件（照片） -->
				<view class="card-item">
					<view class="card-item-name">图片附件</view>
					<view class="card-item-content" v-if="listPhoto.length === 0">无</view>
				</view>
				<view class="card-item first-card-item photo-item">
					<image :src="item.fileId" v-for="(item,index) in listPhoto" :key="index" @click="showImage(index)"></image>
				</view>

				<!-- 附件（视频） -->
				<view class="card-item">
					<view class="card-item-name" style="min-width: 156rpx;">视频附件</view>
					<view class="card-item-content" v-if="listVideo.length === 0">无</view>
				</view>
				<view class="video-item">
					<video :src="item.fileId" v-for="(item,index) in listVideo" :key="index"></video>
				</view>

				<!-- 附件（文件） -->
				<view class="card-item">
					<view class="card-item-name" style="min-width: 156rpx;">其他附件</view>
					<view class="upload-file-area">
						<view class="upload-file-name" v-for="(item,index) in uploadListFile" :key="index"
							@click="showFile(item.fileId)">
							{{item.fileName}}
						</view>
					</view>
				</view>
			</view>

			<view class="gap-bottom"></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>
	</view>
</template>

<style lang="scss" scoped>
	.item-textarea {
		width: 100%;
		min-height: 150rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: #EAF0FA;
		border-radius: 20rpx;
	}

	.photo-item {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 20rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			margin: 20rpx 40rpx 20rpx 0;
		}
	}

	.video-item {
		width: 480rpx;
		min-height: 270rpx;
		margin: 20rpx auto;

		video {
			width: 480rpx;
			height: 270rpx;
		}
	}

	.upload-file-area {
		min-height: 32rpx;
	}
</style>