jcyjdt_applet/components/view/index.vue

<template>
	<scroll-view scroll-y="true" class="scroll-view">
		<view class="list-scroll-view">
			<view class="content">
				<view class="list" v-for="(item, index) in infoFields" :key="index">
					<view v-if="item.is_file" @tap.stop="toFile(data[item.model])" class="title">
						<view v-if="data[item.model].length>0">
							<text>{{item.label}}：</text>{{data[item.model][0].name||'暂无'}}
						</view>
					</view>
					<view v-else-if="item.is_image" @tap.stop="toView(0,data[item.model])" class="title">
						<view v-if="data[item.model].length>0">
							<text>{{item.label}}：</text>
							<image class="image" :src="data[item.model][0].url"></image>
						</view>
					</view>
					<view v-else-if="item.is_editor" class="title">
						<text>{{item.label}}：</text>
						<rich-text :nodes="formatRichText(data[item.model])"></rich-text>
					</view>
					<view v-else-if="item.is_show" class="title">
						<text>{{item.label}}：</text>
						{{getDict(data[item.model]||'暂无')}}
					</view>
					<view v-else class="title"><text>{{item.label}}：</text>{{data[item.model]||'暂无'}}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			infoFields: {
				type: Array,
				default: []
			},
			data: {
				type: Object,
				default: {}
			},
			showList: {
				type: Array,
				default: []
			},
		},
		data() {
			return {};
		},
		methods: {
			// 查询字典表
			getDict(e) {
				const that = this;
				if (!e) return '暂无'
				let data = that.showList.find((i) => i.dict_value == e);
				if (data) return data.dict_label;
				else return e;
			},
			// 处理富文本
			formatRichText(html) {
				if (html) {
					// 富文本内容格式化
					return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
						// 查找所有的 img 元素
						return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
							'')
						// 删除找到的所有 img 元素中的 style 属性
					}).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
				}
			},
			// 查看文件
			toFile(item) {
				const that = this;
				if (!item) return;
				let serverUrl = that.$config.serverFile;
				let url = item[0].url
				// 判断前面是否有http
				const http = url.lastIndexOf("http");
				if (http == -1) url = serverUrl + url
				//获取最后一个.的位置
				const arr = url.lastIndexOf(".");
				//获取后缀
				const typeName = url.substr(arr + 1);
				//支持预览的文件类型
				//微信小程序
				let fileType = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				//下载文件资源到本地
				uni.downloadFile({
					url: url,
					success: function(res) {
						uni.hideLoading();
						var filePath = res.tempFilePath;
						if (!fileType.includes(typeName)) {
							return false;
						}
						uni.showLoading({
							title: '正在打开',
							mask: true
						})
						// 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
						uni.openDocument({
							filePath: filePath,
							fileType: typeName, // 文件类型，指定文件类型打开文件，有效值 doc, xls, ppt, pdf, docx, xlsx, pptx 
							success: res => {
								uni.hideLoading();
								console.log('打开文档成功', res);
							},
							fail: openError => {
								uni.hideLoading();
								console.log('fail:' + JSON.stringify(openError));
							}
						});
					},
					fail: function(err) {
						uni.hideLoading();
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			// 图片预览
			toView(index, e) {
				const that = this;
				if (!e) return;
				uni.previewImage({
					current: index,
					urls: [e[0].url]
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		max-height: 30vh;

		.list {
			padding: 1vw 2vw;

			.title {
				font-size: var(--font14Size);

				text {
					font-size: var(--font12Size);
					color: var(--f85Color);
				}

				.image {
					width: 20vw;
					height: 20vw;
				}
			}
		}
	}
</style>