You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.4 KiB
72 lines
2.4 KiB
import { observer } from 'mobx-react'
|
|
import { useState } from 'react'
|
|
import useLike from '~/hooks/useLike'
|
|
import store from '~/store'
|
|
import '~/styles/components.scss'
|
|
import { MarketNFTData } from '~/types/store'
|
|
import { toThousands } from '~/utils'
|
|
import { copy } from '~/utils/copy'
|
|
import Modal from './Modal'
|
|
|
|
interface ProductInfoProps {
|
|
data: MarketNFTData
|
|
}
|
|
|
|
const ProductInfo = (props: ProductInfoProps) => {
|
|
|
|
const { data } = props
|
|
const { likeNft } = store.state
|
|
const { setLike, isLike } = useLike()
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
const share = () => {
|
|
const pathname = `${process.env.REACT_APP_SHARE_LINK}detail?id=${data.id}&type=${data.type}`
|
|
copy(pathname)
|
|
setVisible(true)
|
|
}
|
|
|
|
return (
|
|
<div className='product-info'>
|
|
<div className='row-center'>
|
|
<div className='cover-box row-center'>
|
|
<img src={data.url} className="img" alt="" />
|
|
</div>
|
|
</div>
|
|
{data.type !== 0 && <div className='mt-1 row-center'>
|
|
<i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? 'like-text' : 'sub-text'}`} onClick={() => setLike(data.id)} />
|
|
<i className='iconfont icon-shangchuandaochu fz-24 ml-4' onClick={share} />
|
|
</div>}
|
|
<div className='mt-3 fz-30 fz-wb-550'>{data.name}</div>
|
|
<div className={`price-tag mt-1 ${data.symbol}-bg`}>{data.symbol} {toThousands(data.price)}</div>
|
|
<div className='mt-3 row-between'>
|
|
<div>
|
|
<div>铸造者</div>
|
|
<div className='user-tag mt-2 plr-1 row-items'>
|
|
<img src={data.cast_url} alt="" />
|
|
<div className='fz-12 tac flex-1 name-overflow'>{data.cast_name}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>售卖者</div>
|
|
<div className='user-tag mt-2 plr-1 row-items'>
|
|
<img src={data.sell_url} alt="" />
|
|
<div className='fz-12 tac flex-1 name-overflow'>{data.sell_name}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
visible={visible}
|
|
title="分享給朋友"
|
|
setVisible={setVisible}
|
|
showConfirmButton
|
|
backgroundColosed
|
|
>
|
|
<div className='tac mt-2 like-text'>
|
|
已複製鏈接
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(ProductInfo)
|