UploadFile.vue 5.06 KB
<template>
	<view>
		<view class="flex-content">
			<view class="iconText">
				<u-icon name="/static/images/icon/pdfIcon.png" size="33px" v-if="fileType == 1"></u-icon>
				<u-icon name="/static/images/icon/excelIcon.png" size="33px" v-if="fileType == 2"></u-icon>
				<u-icon name="/static/images/icon/csvIcon.png" size="33px" v-if="fileType == 3"></u-icon>
				<text class="iconTitle"
					@click="seeFile">{{downloadFileName ? downloadFileName.substring(downloadFileName.lastIndexOf('/') + 1) : $t('hdk.noFile')}}</text>
			</view>
			<view class="rightText" @click="seeFile('preview')" v-if="downloadFileNamePath != ''">
				{{$t('hdk.Check')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		downloadTemplateFile
	} from '@/api/scan.js'
	import config from '@/common/config'
	export default {
		components: {},
		props: {
			fileType: {
				type: Number,
				require: true
			},
			downloadFileName: {
				type: String,
				require: true
			},
			downloadFileNamePath: {
				type: String,
				require: true
			},
			isCsv: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				openIframe:false,
				documentUrl:""
			}
		},
		computed: {

		},
		onLoad() {
			// uni.showShareMenu({
			// 	withShareTicket: true,
			// 	menus: ['shareAppMessage'],
			// 	success: function() {
			// 		console.log('分享菜单显示成功');
			// 	},
			// 	fail: function(res) {
			// 		console.log('分享菜单显示失败', res);
			// 	}
			// });
		},
		methods: {
			seeFile(acceptType) {
				console.log(acceptType);
				// if (this.isCsv) {
				//   return
				// }
				console.log('查看文件');
				uni.showLoading({
					title: this.$t('hdk.loading')
				})
				let that = this;

				if (!this.isCsv) {
					const count = (this.downloadFileNamePath.match(/;/g) || []).length;
					console.log(this.downloadFileNamePath, "解析文件有", count, "个")
					if (count > 1) {
						uni.showToast({
							icon: 'none',
							title: this.$t('hdk.incorrectImportFormat')
						});
						return
					}
				}
				//去除分号分割符
				let downloadName = that.downloadFileNamePath.replace(/;/g, "");
				console.log("下载名", downloadName);
				// let query = `/download?bucketName=hdk&file=${downloadName}`
				// console.log("query", config.baseUrl + query)
				const parts = downloadName.split(".");
				// 取数组最后一个元素作为后缀名
				let fileType = parts[parts.length - 1];
				console.log("后缀", fileType);
				let environment = uni.getSystemInfoSync().platform
				console.log("当前环境", environment);
				const urls = config.fileUrl + `/${encodeURI(downloadName)}`
				let fileName = downloadName.substring(downloadName.lastIndexOf('/') + 1);
				this.checkUrlValidity(urls).then(isExistence => {
					if (isExistence) {
						uni.hideLoading()
						uni.getSystemInfo({
						  success: function (res) {
						    var platform = res.platform.toLowerCase();
						    // 如果是安卓设备
						    if (platform === 'android' || platform === 'windows') {
						      window.open(urls, '_blank');
						    }
						    // 如果是 iOS 设备
						    else if (platform === 'ios') {
								window.open(urls);
						    }
						  }
						});
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: this.$t('hdk.fileNotUploaded')
						});
					}
				})
			},
			//检查是否有效
			checkUrlValidity(url) {
				return new Promise((resolve, reject) => {
					uni.request({
						url,
						header: {
							'tenant-id': 1,
						},
						method: 'HEAD',
						success(res) {
							console.log("检验地址", res);
							if (res.statusCode >= 200 && res.statusCode < 400) {
								resolve(true); // URL有效
							} else {
								console.log("地址无效");
								resolve(false); // URL无效
							}
						},
						fail(err) {
							reject(err); // 请求失败
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (max-width: 767px) {
		.iconTitle {
			width: 200px;
			font-size: 13px;
			margin-left: 8px;
			white-space: nowrap;
			/* 防止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}
		.rightText {
			padding: 5px;
			color: #00aeaa;
			font-size: 14px;
		}
		
		.flex-content {
			display: flex;
			justify-content: space-between;
			font-size: 26px;
			align-items: center;
			margin: 30px;
		
			.iconText {
				display: flex;
				align-items: center;
				height: 50px;
				color: #2b3950;
			}
		}
	}

	//PC端样式
	@media screen and (min-width: 768px) {
		.iconTitle {
			width: 400px;
			font-size: 26px;
			margin-left: 16px;
			white-space: nowrap;
			/* 防止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */
		}
		.rightText {
			padding: 10px;
			color: #00aeaa;
			font-size: 28px;
		}
		
		.flex-content {
			display: flex;
			justify-content: space-between;
			font-size: 26px;
			align-items: center;
			margin: 30px;
		
			.iconText {
				display: flex;
				align-items: center;
				height: 50px;
				color: #2b3950;
			}
		}
	}
</style>