jiuyiUniapp/jiuyi2/pages/news/newFriend.vue

<script setup>
	/**
	 * 新的朋友
	 */

	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app'
	// 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 friend = ref({})
	// 
	const {
		proxy
	} = getCurrentInstance()

	onLoad(() => {
		getFriendList()
		addListener()
	})

	onUnload(() => {
		offListener()
	})

	// 开启监听
	function addListener() {
		let fn = function(event) {
			getFriendList()
		}

		// 开启监听
		uni.$chat.on(TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED, fn)
	}

	// 移除监听
	function offListener() {
		uni.$chat.off(TencentCloudChat.EVENT.FRIEND_APPLICATION_LIST_UPDATED, () => {})
	}

	// 同意好友申请
	function agreeFriend(item) {
		friend.value = {
			...item
		}
		// 打开弹窗
		proxy.$refs.friend.open()
	}

	// 确定添加好友
	function addFriendConfirm() {
		// 同意好友申请
		uni.$chat.acceptFriendApplication({
			userID: friend.value.userID,
			remark: friend.value.remark || '',
			type: TencentCloudChat.TYPES.SNS_APPLICATION_AGREE_AND_ADD
		}).then(rs => {
			// 打开弹窗
			proxy.$refs.friend.close()
		})
	}

	// 拒绝好友申请
	function refuseFriend(item) {
		util.alert({
			content: '确认拒绝好友？',
		}).then(rs => {
			if (!rs.confirm) return
			// 拒绝好友申请
			uni.$chat.refuseFriendApplication({
				userID: item.userID,
			})
		})
	}

	// 获取添加朋友列表
	function getFriendList() {
		uni.$chat.getFriendApplicationList().then(rs => {
			if (rs.code === 0) {
				const result = rs.data
				userList.data = result.friendApplicationList.map(node => {
					node.formatTime = util.formatTime('yyyy-MM-dd hh:mm', node.time)
					return node
				})
			}
		})
	}

	/**
	 * 点击用户
	 * @param {Object} item 用户信息
	 */
	function handleUser(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/videoHome', {
				userId: item.userID,
			})
		})
	}

	// 填入对方昵称
	function pushNickname() {
		friend.value.remark = friend.value.nick
	}

	// 我的二维码
	function myQr() {
		uni.navigateTo({
			url: '/pages/news/myQr'
		})
	}
</script>

<template>
	<view class="app">
		<view class="searchBox ptb20 bfff">
			<navigator url="/pages/news/addFriend" hover-class="none">
				<view class="search rows mlr20 ptb10 plr30 bar">
					<uni-icons type="search" />
					<view class="placeholderStyle f1 plr15">添加朋友</view>
					<view class="btn bar sm colourful w120">搜索</view>
				</view>
			</navigator>
		</view>

		<view class="rows ptb20 plr25 c666 f28">
			<view class="">申请列表</view>
			<view class="c999" @click="myQr">我的二维码</view>
		</view>

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

					<view class="content f1 mlr20">
						<view class="name">{{item.nick}}</view>
						<view class="time mt10 c999 f22">{{item.formatTime}}</view>
					</view>

					<!-- 发给我的好友申请 -->
					<view class="btns rows fs0" v-if="item.type == TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME">
						<view class="btn black plr20" @click.stop="agreeFriend(item)">同意</view>
						<view class="btn cancel plr20 ml20" @click.stop="refuseFriend(item)">拒绝</view>
					</view>

					<!-- 我发起的好友申请 -->
					<view class="btns rows fs0" v-else-if="item.type == TencentCloudChat.TYPES.SNS_APPLICATION_SENT_BY_ME">
						<view class="c999">等待对方同意</view>
					</view>
				</view>

				<view class="mt20 c999 f28">招呼语：{{item.wording}}</view>
			</view>
		</view>

		<view class="mtb20 nomore" v-if="!userList.data[0]">暂无申请~</view>

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

		<!-- 设置备注 -->
		<uni-popup ref="friend" type="center">
			<view class="friendAlt popMid plr20 bfff">
				<view class="header rows ptb30 f32">
					<view class="">给用户 {{friend.nick}} 设置备注</view>
					<uni-icons type="closeempty" @click="$refs.friend.close()" />
				</view>

				<view class="main mlr30">
					<view class="txtplus ptb20 plr20 br10">
						<input type="text" v-model="friend.remark" placeholder="好友备注" />
					</view>
					<view class=" mt10 c666 f28" @click="pushNickname">
						<text class="push">填入</text>
						<text>对方昵称</text>
					</view>

					<view class="btn lg bar black mtb30" @click="addFriendConfirm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

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

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

	// 朋友弹窗
	.friendAlt {

		// 
		.txtplus {
			background-color: #eee;
		}

		// 
		.push {
			color: #20D200;
		}
	}
</style>