uniapp-qxk/packages/notify/notify.vue

<template>
	<view style="padding-bottom: 30px;">
		<view class="notify-panel" v-for="(item,index) in datas" :key="index" @click="toDetail(item)">
			<view class="notify-panel-top">
				<view class="notify-dot"></view>
				<view class="notify-tips">收到一条新消息</view>
				<view class="notify-time">{{item.create_time}}</view>
			</view>
			<view class="notify-panel-bottom">{{item.title}}</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import { notify } from '@/service/index.js';
	
	export default {
		onReachBottom(){
			console.log("onReachBottom")
			if(this.status == 'loadmore'){
				this.fetchDatas(this.page + 1)
			}
		},
		onLoad(){
			this.fetchDatas()
		},
		data() {
			return {
				datas:[],
				page:1,
				status: 'nomore',
			}
		},
		methods: {
			async fetchDatas(page = 1){
				let res = await notify(page)
				if(res.data.datas.current_page == 1){
					this.datas = res.data.datas.data
				}else{
					this.datas = this.datas.concat(res.data.datas.data)
				}
				if(res.data.datas.prev_page_url){
					 this.status ='loadmore'
				}else{
					this.status = 'nomore'
				}
				this.page = res.data.datas.current_page
				console.log("fetchDatas",res)
			},
			toDetail(item){
				this.$url('/packages/article/article?type=notify_detail&id='+item.id)
			}
		}
	}
</script>

<style lang="scss">
.notify-panel{
	display: flex;
	flex-direction: column;
	background-color: white;
	margin-bottom: 10rpx;
}
.notify-panel-top{
	display: flex;
	align-items: center;
	margin-left: 32rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
 .notify-dot {
	 width: 12rpx;
	 height: 12rpx;
	 background-color: red;
	 border-radius: 6rpx;
	 margin-right: 10rpx;

 }
 .notify-panel-bottom{
	margin-left: 32rpx; 
	margin-bottom: 30rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #222222;
 }
 .notify-tips{
	 margin-right: 110rpx;
	 font-size: 32rpx;
	 font-weight: 500;
	 color: #222222;
	 line-height: 44rpx;
 }
 .notify-time{
	 font-size: 28rpx;
	 font-weight: 400;
	 color: #777777;
	 line-height: 40rpx;
 }

</style>