59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import {Search} from '@nutui/icons-react-taro'
|
|
import {Button, Input} from '@nutui/nutui-react-taro'
|
|
import {useState} from "react";
|
|
import Taro from '@tarojs/taro';
|
|
function MySearch(props) {
|
|
const [keywords, setKeywords] = useState<string>('')
|
|
|
|
const onKeywords = (keywords: string) => {
|
|
setKeywords(keywords)
|
|
}
|
|
|
|
const onQuery = () => {
|
|
if(!keywords){
|
|
Taro.showToast({
|
|
title: '请输入关键字',
|
|
icon: 'none'
|
|
});
|
|
return false;
|
|
}
|
|
props.done(keywords);
|
|
}
|
|
|
|
|
|
return (
|
|
<div className={'z-50 left-0 w-full'}>
|
|
<div className={'px-2'}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
background: '#ffffff',
|
|
padding: '0 7px',
|
|
borderRadius: '20px',
|
|
marginTop: '100px',
|
|
}}
|
|
>
|
|
<Search size={18} className={'ml-2 text-gray-400'}/>
|
|
<Input
|
|
placeholder="搜索商品"
|
|
value={keywords}
|
|
onChange={onKeywords}
|
|
onConfirm={onQuery}
|
|
style={{ padding: '9px 8px'}}
|
|
/>
|
|
<div
|
|
className={'flex items-center'}
|
|
>
|
|
<Button type="success" style={{background: 'linear-gradient(to bottom, #1cd98a, #24ca94)'}} onClick={onQuery}>
|
|
搜索
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MySearch;
|