uniProject/pages/admin/Hetong/components/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,
		computed
	} from 'vue';
	const $emit = defineEmits(['search-btn', 'reset-search'])
	const searchPopup = ref(null); // 索引

	const props = defineProps({
		shenfen: {
			type: String,
		}
	})

	let arr = computed(() => {
		if (props.shenfen == 'kh') {
			return [{
				label: '客户名',
				value: 2
			}, ]
		} else if (props.shenfen == 'jz') {
			return [{
				label: '阿姨名',
				value: 3
			}]
		} else {
			return [{
					label: '客户名',
					value: 2
				},
				{
					label: '阿姨名',
					value: 3
				}
			]
		}
	})

	let txt = computed(() => {
		if (props.shenfen == 'kh') {
			return '请输入客户名'
		} else if (props.shenfen == 'jz') {
			return '请输入家政阿姨名'
		} else {
			return '请输入客户名'
		}
	})


	const options = ref(arr);
	const searchPlaceholder = ref(txt);
	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 = '';
		isMenuOpen.value = false; // 选择后关闭菜单
		if (option.value == 2) {
			searchPlaceholder.value = '请输入客户名'
		} else {
			searchPlaceholder.value = '请输入家政阿姨名'
		}
	};

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

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


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