uniProject/pages/admin/Jiazheng/common/search.vue

<template>
	<uni-popup ref="searchPopup" type="top" :animation="false" :is-mask-click="true"
	 mask-background-color="rgba(0, 0, 0, 0.4)">
	   <view class="select-search-row">
		   <view class="select-search-body">
			  <view class="select-jt-box" @click="toggleMenu">
				<view class="selected-item">{{ selectedOption.label }}</view>
				<view class="arrow" :class="{ 'arrow-up': isMenuOpen, 'arrow-down': !isMenuOpen }"></view>
			  </view>
			  <view class="select-list-box" v-if="isMenuOpen">
				<view
				  v-for="(option, index) in options"
				  :key="option.value"
				  class="menu-item"
				  @click="selectOption(option)"
				>
				  {{ option.label }}
				</view>
			  </view>
			  <input type="text" class="search-input" v-model="searchInput" :placeholder="searchPlaceholder" />
			  <view class="search-icon" @click="handleSearch">
			  	<uni-icons type="search" size="24" color="#fff"></uni-icons>
			  </view>	
			</view>
		</view>
		<view class="search-clear-box" v-if="searchInput" @click="searchReset">
			<icon></icon>
			<text>清空搜索</text>
		</view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
const $emit = defineEmits(['search-btn','reset-search'])
const searchPopup = ref(null); // 索引


const options = ref([
	  { label: '全部', value: 1 },
	  { label: '姓名', value: 2 },
	  { label: '手机号', value: 3 }
	]);
const searchPlaceholder= ref('请输入姓名、手机号等关键字');
const searchInput= ref('');
// 存储当前选中的选项对象
const selectedOption = ref(options.value[0]);
 
// 存储菜单是否打开的状态
const isMenuOpen = ref(false);
 
// 切换菜单打开/关闭状态的函数
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};
 
// 选择选项的函数
const selectOption = (option) => {
  selectedOption.value = option;
  searchInput.value = '';
  if(option.label==="全部"){
	  searchPlaceholder.value = '请输入姓名、手机号等关键字';
  }else{
	  searchPlaceholder.value = '请输入'+ option.label;
  }
  
  isMenuOpen.value = false; // 选择后关闭菜单
};

function validatePhoneNumber(value){
	const phoneRegex = /^1[3-9]\d{9}$/;
	if (phoneRegex.test(value)) {
		return '手机号';
	} else {
		return '姓名';
	}
}

// 打开弹窗
function handleShow() {
	searchPopup.value.open();
}
// 取消
function handleClose() {
	searchInput.value = '';
	searchPopup.value.close();
}
// 确认
function handleSearch(){
	let searchKey = '';
	if(selectedOption.value.label==="全部"){
		searchKey = validatePhoneNumber(searchInput.value)
	}else{
		searchKey = selectedOption.value.label;
	}
	// 搜索 key和 data
	$emit('search-btn',searchKey,searchInput);
	searchPopup.value.close();
}

// 清空搜索
function searchReset(){
	searchInput.value = '';
	$emit('reset-search');
}


defineExpose({
	handleShow,
	handleClose
})
</script>