Ai_GirlFriend/xuniYou/pages/friends/messageList.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_content">
						<view class="list_title">好友请求</view>
						<view class="list_friends">
							<view class="list_request fa sb" v-for="(item,index) in applyInfoList" :key="index">
								<view class="list_left f1 fa">
									<image :src="item.from_user.avatar" mode="aspectFills"></image>
									<view class="list_item f1">
										<view class="list_title h1">{{item.from_user.nickname?item.from_user.nickname:''}}</view>
										<view class="list_name h1">ID：{{item.from_user.user_number?item.from_user.user_number:''}}</view>
									</view>
								</view>
								<view class="list_right fa" v-if="item.status == 0">
									<view class="list_stats fa" @click="agreeClick(item.id)">
										<image src="/static/images/search_add.png" mode="widthFix"></image>
										同意
									</view>
									<view class="list_stats fa" @click="refuseClick(item.id)">
										<image src="/static/images/search_add.png" mode="widthFix"></image>
										拒绝
									</view>
								</view>
							</view>
						</view>
						<image class="list_add" src="/static/images/messageList_add.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		ApplyList,
		FriendHandle
	} 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
				},
				applyform: {
					id: '',
					status: 1
				},
				applyInfoList:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
		    this.applyInfoList = [];
		    this.applyList();
		},
		methods: {
			applyList() {
				ApplyList(this.form).then(res => {
					if (res.code == 1) {
						this.applyInfoList.push(...res.data.data)
						console.log(this.applyInfoList)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
					}
				})
			},
			friendHandle() {
				FriendHandle(this.applyform).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
						this.page = 1;
						this.applyInfoList = [];
						this.applyList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							position: 'top'
						})
					}
				})
			},
			onScrollToLower() {
			    ++this.form.page
			    console.log('触底事件')
			    this.applyList()
			},
			agreeClick(id){
				this.applyform.id = id
				this.applyform.status = 1
				console.log(this.applyform)
				this.friendHandle()
			},
			refuseClick(id){
				this.applyform.id = id
				this.applyform.status = 2
				console.log(this.applyform)
				this.friendHandle()
			},
			tosearch() {
				uni.navigateTo({
					url: '/pages/friends/search'
				})
			},
			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_left image {
		width: 96rpx;
		height: 96rpx;
		display: block;
		border-radius: 100rpx;
		flex-shrink: 0;
	}

	.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;
		margin: 70rpx 0 0 0;
	}

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