assess-app/page_subpack/transition/components/credit-item.vue

<template>
	<view class="animate__animated animate__fadeIn">
		<view class="p-lr20 p-b40" v-if="list.length>0">
			<view class="sys-background-fff r-30 text-color-12 p-20 m-b20" v-for="(item,index) in list" :key="index">
				<view class="row-justify-sb center">
					<view class="size-30 sys-weight-600 credit-file-name ellipsis">{{item.file_name}}</view>
					<image v-if="item.status>=2" class="credit-file-icon"
						:src="'/page_subpack/static/img/task-details/icon-'+item.status+'.png'" mode="aspectFill">
					</image>
				</view>
				<view class="sys-from-background-color size-24 text-color-666 p-20 r-20 m-tb20">
					<view>
						<text>任务编号：</text>
						<text>{{item.task_sn}}</text>
					</view>
					<view class="m-t10">
						<text>备注：</text>
						<text> {{item.msg?item.msg:'无'}}</text>
					</view>
				</view>
				<view class="row-justify-sb center">
					<text class="size-24 text-color-999 flex">{{item.created_at}}上传</text>
					<button class="credit-item-button sys-weight-500 size-28" type="default" hover-class="is-hover"
						v-if="item.status === 3" @click="downPdf(item)">下载</button>
				</view>
			</view>
		</view>
		<en-blank v-if="list.length<=0"></en-blank>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank
		},
		props: {
			list: {
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			downPdf(item) {
				uni.downloadFile({
					url: item.file_url,
					success: function(res) {
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							fileType: 'xlsx',
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
						// wx.shareFileMessage({
						//
						// })
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.credit-item-button {
		width: 173rpx;
		color: #fff;
		background: #0FB160;
		line-height: 70rpx;
		border-radius: 100rpx;
	}

	.credit-file-icon {
		width: 93rpx;
		height: 80rpx;
		display: block;
	}

	.credit-file-name {
		max-width: 500rpx;
	}

	button::after {
		border: none;
	}
</style>