dev/dcp-app-gate/pages/workbench/workProgress.vue

<template>
	<view class="progress-container">
		<view class="" v-if="documentList.length">
			<view class="progress-title">工作材料</view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" display-multiple-items='2'>
							<swiper-item v-for="(item, i) in documentList">
								<view class="swiper-item swiper-file" @click="previewFile(item.filePath)">
									<image :src="imgUrl(item.fileName)" mode=""></image>
									<view class="swiper-text">{{item.fileName}}</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20px">
			<view class="progress-title">工作进展</view>
			<view class="guest-list-item" v-for="(item, i) in progressList" :key="i">
				<view class="center-section">
					<text class="guest-name ellipsis">{{item.progressName}}</text>
					<text class="guest-position ellipsis">负责部门：{{item.progressPrincipal}}</text>
					<text class="guest-unit ellipsis">创建时间：{{moment(item.createDate).format('YYYY-MM-DD')}}</text>
				</view>
				<view class="right-section">
					<image v-if="item.isComplete" src="@/static/img/conference/completed.png"></image>
					<image v-else src="@/static/img/conference/unfinished.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['meetingId'],
		data() {
			return {
				documentList: [],
				progressList: []
			}
		},
		watch: {
			meetingId() {
				this.getProgressData();
			}
		},
		mounted() {
			if (this.meetingId) {
				this.getProgressData();
			}
		},
		methods: {
			previewFile(path) {
				uni.downloadFile({
					url: 'https://m.geidcp.com/api/file/pub/' + path,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			imgUrl(fileName) {
				let suffixTxt = '';
				var startIndex = fileName.lastIndexOf(".");
				if (startIndex != -1) {
					suffixTxt = fileName.substring(startIndex + 1, fileName.length).toLowerCase();
				}
				if (suffixTxt == 'doc' || suffixTxt == 'docx') {
					return '../../static/img/conference/doc.png';
				} else if (suffixTxt == 'pdf') {
					return '../../static/img/conference/pdf.png';
				} else if (suffixTxt == 'ppt' || suffixTxt == 'pptx') {
					return '../../static/img/conference/ppt.png';
				} else if (suffixTxt == 'xls' || suffixTxt == 'xlsx') {
					return '../../static/img/conference/XLSX.png';
				}
			},
			async getProgressData() {
				const res = await this.$myRequest({
					url: '/meeting/meetingPlan/findAppMeetingWork',
					data: {
						meetingId: this.meetingId
					}
				});
				this.documentList = res.data.workProgressesFile;
				this.progressList = res.data.meetingWorkProgresss;
				// console.log('进展',res)
			}
		}
	}
</script>

<style scoped>
	.progress-container {
		padding: 0 30rpx;
	}

	.progress-title {
		font-size: 18px;
		margin-bottom: 16px;
		font-weight: bold;
	}

	.swiper-file {
		border: 1px solid #d7d7d7;
		border-radius: 20px;
		text-align: center;
		padding: 10px 0;
		margin: 0 10px;
		height: 150px;
	}

	.swiper-file view {
		color: #8b8b8b;
		margin-top: 10px;
		padding: 0 4px;
		font-weight: bold;
	}

	.swiper-file image {
		width: 50px;
		height: 50px;
		margin: 0 auto
	}

	.swiper-text {
		height: 62px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.guest-list-item {
		display: flex;
		position: relative;
		align-items: center;
		border-top: 1px solid #d7d7d7;
	}

	.guest-name {
		font-size: 16px;
		height: 24px;
		line-height: 36px;
		color: #333;
	}

	.guest-vip {
		display: inline-block;
		line-height: 14px;
		font-size: 10px;
		padding: 0 4px;
		margin: 0 10px;
		margin-top: -4px;
		background: #d81e06;
		transform: skewX(-10deg);
		color: #fff;
		border-radius: 2px;
		vertical-align: middle;
	}

	.guest-speaker {
		color: #d81e06;
		font-size: 16px;
	}

	.guest-position,
	.guest-unit {
		display: block;
		font-size: 12px;
		color: #aaa;
	}

	.center-section {
		flex: 1;
		padding-left: 10px;
	}

	.right-section {
		width: 240upx;
		text-align: center;
	}

	.right-section image {
		width: 50px;
		height: 50px;
	}

	.ellipsis {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>