disk-app/pages/dir/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<button type="default" size="mini" v-if="route&&route.length>0" @click="toBack()">上一层</button>
				<button type="default" size="mini" v-if="is_file==true" @click="dialogOpen('dialogShow')">时间范围删除</button>
			</view>
			<view class="two">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="list" v-for="(item,index) in list" :key="index">
							<view class="name">
								{{item.name}}
							</view>
							<view class="other">
								<view class="other_1">
									<text>创建时间：</text>
									<text>{{item.create_time}}</text>
								</view>
								<view class="other_1">
									<text>文件类型：</text>
									<text>{{item.type=='file'?'文件':item.type=='dir'?'目录':'未知'}}</text>
								</view>
								<view class="other_1">
									<text>文件大小(KB)：</text>
									<text>{{item.size}}</text>
								</view>
							</view>
							<view class="btn">
								<button type="default" size="mini" v-if="item.type=='dir'" @click="toDir(item)">进入目录</button>
								<button class="del" type="default" size="mini" @click="toDel(item)">删除文件</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
		<uni-popup background-color="#ffffff" ref="dialogShow" type="dialog">
			<uni-popup-dialog title="时间选择" mode="base" @confirm="dialogFirm">
				<uni-datetime-picker v-model="dateArray" type="daterange" @change="dateChange" />
			</uni-popup-dialog>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				route: [],
				is_file: false,
				dateArray: [],
				times: {}
			};
		},
		onShow: function() {
			const that = this;
			that.search();
		},
		methods: {
			dialogOpen(e) {
				const that = this;
				that.$refs[e].open();
			},
			async search() {
				const that = this;
				let res = await that.$api(`/dir`, 'POST', {
					route: that.route,
				});
				if (res.errcode == '0') {
					let is_file = res.data.every(function(item) {
						return item.type == 'file'
					});
					that.$set(that, `is_file`, is_file)
					that.$set(that, `list`, res.data)
				}
			},
			// 进入目录
			async toDir(e) {
				const that = this;
				let route = [...that.route, e.name];
				that.$set(that, `route`, route);
				that.search();
			},
			// 时间范围选择
			dateChange(e) {
				const that = this;
				that.$set(that, `dateArray`, e)
			},
			// 确认选择
			dialogFirm() {
				const that = this;
				let date = that.dateArray;
				that.$set(that, `times`, {
					start_time: date[0],
					end_time: date[1]
				})
				that.toDel()
			},
			// 删除文件
			async toDel(e) {
				const that = this;
				let route = that.route;
				// 文件
				let file = e;
				// 时间范围
				let times = that.times;
				uni.showModal({
					title: '温馨提示',
					content: '数据删除后不可恢复，您确认吗？',
					success: async function(res) {
						if (res.confirm) {
							let arr;
							if (file && file.name) {
								arr = await that.$api(`/delFile`, 'POST', {
									route,
									target: file.name
								})
							} else {
								arr = await that.$api(`/delFile`, 'POST', {
									route,
									times
								})
							}
							if (arr.errcode == '0') {
								uni.showToast({
									title: '删除成功',
									icon: 'error',
									duration: 2000
								});
								that.search();
							} else {
								uni.showToast({
									title: arr.errmsg,
									icon: 'error',
									duration: 2000
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 上一层
			toBack() {
				const that = this;
				let route = that.route;
				route.pop();
				that.$set(that, `route`, route);
				that.search()

			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 96vw;
		height: 100vh;
		margin: 0 2vw;

		.one {
			text-align: center;
			margin: 2vw 0 2vw 0;

			button {
				margin: 0 2vw;
				background-color: var(--f35BColor);
				color: var(--fffColor);
				font-size: var(--font14Size);
			}

			button:nth-child(2) {
				background-color: var(--ff0Color);
				color: var(--fffColor)
			}
		}

		.two {
			position: relative;
			flex-grow: 1;
			padding: 0 2vw;
			margin: 0 0 2vw 0;

			.list {
				border: 1px solid var(--ff0Color);
				padding: 2vw;
				margin: 0 0 2vw 0;
				border-radius: 5px;

				.name {
					font-size: var(--font16Size);
					font-weight: bold;
					margin: 0 0 2vw 0;
				}

				.other {
					margin: 0 0 2vw 0;

					.other_1 {
						margin: 0 0 1vw 0;
						font-size: var(--font14Size);
						color: var(--f85Color);

						text:last-child {
							color: var(--f00Color);
							font-weight: bold;
						}
					}
				}

				.btn {
					text-align: center;

					button {
						margin: 0 2vw;
						background-color: var(--f35BColor);
						color: var(--fffColor);
						font-size: var(--font14Size);
					}

					.del {
						background-color: var(--ff0Color);
					}

				}


			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.uni-dialog-content {
		padding: 2vw !important;
	}

	.uni-forms {
		width: 100vw !important;
	}
</style>