safetyHome_wxapp/pages/index/more.vue

<!--物业公告更多列表 -->
<template>
	<view>
		<view class="item">
			<!-- <view class="notInfo" v-show="visible">暂无公告信息</view> -->
			<view style="width:520rpx;margin: 0 auto;margin-top: 100rpx;" v-show="visible">
				<image src="../../static/notData.png" style="width:520rpx ;height: 520rpx;"></image>
				<view style="width:144rpx;height:50rpx;font-size:36rpx;margin: 0 auto;margin-top: 46rpx;">暂无数据</view>
			</view>
			<view class="mainInfo" v-for="(item,index) in listData" :key="index" @tap="seeDetail(item.id)" v-show="!visible">
				<view class="left">
					<view style="width: 100%;height: 42rpx;ont-size:30rx;font-family:PingFang SC;font-weight:bold;color:rgba(51,51,51,1);margin-top: 40rpx;">
						{{item.title}}
					</view>
					<view class="leftInfo">{{item.content}}</view>
					<view class="leftDate">
						<view class="leftTag" v-if="item.isShow>0">最新</view>
						<view style="width:230rpx;height:34rpx;font-size:24rpx;font-family:PingFang SC;font-weight:400;line-height:34rpx;color:rgba(204,204,204,1);position: absolute;right: 0;">{{(item.createDate).substr(0,16)}}</view>
					</view>
				</view>
				<view class="right">
					<image :src="item.img" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [],
				visible: true
			}
		},

		mounted() {
			this.getNoticeList()
		},
		methods: {
			// 获取公告数据
			getNoticeList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.http.httpRequest('/wxapplet/owner/notice/list', 'get', {
					comtyId: uni.getStorageSync('comtyId')
				}, true).then((res) => {
					console.log(res)
					if (res.code == 0) {
						// 判断当前是否有数据
						if (res.data.rows.length == 0) {
							this.visible = true
						} else {
							this.visible = false
						}
						this.listData = res.data.rows
						uni.hideLoading();
					} else {
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				})
			},
			// 查看物业公告详情
			seeDetail(item) {

				uni.navigateTo({
					url: './detail?id=' + item
				})
			}
		}
	}
</script>

<style>
	.notInfo {
		width: 100%;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		color: rgba(36, 36, 36, 1);
		margin: 0 auto;
		margin-top: 40rpx;
		text-align: center;
	}
	.leftTag {
		width: 56rpx;
		height: 28rpx;
		background: rgba(84, 162, 255, 1);
		opacity: 1;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 26rpx;
		margin-top: 6rpx;
		margin-right: 120rpx;
	}

	.leftDate {
		width: 100%;
		height: 34rpx;
		margin-top: 38rpx;
		display: flex;
		position: relative;
	}

	.left {
		width: 442rpx;
		height: 204rpx;
	}

	.leftInfo {
		width: 100%;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 16rpx;
	}

	.right {
		width: 207rpx;
		height: 204rpx;
		border-radius: 10px;

	}

	.mainInfo {
		width: 688rpx;
		height: 222rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid rgba(247, 247, 247, 1);
	}

	.item {
		width: 688rpx;
		margin: 0 auto;
		margin-top: 20rpx;

	}
</style>