zhgdyunapp_vue3/pages/fileList/fileList.vue

<template>
	<view class="filePage">
		<!-- <scroll-view class="pageContent"> -->
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
		<headers :showBack="true">
			<view class="headerName">
				项目资料
			</view>
		</headers>
		<view class="searchBox">
			<form @submit="formSubmit">
				<view class="uni-form-item">
					<input class="uni-input" name="searchName" v-model="searchName" @input="searchFile"
						placeholder="请输入文件名" />
					<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
					<!-- <uni-icons2 class="search-icon" type="search" @click="loadData"></uni-icons2> -->
				</view>
			</form>
		</view>
		<view class="" v-if="fileList.length>0">
			<view class="fileItem" v-for="(item,index) in fileList" :key="index">
				<view class="left">
					<image class="fileIcon" :src="parseFileImgFn(item.filePath)"></image>
					{{item.fileName}}
				</view>
				<image @click="downloadFn(item)" class="ellipsis" src="../../static/ellipsis.png"></image>
			</view>
		</view>


		<view class="placeholderBox" v-else>
			<image src="/static/noData.png" class="noDataImg"></image>
			<view class="text">
				暂无数据
			</view>
		</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue'
	import fileImg1 from '../../static/ppt.png';
	import fileImg2 from '../../static/excel.png';
	import fileImg3 from '../../static/pdf.png';
	import fileImg4 from '../../static/word.png';


	export default {
		components: {
			headers
		},
		data() {
			return {
				searchName: '',
				fileList: [],
				timer: null,
				fileImg1: fileImg1,
				fileImg2: fileImg2,
				fileImg3: fileImg3,
				fileImg4: fileImg4,
			};
		},
		mounted() {
			this.loadData()
		},
		methods: {
			parseFileImgFn(url) {
				var type = url.split(".")[1];
				if (type == "ppt" || type == "pptx") {
					return this.fileImg1;
				}
				if (type == "xls" || type == "xlsx") {
					return this.fileImg2;
				}
				if (type == "pdf") {
					return this.fileImg3;
				}
				if (type == "doc" || type == "docx") {
					return this.fileImg4;
				}
			},
			formSubmit(e) {
				// console.log(e)
				this.searchName = e.detail.value.searchName
				this.loadData()

			},
			searchFile(e) {
				this.searchName = e.detail.value
			},
			loadData() {
				var json = {
					// companySn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn,
					fileName: this.searchName,
					pageNo: 1,
					pageSize: 100
				}
				if ([2, 3, 4, 7].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
					json.companySn = JSON.parse(uni.getStorageSync('userInfo')).sn
				}
				if ([5, 6, 10].includes(JSON.parse(uni.getStorageSync('userInfo')).accountType)) {
					json.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
				}
				var that = this
				this.sendRequest({
					url: "xmgl/companyFile/list",
					data: json,
					method: "POST",
					success(res) {
						console.log('文件数据', res);
						that.fileList = res.result.page.records
					}
				})
			},
			downloadFn(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: item.fileName,
					confirmText: '下载',
					success: function(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: that.url_config + 'image/' + item.filePath, //仅为示例，并非真实的资源
								success: (res) => {
									console.log(res)
									if (res.statusCode === 200) {
										// uni.showToast({
										// 	title:'下载成功'
										// })
										var filePath = res.tempFilePath;
										if (!filePath) return
										uni.openDocument({
											filePath: filePath,
											success: function(res) {
												console.log(res);
												console.log('打开文档成功');
												uni.showToast({
													title: '打开文档成功'
												})
											}
										});
									} else {
										uni.showToast({
											title: '下载失败'
										})
									}
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filePage {
		background-color: white;
		height: 100%;
	}

	.searchBox {
		background-color: white;
	}

	.uni-input {
		border-radius: 30rpx;
		margin: 20rpx 20rpx;
		background-color: #f2f2f2;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		width: 65%;
	}

	.fileItem {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0;
		margin: 0 20rpx;
		color: $uni-text-color;
		border-bottom: 2rpx solid rgba(221, 221, 221, 0.8);

		.left {
			display: flex;
			align-items: center;
		}

		.fileIcon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		.ellipsis {
			width: 40rpx;
			height: 10rpx;
		}
	}

	.uni-form-item {
		position: relative;

		.search-icon {
			position: absolute;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		}
	}

	.mini-btn {
		position: absolute;
		right: 12rpx;
		top: 0rpx;
		border-radius: 30rpx;
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
	}
</style>