gwlz/jp-mobile/pages/fileTransmit/fileCard.vue

<template>
	<view class="card_main">
		<view class="card_banner"></view>
		<view class="card_info">
			<view class="card_info_title">
				盐都工信文件阅办卡
			</view>
			<view class="card_table">
				<u-row justify="space-between">
					<u-col span="6">
						<view>年度： 2024</view>
					</u-col>
					<u-col span="6">
						<view style="text-align: right;">[2024]001号</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row">
					<u-col span="3" textAlign="center" class="card_col">
						<view>来文机关</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col">
						<view>[2024]001号</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col">
						<view>来文字号</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view>[2024]001号</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" class="card_col">
						<view>收文时间</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col">
						<view>[2024]001号</view>
					</u-col>
					<u-col span="3" textAlign="center" class="card_col">
						<view>文件来源</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view>[2024]001号</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" align="center">
						<view>内容摘要</view>
					</u-col>
					<u-col span="9" class="info_abstract">
						<view class="info_abstract_v">
							[2024]001号11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
						</view>
					</u-col>
				</u-row>
				<u-row v-if="isleader || isinfo" style="height: 70px;" justify="space-between" class="card_row card_row_border">
					<u-col span="1" textAlign="center" >
						<view class="vertical-text">办公室拟办</view>
					</u-col>
					<u-col  span="11" class="info_abstract">
						<view class="info_abstract_v">
							<view >
								请领导长阅，承办地方阅处。
							</view>
							<view class="flex " style="line-height: 20px;">
								<u--image :src="src" width="80px" height="20px"></u--image>
								2024-3-21 00:00
							</view>
						</view>
							
							
					</u-col>
				</u-row>
				<u-row v-if="isinfo" justify="space-between" class="card_row card_row_border">
					<u-col span="1" textAlign="center" >
						<view class="vertical-text">领导批示</view>
					</u-col>
					<u-col  span="11" class="info_abstract">
						<view class="info_abstract_v">
							<view >
								请领导长阅，承办地方阅处。
							</view>
							<view class="flex " style="line-height: 20px;">
								<u--image :src="src" width="80px" height="20px"></u--image>
								2024-3-21 00:00
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row v-if="isinfo"  justify="space-between" class="card_row card_row_border">
					<u-col span="1" textAlign="center" >
						<view class="vertical-text">承办情况</view>
					</u-col>
					<u-col  span="11" class="info_abstract">
						<view class="info_abstract_v">
							承办地方      2024-3-21 00:00
						</view>
					</u-col>
				</u-row>
				<u-row v-if="isinfo" justify="space-between" class="card_row card_row_border">
					<u-col span="3" textAlign="center" class="card_col">
						<view>备注</view>
					</u-col>
					<u-col span="9" textAlign="center" >
						<view>[2024]001号</view>
					</u-col>
				</u-row>
				<u--text style="margin: 10px;" size="12" type="error" text="所有涉密敏感信息不得上传"></u--text>
				<view class="card_other">
					附件：
					<view class="other_info" v-for="item in fileList">
						<view class="other_pdf  flex  ">
							<u--text mode="link" :text="item.name" :href="item.url" ></u--text>
						</view>
					</view>
					<u-upload
						:fileList="imgList"
						name="3"
						multiple
						:maxCount="imgList.length"
						:previewFullImage="true"
						:deletable="false"
					></u-upload>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {isImageFormat} from "@/common/util.js"
	export default {
		mounted() {
			this.fileLists.forEach(item =>{
				if(isImageFormat(item.url)){
					this.imgList.push(item)
				}else{
					const fileName = item.url.split(/[/\\]/).pop();
					let a = {
						name: fileName,
						url:item.url
					}
					this.fileList.push(a)
				}
			})
		},
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				fileLists:[{
					url:"https://cdn.uviewui.com/uview/album/1.txt"
				},{
					url:"https://cdn.uviewui.com/uview/album/1.pdf",
				},
				{
					url: 'https://cdn.uviewui.com/uview/album/1.jpg',
				},
				{
					url: 'https://cdn.uviewui.com/uview/album/1.jpg',
				},{
					url: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}],
				fileList:[],
				imgList:[]
				// isoffice: false,
				// isleader: false,
				// isinfo: false
			}
		},
		props: {
			isoffice: {
				type: Boolean,
				default: false
			},
			isleader: {
				type: Boolean,
				default: false
			},
			isinfo: {
				type: Boolean,
				default: false
			},
		},
	}
</script>

<style>
	.card_main {
		width: 100%;
		background-color: #fefefe;
	}

	.card_banner {
		width: 100%;
		height: 60px;
		background-color: #36a7f3;
	}

	.card_info {
		width: 96%;
		/* height: 80vh; */
		margin: -40px 2% 0;
		background-color: #fefefe;
		border-radius: 15px;
		text-align: center;
	}

	.card_info_title {
		font-size: 16px;
		font-weight: 700;
		padding-top: 10px;
		color: #36a7f3;
	}

	.card_table {
		padding: 20px 20px;
		font-size: 12px;
	}

	.card_row {
		line-height: 30px;
		border: 1px solid;
		word-wrap: break-word;
	}
	.card_row_border {
		border-top: none;
	}
	.card_col {
		border-right: 1px solid;
	}

	.info_abstract {
		line-height: 16px;
		word-wrap: break-word;
		border-left: 1px solid;
	}
	.info_abstract_v {
		margin: 18px;
	}
	.vertical-text {
		writing-mode: vertical-rl;
		/* 文字垂直排列，从右向左 */
		/* 或者使用vertical-lr; 从左向右 */
	}

	.card_other {
		text-align: left;
	}
</style>