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.
118 lines
4.0 KiB
118 lines
4.0 KiB
import { observer } from 'mobx-react'
|
|
import { useState } from 'react'
|
|
import { CountDown, Toast } from 'react-vant'
|
|
import useLike from '~/hooks/useLike'
|
|
import { useRouter } from '~/hooks/useRouter'
|
|
import store from '~/store'
|
|
import '~/styles/components.scss'
|
|
import { MarketNFTData } from '~/types/store'
|
|
import { getTime, toThousands } from '~/utils'
|
|
import { copy } from '~/utils/copy'
|
|
import Modal from './Modal'
|
|
|
|
interface ProductInfoProps {
|
|
data: MarketNFTData
|
|
}
|
|
|
|
const ProductInfo = (props: ProductInfoProps) => {
|
|
|
|
const { data } = props
|
|
const { push } = useRouter()
|
|
const { likeNft, userInfo } = store.state
|
|
const { setLike, isLike } = useLike()
|
|
const [visible, setVisible] = useState(false)
|
|
const [visibleTime, setVisibleTime] = useState(false)
|
|
|
|
const share = () => {
|
|
const pathname = `${process.env.REACT_APP_SHARE_LINK}detail?id=${data.id}&type=${data.type}`
|
|
copy(pathname)
|
|
setVisible(true)
|
|
}
|
|
|
|
const toShare = (type: "cast" | "sell") => {
|
|
if (type === 'cast') {
|
|
if (data.cast_id === userInfo.id) {
|
|
push('/share')
|
|
return
|
|
}
|
|
|
|
if (data.cast_show === 1) {
|
|
push('/noShare', { id: data.cast_id })
|
|
} else {
|
|
Toast.fail('對方未開放')
|
|
}
|
|
}
|
|
if (type === 'sell') {
|
|
if (data.sell_id === userInfo.id) {
|
|
push('/share')
|
|
return
|
|
}
|
|
if (data.sell_show === 1) {
|
|
push('/noShare', { id: data.sell_id })
|
|
} else {
|
|
Toast.fail('對方未開放')
|
|
}
|
|
}
|
|
}
|
|
|
|
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 === 1 && !visibleTime && <div className='row-center mt-1'>
|
|
<CountDown time={data.end_Time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} onFinish={() => setVisibleTime(true)} />
|
|
</div>}
|
|
{data.type === 3 && !visibleTime && <div className='row-center mt-1'>
|
|
<CountDown time={data.start_time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} onFinish={() => setVisibleTime(true)} />
|
|
</div>}
|
|
{data.type !== 0 && <div className='mt-1 row-center'>
|
|
{data.type !== 3 && <i className={`iconfont icon-daohangshoucangyishoucang fz-20 ${isLike(data.id, likeNft) ? 'like-text' : 'sub-text'} mr-4`} onClick={() => setLike(data.id)} />}
|
|
<i className='iconfont icon-shangchuandaochu fz-24' 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 onClick={() => toShare('cast')}>
|
|
<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>
|
|
{data.type === 3 ? (
|
|
<div className={`mt-5 row-items fz-14 ${data.symbol}-text`}>
|
|
<div>當前編號：{data.current_number}</div>
|
|
<div className='ml-1'>剩餘數量：{data.remain_quantity}</div>
|
|
</div>
|
|
) : (
|
|
<div onClick={() => toShare('sell')}>
|
|
<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)
|