TuBaoSoft-Ui-Zd/pages/home/inventoryQuery/detailedAttachment.vue

<template>
	<view>
		<view class="ordertop">
			<view>
				<view class="iconblue"></view>
				<text class="license">附件</text>
			</view>
			<view class="line">
				<u-line color="#ccc" border-style='dashed'/>
			</view>
			<view class="basic" v-for="(item,index) in list" :key="index">
				<view>{{item.fName}}</view>
				<view>
					<u-button type="primary" :ripple="true" ripple-bg-color="#909399" size="mini" 
					@click="previewDocx(item.fUrl)">{{progress?'进度:'+progress:'查看'}}</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				progress:'',
				list: []
			}
		},
		onLoad(option) {
			this.form = JSON.parse(option.item)
			
			this.$u.get('/warehouseBusiness/enclosure/infoByPid', {
				pId: this.form.fId
			}).then(res => {
				this.list = res.data
			})
		},
		methods: {
			//预览
			previewDocx(item){
				if(item == null){
					uni.showToast({
						icon: 'none',
						title: '无附件',
						position: "bottom"
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '下载中...',
						position: "bottom"
					})
					uni.downloadFile({
						url: item,
						success: (res) => {
							if (res.statusCode === 200) {
								const downloadTask = uni.openDocument({
									filePath: res.tempFilePath,
									// 如果文件名包含中文，建议使用escape(res.tempFilePath)转码，防止ios和安卓客户端导致的差异
									success: function(res) {
										uni.showToast({
											icon: 'none',
											title: '打开附件成功',
											position: "bottom"
										})
									},
									fail:function(res){
										uni.showToast({
											icon: 'none',
											title: '打开附件失败',
											position: "bottom"
										})
									}
								});
								downloadTask.onProgressUpdate((res) => {
									this.progress = res.progress
								});
							}
						}
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.ordertop {
		width: 96%;
		background-color: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		padding-top: 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);
		padding-bottom: 10rpx;
	}
	
	.ordertop>view:nth-child(1) {
		width: 98%;
		margin-bottom: 60rpx;
	}
	.iconblue {
		width: 10rpx;
		height: 45rpx;
		float: left;
		background-color: #3a63cf;
		margin-right: 10rpx;
	}
	.line {
		width: 92%;
		margin: 0 auto;
	}
	
	.various {
		float: right;
		width: 150rpx;
		border: 2rpx solid #3a63cf;
		text-align: center;
		border-radius: 100rpx;
		color: #3a63cf;
	}
	.basic {
		width: 94%;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
	}
	
	.basic>view {
		margin-bottom: 10rpx;
	}
	
	.basic>view:nth-child(1) {
		color: #797979;
	}
</style>