62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import { Text, View } from "@tarojs/components"
|
|
import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react"
|
|
import {formatKbPrice} from '@/common/common'
|
|
import classnames from "classnames";
|
|
import styles from './index.module.scss'
|
|
import AmountShow from "../amountShow";
|
|
import Taro from "@tarojs/taro";
|
|
|
|
type Param = {
|
|
style?: Object,
|
|
number?: number,
|
|
title?: string,
|
|
titleStatus?: true|false, //true 标题加大加深
|
|
numberStatus?: 0|1|2, //数字尺寸
|
|
messageTitle?: string,
|
|
messageWidth?: number,
|
|
messageShow?: true|false,
|
|
}
|
|
export default memo(({number = 0, titleStatus = true, title = '', messageTitle = '', numberStatus = 1, messageWidth = 430, messageShow = false}:Param) => {
|
|
const [show, setShow] = useState(messageShow)
|
|
const onClose = () => {
|
|
setShow(false)
|
|
}
|
|
const openShow = () => [
|
|
setShow(true)
|
|
]
|
|
|
|
const [style, setStyle] = useState<{top: string}>()
|
|
|
|
useEffect(() => {
|
|
if(show) {
|
|
getDomDes('#message')
|
|
} else {
|
|
setStyle(() => ({top: '0'}))
|
|
}
|
|
}, [show])
|
|
//设置弹出层高度
|
|
const getDomDes = (id) => {
|
|
setTimeout(() => {
|
|
let query = Taro.createSelectorQuery();
|
|
query.select(id).boundingClientRect(rect=>{
|
|
let height = rect.height * 2 + 15;
|
|
setStyle((e) => ({...e, top: `-${height}rpx`, opacity: 1}))
|
|
}).exec();
|
|
}, 0)
|
|
}
|
|
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>
|
|
<AmountShow status={numberStatus} number={number}/>
|
|
{show&&<View className={styles.close} catchMove onClick={onClose}></View>}
|
|
</View>
|
|
</>
|
|
)
|
|
}) |