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

<template>
	<view>
		<u-navbar :title="title"  title-color="#101010" ></u-navbar>
		<view class="main" v-if="type=='AA'">
			<view class="item item-main" v-for="(item,i) in list"
			 
			  @click="gotoUrl('/pages/deductionRecord/billPush?site=1&id='+item.id)"
			  
			 :key="i">
				 <view style="width: 100%;">
					 <view class="item-message">
						<view>{{item.name}}</view>
						<view class="billAmount">￥{{item.billAmount}}元</view>
					 </view>
					 
					 <view class="item-time" style="display: flex;justify-content: space-between;">
						  <!-- {{item.tenantName}} -->
						
						<view>{{item.createTime}}</view>
						<view >{{item.payTime?'已支付':''}}</view>
					 </view>
				 </view>
				 <view>
					 <u-icon name="arrow-right" style="margin-left: 10rpx;" size="32" color="#999999"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="main" v-else >
			<view class="item" v-for="(item,i) in list"
			 
			  @click="gotoUrlBtn(item)"
			  
			 :key="i">
				<view class="item-message">
					<view>{{item.title}}</view>
					<view v-if="item.jumpStatus" class="gotoBtn">查看详情</view>
				</view>
				<view class="item-time2">
					<view v-html="item.content"></view>
					
				</view>
				<view class="item-time" style="display: flex;justify-content: space-between;">
					  <!-- {{item.tenantName}} -->
					
					<view>{{item.createTime}}</view>
				
				</view>
			</view>
			
		</view>
		<u-divider :isnone="list.length==0"   nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/message.js'
	
	export default {
		data() {
			return {
				type:0,
				formData:{
					pageIndex:1,
					pageSize:20,
				},
				typeName:"",
				list:[],
				recordsTotal:0
			}
		},
		computed:{
			title(){
				if(this.type=='AA'){
					return  '账单提醒'
				}else if(this.typeName){
					return  this.typeName
				}else{
					return  '消息提醒'
				}
			}
		},
		onLoad(op) {
			if(op.type){
				this.type=op.type;
				this.formData.type=op.type;
			}
			if(op.typeName){
				this.typeName=op.typeName;
				
			}
			
			this.getList()
		},
		onReachBottom() {
			
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			gotoUrlBtn(item){
				if(item.jumpStatus){
					this.gotoUrl(item.jumpUrl+'&site=1')
				}
			},
			getList(){
				if(this.type=='AA'){
					this.getBillList()
				}else{
					this.getMessageList()
				}
				
			},
			myLoadmore() {
				this.formData.pageIndex += 1;
				this.getList()
			},
			getMessageList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.messageList(this.formData).then((res) => {
					uni.hideLoading();
					if(this.formData.pageIndex==1){
						this.list = [
							
							...res.data.data
						];
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
					
					//this.list=response.data.data;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getBillList(){
				uni.showLoading({
					mask:true,title:'加载中...'
				})
				API.billList(this.formData).then((res) => {
					uni.hideLoading();
					if(this.formData.pageIndex==1){
						this.list = [
							
							...res.data.data
						];
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
					
					//this.list=response.data.data;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		margin-top: 24rpx;
		.item-main{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		   
		.item{
			padding: 32rpx;
			border-bottom: 1px solid rgba(244,244,244,1);
			.item-message{
				line-height: 44rpx;
				display: flex;
				font-size: 28rpx;
				justify-content: space-between;
				color: rgba(51,51,51,1);
				.billAmount{
					    color: #F44336;
				}
				.gotoBtn{
					color:#1677FF
				}
			}
			.item-time2{
				color: rgb(153,153,153);
				font-size: 28rpx;
				margin-top: 16rpx;
			}
			.item-time{
				color: rgb(153,153,153);
				font-size: 24rpx;
				margin-top: 16rpx;
			}
		}
	}

</style>