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

<template>
	<view>
		<u-navbar title="消息"  title-color="#101010" ></u-navbar>
		<!-- 消息列表 -->
		
			<view class="message-list" v-if="list.length">
				<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">
							
						</view>
					</view>
					<view class="content">
						<view class="title">
							<view class="title-name">
								{{list[0].name}}
							</view>
							<view class="title-time">
								{{list[0].pushTime}}
							</view>
						</view>
						<view class="value">
							账单提醒
						</view>
					</view>
				</view>
				
			</view>
			<u-divider :isnone="list.length==0"  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		<view class="message-list" v-if="false" >
			<view class="message-item"   @click="gotoUrl('/pages/message/messageList')" >
				<view class="icon">
					<image class="img" src="@/assets/img/antFill-notification.svg" mode=""></image>
				<view class="dot">
					
				</view>
				</view>
				<view class="content">
					<view class="title">
						<view class="title-name">
							停电通知
						</view>
						<view class="title-time">
							01-02
						</view>
					</view>
					<view class="value">
						接电力部门通知，明天（1月25日）因台区用电调调调调调调调调调
					</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>
		
		<Tabbar :current="1" ></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:[],
			}
		},
		onLoad() {
			this.getBillList()
		},
		methods: {
			messageList1(){
				if(this.list.length==1){
					this.gotoUrl('/pages/deductionRecord/billPush?site=1&id='+this.list[0].id)
					
				}else{
					this.gotoUrl('/pages/message/messageList?type=1')
				}
			},
			
			getBillList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.billList().then((response) => {
					uni.hideLoading();
					this.list=response.data.data;
				}).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>