retail-app/pages/news/index.vue

<template>
	<view class="news">
		<mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="time">{{item.sendTime}}</view>
					<view class="new-card">
						<view class="news-cons">
							<view class="name">{{item.title}}</view>
							<view class="text ellipsis-2">{{item.msg}}</view>
						</view>
						<view class="news-detail" @click="toDetail(item.id)">
							<view class="txt">查看详情</view>
							<re-image imgSrc="/retail/mall/icon_more.png" width="24" height="24"></re-image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
import { msgPage } from '@/apis/news.js'
export default {
	components:{
        MescrollBody
    },
	data(){
		return{
			list: [{
				sendTime:'2024-3-31 12:85',
				msg:'消息内容写死的文本',
				title:'充值信息',

			}],
		}
	},
	mixins: [MescrollMixin],
	methods: {
		// 初始化
		initPage() {
			this.mescroll.resetUpScroll()
			this.mescroll.scrollTo(0, 300)
		},

		async upCallback(){
			this.mescroll.endErr()
			const res = await msgPage()
			if(res.code === 1){
				this.mescroll.endBySize(res.records.length, res.total)
			}
			
		},
		toDetail(id){
			uni.navigateTo({
				url:'/pages/system/index?id' + id
			})
		}
	},
}
</script>

<style lang="scss" scoped>
.news{
	padding: 32rpx 20rpx;
	.list{
		.list-item{
			.time{
				text-align: center;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				color: #989897;
			}
			.new-card{
				background-color: #fff;
				border-radius: 16rpx;
				.news-cons{
					padding: 32rpx 32rpx 24rpx;
					border-bottom: 2rpx solid #F0F2F4;
					.name{
						font-size: 32rpx;
						font-weight: 500;
						color: #363531;
						margin-bottom: 16rpx;
					}
					.text{
						font-size: 28rpx;
						color: #7C7C7B;
					}
				}
				.news-detail{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 26rpx 32rpx 22rpx;
					.txt{
						font-size: 28rpx;
						font-weight: 400;
						color: #363531;
					}
				}
			}
		}
	}
}
</style>