safetyHome_wxapp/pages/index/detail.vue

<!-- 物业公告信息详情 -->
<template>
	<view class="pageBg">
		<image src="../../static/announcement_bgimage@2x.png" style="width: 100%;height: 100%;"></image>
		<view class="content">
			<view style="display: flex;" :style="{marginTop:phoneHeight + 'px'}">
				<view style="width: 48rpx;height: 48rpx;margin-left: 24rpx;margin-top: 18rpx;" @tap="back">
					<image src="../../static/icon_back@2x(1).png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="topTitle">物业公告</view>
			</view>
			<view class="infoBox">
				<view class="infoTitle">
					{{data.title}}
				</view>
				<view class="infoDate">
					<view style="">{{(data.createDate).substr(0,10)}}</view>
					<view>阅读 15</view>
				</view>
				<view class="main">
					<text style="margin-top: 20rpx;">
						{{data.content}}
					</text>
				</view>
			</view>
			<view class="company">青海旺业物业有限公司</view>
			<view class="date">
				{{(data.createDate).substr(0,4)}}年{{(data.createDate).substr(5,2)}}月{{(data.createDate).substr(8,2)}}日
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
				id: '',
				data:{}
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
			
		},
		onLoad(option) {
			this.id = option.id
		},
		mounted(){
			this.getdetail()
		},
		methods: {
			// 获取详情信息
			getdetail() {
				uni.showLoading({
					mask:true,
					title:'加载中'
				})
				this.http.httpRequest('/wxapplet/owner/notice/getNotice', 'get', {
					id: Number(this.id),
					comtyId: Number(uni.getStorageSync('comtyId'))
				}, true).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this.data=res.data
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				})
			},
			// 返回上个页面
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.date {
		width: 90%;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(41, 138, 253, 1);
		margin: 0 auto;
		position: absolute;
		bottom: 160rpx;
		left: 88rpx;
	}

	.company {
		width: 90%;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(41, 138, 253, 1);
		margin: 0 auto;
		position: absolute;
		bottom: 206rpx;
		left: 88rpx;
	}

	.content {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.main {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-top: 2rpx solid rgba(244, 244, 244, 1);
	}

	.infoDate {
		width: 90%;
		height: 34rpx;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);

	}

	.infoTitle {
		/* width: 132rpx; */
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		margin-top: 180rpx;
		margin-left: 30rpx;
	}

	.infoBox {
		width: 80%;
		height: 900rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 46rpx;
		/* border: 1rpx solid #333333; */
		/* background-color: #FFFFFF; */
	}

	.pageBg {
		width: 100%;
		height: 100vh;
		/* background-image: url(../../static/announcement_bgimage@2x.png); */
		background-size: 100% 100%;

	}

	.topTitle {
		width: 140rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		/* color: #333333; */
		margin: 0 auto;
		padding-top: 20rpx;
	}
</style>