safetyHome_wxapp/pages/index/index.vue

<template>
	<view style="background:rgba(245,245,245,1);opacity:1;">
		<view class="topBox">
			<image :src="photoData[swiperIndex].photo" style="width: 100%;height:391rpx;"></image>
			<!-- 当前绑定房屋信息 -->
			<view class="topBoxInfo">
				<view class="topInfo" :style="{marginTop:phoneHeight + 'px'}" @tap="selectHouse">
					<view v-if="adress">
						{{adress}}
					</view>
					<view v-else>
						<text>xx小区</text> <text>111楼</text> <text>2单元 801</text>
					</view>
					<view class="topIcon">
						<image src="../../static/home_combo_more@2x.png" style="width: 100%;height: 100%;margin-bottom: 5rpx;"></image>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="swiperBox">
					<swiper @change="changeImg" :current="swiperIndex" :indicator-dots="true" :autoplay="true" :interval="2000"
					 :duration="1000" style="width: 100%;height: 100%;" indicator-active-color="#298AFD" indicator-color="#fff">
						<swiper-item v-for="(item,index) in photoData" :key="index">
							<view class="swiper-item">
								<view style="border-radius: 15rpx;">
									<image :src="item.photo" style="width: 100%;height:342px;"></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!--功能栏  -->
				<view class="meau">
					<view style="width: 116rpx;height: 100%; text-align: center;line-height: 90rpx;" @tap="visitorPass">
						<view class="meauIcon">
							<image src="../../static/home_icon_password@2x.png" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="meauText">访客密码</view>
					</view>
					<view style="width: 116rpx;height: 100%;text-align: center;line-height: 90rpx;" @tap="openDoor">
						<view class="meauIcon" style="margin-left: 35rpx;">
							<image src="../../static/home_icon_open@2x.png" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="meauText">一键开门</view>
					</view>
					<view style="width: 116rpx;height: 100%;text-align: center;line-height: 90rpx;" @tap="onlineRepairs">
						<view class="meauIcon">
							<image src="../../static/home_icon_guarantee@2x.png" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="meauText">在线报修</view>
					</view>
					<view style="width: 116rpx;height: 100%; text-align: center;line-height: 90rpx;" @tap="onlineComplain">
						<view class="meauIcon">
							<image src="../../static/home_icon_complain@2x.png" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="meauText">在线投诉</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 物业公告 -->
		<view class="main">
			<view class="mainTitle">
				<view class="mainIcon">
					<image src="../../static/home_icon@2x.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="mainText">物业公告</view>
				<view class="moreBtn" @tap="moreBtn">
					更多
				</view>
			</view>
			<!-- 公告信息 -->
			<view class="item">
				<view class="mainInfo" v-for="(item,index) in list" :key="index" @tap="seeDetail(item.id)">
					<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.status==1">最新</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
				swiperIndex: 0, //当前显示轮播图的索引
				photoData: ["../../static/empower_image@2x.png", "../../static/login_bgground@2x.png"], //轮播图数据
				list: [], //物业公告数据
				adress: ''

			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
			this.getBannerData()
		},
		onShow() {
			this.adress = uni.getStorageSync('homeAdress')
			this.getNoticeList()
		},
		mounted() {
			
		},
		methods: {
			// 获取轮播图数据
			getBannerData() {
				this.http.httpRequest('/wxapplet/owner/AdvertPhoto/list', 'get', {}, true).then((res) => {
					console.log(res)
					if (res.code == 0) {
					  this.photoData=res.data.rows
					} else {
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				})
			},
			// 获取公告数据
			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) {
						uni.hideLoading()
						// 判断当前数据是否大于三条数据
						if (res.data.rows.length > 3) {
							this.list = res.data.rows.splice(0, 2)
						} else {
							this.list = res.data.rows
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 查看物业公告详情
			seeDetail(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			// 监听轮播图当前索引
			changeImg(e) {
				this.swiperIndex = e.detail.current
			},
			// 访客密码
			visitorPass() {
				uni.navigateTo({
					url: "./visitorPass"
				})
			},
			// 一键开门
			openDoor() {
				uni.navigateTo({
					url: "../openDoor/openDoor"
				})
			},
			// 在线保修
			onlineRepairs() {
				uni.navigateTo({
					url: "../onlineRpair/index"
				})
			},
			// 在线投诉
			onlineComplain() {
				uni.navigateTo({
					url: "../complain/index"
				})
			},
			// 更多跳转
			moreBtn() {
				uni.navigateTo({
					url: './more'
				})
			},
			// 选择房屋认证
			selectHouse() {
				uni.navigateTo({
					url: "./changeHouse"
				})
			}
		}
	}
</script>

<style>
	.topIcon {
		width: 14rpx;
		height: 9rpx;
		margin-left: 6rpx;

	}

	.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;
	}

	.main {
		width: 100%;
		margin-top: 20rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		overflow: hidden;
	}

	.mainIcon {
		width: 30rpx;
		height: 30rpx;
		/* border: 1rpx solid #333333; */
		margin-top: 6rpx;
		margin-right: 10rpx;
	}

	.mainText {
		width: 132rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.moreBtn {
		width: 100rpx;
		height: 50rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(238, 238, 238, 1);
		opacity: 1;
		border-radius: 26rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 50rpx;
		position: absolute;
		right: 0;
		top: 2rpx;
		color: #999999;
	}

	.mainTitle {

		position: relative;
		width: 688rpx;
		/* height: 44rpx; */
		margin: 0 auto;
		display: flex;
		margin-top: 40rpx;
	}

	.meauText {
		width: 100%;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		/* color: rgba(255, 255, 255, 1); */
		/* margin-top: 40rpx; */
	}

	.meauIcon {
		width: 60rpx;
		height: 60rpx;
		/* border: 1rpx solid #4CD964; */
		margin-left: 28rpx;
	}

	.meau {
		width: 590rpx;
		height: 124rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		/* border: 1rpx solid #FFFFFF; */
		display: flex;
		justify-content: space-between;
	}

	.swiperBox {
		width: 666rpx;
		height: 342rpx;
		border-radius: 14rpx;
		margin: 0 auto;
		/* border: 1rpx solid #333333; */
		margin-top: 48rpx;
	}

	.topBox {
		width: 100%;
		height: 718rpx;
		background-color: #FFFFFF;

	}

	.topBoxInfo {
		width: 100%;
		/* height: 688rpx; */
		position: absolute;
		top: 0;
		margin-top: 30rpx;
	}

	.topInfo {
		width: 505rpx;
		height: 36rpx;
		margin-left: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: rgba(255, 255, 255, 1);
		display: flex;

	}

	.swiperBox .swiperHeight {
		height: 100% !important;
	}
</style>