feat:菜单组件暴露ref方法出去

This commit is contained in:
Haiyi 2022-10-20 15:12:10 +08:00
parent a115787a02
commit 09327c7a7c
11 changed files with 96 additions and 16 deletions

View File

@ -124,5 +124,9 @@ export default defineAppConfig({
root: 'pages/collectionDetail',
pages: ['index'],
},
{
root: 'pages/customerManagement',
pages: ['index'],
},
],
})

View File

@ -3,7 +3,7 @@
*/
import { View, Text } from '@tarojs/components'
import { useEffect, useMemo, useRef, useState } from 'react'
import { useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react'
import styles from './index.module.scss'
import Iconfont from '../iconfont/iconfont'
import Popup from '../popup'
@ -30,11 +30,19 @@ interface PropsType extends DropDownEvent {
activeColor?: string
showOverlay?: boolean
customClassName?: string
customStyle?: React.CSSProperties
customStyle?: React.CSSProperties,
hasBottomBtn?: boolean //底部有按钮不允许点击蒙层关闭
}
export default (props: PropsType) => {
const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true } = props
export default forwardRef((props: PropsType, ref) => {
const { children, direction = 'down', title = '', value, options = [], change, activeColor, showOverlay = true, hasBottomBtn = false } = props
useImperativeHandle(ref, () => ({
//暴露出方法给有需要的用
closePopup() {
setShowPopup(false)
}
}))
const [showPopup, setShowPopup] = useState(false)
@ -65,6 +73,7 @@ export default (props: PropsType) => {
}
const handleClosePopup = () => {
if (hasBottomBtn) return false
setShowPopup(false)
}
@ -111,7 +120,7 @@ export default (props: PropsType) => {
<Iconfont name={getIconName()} size={20} color={showPopup ? activeColor : '#7f7f7f'}></Iconfont>
</View>
<Popup
onClose={handleClosePopup}
onClose={() => handleClosePopup()}
showOverLay={showOverlay}
show={showPopup}
showTitle={false}
@ -123,4 +132,4 @@ export default (props: PropsType) => {
</Popup>
</View>
)
}
})

View File

@ -0,0 +1,27 @@
import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import DropDownItem from '@/components/dropDown-item'
export default memo(() => {
const DropDownItemRef = useRef<any>()
const close = () => {
DropDownItemRef.current.closePopup()
}
return (
<DropDownItem ref={DropDownItemRef} title={'全部标签'} value={-1} activeColor='#337fff' hasBottomBtn={true}>
<View className={styles.mainBox}>
<View onClick={() => close()}>111</View>
</View>
</DropDownItem>
)
})

View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '客户列表',
}

View File

@ -0,0 +1,9 @@
.mainBox {
overflow: hidden;
.menuBox {
width: 100%;
display: flex;
flex: 1;
}
}

View File

@ -0,0 +1,23 @@
import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import Tag from './components/Tag';
export default () => {
return (
<View className={styles.mainBox}>
<View className={styles.menuBox}>
<Tag></Tag>
<Tag></Tag>
<Tag></Tag>
</View>
</View>
)
}

View File

@ -28,7 +28,7 @@ export default memo((props: propsObj) => {
<IconFont name={'icon-dingwei'} size={26} color={'#ffffff'}></IconFont>
</View>
{
receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address}</View>
receivingStatus == 1 && <View className={styles.address}>{obj.take_goods_address || '中华人民共和国广东省佛山市禅城区陆盈纺织仓库'}</View>
}
{
(obj?.province_name != '' && receivingStatus == 2) &&

View File

@ -6,13 +6,14 @@ import styles from './index.module.scss'
type Param = {
onBlur?: (val: any) => void
onSave?: (val: string) => void
defaultValue?: string
defaultValue?: string,
showInput: boolean
}
export default ({ onBlur, onSave, defaultValue = '' }: Param) => {
export default ({ onBlur, onSave, defaultValue = '', showInput = false }: Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
count: 200,
})
useEffect(() => {
@ -33,10 +34,13 @@ export default ({ onBlur, onSave, defaultValue = '' }: Param) => {
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}></View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
{
showInput && <View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
}
<View className={styles.order_save_address} onClick={() => setSave()}></View>
</View>
)

View File

@ -94,6 +94,7 @@ export default () => {
const handSelect = (obj) => {
if (receivingStatus == 1) return false
Taro.navigateTo({
url: '/pages/addressManager/index?orderId=' + '-100' + '&purchaser_id=' + router.params.purchaser_id
})
@ -192,7 +193,7 @@ export default () => {
<View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
</DefaultBox>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj.remark} />
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj.remark} showInput={showDesc ? true : false} />
</Popup>
<View className={styles.safeBottom}></View>
<View className={styles.bottomBox}>

View File

@ -67,7 +67,7 @@ let feature: IconCardType[] = [
{
iconName: 'icon-kehuxinxi',
name: '客户列表',
path: '',
path: '/pages/customerManagement/index',
jurisdiction: 'customer_list_page'
},
]