FE-lab-xcx/pages_safetyCheck/views/materialAttachments.vue

<!-- 材料附件 -->
<template>
	<view class="materialAttachments">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="list-li" v-for="(item,index) in newData">
					<img :src="imagesUrl('safetyCheck/icon_djc_wj.png')">
					<view>{{item.fileName}}</view>
					<view @click="attachmentPreview(item)">查看</view>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		chemicalAppletGetStockDetail
	} from '@/pages/api/index.js'
	export default {
		name: "materialAttachments",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 0,
				newData: {},
			}
		},
		onLoad(option) {
			this.newData = JSON.parse(decodeURIComponent(option.infoData))

		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			//滚动事件
			scrollGet() {},
			attachmentPreview(item) {
				uni.showLoading({
					title: '下载中'
				});
				wx.downloadFile({
					url: config.base_url + item.fileUrl,
					header: {
						Authorization: uni.getStorageSync('token')
					},
					success: function(res) {
						uni.hideLoading();
						const filePath = res.tempFilePath
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					},
					fail: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				})
			},

		}
	}
</script>

<style lang="stylus" scoped>
	.materialAttachments {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		box-sizing: border-box;
	
	.list {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			margin-top: 20rpx;

			.list-li {
				height: 100rpx;
				border-bottom: 1rpx solid #E0E0E0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 16rpx;
				}

				>view:nth-of-type(1) {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
					line-height: 39rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 56rpx;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #0183FA;
					line-height: 39rpx;
					text-align: left;
				}
			}

			.list-li:last-of-type {
				border: none;
			}
		}

	}
</style>