jp-housekeep-hall/pages/message/message.vue

<template>
	<view>
		<u-navbar title="消息"  title-color="#101010" ></u-navbar>
		<!-- 消息列表 -->
		
			<view class="message-list" >
				<view class="message-item"  @click="messageList1()" >
					<view class="icon icon2">
						<image class="img" src="@/assets/img/antFill-account-book.svg" mode=""></image>
						<view class="dot" v-if="headlineBill.unReadtNum" >
							
						</view>
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								账单提醒
							</view>
							<view class="title-time" v-if="headlineBill.billPush">
								{{headlineBill.billPush.createTime}}
							</view>
							<view class="title-time"  v-else>
								无
							</view>
						</view>
						<view class="value" v-if="headlineBill.billPush" >
							{{headlineBill.billPush.name}}
						</view>
					</view>
				</view>
				
			</view>
			
		<view class="message-list"  v-if="messageList.length"  >
			<view class="message-item"  v-for="(item,i) in messageList"  :key="i"
			v-show="item.message"
			  @click="gotoUrl('/pages/message/messageList?type='+item.typeId+'&typeName='+item.typeName)" >
				<view class="icon" :class="'icon'+item.typeId">
					<image class="img" v-if="item.iconUrl" :src="item.iconUrl" mode=""></image>
					
					<image class="img" v-else src="@/assets/img/antFill-notification.svg" mode=""></image>
				<view class="dot" v-if="item.unReadtNum">
					
				</view>
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							{{item.typeName}}
						</view>
						<view class="title-time" v-if="item.message">
							{{item.message.createTime}}
						</view>
					</view>
					<view class="value" v-if="item.message" v-html="item.message.content">
						 
					</view>
				</view>
			</view>
			
			<!-- <view class="message-item">
				<view class="icon icon2">
					<image class="img" src="@/assets/img/antFill-account-book.svg" mode=""></image>
				
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							余额提醒
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						租户您好，贵司账户余额不足100元，请尽快充值充值
					</view>
				</view>
			</view> -->
			<!-- 
			<view class="message-item">
				<view class="icon icon3">
					<image class="img" src="@/assets/img/fas fa-bell.svg" mode=""></image>
				
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							故障报警
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						本园区11楼所在楼层电表网络故障，我们会尽快处处处处
					</view>
				</view>
			</view>
			
			<view class="message-item">
				<view class="icon icon4">
					<image class="img" src="@/assets/img/fas fa-exclamation-triangle Copy 1.svg" mode=""></image>
				
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							断电通知
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						租户您好，截止2月18日0时，贵司账户余额已不足足足足足
					</view>
				</view>
			</view>
			<view class="message-item">
				<view class="icon icon5">
					<image class="img" src="@/assets/img/fas fa-chart-pie.svg" mode=""></image>
				
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							电费月度账单
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						截止2024年01月，您家电表止码8652，用电12888888
					</view>
				</view>
			</view>
			
			<view class="message-item">
				<view class="icon icon6">
					<image class="img" src="@/assets/img/md-watch_later.svg" mode=""></image>
				
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							租约到期提醒
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						用户您好，您的租约即将于2月14日到期，如需续续续
					</view>
				</view> 
			</view>-->
		</view>
		<u-divider :isnone="list.length==0&&messageList.length==0"  nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>
		<Tabbar :current="1"  ref="tabbarMain"   :prefetchNum="prefetchNum" ></Tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/message.js'
	
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				list:[],
				headlineBill:{},
				messageList:[],
				prefetchNum:0
			}
		},
		onLoad() {
		
			
		},
		onShow() {
			
			this.prefetch()
		},
		methods: {
			prefetch(){
				API.prefetch({
					
				}).then((response) => {
					this.prefetchNum=response.data
					
					this.getBillList()
					this.getMessageTypeList()
				}).catch(error => {
					//uni.hideLoading();
					
				})
			},
			messageList1(){
				this.gotoUrl('/pages/message/messageList?type=AA&typeName=账单提醒')
				
			},
			getMessageTypeList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.messageTypeList().then((response) => {
					uni.hideLoading();
					this.messageList=response.data.typeList;
				}).catch(error => {
					uni.hideLoading();
					
				})
			},
			getBillList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.headlineBill().then((response) => {
					uni.hideLoading();
					this.headlineBill=response.data;
					var num=response.data.unReadtNum;
					
					if (this.$refs.tabbarMain) {
						this.$refs.tabbarMain.setprefetchNum(this.prefetchNum+num);
					}
					
				}).catch(error => {
					uni.hideLoading();
					
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.message-list{
		background-color: #fff;
		.message-item{
			display: flex;
			
			padding: 32rpx;
			border-bottom: 1px solid rgba(240,240,240,1);
			.icon{
				width: 96rpx;
				height: 96rpx;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
			.img{
				width: 56rpx;
				height: 56rpx;
			}
			.dot{
				width: 20rpx;
				height: 20rpx;
				border-radius:999px;
				background-color: rgba(255,0,0,1);
				position: absolute;
				top:-6rpx;
				right:-6rpx;
			}
			}
			.icon2{
				background: linear-gradient(180deg, rgba(121,172,255,1) 0%,rgba(57,132,255,1) 100%);
				color: rgba(255,255,255,1);
			}
			.icon3{
				background: linear-gradient(180.29deg, rgba(255,214,125,1) 0.9%,rgba(255,150,0,1) 100.4%);
			}
			.icon4{
background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
			}
			.icon5{
				background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%);
			}
			.icon6{
				background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);
			}
			.content{
				flex:1;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title-name{
						color: rgb(16,16,16);
						font-size: 32rpx;
					}
					.title-time{
						color: rgb(140,140,140);
						font-size: 24rpx;
					}
				}
				.value{
					width: 560rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
	
					font-size: 24rpx
				}
			}
		}
	}

</style>