✨ feat: 发货单对接70%
This commit is contained in:
xuan
@@ -1,69 +1,76 @@
|
||||
.search_main{
|
||||
.search_main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
.icon_a_sousuo1_self {
|
||||
color: $color_font_two;
|
||||
}
|
||||
.search_con {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
.icon_a_sousuo1_self{
|
||||
font-size: 37px;
|
||||
color: $color_font_two;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
.input_bar {
|
||||
border-radius: 50px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
flex: 1 1 auto;
|
||||
padding-left: 60px;
|
||||
padding-right: 30px;
|
||||
background: #eee;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search_con{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
input{
|
||||
font-size: 27px;
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
padding: 0 60px;
|
||||
box-sizing: border-box;
|
||||
z-index:0;
|
||||
&::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder { /* Internet Explorer 10+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.search_closeBtn{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
.btn{
|
||||
width: 100px;
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
font-size: 27px;
|
||||
z-index: 0;
|
||||
&::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.icon_inner{
|
||||
margin-right: 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
margin-right: 0;
|
||||
z-index: 10;
|
||||
.search_closeBtn {
|
||||
margin: 0 15px;
|
||||
flex: none;
|
||||
}
|
||||
.icon_out{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input_out{
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
}
|
||||
.btn {
|
||||
width: 100px;
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.icon_inner {
|
||||
margin-right: 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
margin-right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.icon_out {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.input_out {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,110 +1,116 @@
|
||||
import { Input, View } from "@tarojs/components";
|
||||
import styles from "./index.module.scss"
|
||||
import CloseBtn from "@/components/closeBtn"
|
||||
import classnames from "classnames";
|
||||
import { debounce } from "@/common/util";
|
||||
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from "react";
|
||||
import { Input, View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import CloseBtn from '@/components/closeBtn'
|
||||
import classnames from 'classnames'
|
||||
import { debounce } from '@/common/util'
|
||||
import { Children, forwardRef, memo, ReactElement, ReactNode, useEffect, useImperativeHandle, useRef, useState } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
|
||||
type Params = {
|
||||
clickOnSearch?: (val: string) => void
|
||||
disabled?: false | true,
|
||||
placeholder?: string,
|
||||
changeOnSearch?: (any) => void,
|
||||
showIcon?: false | true,
|
||||
placeIcon?: 'out' | 'inner',
|
||||
style?: Object,
|
||||
showBtn?: false | true,
|
||||
btnStyle?: Object,
|
||||
btnTitle?: string,
|
||||
debounceTime?: number //防抖时间，不设默认为零
|
||||
defaultValue?: string,
|
||||
children?: ReactNode,
|
||||
customRightSlot?: ReactNode
|
||||
clickOnSearch?: (val: string) => void
|
||||
disabled?: false | true
|
||||
placeholder?: string
|
||||
changeOnSearch?: (value: string) => void
|
||||
showIcon?: false | true
|
||||
placeIcon?: 'out' | 'inner'
|
||||
style?: Object
|
||||
showBtn?: false | true
|
||||
btnStyle?: Object
|
||||
btnTitle?: string
|
||||
debounceTime?: number //防抖时间，不设默认为零
|
||||
defaultValue?: string
|
||||
children?: ReactNode
|
||||
customRightSlot?: ReactNode
|
||||
}
|
||||
|
||||
export default memo(forwardRef(({
|
||||
clickOnSearch, //点击筛选按钮触发
|
||||
changeOnSearch, //输入文字触发
|
||||
disabled = false, //是否禁用
|
||||
placeholder = '输入搜索内容',
|
||||
showIcon = true, //是否显示关闭图标
|
||||
showBtn = false, //是否显示搜索按钮
|
||||
btnStyle = {},
|
||||
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
|
||||
btnTitle = '搜索', //搜索文字
|
||||
debounceTime = 0, //防抖时间，不设默认为零
|
||||
defaultValue = '',//默认值
|
||||
children,
|
||||
customRightSlot
|
||||
}: Params, ref) => {
|
||||
const [inputCon, setInputCon] = useState('')
|
||||
const debounceTimeRef = useRef(0)
|
||||
useEffect(() => {
|
||||
export default memo(
|
||||
forwardRef(
|
||||
(
|
||||
{
|
||||
clickOnSearch, //点击筛选按钮触发
|
||||
changeOnSearch, //输入文字触发
|
||||
disabled = false, //是否禁用
|
||||
placeholder = '输入搜索内容',
|
||||
showIcon = true, //是否显示关闭图标
|
||||
showBtn = false, //是否显示搜索按钮
|
||||
btnStyle = {},
|
||||
placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
|
||||
btnTitle = '搜索', //搜索文字
|
||||
debounceTime = 0, //防抖时间，不设默认为零
|
||||
defaultValue = '', //默认值
|
||||
children,
|
||||
customRightSlot,
|
||||
}: Params,
|
||||
ref,
|
||||
) => {
|
||||
const [inputCon, setInputCon] = useState('')
|
||||
const debounceTimeRef = useRef(0)
|
||||
useEffect(() => {
|
||||
setInputCon(defaultValue)
|
||||
}, [defaultValue])
|
||||
}, [defaultValue])
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
debounceTimeRef.current = debounceTime
|
||||
}, [debounceTime])
|
||||
}, [debounceTime])
|
||||
|
||||
const onInputEven = (e) => {
|
||||
const onInputEven = (e) => {
|
||||
const value = e.detail.value
|
||||
changeData(value)
|
||||
}
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
clearInput
|
||||
}))
|
||||
useImperativeHandle(ref, () => ({
|
||||
clearInput,
|
||||
}))
|
||||
|
||||
const clearInput = () => {
|
||||
const clearInput = () => {
|
||||
setInputCon('')
|
||||
changeOnSearch?.('')
|
||||
}
|
||||
}
|
||||
|
||||
const changeData = debounce((value) => {
|
||||
const changeData = debounce((value) => {
|
||||
setInputCon(value)
|
||||
changeOnSearch?.(value)
|
||||
}, debounceTimeRef.current)
|
||||
}, debounceTimeRef.current)
|
||||
|
||||
const onSearch = () => {
|
||||
const onSearch = () => {
|
||||
clickOnSearch?.(inputCon)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.search_main}>
|
||||
<View className={styles.search_con}>
|
||||
{showIcon && (
|
||||
<View
|
||||
className={classnames(
|
||||
'iconfont',
|
||||
'icon-sousuo',
|
||||
styles.icon_a_sousuo1_self,
|
||||
placeIcon == 'inner' ? styles.icon_inner : styles.icon_out,
|
||||
)}></View>
|
||||
)}
|
||||
<Input
|
||||
placeholderStyle='color:#ABABAB; font-size:26rpx'
|
||||
onConfirm={onSearch}
|
||||
className={classnames(placeIcon == 'out' && styles.input_out)}
|
||||
disabled={disabled}
|
||||
value={inputCon}
|
||||
placeholder={placeholder}
|
||||
onInput={(e) => onInputEven(e)}></Input>
|
||||
{!!inputCon && (
|
||||
<View className={styles.search_closeBtn}>
|
||||
<CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
|
||||
return (
|
||||
<>
|
||||
<View className={styles.search_main}>
|
||||
<View className={styles.search_con}>
|
||||
{showIcon && (
|
||||
<IconFont
|
||||
name='icon-sousuo'
|
||||
size={37}
|
||||
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
|
||||
)}
|
||||
<View className={styles.input_bar}>
|
||||
<Input
|
||||
placeholderStyle='color:#ABABAB; font-size:26rpx'
|
||||
onConfirm={onSearch}
|
||||
className={classnames(placeIcon == 'out' && styles.input_out)}
|
||||
disabled={disabled}
|
||||
value={inputCon}
|
||||
placeholder={placeholder}
|
||||
onInput={(e) => onInputEven(e)}
|
||||
/>
|
||||
<View className={styles.search_closeBtn}>
|
||||
{!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}
|
||||
</View>
|
||||
<View>{customRightSlot}</View>
|
||||
</View>
|
||||
</View>
|
||||
{showBtn && (
|
||||
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
|
||||
{btnTitle}
|
||||
</View>
|
||||
)}
|
||||
{customRightSlot}
|
||||
{children}
|
||||
</View>
|
||||
{showBtn && (
|
||||
<View style={btnStyle} className={styles.btn} onClick={onSearch}>
|
||||
{btnTitle}
|
||||
</View>
|
||||
)}
|
||||
{children}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}))
|
||||
</>
|
||||
)
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user