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', root: 'pages/collectionDetail',
pages: ['index'], pages: ['index'],
}, },
{
root: 'pages/customerManagement',
pages: ['index'],
},
], ],
}) })

View File

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

View File

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

View File

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

View File

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