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>
		<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();
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			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();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			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();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
			
		}
	}
</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>