jiuyiUniapp/jiuyi2/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,
	getCurrentInstance
} from 'vue'
import {
	onLoad,
	onReady,
	onReachBottom,
	onPullDownRefresh
} from '@dcloudio/uni-app'
// 代理
const {
	proxy
} = getCurrentInstance()
// 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('')
// 表单
const form = reactive({
	Remark: '',
	AddWording: '',
})
// 朋友
const friend = ref({})

onLoad((option) => {
	if (option.account) {
		keyword.value = option.account
		refreshFriendList()
	}
})

onReady(() => {
	// proxy.$refs.friendRef.open()
})

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

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

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

	api.news.searchUsers({
		query: {
			searchValue: keyword.value,
			pageNum: userList.pageNum,
			pageSize: userList.pageSize,
		}
	}).then(rs => {
		if (rs.code == 200) {
			const result = rs.data
			if (userList.pageNum) userList.data.length = 0
			// 追加朋友列表
			userList.data.push(...result.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 handleUser(item) {
	uni.navigateTo({
		url: util.setUrl('/pages/index/videoHome', {
			userId: item.userId,
		})
	})
}

/**
 * 添加好友
 * @param {Object} item 用户信息
 */
function handleAdd(item) {
	friend.value.userId = item.userId
	friend.value.userName = item.userName
	friend.value.AddWording = `你好，我是${userinfo.value.userNickname}`
	proxy.$refs.friendRef.open()
}

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

// 发送好友申请
function addFriendConfirm() {
	api.news.addFriend({
		data: [{
			toAccount: friend.value.userId,
			addWording: friend.value.AddWording,
			remark: friend.value.Remark,
		}],
	}).then(rs => {
		if (rs.code == 200) {
			util.alert('已发送好友申请，请等待对方同意')
			proxy.$refs.friendRef.close()
			return
		}
		util.alert({
			content: rs.msg,
			showCancel: false,
		})
	})
}
</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" focus="true" 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.imageUrl" mode="aspectFill" />
				</view>

				<view class="content f1 mlr20">
					<view class="name">{{ item.userName }}</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="">同意</view>
						<view class="btn cancel plr20 ml20" @click.stop="">拒绝</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>

	<!-- 设置备注 -->
	<uni-popup ref="friendRef" type="bottom">
		<view class="friendAlt popBot plr20 bfff">
			<view class="header rows ptb30 f32">
				<view class="">发送好友申请</view>
				<uni-icons type="closeempty" @click="$refs.friendRef.close()" />
			</view>

			<view class="main mlr30">
				<view class="txtplus inputBox mtb30 ptb20 plr20 br10">
					<input type="text" v-model="friend.AddWording" placeholder="填写招呼语" />
				</view>

				<view class="txtplus inputBox mtb30 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>
</template>

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

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