新增客户组件

pages/admin/kehu/components/search.vue

@@ -0,0 +1,99 @@
+<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: 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 = '';
+  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>
+