128 lines
2.6 KiB
Vue
128 lines
2.6 KiB
Vue
<template>
|
|
<view class="search-root">
|
|
<view class="add-shopping" @tap="createGoods">
|
|
<jx-icon icon="jiahao" color="#4eb331"></jx-icon>
|
|
<text>新建</text>
|
|
</view>
|
|
|
|
<uni-search-bar
|
|
cancelButton="none"
|
|
clearButton="auto"
|
|
placeholder="请输入关键字 例如：土豆"
|
|
@confirm="confirm"
|
|
@input="input"
|
|
@clear="clear"
|
|
v-model="text"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup >
|
|
import toast from '@/utils/toast'
|
|
import { jx_trembling } from '@/utils/tools'
|
|
import { ref, watch } from 'vue'
|
|
|
|
/*************************************************
|
|
* props
|
|
*/
|
|
interface propsType {
|
|
isFilter: string | number
|
|
}
|
|
const props = defineProps<propsType>()
|
|
|
|
const text = ref<string>('')
|
|
let isInput = false
|
|
watch(
|
|
() => props.isFilter,
|
|
(val) => {
|
|
if (val == 'hot' || val == 'audit') {
|
|
isInput = true
|
|
} else {
|
|
isInput = false
|
|
}
|
|
}
|
|
)
|
|
|
|
/*************************************************
|
|
* emit
|
|
*/
|
|
const emit = defineEmits<{
|
|
(e: 'serachShopping', data: string): void
|
|
(e: 'clearInpu', data: string): void
|
|
(e: 'createGoods'): void
|
|
}>()
|
|
|
|
/*************************************************
|
|
* 确定搜索
|
|
*/
|
|
let watchTimer: any = null
|
|
function confirm(e: AnyObject) {
|
|
if (isInput) {
|
|
let watchTimer = setTimeout(() => {
|
|
text.value = ''
|
|
clearTimeout(watchTimer)
|
|
}, 500)
|
|
return toast('该分类暂不支持搜索')
|
|
}
|
|
emit('serachShopping', e.value)
|
|
}
|
|
|
|
/*************************************************
|
|
* 输入框加载
|
|
*/
|
|
function input(e: string) {
|
|
if (isInput) {
|
|
let watchTimer = setTimeout(() => {
|
|
text.value = ''
|
|
clearTimeout(watchTimer)
|
|
}, 500)
|
|
return toast('该分类暂不支持搜索')
|
|
}
|
|
trembling(e)
|
|
}
|
|
const trembling = jx_trembling((e: string) => {
|
|
emit('serachShopping', e)
|
|
}, 1000)
|
|
|
|
/*************************************************
|
|
* 清空输入框
|
|
*/
|
|
function clear(e: AnyObject) {
|
|
if (isInput) return
|
|
emit('clearInpu', e.value)
|
|
}
|
|
|
|
/*************************************************
|
|
* 新建商品
|
|
*/
|
|
function createGoods() {
|
|
emit('createGoods')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-root {
|
|
box-sizing: border-box;
|
|
background-color: $jx-primary;
|
|
padding: 0 20rpx 2rpx 20rpx;
|
|
height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.add-shopping {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background-color: #fff;
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
color: $jx-primary;
|
|
line-height: 1;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style> |