pzy
/
9527-nft-market
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
yyy9608 11 months ago
parent
3c304347fc
commit
01d74f16f4
7 changed files with 193 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/ProductInfo.tsx
  2. 12
      src/components/ProductItem.tsx
  3. 232
      src/pages/home/index.tsx
  4. 73
      src/pages/personal/index.tsx
  5. 4
      src/pages/product/index.tsx
  6. 2
      src/pages/share/index.tsx
  7. 12
      src/styles/components.scss

2
src/components/ProductInfo.tsx
View File

@ -6,7 +6,7 @@ import { useRouter } from '~/hooks/useRouter'
import store from '~/store'
import '~/styles/components.scss'
import { MarketNFTData } from '~/types/store'
import { getTime, toThousands } from '~/utils'
import { toThousands } from '~/utils'
import { copy } from '~/utils/copy'
import Modal from './Modal'

12
src/components/ProductItem.tsx
View File

@ -1,6 +1,8 @@
import { observer } from 'mobx-react'
import store from '~/store'
import '~/styles/components.scss'
import { MarketNFTData } from '~/types/store'
import { toThousands } from '~/utils'
import { toThousands } from '~/utils'
interface ProductItemProps {
data: MarketNFTData
@ -9,9 +11,15 @@ interface ProductItemProps {
const ProductItem = (props: ProductItemProps) => {
const { data } = props
const { userInfo } = store.state
return (
<div className='product-item mt-2'>
{
data.type !== 0 && data.sell_id === userInfo.id && (
<div className='sell-box row-center'>{data.type === 1 ? '拍賣中' : '售賣中'}</div>
)
}
<img src={data?.url} className='img' alt="" />
{/* <div className='img'></div> */}
<div className='desc-box p-1'>
@ -41,4 +49,4 @@ export const NotOpenProductItem = () => {
)
}
export default ProductItem
export default observer(ProductItem)

232
src/pages/home/index.tsx
View File

@ -1,7 +1,7 @@
import '~/styles/home.scss'
import ProductItem, { NotOpenProductItem } from '~/components/ProductItem'
import { useRouter } from '~/hooks/useRouter'
import { Button, CountDown, Swiper, SwiperInstance } from 'react-vant'
import { Button, CountDown, PullRefresh, Swiper, SwiperInstance } from 'react-vant'
import { useEffect, useRef } from 'react'
import { observer } from 'mobx-react'
import store from '~/store'
@ -14,139 +14,157 @@ const Home = () => {
const like = useLike()
const swiperRef = useRef<SwiperInstance>(null)
useEffect(() => {
const onRefresh = () => {
return new Promise((resolve) => {
getData()
setTimeout(() => {
resolve(true)
},2000)
})
}
const getData = () => {
store.getMarketNft("sellNft")
store.getMarketNft("auctionNft")
store.getMarketNft("issueNft")
}
useEffect(() => {
getData()
}, [])
return (
<div className="home">
{issueNft.length > 0 && <div className='fz-20 mt-2 plr-3'>發行搶購</div>}
<div className='row-between mt-2 plr-5px'>
<div>
<i className='iconfont icon-arrow-left-bold fz-wb-550 fz-24' onClick={() => {
swiperRef.current && swiperRef.current.swipePrev()
}}></i>
</div>
<div style={{ flex: 1 }}>
<Swiper ref={swiperRef} indicator={false}>
{
issueNft.map((item, index) => (
<Swiper.Item key={item.id}>
<div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}>
<div className='rush-swiper'>
<img src={item.url} alt="" />
<div className='content-box p-2'>
<div className='sub-text fz-14'>回購型NFT</div>
<div className='mt-5px'>{item.name}</div>
<div className='mt-5px fz-12'>
<div className='row-between'>
<div className={`tag ${item.symbol}-bg`}>{item.symbol} {item.price}</div>
<div className='row-center right-box'>
<img src={item.cast_url} className='avatar-img' alt="" />
<PullRefresh
onRefresh={onRefresh}
>
<div className="home">
{issueNft.length > 0 && <div className='fz-20 mt-2 plr-3'>發行搶購</div>}
<div className='row-between mt-2 plr-5px'>
<div>
<i className='iconfont icon-arrow-left-bold fz-wb-550 fz-24' onClick={() => {
swiperRef.current && swiperRef.current.swipePrev()
}}></i>
</div>
<div style={{ flex: 1 }}>
<Swiper ref={swiperRef} indicator={false}>
{
issueNft.map((item, index) => (
<Swiper.Item key={item.id}>
<div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}>
<div className='rush-swiper'>
<img src={item.url} alt="" />
<div className='content-box p-2'>
<div className='sub-text fz-14'>回購型NFT</div>
<div className='mt-5px'>{item.name}</div>
<div className='mt-5px fz-12'>
<div className='row-between'>
<div className={`tag ${item.symbol}-bg`}>{item.symbol} {item.price}</div>
<div className='row-center right-box'>
<img src={item.cast_url} className='avatar-img' alt="" />
</div>
</div>
</div>
<div className='row-between'>
{
item.isTime ? (
<div className={`${item.symbol}-text`}>售賣中</div>
) : (
<div className='row-items'>
<div>即將發售</div>
<div className={`ml-1 fz-14 mt-3px ${item.symbol}-text`}>
<CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
<div className='row-between'>
{
item.isTime ? (
<div className={`${item.symbol}-text`}>售賣中</div>
) : (
<div className='row-items'>
<div>即將發售</div>
<div className={`ml-1 fz-14 mt-3px ${item.symbol}-text`}>
<CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
</div>
</div>
</div>
)
}
<div className='right-box'>{item.cast_name}</div>
)
}
<div className='right-box'>{item.cast_name}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Swiper.Item>
))
}
</Swiper>
</div>
<div>
<i className='iconfont icon-arrow-right-bold fz-wb-550 fz-24' onClick={() => {
swiperRef.current && swiperRef.current.swipeNext()
}}></i>
</Swiper.Item>
))
}
</Swiper>
</div>
<div>
<i className='iconfont icon-arrow-right-bold fz-wb-550 fz-24' onClick={() => {
swiperRef.current && swiperRef.current.swipeNext()
}}></i>
</div>
</div>
</div>
<div className='plr-3 fz-20 mt-2'>拍賣趨勢</div>
<div className='mt-2 row-items swiper'>
{
auctionNft.length <= 0 ?
Array.from({ length: 2 }).map((_, index) => (
<div key={index} className={`${index === 0 ? 'ml-3' : 'ml-1 mr-3'}`}>
<AuctionNotOpen />
</div>
)) : auctionNft.map((item, index) => (
<div
key={index}
className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
>
<img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
<div className='cover-box' >
<div className='cover-box-item p-1 fz-12'>
<div>
<div>{item.name}</div>
<div className='row-items mt-2px'>
<div className='flex-1'>
<div className='fz-8 fz-wb-550'>鑄造者</div>
<div className='user-tag row-items mt-2px'>
<img src={item.cast_url} alt="" />
<div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
<div className='plr-3 fz-20 mt-2'>拍賣趨勢</div>
<div className='mt-2 row-items swiper'>
{
auctionNft.length <= 0 ?
Array.from({ length: 2 }).map((_, index) => (
<div key={index} className={`${index === 0 ? 'ml-3' : 'ml-1 mr-3'}`}>
<AuctionNotOpen />
</div>
)) : auctionNft.map((item, index) => (
<div
key={index}
className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
>
<img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
<div className='cover-box' >
<div className='cover-box-item p-1 fz-12'>
<div>
<div>{item.name}</div>
<div className='row-items mt-2px'>
<div className='flex-1'>
<div className='fz-8 fz-wb-550'>鑄造者</div>
<div className='user-tag row-items mt-2px'>
<img src={item.cast_url} alt="" />
<div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
</div>
</div>
</div>
<div className='flex-1'>
<div className='fz-8 fz-wb-550'>售賣者</div>
<div className='user-tag row-items mt-2px'>
<img src={item.sell_url} alt="" />
<div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
<div className='flex-1'>
<div className='fz-8 fz-wb-550'>售賣者</div>
<div className='user-tag row-items mt-2px'>
<img src={item.sell_url} alt="" />
<div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
</div>
</div>
</div>
</div>
</div>
<div className='row-between'>
<Button className={`button ${item.symbol}-bg`} round onClick={() => push('/detail', { id: item.id, type: item.type })}>
<div className='fz-wb-550 white'>出價</div>
</Button>
<i className={`
<div className='row-between'>
<Button className={`button ${item.symbol}-bg`} round onClick={() => push('/detail', { id: item.id, type: item.type })}>
<div className='fz-wb-550 white'>出價</div>
</Button>
<i className={`
iconfont icon-daohangshoucangyishoucang fz-18 ${like.isLike(item.id, likeNft) ? item.symbol + '-text' : 'sub-text'}
`} onClick={() => like.setLike(item.id)} />
</div>
</div>
</div>
</div>
</div>
))
}
</div>
<div className='plr-3 fz-20 mt-2'>售賣市場</div>
<div className='plr-3'>
<div className='row-between flex-wrap'>
{
sellNft.length <= 0 ?
Array.from({ length: 2 }).map((_, index) => (
<div key={index}>
<NotOpenProductItem />
</div>
))
: sellNft.map((item, index) => (
<div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
<ProductItem data={item} />
</div>
))
}
</div>
<div className='plr-3 fz-20 mt-2'>售賣市場</div>
<div className='plr-3'>
<div className='row-between flex-wrap'>
{
sellNft.length <= 0 ?
Array.from({ length: 2 }).map((_, index) => (
<div key={index}>
<NotOpenProductItem />
</div>
))
: sellNft.map((item, index) => (
<div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
<ProductItem data={item} />
</div>
))
}
</div>
</div>
</div>
</PullRefresh>
</div>
)
}

73
src/pages/personal/index.tsx
View File

@ -1,5 +1,5 @@
import { observer } from 'mobx-react'
import { Divider } from 'react-vant'
import { Divider, PullRefresh } from 'react-vant'
import store from '~/store'
import '~/styles/personal.scss'
import AccountAssetsCard from './AccountAssetsCard'
@ -8,43 +8,54 @@ const Personal = () => {
const { userInfo } = store.state
const onRefresh = () => {
return new Promise((resolve) => {
store.getUserInfo()
setTimeout(() => {
resolve(true)
}, 2000)
})
}
return (
<div className='personal'>
<div className='plr-2 '>
<div className='mt-3'>
<AccountAssetsCard />
<PullRefresh onRefresh={onRefresh}>
<div className='personal'>
<div className='plr-2 '>
<div className='mt-3'>
<AccountAssetsCard />
</div>
</div>
</div>
<div className='mt-2 assets-box'>
<div>資產</div>
<Divider style={{ margin: 0, borderColor: "#d8d8d8" }} />
<div className='mt-1 row-between fz-14 sub-text'>
<div>名稱</div>
<div>可用</div>
</div>
<div>
{
userInfo.assets && userInfo.assets.map(item => (
<div className='row-between mt-2' style={{ alignItems: 'flex-start' }} key={item.id}>
<div className='row'>
<img src={require(`~/assets/${item.symbol}.png`)} className='symbol-img' alt="" />
<div className='ml-1'>
<div className='fz-wb-550'>{item.symbol}</div>
<div className='fz-14 sub-text mt-5px'>{item.name}</div>
<div className='mt-2 assets-box'>
<div>資產</div>
<Divider style={{ margin: 0, borderColor: "#d8d8d8" }} />
<div className='mt-1 row-between fz-14 sub-text'>
<div>名稱</div>
<div>可用</div>
</div>
<div>
{
userInfo.assets && userInfo.assets.map(item => (
<div className='row-between mt-2' style={{ alignItems: 'flex-start' }} key={item.id}>
<div className='row'>
<img src={require(`~/assets/${item.symbol}.png`)} className='symbol-img' alt="" />
<div className='ml-1'>
<div className='fz-wb-550'>{item.symbol}</div>
<div className='fz-14 sub-text mt-5px'>{item.name}</div>
</div>
</div>
<div className='tar'>
<div className='fz-wb-550'>{item.amount}</div>
<div className='sub-text fz-14 mt-5px'>{item.symbol !== 'USDT' && item.amount_usdt}</div>
</div>
</div>
<div className='tar'>
<div className='fz-wb-550'>{item.amount}</div>
<div className='sub-text fz-14 mt-5px'>{item.symbol !== 'USDT' && item.amount_usdt}</div>
</div>
</div>
))
}
))
}
</div>
</div>
</div>
</div>
</div>
</PullRefresh>
)
}

4
src/pages/product/index.tsx
View File

@ -53,9 +53,7 @@ const Product = () => {
)
}
</div>
{
isSearch && <div className='mt-2 fz-16 fz-wb-550'>{nftList.length}個結果</div>
}
<div className='mt-2 fz-16 fz-wb-550' style={{ opacity: isSearch ? 1 : 0 }}>{nftList.length}個結果</div>
<div className='box'>
<div className='row-between flex-wrap'>
{

2
src/pages/share/index.tsx
View File

@ -1,5 +1,5 @@
import '~/styles/share.scss'
import { Popup, Tabs, Toast } from 'react-vant'
import { Popup, PullRefresh, Tabs, Toast } from 'react-vant'
import ProductItem from '~/components/ProductItem'
import store from '~/store'
import { observer } from 'mobx-react'

12
src/styles/components.scss
View File

@ -3,6 +3,18 @@
height: 160px;
position: relative;
.sell-box{
position: absolute;
top: 0;
left: 5px;
width: 171px;
border-radius: 10px 10px 0px 0px;
background-color: rgba(42,44,36,.8);
color: $white;
font-size: 12px;
padding: 2px 0;
}
.text-overflow{
max-width: 50px;
overflow: hidden;

Write Preview
Loading…
Cancel
Save