|
|
@@ -0,0 +1,113 @@
|
|
|
+<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>
|
|
|
+
|
wangguoyu