110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<template>
|
|
<view class="search-wrapper" :style="{ padding: wrapPd }">
|
|
<view class="search-input bdR16">
|
|
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
|
|
<input type="text" :placeholder="place" placeholder-style="#8C8C8C" :focus="isFocus" v-model="searchText" :disabled="isDisabled" @input="change" />
|
|
<view class="search-text" v-if="searchText || flag" @tap="search">{{ text }}</view>
|
|
</view>
|
|
<slot>
|
|
<view class="search-screen" v-if="props.screen" @tap="tapScreen">
|
|
<image src="/static/iconImg/icon-filter.svg" mode="scaleToFill" />
|
|
筛选
|
|
</view>
|
|
</slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import { debounce } from '@/util/debounce'
|
|
const props = defineProps({
|
|
screen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
place: {
|
|
type: String,
|
|
default: '搜索代理商名、代理商号、联系人手机号',
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: '#fff',
|
|
},
|
|
wrapPd: {
|
|
type: String,
|
|
default: '30rpx',
|
|
},
|
|
|
|
isFocus: { type: Boolean, default: false },
|
|
isDisabled: { type: Boolean, default: false },
|
|
})
|
|
|
|
onMounted(() => {
|
|
focus.value = props.isFocus
|
|
})
|
|
const focus = ref(false)
|
|
const text = ref('搜索')
|
|
const searchText = ref('')
|
|
const flag = ref(false)
|
|
// 点击筛选触发回调
|
|
const emits = defineEmits(['screen', 'search', 'resetSearch'])
|
|
const tapScreen = () => {
|
|
emits('screen')
|
|
}
|
|
const change = () => {
|
|
text.value = '搜索'
|
|
}
|
|
// 点击触发事件
|
|
function search() {
|
|
flag.value = true
|
|
if (text.value === '搜索') {
|
|
if (!searchText.value.trim()) return uni.showToast({ title: '请输入搜索条件', icon: 'none' })
|
|
text.value = '取消'
|
|
emits('search', searchText.value)
|
|
} else {
|
|
searchText.value = ''
|
|
text.value = '搜索'
|
|
emits('resetSearch', 'reset')
|
|
}
|
|
}
|
|
defineExpose({ searchText })
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.search-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
.search-input {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 21rpx;
|
|
background-color: #fff;
|
|
input {
|
|
flex: 1;
|
|
font-size: 27rpx;
|
|
}
|
|
image {
|
|
margin: 0 10rpx 0 10rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.search-text {
|
|
font-size: 30rxp;
|
|
padding: 0 10rpx;
|
|
color: $primaryColor;
|
|
}
|
|
}
|
|
.search-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin: 0 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|