|
@@ -1,99 +1,134 @@
|
|
|
<template>
|
|
<template>
|
|
|
<uni-popup ref="searchPopup" type="top" :animation="false" :is-mask-click="true"
|
|
<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 }}
|
|
|
|
|
|
|
+ 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>
|
|
|
|
|
- <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>
|
|
</view>
|
|
|
<view class="search-clear-box" v-if="searchInput" @click="searchReset">
|
|
<view class="search-clear-box" v-if="searchInput" @click="searchReset">
|
|
|
<icon></icon>
|
|
<icon></icon>
|
|
|
<text>清空搜索</text>
|
|
<text>清空搜索</text>
|
|
|
</view>
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
|
|
|
|
+ </uni-popup>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
|
|
-const $emit = defineEmits(['search-btn','reset-search'])
|
|
|
|
|
-const searchPopup = ref(null); // 索引
|
|
|
|
|
|
|
+ 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 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 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();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ // 选择选项的函数
|
|
|
|
|
+ const selectOption = (option) => {
|
|
|
|
|
+ selectedOption.value = option;
|
|
|
|
|
+ searchInput.value = '';
|
|
|
|
|
+ isMenuOpen.value = false; // 选择后关闭菜单
|
|
|
|
|
+ if (option.value == 2) {
|
|
|
|
|
+ searchPlaceholder.value = '请输入客户名'
|
|
|
|
|
+ } else {
|
|
|
|
|
+ searchPlaceholder.value = '请输入家政阿姨名'
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
-// 清空搜索
|
|
|
|
|
-function searchReset(){
|
|
|
|
|
- searchInput.value = '';
|
|
|
|
|
- $emit('reset-search');
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ // 打开弹窗
|
|
|
|
|
+ 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>
|
|
|
|
|
|
|
|
|
|
|
|
+ defineExpose({
|
|
|
|
|
+ handleShow,
|
|
|
|
|
+ handleClose
|
|
|
|
|
+ })
|
|
|
|
|
+</script>
|