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"></image> -->
			<view class="topBg" :style="{paddingTop:phoneHeight + 'px'}"></view>
			<!-- 当前绑定房屋信息 -->
			<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="">
									<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="notInfo" v-show="visible">暂无公告信息</view> -->
				<view style="width:300rpx;margin: 0 auto;margin-top: 10rpx;" v-show="visible">
					<image src="../../static/notData.png" style="width:300rpx ;height: 300rpx;"></image>
					<view style="width:144rpx;height:50rpx;font-size:36rpx;margin: 0 auto;margin-top: 10rpx;">暂无数据</view>
				</view>
				<view class="mainInfo" v-for="(item,index) in list" :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">
							<!-- v-if="item.status==1" -->
							<view class="leftTag">最新</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>
		<!-- 认证房屋是否通过提示 -->
		<uniPopup ref='popup' type="center">
			<view style="width: 600rpx;height: 522rpx;background-color: #fff;border-radius: 10rpx;" class="popupBox">
				<image src="../../static/auditing_popup.png" style="width:85%;height: 100%;margin-top: -50rpx;margin-left: 30rpx;"></image>
				<view class="popupTitle" v-if="status==1">当前认证房屋正在审核中</view>
				<view class="popupTitle" v-else-if="status==4">当前暂无房屋绑定,请重新认证</view>
				<button class="popupBtn" @tap="popupClose" v-if="status==1">我知道了</button>
				<button class="popupBtn" @tap="goTapHouse" v-else-if="status==4">去认证</button>
			</view>
		</uniPopup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
				swiperIndex: 0, //当前显示轮播图的索引
				photoData: ["../../static/empower_image@2x.png", "../../static/login_bgground@2x.png"], //轮播图数据
				list: [], //物业公告数据
				adress: '',
				visible: true,
				status: ''
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
			this.getBannerData()
			this.getUserInfo()
		
		},
		onLoad() {
			this.getStatus()
			this.status = uni.getStorageSync('houseStatus')
		},
		onShow() {
			this.getStatus()
				this.status = uni.getStorageSync('houseStatus')
			this.adress = uni.getStorageSync('homeAdress')
			this.getNoticeList()
		},
		mounted() {

		},
		methods: {
			//重新认证房屋
			goTapHouse() {
				uni.navigateTo({
					url: '../authentication/city'
				})
				this.$refs.popup.close()
			},
			// 关闭弹窗
			popupClose() {
				this.$refs.popup.close()
			},
			// 获取当前房屋认证状态
			getStatus() {
				this.http.httpRequest('/wxapplet/ownersid/getHouseState', 'get', {
					cardNo: uni.getStorageSync('idNumber'),
					comtyId: uni.getStorageSync('comtyId'),
					houseId: uni.getStorageSync('homeId'),
				}, true).then((res) => {
					if (res.code == 0) {
						this.status = res.data.houseStatus
						uni.setStorageSync('houseStatus', res.data.houseStatus)
					}
				})
			},
			//把base64转换成图片
			getBase64ImageUrl(data) {
				/// 获取到base64Data
				var base64Data = data;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = uni.arrayBufferToBase64(uni.base64ToArrayBuffer(base64Data))
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				// 刷新数据
				return base64ImgUrl
			},
			// 获取用户信息
			getUserInfo() {
				this.http.httpRequest('/wxapplet/ownersid/getUser', 'get', {
					userId: uni.getStorageSync('userId')
				}, true).then((res) => {
					if (res.code == 0) {
						uni.setStorageSync('userName', res.data.loginName)
						uni.setStorageSync('userPhone', res.data.phoneNum)
						// 判断当前返回值是否是网络路径图片
						if (res.data.avatar.indexOf('https://') == -1) {
							uni.setStorageSync('headImg', this.getBase64ImageUrl(res.data.avatar))
						} else {
							uni.setStorageSync('headImg', res.data.avatar)
						}
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	'icon': 'none'
						// })
					}

				}).catch(() => {})
			},
			// 获取轮播图数据
			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) {
						// 判断当前数据是否大于三条数据
						if (res.data.rows.length == 0) {
							this.visible = true
						} else if (res.data.rows.length > 3) {
							this.list = res.data.rows.splice(0, 3)
							this.visible = false
						} else {
							this.list = res.data.rows
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							'icon': 'none'
						})
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 查看物业公告详情
			seeDetail(id) {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			// 监听轮播图当前索引
			changeImg(e) {
				this.swiperIndex = e.detail.current
			},
			// 访客密码
			visitorPass() {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: "./visitorPass"
				})
			},
			// 一键开门
			openDoor() {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: "../openDoor/openDoor"
				})
			},
			// 在线保修
			onlineRepairs() {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: "../onlineRpair/index"
				})
			},
			// 在线投诉
			onlineComplain() {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: "../complain/index"
				})
			},
			// 更多跳转
			moreBtn() {
				//判断当前房屋是否认证成功
				if (this.status == 1 || this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: './more'
				})
			},
			// 选择房屋认证
			selectHouse() {
				//判断当前房屋是否认证成功
				if (this.status == 4) {
					this.$refs.popup.open()
					return
				}
				uni.navigateTo({
					url: "./changeHouse"
				})
			}
		}
	}
</script>

<style lang="scss">
	.popupClose {
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;

	}
	.topBg {
		width: 100%;
		height: 110rpx;
		background: rgba(41, 138, 253, 1);
	}
	.popupBtn {
		width: 342rpx;
		height: 80rpx;
		position: absolute;
		bottom: 80rpx;
		left: 128rpx;
		background: rgba(41, 138, 253, 1);
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.popupTitle {
		width: 400rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #999999;
		position: absolute;
		bottom: 232rpx;
		left: 145rpx;
	}

	.popupImage {
		width: 100%;
		height: 300rpx;
		/* 	background-image: url(../../static/success_popup@2x.png);
	 position: absolute;
	 top: -64rpx; */

	}

	.item {
		.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: 100rpx;
			text-align: center;
		}
	}

	.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: 55rpx;
		overflow: hidden;
	}

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

	}

	.topBoxInfo {
		width: 100%;
		/* height: 688rpx; */
		position: absolute;
		top: 0;
		margin-top: 30rpx;
		// background:rgba(41,138,253,1);
	}

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