Ai_GirlFriend/xuniYou/pages/friends/search.vue

<template>
	<view>
		<uni-nav-bar fixed statusBar right-text="取消" :border="false" background-color="#FFFFFF" @clickRight="cancel"
			:showMenuButtonWidth="true">
			<template v-slot:left>
				<view class="fa">
					<image class="left_return" @click="back" src="/static/images/return.png" mode="widthFix">
					</image>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入ID或名称"
							v-model="form.search" @confirm="confirm" />
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<view class="body">
			<view class="list">
				<view class="list_content fa sb" v-for="(item, index) in friendList" :key="index">
					<view class="list_module fa f1">
						<image :src="item.avatar ? item.avatar : ''" mode="aspectFill"></image>
						<view class="list_detail f1">
							<view class="list_name h1">{{ item.nickname ? item.nickname : '' }}</view>
							<view class="list_id h1">ID：{{ item.user_number ? item.user_number : '' }}</view>
						</view>
					</view>
					<view class="list_add fa" @click="addClick(item.id)">
						<image src="/static/images/search_add.png" mode="widthFix"></image>添加
					</view>
				</view>
			</view>
			<view class="not" v-if="friendList.length == 0">
				<image
					src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/3df8bbb66033583f5f4d9fa92f50ee6d.png"
					mode="widthFix"></image>
				<view class="not_title">暂无好友</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	FriendSearch,
	FriendApply
} 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: {
				search: '',
				page: 1,
			},
			addfriend: {
				friend_id: '',
				message: '',
			},
			friendList: [],
			getMenuInfoList: '',
		}
	},
	onLoad() {

	},
	onShow() {
		// #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
	},
	onReachBottom() {
		++this.form.page
		this.friendSearch()
	},
	methods: {
		friendSearch() {
			FriendSearch(this.form).then(res => {
				if (res.code == 1) {
					this.friendList.push(...res.data.data)
					console.log(this.friendList)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		friendApply() {
			FriendApply(this.addfriend).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		addClick(id) {
			this.addfriend.friend_id = id
			console.log(this.addfriend)
			console.log(this.addfriend.friend_id)
			this.friendApply()
		},
		confirm(e) {
			this.form.page = 1
			this.friendList = []
			this.form.search = e.detail.value;
			// 执行搜索逻辑
			console.log('搜索关键词：', this.form);
			this.friendSearch()
		},
		clearSearch() {
			this.searchValue = '';
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		cancel() {
			uni.navigateBack({
				delta: 1,
			});
		},
		getMenuInfo() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			console.log('胶囊信息:', menuButtonInfo);

			// 胶囊宽度
			const capsuleWidth = menuButtonInfo.width;

			// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
			const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;

			console.log('胶囊宽度:', capsuleWidth);
			console.log('胶囊距离右侧的距离:', distanceFromRight);

			this.getMenuInfoList = capsuleWidth + distanceFromRight;

			return {
				width: capsuleWidth,
				distanceFromRight: distanceFromRight,
				menuButtonInfo: menuButtonInfo
			};
		},
	}
}
</script>

<style>
page {
	background: #F6F8FA;
}
.uni-navbar__header-btns-left {
	width: 100% !important;
}
</style>
<style scoped>
.input-view {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 20rpx;
	height: 72rpx;
	background: #F8F9FA;
	border-radius: 36rpx;
}

.input-uni-icon {
	margin-right: 10rpx;
}

.nav-bar-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	background-color: transparent;
	border: none;
	outline: none;
}

.uni-navbar__header-btns-left{
	width: 60rpx !important;
	height: 88rpx;
}

.uni-navbar__header-btns-right{
	width: 60rpx !important;
}

.uni-navbar__header-container {
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.left_return {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

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

.list {
	position: relative;
}

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

.list_module {
	position: relative;
	overflow: hidden;
}

.list_module image {
	width: 80rpx;
	height: 80rpx;
	display: block;
	flex-shrink: 0;
	border-radius: 100rpx;
}

.list_detail {
	position: relative;
	margin: 0 0 0 22rpx;
	overflow: hidden;
}

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

.list_id {
	font-weight: 400;
	font-size: 26rpx;
	color: #DCDCDC;
	line-height: 30rpx;
}

.list_add {
	position: relative;
	padding: 5rpx 22rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #222222;
	line-height: 50rpx;
	border-radius: 226rpx;
	border: 1rpx solid #DCDCDC;
}

.list_add image {
	margin: 0 5rpx 0 0;
	width: 30rpx;
	height: 30rpx;
}

.not {
	position: relative;
	margin: 94rpx 0 0 0;
}

.not image {
	width: 344rpx;
	display: block;
	margin: 0 auto;
}

.not_title {
	margin: 14rpx 0 0 0;
	font-weight: 400;
	font-size: 30rpx;
	color: #9E9E9E;
	line-height: 50rpx;
	text-align: center;
}

.uni-navbar__header-btns-right {
	padding-right: var(--right-padding, 0);
}

.uni-navbar__header-btns-right.data-v-26544265 {
	width: 60rpx !important;
}
</style>