pet-system-merchant-app/components/user-select-popup/index.vue

<template>
	<view class="user-select-popup">
		<view class="popup-header">
			<text class="popup-title">选择宠主</text>
			<view class="close-btn" @click="$emit('close')">
				<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
			</view>
		</view>

		<view class="search-wrap">
			<uni-icons type="search" size="14" color="#999"></uni-icons>
			<input class="search-input" v-model="keyword" placeholder="搜索姓名/手机号" />
		</view>

		<scroll-view scroll-y class="user-list">
			<view class="user-item" v-for="user in filteredUsers" :key="user.id" @click="onSelect(user)">
				<view class="user-avatar">
					<uni-icons type="person" size="20" color="#aaa"></uni-icons>
				</view>
				<view class="user-info">
					<text class="user-name">{{ user.name }}</text>
					<text class="user-phone">{{ user.phone }}</text>
				</view>
				<uni-icons type="right" size="14" color="#ccc"></uni-icons>
			</view>
			<view class="empty-tip" v-if="filteredUsers.length === 0">
				<text>暂无匹配用户</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['close', 'select'])
const keyword = ref('')

const users = ref([
	{ id: 1, name: '张先生', phone: '13800138000' },
	{ id: 2, name: '李小姐', phone: '13900139000' },
	{ id: 3, name: '王先生', phone: '13612345678' },
	{ id: 4, name: '赵女士', phone: '13911112222' }
])

const filteredUsers = computed(() => {
	if (!keyword.value) return users.value
	const kw = keyword.value.toLowerCase()
	return users.value.filter(u => u.name.toLowerCase().includes(kw) || u.phone.includes(kw))
})

const onSelect = (user) => {
	emit('select', user)
}
</script>

<style lang="scss" scoped>
.user-select-popup { height: 100vh; background: #fff; display: flex; flex-direction: column; }
.popup-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 32rpx; border-bottom: 1rpx solid #f5f5f5; }
.popup-title { font-size: 32rpx; font-weight: bold; color: #333; }
.close-btn { position: absolute; right: 32rpx; }
.search-wrap { display: flex; align-items: center; background: #f5f5f5; border-radius: 32rpx; padding: 16rpx 24rpx; margin: 24rpx 32rpx; gap: 12rpx; }
.search-input { flex: 1; font-size: 28rpx; }
.user-list { flex: 1; padding: 0 32rpx; }
.user-item { display: flex; align-items: center; padding: 28rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.user-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background: #f5f5f5; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; }
.user-info { flex: 1; }
.user-name { display: block; font-size: 30rpx; font-weight: bold; color: #333; }
.user-phone { display: block; font-size: 26rpx; color: #666; margin-top: 4rpx; }
.empty-tip { text-align: center; padding: 80rpx 0; font-size: 28rpx; color: #999; }
</style>