jiuyiUniapp/jiuyi/pages/news/addFriend.vue

<script setup>
	/**
	 * 添加朋友
	 */

	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// vuex
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 用户列表
	const userList = reactive({
		data: [],
		pageNum: 1,
		pageSize: 10,
		total: 0,
	})
	const keyword = ref('')

	onReachBottom(() => {
		// 获取更多列表
		getMoreFriendList()
	})

	onPullDownRefresh(() => {
		refreshFriendList()
	})

	// 获取朋友列表
	function getSearchFriendList() {
		if (!keyword.value) {
			util.alert('请输入你想搜索的内容')
			return
		}

		api.news.searchFriendByName({
			path: [keyword.value],
			query: {
				pageNum: userList.pageNum,
				pageSize: userList.pageSize,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (userList.pageNum) userList.data.length = 0
				// 追加朋友列表
				userList.data.push(...rs.rows.map(item => {
					item.format_userPortrait = util.format_url(item.userPortrait, 'img')
					return item
				}))
				// 视频列表
				userList.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	// 重载朋友列表
	function refreshFriendList() {
		userList.pageNum = 1
		userList.total = 0
		getSearchFriendList()
	}

	// 获取更多朋友列表
	function getMoreFriendList() {
		if (userList.data.length >= userList.total) return
		userList.pageNum++
		getSearchFriendList()
	}

	// 同意好友申请
	function agreeFriend(item) {
		api.video.agreeFriend({
			path: [userinfo.value.userId, item.userId],
			query: {

			}
		}).then(rs => {
			if (rs.code === 200) {
				uni.showToast({
					title: '同意成功',
					icon: 'success',
					duration: 1500
				});
			} else {
				uni.showToast({
					title: rs.msg,
					icon: 'error',
					duration: 1500
				});
			}
		}).finally(() => {

		})

	}

	// 拒绝好友申请
	function refuseFriend(item) {
		api.video.refuseFriend({
			path: [userinfo.value.userId, item.userId],
			query: {

			}
		}).then(rs => {
			if (rs.code === 200) {
				uni.showToast({
					title: '拒绝成功',
					icon: 'success',
					duration: 1500
				});
			} else {
				uni.showToast({
					title: rs.msg,
					icon: 'error',
					duration: 1500
				});
			}

		}).finally(() => {

		})
	}

	// 获取朋友列表
	function getFriendList() {
		api.news.getFriendListPage({
			path: [userinfo.value.userId],
			query: {
				pageNum: userList.pageNum,
				pageSize: userList.pageSize,
			}
		}).then(rs => {
			if (rs.code == 200) {
				if (userList.pageNum) userList.data.length = 0
				// 追加朋友列表
				userList.data.push(...rs.rows.map(item => {
					item.format_userPortrait = util.format_url(item.userPortrait, 'img')
					return item
				}))
				// 视频列表
				userList.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	// 点击用户
	function handleUser(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoHome', {
				userId: item.userId,
			})
		})
	}

	/**
	 * 添加好友
	 * @param {Object} item 用户信息
	 */
	function handleAdd(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/news/applyFriend', {
				userId: item.userId,
				nickname: item.userNickname,
			})
		})
	}
</script>
<template>
	<view class="app">
		<view class="searchBox ptb20 bfff">
			<view class="search rows mlr20 ptb10 plr30 bar">
				<uni-icons type="search" />
				<input type="text" v-model="keyword" placeholder="用户名" class="f1 ml10" confirm-type="search" />
				<view class="btn bar sm colourful w120" @click="refreshFriendList">搜索</view>
			</view>
		</view>

		<view class="listArea plr30 bfff">
			<!--  -->
			<view class="item rows ptb30 c333 f32" v-for="(item,index) in userList.data" :key="index" @click="handleUser(item)">
				<view class="avatar fs0">
					<image class="wh100 cir" :src="item.format_userPortrait" mode="aspectFill" />
				</view>

				<view class="content f1 mlr20">
					<view class="name">{{item.userNickname}}</view>
					<view class="time c999 f22">{{item.createTime}}</view>
				</view>

				<template v-if="0">
					<view class="btns rows fs0" v-if="item.friendState == 1">
						<view class="btn black plr20" @click.stop="agreeFriend(item)">同意</view>
						<view class="btn cancel plr20 ml20" @click.stop="refuseFriend(item)">拒绝</view>
					</view>

					<view class="result fs0 c999" v-else-if="item.friendState == 2">已拒绝</view>
					<view class="result fs0 c999" v-else-if="item.friendState == 3">已同意</view>
				</template>
				<template v-else>
					<view class="btn black plr20" @click.stop="handleAdd(item)">添加好友</view>
				</template>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 60rpx;"></view>
	</view>
</template>

<style lang="scss" scoped>
	.search {
		background-color: #eaeaea;
	}

	// 
	.listArea {
		.item+.item {
			border-top: 1rpx solid #ddd;
		}
	}
</style>