zhgdyunapp_vue3/pages/workstation/worfStationNotice/noticeDetail.vue

<template>
	<view class="fullHeight noticeDetailPage">
		<headers :themeType="true" class="fixedheader" :showBack="true">
			<view class="headerName">
				通知详情
			</view>
		</headers>
		<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 44 + 'px' }" scroll-y >
			<!-- <view class="add-header">
				<view class="backBtn" @click="back">
					<uni-icons2 type="back" color="#fff" size="26"/>
				</view>
				通知详情
			</view> -->
			
			<view class="notice-title">
				{{noticeTitle}}
			</view>
			
			<view class="notice-content">
				{{noticeContent}}
			</view>
			
			<view class="priview-people">
				<view class="notice_message">
					<image src="/static/workstation/icon_allot_bg.png"></image>
					<span>{{readPeople}}人已读</span>
					{{unreadPeople}}人未读
				</view>
			</view>
			
			<view class="people-list">
				<ul>
					<li v-for="(item,index) in peopleList" :key="index">{{item.noticeUserAme}}</li>
				</ul>
			</view>
			
			<view class="icon-image" v-if="fileList.length > 0 || fileList2.length > 0">
				<image src="/static/workstation/icon_file_address_bg.png"></image>
				附件
			</view>
			
			<view class="notice-filelist" v-if="fileList.length > 0">
				<ul>
					<li v-for="(item,index) in fileList" :key="index">
						<image :src="url_config+'image/'+item" @click="previewImg(item)"></image>
					</li>
				</ul>
			</view>
			<view class="notice-filelist2" v-if="fileList2.length > 0">
				<ul>
					<li v-for="(item,index) in fileList2" :key="index">
						{{item}}
						<span @click="previewFile(item)">预览</span>
					</li>
				</ul>
			</view>
		</scroll-view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'
	export default {
		data(){
			return{
				noticeTitle: '',
				noticeContent: '',
				peopleList: [],
				readPeople: '',
				unreadPeople: '',
				fileList: [],
				detailId: '',
				fileList2: [],
				statusBarHeight: 0
			}
		},
		components:{
			headers
		},
		onLoad(val){
			console.log(val.id)
			this.detailId = val.id
		},
		created(){
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight;
			console.log(this.statusBarHeight)
			this.loadData()
		},
		methods:{
			loadData(){
				let _this = this
				this.sendRequest({
					url: "xmgl/workstationNotice/selectWorkstationNoticeById",
					data: {
						noticeId: this.detailId 
					},
					method: "POST",
					success(res){
						console.log(res)
						let data = res.result
						_this.noticeContent = data.notice.noticeContent
						_this.noticeTitle = data.notice.noticeTitle
						_this.readPeople = data.seePersonNum
						_this.unreadPeople = data.notSeeNoticePersonNum
						_this.peopleList = data.userList
						if(data.notice.fileUrl){
							let fileArr = data.notice.fileUrl.split(',')
							fileArr.forEach(item=>{
								if(_this.isImage(item.split('.')[1])){
									_this.fileList.push(item)
								} else {
									_this.fileList2.push(item)
								}
							})
						}
					}
				})
			},
			isImage(val){
				return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(val.toLowerCase()) !== -1;
			},
			back(){
				uni.navigateBack({
					url: ''
				})
			},
			previewImg(val){
				console.log(val)
				let _this = this
				uni.previewImage({
					urls: [_this.url_config+'image/' + val],
				})
			},
			previewFile(val){
				let _this = this
				uni.downloadFile({
					url: _this.url_config+'image/' + val,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath, 
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.fixedheader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}
.smallHeight{
	height: 100%;
	box-sizing: border-box;
	// height: calc(100% - 44px);
}
.noticeDetailPage{
	background: #fff;
	box-sizing: border-box;
	.add-header{
		height: 92rpx;
		width: 100%;
		background: #127FEC;
		color: #fff;
		display: flex;
		align-items: center;
		.backBtn{
			width: 60rpx;
			text-align: right;
		}
	}
	.notice-title{
		font-weight: 600;
		text-align: center;
		line-height: 72rpx;
		font-size: 32rpx;
	}
	.notice-content{
		font-size: 28rpx;
		text-indent: 2em;
		line-height: 40rpx;
		margin-bottom: 76rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
}
.priview-people{
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	.notice_message{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #7F848A;
		image{
			height: 36rpx;
			width: 36rpx;
			margin-right: 30rpx;
		}
		span{
			color: #127FEC;
			margin-right: 40rpx;
		}
	}
}
.people-list{
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-bottom: 66rpx;
	ul{
		list-style: none;
		display: flex;
		width: 100%;
		padding: 0;
		align-items: center;
		// justify-content: space-between;
		font-size: 28rpx;
		color: #2A2E3F;
		li{
			margin-right: 20rpx;
		}
	}
}
.icon-image{
	display: flex;
	color: #A1A3B0;
	font-size: 28rpx;
	align-items: center;
	padding-left: 30rpx;
	box-sizing: border-box;
	margin-bottom: 22rpx;
	image{
		height: 36rpx;
		width: 36rpx;
		margin-right: 30rpx;
	}
}
.notice-filelist{
	ul{
		list-style: none;
		padding: 0;
		display: flex;
		align-items: center;
		width: 100%;
		padding-left: 94rpx;
		box-sizing: border-box;
		li{
			image{
				height: 86rpx;
				width: 86rpx;
				border-radius: 10rpx;
				margin-right: 16rpx;
			}
		}
	}
}
.notice-filelist2{
	ul{
		list-style: none;
		padding: 0;
		width: 100%;
		padding-left: 94rpx;
		box-sizing: border-box;
		li{
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			margin-bottom: 6px;
			span{
				cursor: pointer;
				color: #127FEC;
				margin-left: 20rpx;
			}
		}
	}
}
</style>