Ai_GirlFriend/xuniYou/pages/friends/officialList.vue

<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
			title="消息列表"></uni-nav-bar>
		<view class="back"></view>
		<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar @scrolltolower="onScrollToLower">
			<view class="body">
				<view class="list">
					<view class="list_contents">
						<view class="list_title">官方消息</view>
						<view class="list_friends">
							<view class="list_request" v-for="(item,index) in msgInfoList" :key="index" @click="toofficialListDetail(item)">
								<view class="list_left f1 fa">
									<view class="list_msg">
										<image src="/static/images/messageList_logo.png" mode="aspectFills"></image>
										<text v-if="item.is_read==0"></text>
									</view>
									<view class="list_item f1">
										<view class="list_title h1">{{item.content}}</view>
										<view class="list_name h1">{{item.createtime_text}}</view>
									</view>
								</view>
							</view>
						</view>
						<image class="list_message" src="/static/images/messageList_message.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		MsgLists,
	} from '@/utils/api.js'
	import notHave from '@/components/not-have.vue';
	import topSafety from '@/components/top-safety.vue';
	import tabBar from '@/components/tab-bar.vue';
	export default {
		components: {
			notHave,
			topSafety,
			tabBar,
		},
		data() {
			return {
				form: {
					page: 1
				},
				msgInfoList:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
		    this.msgInfoList = [];
		    this.msgLists();
		},
		methods: {
			msgLists() {
				MsgLists(this.form).then(res => {
					if (res.code == 1) {
						this.msgInfoList.push(...res.data.data)
						console.log(this.msgInfoList)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
					}
				})
			},
			onScrollToLower() {
			    ++this.form.page
			    console.log('触底事件')
			    this.msgLists()
			},
			tosearch() {
				uni.navigateTo({
					url: '/pages/friends/search'
				})
			},
			toofficialListDetail(item) {
				uni.navigateTo({
					url: '/pages/friends/officialListDetail?item=' + JSON.stringify(item)
				})
			},
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F8FA;
	}
</style>
<style>
	.page {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.scroll-view {
		overflow: hidden;
	}

	.body {
		position: relative;
		padding: 0 60rpx 60rpx 60rpx;
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 436rpx;
		background: linear-gradient(180deg, #EAD6FF 0%, rgba(255, 255, 255, 0) 100%);
	}

	.list {
		position: relative;
		padding: 68rpx 0 0 0;
	}

	.list_content {
		position: relative;
	}

	.list_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.list_friends {
		position: relative;
		margin: 30rpx 0 0 0;
	}

	.list_request {
		position: relative;
		margin: 0 0 30rpx 0;
		padding: 32rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.list_left {
		position: relative;
		overflow: hidden;
	}
	.list_msg{
		position: relative;
	}

	.list_left image {
		width: 96rpx;
		height: 96rpx;
		display: block;
		border-radius: 100rpx;
		flex-shrink: 0;
	}
	.list_msg text{
		position: absolute;
		right: 0;
		top: 0;
		width: 20rpx;
		height: 20rpx;
		border-radius: 100rpx;
		background: #ff0000;
	}

	.list_item {
		position: relative;
		margin: 0 0 0 20rpx;
		overflow: hidden;
	}

	.list_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
		line-height: 50rpx;
	}

	.list_name {
		font-weight: 400;
		font-size: 28rpx;
		color: #B5B5B5;
		line-height: 50rpx;
	}

	.list_right {
		position: relative;
	}

	.list_right image {
		margin: 0 5rpx 0 0;
		width: 30rpx;
		height: 30rpx;
	}
	.list_stats{
		margin: 0 0 0 20rpx;
		padding: 5rpx 22rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 50rpx;
		border-radius: 226rpx;
		border: 1rpx solid #DCDCDC;
	}

	.list_add {
		position: absolute;
		right: 0;
		top: -40rpx;
		width: 126rpx;
		height: 126rpx;
		display: block;
	}

	.list_contents {
		position: relative;
	}

	.list_message {
		position: absolute;
		right: 0;
		top: -20rpx;
		width: 94rpx;
		height: 94rpx;
		display: block;
	}
</style>