realty/virgo.wzfrontend/workark_wx/subPages/myPage/download/download.vue

<template>
	<view class="download">
		<view class="workark-empty" v-if="list.length === 0">
			<uv-empty icon="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/fa57e25b38c442ebb0ba023cace796bb"
				:isImg="true" textSize="28" width="360" text="暂无文件">
			</uv-empty>
		</view>
		<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="52" 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="40" name="order">
						</uv-icon>
						<text class="text">打开</text>
					</view>
					<view class="down-operation-item" @tap="shareFile(index)">
						<uv-icon color="#8c8c8c" size="40" name="share">
						</uv-icon>
						<text class="text">分享</text>
					</view>
					<view class="down-operation-item" @tap="deleteFile(index)">
						<uv-icon color="#8c8c8c" size="40" 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) {
							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: 40rpx 40rpx 0px 40rpx;
			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 $uv-border-color;
			display: flex;
			align-items: center;
		}

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

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

		.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: $uv-content-color;
		}

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