yizhizan-h5/components/attachment.vue

<template>
	<view>

		<!-- <nav-bar title="基本信息"></nav-bar> -->
		<view class="contain flex flex-direction">
			<view class="title">请选择要发送的文件</view>
			<view class="usermain">
				<scroll-view scroll-with-animation scroll-y>
				<!-- 我的公司 -->
					<view @click="select(item)" class="usermain-item item-padding" v-for="item in content">
						<view class="usermain-item-title c-flex-center"><image :src="item.attachmentName.split('.').pop().toLowerCase() == 'pdf' ? '../../static/images/pdf.svg' : '../../static/images/docx.svg'" class="header-icon" /></view>
						<view  class="fileContent c-flex-center">
							<view class="fileName m-ellipsis">{{item.attachmentName}}</view>
							<view class="filedesc">{{item.attachmentSize}}kb 更新于{{item.createTime}}</view>
						</view>
						<view @click.stop="seekDoc(item)" class="c-flex-center">
							<view class="seekview">预览</view>
						</view>
					</view>
					<empty size="mini" :isShow="false" v-if="content.length==0" />
				</scroll-view>
			</view>
			
			<view @click="goTo('/pages/my/attachment')" class="footer-btn">
				管理附件 <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入组件
	import empty from './empty.vue'
	export default {
		components: {
			empty
		},
		props: {
			content: {
				type: Array,
				default: []
			}
		},
		methods: {
			seekDoc(it){
				//#ifdef APP-PLUS
				uni.downloadFile({
				  url: it.attachmentAddress,
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
				return;
				//#endif
				uni.navigateTo({
					url: '/pages/index/webView?url=' + it.attachmentAddress+'&title='+it.attachmentName
				});
			},
			goTo(url){
				uni.navigateTo({
					url
				})
			},
			select(item){
				this.$emit('select',item)
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		/* background: #f6f6f6; */
	}
	.contain{
		height: 40vh;
		.title{
			padding: 25rpx 40rpx;
			color: #666;
		}
	}
	.usermain {
		background: #ffffff;
		/* color: #fff; */
		height: 100vh;
		scroll-view{
			height: 100%;
		}
	}

	.usermain-item {
		display: flex;
		justify-content: space-between;
		margin: 0 40rpx;
		padding: 30rpx 0;
		// border-bottom: 1rpx solid rgba(229, 229, 229, 0.3);
		background: #fff;
		flex: 1;
		.fileContent{
			width: 80%;
			margin:0 15rpx;
		}
		.fileName{
			color: #222;
			font-size: 32rpx;
		}
		.filedesc{
			margin-top: 10rpx;
			font-size: 24rpx;
		}
		.c-flex-center{
			align-self: center;
			color: #aaa;
			flex-shrink: 0;
			.seekview{
				white-space: nowrap;
				color: #888;
			}
		}
		
	}

	.usermain-item-title {
		color: rgba(31, 44, 55, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 44rpx;
		text-align: left;
		.header-icon{
			width: 50rpx;
			height: 50rpx;
			display: block;
		}
	}

	.footer-btn {
		text-align:center;
		padding: 40rpx 0;
		color: rgba(1, 107, 246, 1);
	}

</style>