67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { Text, View } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro'
|
|
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
|
|
import classnames from 'classnames'
|
|
import AmountShow from '../amountShow'
|
|
import styles from './index.module.scss'
|
|
|
|
interface Param {
|
|
style?: Object
|
|
number?: number|string
|
|
title?: string
|
|
titleStatus?: true|false // true 标题加大加深
|
|
numberStatus?: 0|1|2 // 数字尺寸
|
|
messageTitle?: string
|
|
messageWidth?: number
|
|
messageShow?: true|false
|
|
numberFormat?: 'number'|'text' // 数字还是字符串
|
|
}
|
|
const EstimatedAmount = ({ number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageWidth = 430, messageShow = false, numberFormat = 'number' }: Param) => {
|
|
const [show, setShow] = useState(messageShow)
|
|
const onClose = () => {
|
|
setShow(false)
|
|
}
|
|
const openShow = () => [
|
|
setShow(true),
|
|
]
|
|
|
|
const [style, setStyle] = useState<{ top: string }>()
|
|
|
|
// 设置弹出层高度
|
|
const getDomDes = (id) => {
|
|
setTimeout(() => {
|
|
const query = Taro.createSelectorQuery()
|
|
query.select(id).boundingClientRect((rect) => {
|
|
const height = rect.height * 2 + 15
|
|
setStyle(e => ({ ...e, top: `-${height}rpx`, opacity: 1 }))
|
|
}).exec()
|
|
}, 0)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (show) {
|
|
getDomDes('#message')
|
|
}
|
|
else {
|
|
setStyle(() => ({ top: '0' }))
|
|
}
|
|
}, [show])
|
|
return (
|
|
<>
|
|
<View className={styles.order_price}>
|
|
<View className={classnames(styles.order_price_text, titleStatus && styles.emphasis)} onClick={() => openShow()}>
|
|
<Text>{title}</Text>
|
|
<View className={styles.iconfont_msg}>
|
|
{show && <View style={{ ...style, width: `${messageWidth}rpx` }} id="message" className={classnames(styles.message)}>{messageTitle}</View>}
|
|
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
|
|
</View>
|
|
</View>
|
|
{numberFormat == 'number' && <AmountShow status={numberStatus} number={(number as number / 100)} />}
|
|
{(numberFormat == 'text') && <View className={styles.refund_destination}>{number}</View>}
|
|
{show && <View className={styles.close} catchMove onClick={onClose}></View>}
|
|
</View>
|
|
</>
|
|
)
|
|
}
|
|
export default memo(EstimatedAmount)
|