uni-zhihuikuangshan-2/components/e-file/e-file.vue

<template>
	<view>
		<view class="fileList">
			<view class="title" v-if="fileList[0].title">{{fileList[0].title}}</view>
			<view class="list">
				<view class="item" v-for="item in fileList" :key="item.id" @click="detail(item.filePath,item.fileName)">
					<view class="icon">
						<!-- <uni-icons type="paperplane" size="30" color="#009FE8"></uni-icons> -->
						<image v-if="item.filePath.indexOf('.doc') != -1" src="./icon/wj-doc.png"></image>
						<image v-if="item.filePath.indexOf('.xls') != -1" src="./icon/wj-xls.png"></image>
						<image v-if="item.filePath.indexOf('.pdf') != -1" src="./icon/wj-pdf.png"></image>
						<image v-if="item.filePath.indexOf('.ppt') != -1" src="./icon/wj-ppt.png"></image>
					</view>
					<view>
						<view class="name">{{item.fileName}}</view>
						<view class="size">{{item.fileSize}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: [
			"fileList"
		],
		data() {
			return {

			};
		},
		methods: {
			detail(filePath,name) {
				uni.downloadFile({
					url: filePath,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
				// #ifndef APP-PLUS
				uni.navigateTo({
					// url:"../../pages/file/file?path=" + filePath + "&name=" + name,
					url:"../../pages/record/record_link/record_link?name=" + name + "&url=" + filePath
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.fileList {
		.title {
			line-height: 30px;
			border-left: 4px solid #009FE8;
			border-radius: 4px;
			padding-left: 10px;
			margin-bottom: 10px;
		}

		.list {
			.item {
				padding: 20rpx 25rpx;
				border-bottom: 1px solid #f4f4f4;

				display: flex;
				align-items: center;

				.icon {
					padding-right: 30rpx;
					
					image{
						width: 52rpx;
						height: 72rpx;
					}
				}

				.name {
					width: 540rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.size {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}
</style>