DigitalHuman-app/pages/root-filelist/root-filelist.vue

<template>
	<view>
		<view v-if="stack.length > 1" class="file-item" @click="openParent(stackLast)">
			<view>
				<image src="../../static/phone.png" class="icon" mode="widthFix"></image>
			</view>
			<view class="item-content"><text>...上一层</text></view>
		</view>
		<view v-for="(item, index) in fileList" :key="index" @click="onFileSelected(item)" class="file-item">
			<view>
				<image v-if="item.type === 'file'" :src="fileType(item.name)" class="icon" mode="widthFix"></image>
				<image v-else src="../../static/phone.png" class="icon" mode="widthFix"></image>
			</view>
			<view class="item-content">
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	import pdf from '../../static/icon_pdf.png';
	import word from '../../static/icon_word.png';

	// 导入 java.io.File 类
	const File = plus.android.importClass('java.io.File');

	export default {
		data() {
			return {
				fileList: [],
				stack: [],
				pdf,
				word,
				fileInfo: {}
			};
		},
		computed: {
			stackLast() {
				return {
					type: 'dir',
					path: this.stack[this.stack.length - 2]
				};
			}
		},
		methods: {
			fileType(type) {
				return /.docx$/.test(type) ? this.word : this.pdf;
			},
			openParent(item) {
				this.stack = this.stack.slice(0, this.stack.length - 1);
				this.fileList = [];
				this.getPrivateDir(item.path);
			},
			onFileSelected(item) {
				if (item.type === 'dir') {
					this.stack.push(item.path);
					this.fileList = [];
					this.getPrivateDir(item.path);
				} else {
					this.fileInfo.name = item.name
					this.fileInfo.path = item.path
					uni.setStorageSync('filePath', item.path);
					uni.setStorageSync('fileName', item.name);
					uni.switchTab({
						url: "/pages/index",
					});
				}
			},
			getPrivateDir(dirPath) {
				uni.showLoading({
					title: '加载中'
				});

				let dir = new File(dirPath);
				if (!dir.exists()) {
					console.log('目录不存在');
					uni.hideLoading();
					return;
				}

				const files = dir.listFiles();
				if (files == null) {
					uni.hideLoading();
					return;
				}

				const lists = [];

				for (let i = 0; i < files.length; i++) {
					let json = {
						name: '',
						type: '',
						time: '',
						size: '',
						path: ''
					};
					let file = files[i];

					if (file.isDirectory()) {
						let dirName = file.getName();
						let dirPath = file.getAbsolutePath();

						if (/^\./.test(dirName)) continue;

						json.type = 'dir';
						json.path = dirPath;
						json.name = dirName;
						lists.push(json);
					} else {
						let fileName = file.getName();
						let fileSize = file.length();
						let filePath = file.getAbsolutePath();

						if (/^\./.test(fileName)) continue;

						json.type = 'file';
						json.name = fileName;
						json.size = fileSize;
						json.path = filePath;
						json.time = file.lastModified();
						lists.push(json);
					}
				}

				this.fileList = lists;
				uni.hideLoading();
			}
		},
		mounted() {
			const dirPath = '/storage/emulated/0/';
			this.stack.push(dirPath);
			this.getPrivateDir(dirPath);
		}
	};
</script>

<style lang="scss" scoped>
	.file-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		border-bottom: 1px solid #e7e7e7;

		.icon {
			width: 50rpx;
			margin-left: 20rpx;
		}

		.item-content {
			display: flex;
			flex-direction: column;
			padding-left: 26rpx;

			.item-content-text {
				margin: 12rpx;
			}
		}
	}
</style>