yunzhu-im-mobile/pages/contacts/index.vue

<template>
	<view class="contacts-page">
		<!-- 自定义顶栏：头像 + 通讯录 + 搜索（不显示加号） -->
		<view class="custom-header">
			<view class="header-left" @click="onAvatarClick">
				<UserAvatar
					:name="currentUser.name"
					:id="currentUser.id"
					:src="currentUser.avatar"
					:size="80"
					unit="rpx"
				/>
				<view class="org-info">
					<text class="user-name">通讯录</text>
				</view>
			</view>
			<view class="header-right">
				<view class="icon-btn" @click="onSearchToggle">
					<image class="icon-img" src="/static/icons/search.svg" mode="aspectFit" />
				</view>
			</view>
		</view>

		<!-- A：点击搜索图标展开输入框 -->
		<view v-if="showSearch" class="search-bar">
			<input
				class="search-input"
				v-model="keyword"
				placeholder="搜索联系人"
				confirm-type="search"
				@confirm="doSearch"
			/>
			<view class="search-action" @click="doSearch">
				<text>搜索</text>
			</view>
		</view>

		<scroll-view
			class="message-list"
			scroll-y
			:refresher-enabled="refresherEnabled"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
		>
			<view v-if="!isSearchMode && loadingMore" class="empty-tip">加载中...</view>
			<view v-if="loading" class="empty-tip">加载中...</view>
			<view v-else-if="!userList || userList.length === 0" class="empty-tip">暂无联系人</view>

			<view
				v-else
				class="message-item"
				v-for="u in userList"
				:key="String(u.id)"
				@click="openContact(u)"
			>
				<view class="item-left">
					<view class="avatar-wrap">
						<UserAvatar
							:name="u.name"
							:id="String(u.id)"
							:src="''"
							:size="80"
							unit="rpx"
						/>
					</view>
					<view class="item-content">
						<view class="item-row">
							<text class="item-title">{{ u.name }}</text>
						</view>
						<text class="item-desc">{{ u.english_name || '' }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { nextTick, onMounted, ref } from 'vue'
import UserAvatar from '../../components/UserAvatar.vue'
import { getToken, listUsers, searchUsers } from '../../utils/api'

const USER_KEY = 'current_user'

export default {
	components: { UserAvatar },
	setup() {
		const limit = 20
		const skip = ref(0)
		const hasMore = ref(true)
		const loadingMore = ref(false)
		const refresherTriggered = ref(false)
		// 防止首屏渲染阶段下拉刷新事件自动触发导致重复请求
		const refresherEnabled = ref(false)
		const currentUser = ref({ name: '', id: '', avatar: '' })
		const showSearch = ref(false)
		const keyword = ref('')
		const userList = ref([])
		const loading = ref(false)
		// 非搜索分页：当 keyword 为空时启用；搜索模式下不进行上拉分页
		const isSearchMode = ref(false)

		function loadCurrentUser() {
			try {
				const raw = uni.getStorageSync(USER_KEY)
				if (raw && typeof raw === 'object') {
					currentUser.value = {
						name: raw.name || raw.nickname || '',
						id: String(raw.id ?? raw.user_id ?? ''),
						avatar: raw.avatar || raw.avatar_url || ''
					}
				}
			} catch (e) {}
		}
		function normalizeUsers(res) {
			if (Array.isArray(res)) return res
			if (res && Array.isArray(res.items)) return res.items
			return []
		}

		async function fetchInitial() {
			const token = getToken()
			if (!token) {
				userList.value = []
				return
			}
			// 非搜索初始化：重置分页游标
			skip.value = 0
			hasMore.value = true
			loadingMore.value = false
			loading.value = true
			try {
				// 先展示一段“空关键字”的分页结果，避免页面一开始是空
				const res = await listUsers(token, 0, limit, '')
				userList.value = normalizeUsers(res)
				// 估算是否还有更多数据
				const items = normalizeUsers(res)
				if (!items || items.length < limit) hasMore.value = false
			} finally {
				loading.value = false
				// 首屏加载完成后再启用下拉刷新，避免初始化阶段重复请求
				refresherEnabled.value = true
			}
		}

		async function fetchNonSearchPage({ reset = false } = {}) {
			const token = getToken()
			if (!token) return
			if (loading.value || loadingMore.value) return
			if (!hasMore.value && !reset) return

			if (reset) {
				skip.value = 0
				hasMore.value = true
				userList.value = []
			}

			if (reset) loading.value = true
			else loadingMore.value = true

			try {
				const res = await listUsers(token, skip.value, limit, '')
				const items = normalizeUsers(res)
				if (!items.length) {
					hasMore.value = false
					return
				}

				userList.value = reset ? items : userList.value.concat(items)
				if (items.length < limit) hasMore.value = false
				else skip.value += limit
			} finally {
				loading.value = false
				loadingMore.value = false
			}
		}

		async function onRefresh() {
			refresherTriggered.value = true
			try {
				if (isSearchMode.value) {
					// 搜索模式下只刷新第一页（不做分页）
					await doSearch()
				} else {
					await fetchNonSearchPage({ reset: true })
				}
			} finally {
				refresherTriggered.value = false
			}
		}

		async function doSearch() {
			const token = getToken()
			if (!token) {
				userList.value = []
				return
			}
			const q = String(keyword.value || '').trim()
			// 搜索关键词为空 => 非搜索列表（启用分页）
			if (!q) {
				isSearchMode.value = false
				await fetchNonSearchPage({ reset: true })
				return
			}

			isSearchMode.value = true
			loading.value = true
			try {
				// 有关键字就走推荐的 /users/search
				const res = await searchUsers(token, q, limit)
				userList.value = normalizeUsers(res)
			} finally {
				loading.value = false
			}
		}

		function openContact(u) {
			const id = String(u?.id ?? '')
			uni.navigateTo({
				url:
					'/pages/contact-detail/index?contactId=' +
					encodeURIComponent(id) +
					'&contactName=' +
					encodeURIComponent(u?.name || '') +
					'&contactEnglishName=' +
					encodeURIComponent(u?.english_name || '') +
					'&contactStatus=' +
					encodeURIComponent(u?.status || '')
			})
		}

		function onSearchToggle() {
			// 顶部搜索按钮：统一进入全局搜索列表页
			showSearch.value = false
			uni.navigateTo({ url: '/pages/search-center/index' })
		}

		function onAvatarClick() {
			uni.navigateTo({ url: '/pages/profile/index' })
		}

		/** Tab 切换 / 从子页返回时刷新列表（与下拉刷新逻辑一致） */
		async function refreshOnShow() {
			loadCurrentUser()
			if (isSearchMode.value) {
				await doSearch()
			} else {
				await fetchNonSearchPage({ reset: true })
			}
		}

		onMounted(() => {
			loadCurrentUser()
			fetchInitial()
		})

		return {
			currentUser,
			showSearch,
			keyword,
			userList,
			loading,
			loadingMore,
			refresherTriggered,
			refresherEnabled,
			isSearchMode,
			openContact,
			onAvatarClick,
			onSearchToggle,
			doSearch,
			onRefresh,
			refreshOnShow,
			onLoadMore: () => {
				// 上拉分页只对非搜索列表生效
				if (isSearchMode.value) return
				fetchNonSearchPage({ reset: false })
			}
		}
	},
	async onShow() {
		if (this.refreshOnShow) await this.refreshOnShow()
	}
}
</script>

<style scoped>
	.contacts-page {
		/* 高度占满视口，不再手动减 tabBar，高度保持 100vh 以保证 scroll-view 有明确高度 */
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	/* 顶部安全区：与消息页 custom-header 对齐 */
	.custom-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 24rpx 24rpx 32rpx;
		padding-top: 88rpx;
		padding-top: max(88rpx, calc(24rpx + constant(safe-area-inset-top)));
		padding-top: max(88rpx, calc(24rpx + env(safe-area-inset-top)));
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}
	.header-left {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
	}
	.org-info {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.user-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #111827;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}
	.icon-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon-img {
		width: 44rpx;
		height: 44rpx;
		opacity: 0.85;
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
	}
	.search-input {
		flex: 1;
		min-width: 0;
		height: 64rpx;
		padding: 0 20rpx;
		background: #f0f0f0;
		border-radius: 16rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.search-action {
		margin-left: 16rpx;
		padding: 12rpx 20rpx;
		background: #259653;
		color: #fff;
		border-radius: 16rpx;
		font-size: 26rpx;
	}

	.message-list {
		flex: 1;
		min-height: 0;
		height: 0;
		padding-bottom: var(--window-bottom, 50px);
		box-sizing: border-box;
	}
	.empty-tip {
		padding: 80rpx 32rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}

	.message-item {
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.item-left {
		display: flex;
		align-items: flex-start;
	}
	.avatar-wrap {
		position: relative;
		flex-shrink: 0;
	}
	.item-content {
		flex: 1;
		margin-left: 24rpx;
		min-width: 0;
	}
	.item-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8rpx;
	}
	.item-title {
		font-size: 34rpx;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.item-desc {
		font-size: 26rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
</style>