realty/virgo.wzfrontend/yui_wx/pageMy/download/download.vue

<template>
	<view class="download">
		<mescroll-empty v-if="list.length === 0"></mescroll-empty>
		<view class="down-list" v-else>
			<view class="down-item" v-for="(item,index) in list" :key="item.id">
				<view class="down-content">
					<view class="down-icon">
						<uv-icon color="#fff" size="26" name="file-text-fill">
						</uv-icon>
					</view>
					<view class="content">
						<view class="title hui-ellipsis">{{item.fileName}}</view>
						<view class="date">{{item.date}}</view>
					</view>
				</view>
				<view class="down-operation">
					<view class="down-operation-item" @tap="openDocument(index)">
						<uv-icon color="#8c8c8c" size="20" name="order">
						</uv-icon>
						<text class="text">打开</text>
					</view>
					<view class="down-operation-item" @tap="shareFile(index)">
						<uv-icon color="#8c8c8c" size="20" name="share">
						</uv-icon>
						<text class="text">分享</text>
					</view>
					<view class="down-operation-item" @tap="deleteFile(index)">
						<uv-icon color="#8c8c8c" size="20" name="trash">
						</uv-icon>
						<text class="text">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				deviceId: ''
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				let file = !uni.getStorageSync('downliadFile') ? [] : JSON.parse(uni.getStorageSync(
					'downliadFile'));
				this.list = file.filter(node => node.userId === this.$store.getters.user.userId);
			},
			deleteFile(index) {
				let _self = this;
				let file = !uni.getStorageSync('downliadFile') ? [] : JSON.parse(uni
					.getStorageSync('downliadFile'));
				let item = _self.list[index];
				uni.showModal({
					title: '有极提示',
					content: '是否删除该文件？',
					success: res => {
						if (res.confirm) {
							console.log(file);
							console.log(item);
							let index = file.findIndex(node => node.wxUrl === item.wxUrl);
							file.splice(index, 1);
							uni.setStorageSync('downliadFile', JSON.stringify(file));
							_self.init();
						}
					}
				});
			},
			shareFile(index) {
				let item = this.list[index];
				wx.shareFileMessage({
					filePath: item.wxUrl,
					fileName: item.fileName,
					success(data) {}
				})
			},
			openDocument(index) {
				let item = this.list[index];
				uni.openDocument({
					filePath: item.wxUrl,
					fileType: item.type,
					success: (res) => {},
					fail: (error) => {
						this.$toast('打开失败')
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.down-list {
		padding: 30rpx;

		.down-item {
			padding: 20rpx 20rpx 0px 20rpx;
			background: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			margin-bottom: 30rpx;
		}

		.down-operation {
			border-top: 2rpx solid $uni-border-1;
			display: flex;
			align-items: center;
		}

		.down-operation-item {
			display: flex;
			align-items: center;
			color: $uni-secondary-color;
			flex: 1;
			justify-content: center;
			padding: 20rpx 0;
		}

		.down-content {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
		}

		.content {
			margin-left: 12rpx;
			flex: 1;
			width: 0;
			overflow: hidden;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
			width: 100%;
		}

		.date {
			font-weight: 300;
			font-size: 24rpx;
			margin-top: 10rpx;
			color: $uni-secondary-color;
		}

		.down-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background: $uni-primary;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>