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

commit

master
yyy9608 1 year ago
parent
7ea81eafbb
commit
91cc96ca88
25 changed files with 150 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env
  2. 19
      src/components/ProductInfo.tsx
  3. 2
      src/hooks/useCopy.ts
  4. 3
      src/hooks/useNotify.ts
  5. 6
      src/pages/detail/AuctionNFT.tsx
  6. 27
      src/pages/detail/BuyNft.tsx
  7. 15
      src/pages/detail/IssuanceRushNFT.tsx
  8. 2
      src/pages/detail/OnShelvesNFT.tsx
  9. 20
      src/pages/detail/index.tsx
  10. 11
      src/pages/home/index.tsx
  11. 4
      src/pages/no-share/index.tsx
  12. 12
      src/pages/personal/AccountAssetsCard.tsx
  13. 4
      src/pages/personal/index.tsx
  14. 14
      src/pages/product/index.tsx
  15. 19
      src/pages/record/index.tsx
  16. 12
      src/pages/share/index.tsx
  17. 1
      src/pages/team/index.tsx
  18. 16
      src/pages/withdraw/index.tsx
  19. 1
      src/router/layout/Navbar.tsx
  20. 16
      src/router/layout/index.tsx
  21. 15
      src/store/index.ts
  22. 5
      src/styles/detail.scss
  23. 8
      src/styles/layout.scss
  24. 5
      src/styles/share.scss
  25. 1
      src/types/store.d.ts

2
.env
View File

@ -2,5 +2,5 @@ SKIP_PREFLIGHT_CHECK=true
GENERATE_SOURCEMAP=false GENERATE_SOURCEMAP=false
REACT_APP_BASE_URL='http://14.29.101.215:30307' REACT_APP_BASE_URL='http://14.29.101.215:30307'
REACT_APP_WS_URL='ws://14.29.101.215:30307' REACT_APP_WS_URL='ws://14.29.101.215:30307'
REACT_APP_SHARE_LINK='http://14.29.101.215:30305/#/'
REACT_APP_SHARE_LINK='http://14.29.101.215:30306/#/'
REACT_APP_SIGN_KEY='9527nft9527_@fsdgfsx' REACT_APP_SIGN_KEY='9527nft9527_@fsdgfsx'

19
src/components/ProductInfo.tsx
View File

@ -21,6 +21,7 @@ const ProductInfo = (props: ProductInfoProps) => {
const { likeNft, userInfo } = store.state const { likeNft, userInfo } = store.state
const { setLike, isLike } = useLike() const { setLike, isLike } = useLike()
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const [visibleTime, setVisibleTime] = useState(false)
const share = () => { const share = () => {
const pathname = `${process.env.REACT_APP_SHARE_LINK}detail?id=${data.id}&type=${data.type}` const pathname = `${process.env.REACT_APP_SHARE_LINK}detail?id=${data.id}&type=${data.type}`
@ -61,21 +62,23 @@ const ProductInfo = (props: ProductInfoProps) => {
<img src={data.url} className="img" alt="" /> <img src={data.url} className="img" alt="" />
</div> </div>
</div> </div>
{data.type === 1 && <div className='row-center mt-1'>
<CountDown time={data.end_Time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} />
{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>} </div>}
{data.type === 3 && <div className='row-center mt-1'>
<CountDown time={data.start_time * 1000 - Date.now()} className="fz-18 fz-wb-550" style={{ letterSpacing: 2 }} />
{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>} </div>}
{data.type !== 0 && <div className='mt-1 row-center'> {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} />
{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>}
<div className='mt-3 fz-30 fz-wb-550'>{data.name}</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={`price-tag mt-1 ${data.symbol}-bg`}>{data.symbol} {toThousands(data.price)}</div>
<div className='mt-3 row-between'> <div className='mt-3 row-between'>
<div onClick={() => toShare('cast')}> <div onClick={() => toShare('cast')}>
<div>铸造者</div>
<div>鑄造者</div>
<div className='user-tag mt-2 plr-1 row-items'> <div className='user-tag mt-2 plr-1 row-items'>
<img src={data.cast_url} alt="" /> <img src={data.cast_url} alt="" />
<div className='fz-12 tac flex-1 name-overflow'>{data.cast_name}</div> <div className='fz-12 tac flex-1 name-overflow'>{data.cast_name}</div>
@ -88,7 +91,7 @@ const ProductInfo = (props: ProductInfoProps) => {
</div> </div>
) : ( ) : (
<div onClick={() => toShare('sell')}> <div onClick={() => toShare('sell')}>
<div>售卖者</div>
<div>售賣者</div>
<div className='user-tag mt-2 plr-1 row-items'> <div className='user-tag mt-2 plr-1 row-items'>
<img src={data.sell_url} alt="" /> <img src={data.sell_url} alt="" />
<div className='fz-12 tac flex-1 name-overflow'>{data.sell_name}</div> <div className='fz-12 tac flex-1 name-overflow'>{data.sell_name}</div>

2
src/hooks/useCopy.ts
View File

@ -5,7 +5,7 @@ const useCopyLink = () => {
const copyVal = (address: any) => { const copyVal = (address: any) => {
copy(address, () => { copy(address, () => {
Toast.success('复制成功');
Toast.success('複製成功');
}) })
}; };

3
src/hooks/useNotify.ts
View File

@ -5,7 +5,6 @@ import { MessageType } from "~/types/store";
import signGenerator from "~/utils/sign/sign"; import signGenerator from "~/utils/sign/sign";
const useNotify = (path: string, isNotity: boolean) => { const useNotify = (path: string, isNotity: boolean) => {
console.log(isNotity);
const baseUrl = `${process.env.REACT_APP_WS_URL}/api/v1/${path}`; const baseUrl = `${process.env.REACT_APP_WS_URL}/api/v1/${path}`;
const ws = useRef<any>(null); const ws = useRef<any>(null);
@ -33,7 +32,7 @@ const useNotify = (path: string, isNotity: boolean) => {
let message = JSON.parse(event.data) as MessageType; let message = JSON.parse(event.data) as MessageType;
let item = filterMessage.current.find((v) => v.id === message.id); let item = filterMessage.current.find((v) => v.id === message.id);
if (item) return; if (item) return;
filterMessage.current.push(message);
filterMessage.current.unshift(message);
setMessages((_) => [...filterMessage.current]); setMessages((_) => [...filterMessage.current]);
// 如果打開了消息列表，則推送直接設置為已讀 // 如果打開了消息列表，則推送直接設置為已讀
if (isNotity) { if (isNotity) {

6
src/pages/detail/AuctionNFT.tsx
View File

@ -1,4 +1,4 @@
import { useMemo, useState } from "react"
import { useEffect, useMemo, useState } from "react"
import { Button, Toast } from "react-vant" import { Button, Toast } from "react-vant"
import { buy_nft } from "~/api" import { buy_nft } from "~/api"
import Modal from "~/components/Modal" import Modal from "~/components/Modal"
@ -29,6 +29,10 @@ const AuctionNFT = (props: AuctionNFTProps) => {
setVisible(true) setVisible(true)
} }
useEffect(() => {
!visible && setMarkupCount(0)
}, [visible])
const confirm = async () => { const confirm = async () => {
setVisible(false) setVisible(false)
const params = { const params = {

27
src/pages/detail/BuyNft.tsx
View File

@ -7,6 +7,7 @@ import { observer } from 'mobx-react'
import store from '~/store' import store from '~/store'
import { toThousands } from '~/utils' import { toThousands } from '~/utils'
import { buy_nft } from '~/api' import { buy_nft } from '~/api'
import { useRouter } from '~/hooks/useRouter'
interface BuyNftProps { interface BuyNftProps {
data: MarketNFTData data: MarketNFTData
@ -15,6 +16,7 @@ interface BuyNftProps {
const BuyNft = (props: BuyNftProps) => { const BuyNft = (props: BuyNftProps) => {
const { data } = props const { data } = props
const { push } = useRouter()
const { userInfo, token } = store.state const { userInfo, token } = store.state
const [buyVisible, setBuyVisible] = useState(false) const [buyVisible, setBuyVisible] = useState(false)
const [successVisible, setSuccessVisible] = useState(false) const [successVisible, setSuccessVisible] = useState(false)
@ -41,15 +43,16 @@ const BuyNft = (props: BuyNftProps) => {
} }
const res: any = await buy_nft(params) const res: any = await buy_nft(params)
if (res && res.code === 0) { if (res && res.code === 0) {
setSuccessVisible(true)
store.getMyNft("myNft") store.getMyNft("myNft")
store.getMarketNft("sellNft") store.getMarketNft("sellNft")
store.getUserInfo() store.getUserInfo()
store.setBuyNFTSuccessVisible(true, data.name)
push('/share', null, true)
} }
} }
return ( return (
<div className='mtb-4 buy-nft'>
<div className='mt-4 buy-nft'>
<Button <Button
className='button' className='button'
style={{ style={{
@ -58,7 +61,7 @@ const BuyNft = (props: BuyNftProps) => {
}} }}
onClick={openBuyModal} onClick={openBuyModal}
> >
<span className="fz-20 fz-wb-550">购买</span>
<span className="fz-20 fz-wb-550">購買</span>
</Button> </Button>
{/* Buy Modal */} {/* Buy Modal */}
<Modal <Modal
@ -71,25 +74,11 @@ const BuyNft = (props: BuyNftProps) => {
<div className='tac mt-3'>您將以 <span className={`${data.symbol}-text`}>{toThousands(data.price)}</span> {data.symbol}</div> <div className='tac mt-3'>您將以 <span className={`${data.symbol}-text`}>{toThousands(data.price)}</span> {data.symbol}</div>
<div className='tac mt-5px'>購買一張 "{data.name}" NFT</div> <div className='tac mt-5px'>購買一張 "{data.name}" NFT</div>
<div className="mt-3 row-center"> <div className="mt-3 row-center">
<Button onClick={buyNft} className={`mark-button ${data.symbol}-bg`}>確定出價</Button>
<Button onClick={buyNft} className={`mark-button ${data.symbol}-bg`}>確定購買</Button>
</div> </div>
</div> </div>
</Modal > </Modal >
{/* success */}
<Modal
visible={successVisible}
setVisible={setSuccessVisible}
showConfirmButton
title=''
>
<div>
<div className='row-center'>
<img src={require('~/assets/buy-success.png')} alt="" className='success-img' />
</div>
<div className='fz-18 fz-wb-550 tac'>恭喜購買成功</div>
<div className='fz-24 fz-wb-550 tac mt-1'>{data.name}</div>
</div>
</Modal>
</div > </div >
) )
} }

15
src/pages/detail/IssuanceRushNFT.tsx
View File

@ -2,6 +2,7 @@ import { useMemo, useState } from "react"
import { Button, CountDown } from "react-vant" import { Button, CountDown } from "react-vant"
import { buy_nft } from "~/api" import { buy_nft } from "~/api"
import Modal from "~/components/Modal" import Modal from "~/components/Modal"
import { useRouter } from "~/hooks/useRouter"
import store from "~/store" import store from "~/store"
import '~/styles/detail.scss' import '~/styles/detail.scss'
import { MarketNFTData } from "~/types/store" import { MarketNFTData } from "~/types/store"
@ -16,6 +17,7 @@ interface IssuanceRushNFTProps {
const IssuanceRushNFT = (props: IssuanceRushNFTProps) => { const IssuanceRushNFT = (props: IssuanceRushNFTProps) => {
const { data, getData } = props const { data, getData } = props
const { push } = useRouter()
const [isBuy, setIsBuy] = useState(false) const [isBuy, setIsBuy] = useState(false)
const [buyVisible, setBuyVisible] = useState(false) const [buyVisible, setBuyVisible] = useState(false)
const [successVisible, setSuccessVisible] = useState(false) const [successVisible, setSuccessVisible] = useState(false)
@ -33,21 +35,16 @@ const IssuanceRushNFT = (props: IssuanceRushNFTProps) => {
} }
const res: any = await buy_nft(params) const res: any = await buy_nft(params)
if (res && res.code === 0) { if (res && res.code === 0) {
setSuccessVisible(true)
getData()
store.getMyNft("myNft") store.getMyNft("myNft")
store.getMarketNft("issueNft") store.getMarketNft("issueNft")
store.getUserInfo() store.getUserInfo()
store.setBuyNFTSuccessVisible(true, data.name)
push('/share', null, true)
} }
} }
return ( return (
<div className='mt-2 buy-nft'> <div className='mt-2 buy-nft'>
<div className="fz-wb-550">NFT説明:</div>
<div className="fz-14 mt-1 taj">{data.illustrate}</div>
<div className="mt-2">
<NFTProperties data={data} />
</div>
<Button <Button
className={`button ${data.symbol}-bg mtb-3`} className={`button ${data.symbol}-bg mtb-3`}
style={{ style={{
@ -57,7 +54,7 @@ const IssuanceRushNFT = (props: IssuanceRushNFTProps) => {
> >
{ {
isBuy ? ( isBuy ? (
<span className="fz-20 fz-wb-550 white">购买</span>
<span className="fz-20 fz-wb-550 white">購買</span>
) : ( ) : (
<CountDown onFinish={() => { <CountDown onFinish={() => {
setIsBuy(true) setIsBuy(true)
@ -75,7 +72,7 @@ const IssuanceRushNFT = (props: IssuanceRushNFTProps) => {
<div className='tac mt-3'>您將以 <span className={`${data.symbol}-text`}>{toThousands(data.price)}</span> {data.symbol}</div> <div className='tac mt-3'>您將以 <span className={`${data.symbol}-text`}>{toThousands(data.price)}</span> {data.symbol}</div>
<div className='tac mt-5px'>購買一張 "{data.name}" NFT</div> <div className='tac mt-5px'>購買一張 "{data.name}" NFT</div>
<div className="mt-3 row-center"> <div className="mt-3 row-center">
<Button onClick={buyNft} className={`mark-button ${data.symbol}-bg`}>確定出價</Button>
<Button onClick={buyNft} className={`mark-button ${data.symbol}-bg`}>確定購買</Button>
</div> </div>
</div> </div>
</Modal > </Modal >

2
src/pages/detail/OnShelvesNFT.tsx
View File

@ -88,8 +88,6 @@ const OnShelvesNFT = (props: OnShelvesNFTProps) => {
symbols.map(item => ( symbols.map(item => (
<div key={item} className={`row-center tag ${item}-bg mr-2 ${currentSymbol === item && 'tag-active'}`} onClick={() => { <div key={item} className={`row-center tag ${item}-bg mr-2 ${currentSymbol === item && 'tag-active'}`} onClick={() => {
setCurrentSymbol(item) setCurrentSymbol(item)
console.log(currentSymbol);
}}> }}>
<img src={require(`~/assets/${item}.png`)} alt="" /> <img src={require(`~/assets/${item}.png`)} alt="" />
<div>{item}</div> <div>{item}</div>

20
src/pages/detail/index.tsx
View File

@ -47,17 +47,12 @@ const Detail = () => {
const renderItem = () => { const renderItem = () => {
// type為 0 時 顯示NFT屬性 // type為 0 時 顯示NFT屬性
if (product.type === 0) {
if (product.type === 0 && product.sell_id === userInfo.id) {
return ( return (
<>
<div className="mt-3">
<NFTProperties data={product} />
</div>
{/* 屬於自己時顯示上架 */}
{product.sell_id === userInfo.id && <OnShelvesNFT data={product} />}
</>
<OnShelvesNFT data={product} />
) )
} }
// 如果type為2時 并且不屬於自己時 顯示購買 // 如果type為2時 并且不屬於自己時 顯示購買
if (product.type === 2 && product.sell_id !== userInfo.id) { if (product.type === 2 && product.sell_id !== userInfo.id) {
return <BuyNft data={product} /> return <BuyNft data={product} />
@ -118,8 +113,17 @@ const Detail = () => {
<div className="mt-2"> <div className="mt-2">
<ProductInfo data={product} /> <ProductInfo data={product} />
</div> </div>
<div className="mt-2">
<div className="fz-wb-550">NFT説明:</div>
<div className="fz-14 mt-1 taj">{product.illustrate}</div>
</div>
<div className="mt-2">
<NFTProperties data={product} />
</div>
<div className="mb-3">
{renderItem()} {renderItem()}
</div> </div>
</div>
) )
} }

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

@ -3,7 +3,6 @@ import ProductItem from '~/components/ProductItem'
import { useRouter } from '~/hooks/useRouter' import { useRouter } from '~/hooks/useRouter'
import { Button, CountDown, Swiper, SwiperInstance } from 'react-vant' import { Button, CountDown, Swiper, SwiperInstance } from 'react-vant'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { getTime, splitAddress } from '~/utils'
import { observer } from 'mobx-react' import { observer } from 'mobx-react'
import store from '~/store' import store from '~/store'
import useLike from '~/hooks/useLike' import useLike from '~/hooks/useLike'
@ -33,7 +32,7 @@ const Home = () => {
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Swiper ref={swiperRef} indicator={false}> <Swiper ref={swiperRef} indicator={false}>
{ {
issueNft.map(item => (
issueNft.map((item, index) => (
<Swiper.Item key={item.id}> <Swiper.Item key={item.id}>
<div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}> <div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}>
<div className='rush-swiper'> <div className='rush-swiper'>
@ -49,12 +48,18 @@ const Home = () => {
</div> </div>
</div> </div>
<div className='row-between'> <div className='row-between'>
{
item.isTime ? (
<div className={`${item.symbol}-text`}>售賣中</div>
) : (
<div className='row-items'> <div className='row-items'>
<div>即將發售</div> <div>即將發售</div>
<div className='ml-1 fz-14 like-text mt-3px'> <div className='ml-1 fz-14 like-text mt-3px'>
<CountDown time={item.start_time * 1000 - Date.now()} className="like-text" />
<CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
</div> </div>
</div> </div>
)
}
<div className='right-box'>{item.cast_name}</div> <div className='right-box'>{item.cast_name}</div>
</div> </div>
</div> </div>

4
src/pages/no-share/index.tsx
View File

@ -47,11 +47,11 @@ const NoShare = () => {
<div className='row-between plr-5 mt-3'> <div className='row-between plr-5 mt-3'>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{userInfo.sell || 0}</div> <div className='fz-20 fz-wb-550'>{userInfo.sell || 0}</div>
<div className='mt-8px'>售卖作品</div>
<div className='mt-8px'>售賣作品</div>
</div> </div>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{userInfo.auction || 0}</div> <div className='fz-20 fz-wb-550'>{userInfo.auction || 0}</div>
<div className='mt-8px'>拍卖作品</div>
<div className='mt-8px'>拍賣作品</div>
</div> </div>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{toFixed2(userInfo.income, 2)} FIL</div> <div className='fz-20 fz-wb-550'>{toFixed2(userInfo.income, 2)} FIL</div>

12
src/pages/personal/AccountAssetsCard.tsx
View File

@ -11,15 +11,15 @@ const AccountAssetsCard = () => {
const { userInfo } = store.state const { userInfo } = store.state
const balanceList = useMemo(() => [ const balanceList = useMemo(() => [
{ title: 'USDT资产', value: userInfo.balance_Usdt || 0, symbol: 'USDT' },
{ title: 'FIL资产', value: userInfo.balance_fil || 0, symbol: 'FIL' },
{ title: 'USDT資產', value: userInfo.balance_Usdt || 0, symbol: 'USDT' },
{ title: '資產', value: userInfo.balance_fil || 0, symbol: 'FIL' },
], [userInfo]); ], [userInfo]);
const menu = useMemo(() => [ const menu = useMemo(() => [
{ title: '充值', icon: require('~/assets/recharge.png'), path: '/recharge' }, { title: '充值', icon: require('~/assets/recharge.png'), path: '/recharge' },
{ title: '提现', icon: require('~/assets/withdraw.png'), path: '/withdraw' },
{ title: '账单', icon: require('~/assets/record.png'), path: '/record' },
{ title: '团队', icon: require('~/assets/team.png'), path: '/team' },
{ title: '提現', icon: require('~/assets/withdraw.png'), path: '/withdraw' },
{ title: '賬單', icon: require('~/assets/record.png'), path: '/record' },
{ title: '團隊', icon: require('~/assets/team.png'), path: '/team' },
], []); ], []);
return ( return (
@ -27,7 +27,7 @@ const AccountAssetsCard = () => {
<div> <div>
<div className='card'> <div className='card'>
<div> <div>
<div className='sub-color'>总资产估值</div>
<div className='sub-color'>總資產估值</div>
<div className='mt-5px'><span className='fz-24 fz-wb-550'>{toThousands(userInfo.total)}</span> <span>USDT</span></div> <div className='mt-5px'><span className='fz-24 fz-wb-550'>{toThousands(userInfo.total)}</span> <span>USDT</span></div>
</div> </div>
<div className='row-items'> <div className='row-items'>

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

@ -17,10 +17,10 @@ const Personal = () => {
</div> </div>
<div className='mt-2 assets-box'> <div className='mt-2 assets-box'>
<div>资产</div>
<div>資產</div>
<Divider style={{ margin: 0, borderColor: "#d8d8d8" }} /> <Divider style={{ margin: 0, borderColor: "#d8d8d8" }} />
<div className='mt-1 row-between fz-14 sub-text'> <div className='mt-1 row-between fz-14 sub-text'>
<div>名称</div>
<div>名稱</div>
<div>可用</div> <div>可用</div>
</div> </div>
<div> <div>

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

@ -15,14 +15,20 @@ const Product = () => {
const { push } = useRouter() const { push } = useRouter()
const [nftList, setNftList] = useState([] as MarketNFTData[]) const [nftList, setNftList] = useState([] as MarketNFTData[])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [isSearch, setIsSearch] = useState(false)
const onChange = (e: any) => { const onChange = (e: any) => {
searchNft(e.target.value) searchNft(e.target.value)
} }
const searchNft = debounce(async (value: string) => { const searchNft = debounce(async (value: string) => {
if (!value) return setNftList([])
if (!value) {
setNftList([])
setIsSearch(false)
return
}
setLoading(true) setLoading(true)
setIsSearch(true)
const res: any = await search_nft(value) const res: any = await search_nft(value)
setLoading(false) setLoading(false)
if (res && res.code === 0 && res.data) { if (res && res.code === 0 && res.data) {
@ -47,7 +53,9 @@ const Product = () => {
) )
} }
</div> </div>
<div className='mt-2 fz-16 fz-wb-550'>{nftList.length}個結果</div>
{
isSearch && <div className='mt-2 fz-16 fz-wb-550'>{nftList.length}個結果</div>
}
<div className='box'> <div className='box'>
<div className='row-between flex-wrap'> <div className='row-between flex-wrap'>
{ {
@ -60,7 +68,7 @@ const Product = () => {
</div> </div>
</div> </div>
<Divider style={{ borderColor: '#dedede', borderWidth: 1 }} /> <Divider style={{ borderColor: '#dedede', borderWidth: 1 }} />
<div className='mt-1'>推荐</div>
<div className='mt-1'>推薦</div>
<div className='row-between flex-wrap'> <div className='row-between flex-wrap'>
{ {
rmdNft.map((item, index) => ( rmdNft.map((item, index) => (

19
src/pages/record/index.tsx
View File

@ -14,9 +14,8 @@ const Record = () => {
const { token } = store.state; const { token } = store.state;
const { push, location } = useRouter() const { push, location } = useRouter()
console.log(location);
const recordTabs = useMemo(() => ['充值', '提现', '收益'], []);
const recordTabs = useMemo(() => ['充值', '提現', '收益'], []);
const [recordIndex, setRecordIndex] = useState(location.state ? location.state.index : 0); const [recordIndex, setRecordIndex] = useState(location.state ? location.state.index : 0);
const { copyVal } = useCopyLink(); const { copyVal } = useCopyLink();
const [query, setQuery] = useState([ const [query, setQuery] = useState([
@ -78,7 +77,7 @@ const Record = () => {
return ( return (
<div className="plr-2 record"> <div className="plr-2 record">
<BackBar <BackBar
title='账单'
title='賬單'
/> />
<Tabs <Tabs
swipeable swipeable
@ -119,10 +118,10 @@ const RechargeRecord = (
{ list, copy, finished, getData }: ChildProps { list, copy, finished, getData }: ChildProps
) => { ) => {
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暂无记录" />;
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
return ( return (
<List finished={finished} onLoad={() => getData()} errorText="请求失败，点击重新加载" offset={10}>
<List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
{ {
list.map((item) => ( list.map((item) => (
<Cell key={item.id} className="ptb-1" style={{ background: 'none' }}> <Cell key={item.id} className="ptb-1" style={{ background: 'none' }}>
@ -155,16 +154,16 @@ const RechargeRecord = (
const WithdrawRecord = ({ list, finished, getData, copy }: ChildProps) => { const WithdrawRecord = ({ list, finished, getData, copy }: ChildProps) => {
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暂无记录" />;
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
return ( return (
<List finished={finished} onLoad={() => getData()} errorText="请求失败，点击重新加载" offset={10}>
<List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
{ {
list.map((item, index) => ( list.map((item, index) => (
<Cell className='ptb-1' key={item.id} style={{ background: 'none' }}> <Cell className='ptb-1' key={item.id} style={{ background: 'none' }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div> <div>
<div className='fz-wb-550'>提现</div>
<div className='fz-wb-550'>提現</div>
<div className='sub-color fz-14'>{getTime(item.time * 1000)}</div> <div className='sub-color fz-14'>{getTime(item.time * 1000)}</div>
<div className='sub-color fz-14'> <div className='sub-color fz-14'>
交易哈希：{item.tx_hash && splitAddress(item.tx_hash, 8)} 交易哈希：{item.tx_hash && splitAddress(item.tx_hash, 8)}
@ -191,10 +190,10 @@ const WithdrawRecord = ({ list, finished, getData, copy }: ChildProps) => {
const TransferRecord = ({ list, finished, getData }: ChildProps) => { const TransferRecord = ({ list, finished, getData }: ChildProps) => {
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暂无记录" />;
if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
return ( return (
<List finished={finished} onLoad={() => getData()} errorText="请求失败，点击重新加载" offset={10}>
<List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
{ {
list.map((item, index) => ( list.map((item, index) => (
<Cell className="ptb-1" key={item.id} style={{ background: 'none' }}> <Cell className="ptb-1" key={item.id} style={{ background: 'none' }}>

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

@ -129,20 +129,20 @@ const Share = () => {
</div> </div>
</div> </div>
) : ( ) : (
<div className='tac sub-text'>未登录</div>
<div className='tac sub-text'>未登錄</div>
) )
} }
<div className='row-center'> <div className='row-center'>
<div className='tag fz-wb-550 mt-5px' onClick={openPages}>{userInfo.show === 2 ? '开放我的艺术页面' : '隐藏我的艺术页面'}</div>
<div className='tag fz-wb-550 mt-5px' onClick={openPages}>{userInfo.show === 2 ? '開放我的藝術頁面' : '隱藏我的藝術頁面'}</div>
</div> </div>
<div className='row-between plr-5 mt-3'> <div className='row-between plr-5 mt-3'>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{userInfo.sell}</div> <div className='fz-20 fz-wb-550'>{userInfo.sell}</div>
<div className='mt-8px'>售卖作品</div>
<div className='mt-8px'>售賣作品</div>
</div> </div>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{userInfo.auction}</div> <div className='fz-20 fz-wb-550'>{userInfo.auction}</div>
<div className='mt-8px'>拍卖作品</div>
<div className='mt-8px'>拍賣作品</div>
</div> </div>
<div className='tac'> <div className='tac'>
<div className='fz-20 fz-wb-550'>{toFixed2(userInfo.income, 2)} FIL</div> <div className='fz-20 fz-wb-550'>{toFixed2(userInfo.income, 2)} FIL</div>
@ -195,8 +195,8 @@ const Share = () => {
> >
<div className='fz-18' onClick={avatarmenuClick}> <div className='fz-18' onClick={avatarmenuClick}>
<div className='p-2 tac'> <div className='p-2 tac'>
<div className='' data-type='photo'>从手机相册选择</div>
<div className='mt-2' data-type='save'>保存图片</div>
<div className='' data-type='photo'>從手機相冊選擇</div>
<div className='mt-2' data-type='save'>保存圖片</div>
</div> </div>
<div style={{ height: 2, width: '100%' }} className="background-bg"></div> <div style={{ height: 2, width: '100%' }} className="background-bg"></div>
<div className='p-2 tac' data-type="cancel">取消</div> <div className='p-2 tac' data-type="cancel">取消</div>

1
src/pages/team/index.tsx
View File

@ -69,7 +69,6 @@ const Team = () => {
setCardState([...cardState]) setCardState([...cardState])
setAddress(res.data.address) setAddress(res.data.address)
} }
console.log(res);
} }
token && getData() token && getData()

16
src/pages/withdraw/index.tsx
View File

@ -17,7 +17,6 @@ const Recharge = () => {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const currentCoin = useMemo(() => coinList[coinIndex], [coinIndex, coinList]) const currentCoin = useMemo(() => coinList[coinIndex], [coinIndex, coinList])
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
console.log(currentCoin);
const withdraw = async () => { const withdraw = async () => {
const amount = inputRef.current?.value const amount = inputRef.current?.value
@ -34,6 +33,7 @@ const Recharge = () => {
amount amount
}); });
if (res.code === 0 || res.code === 101) { if (res.code === 0 || res.code === 101) {
store.getUserInfo()
res.code === 0 && Toast.success('提交成功'); res.code === 0 && Toast.success('提交成功');
setTimeout(() => { setTimeout(() => {
push('/record', { index: 1 }, true) push('/record', { index: 1 }, true)
@ -47,7 +47,7 @@ const Recharge = () => {
return ( return (
<div className='recharge plr-2'> <div className='recharge plr-2'>
<BackBar title='提现' />
<BackBar title='提現' />
<div className='container row-center mt-2'> <div className='container row-center mt-2'>
<div className='box plr-2 row-between'> <div className='box plr-2 row-between'>
<CoinPicker <CoinPicker
@ -63,7 +63,7 @@ const Recharge = () => {
<div className='mt-2'> <div className='mt-2'>
<div className='mt-2 white-bg r-1 p-2'> <div className='mt-2 white-bg r-1 p-2'>
<div className='fz-14'>提现地址</div>
<div className='fz-14'>提現地址</div>
<div className='mt-1 input-box plr-1'> <div className='mt-1 input-box plr-1'>
<div className='fz-14'>{walletAddress}</div> <div className='fz-14'>{walletAddress}</div>
</div> </div>
@ -81,19 +81,21 @@ const Recharge = () => {
<input placeholder='請輸入數量' ref={inputRef} /> <input placeholder='請輸入數量' ref={inputRef} />
<div className='row-items'> <div className='row-items'>
<div className='ml-1 fz-14'>{currentCoin && currentCoin.symbol}</div> <div className='ml-1 fz-14'>{currentCoin && currentCoin.symbol}</div>
<div className='ml-2 fz-14 primary'>最大</div>
<div className='ml-2 fz-14 primary' onClick={() => {
inputRef.current && (inputRef.current.value = currentCoin.balance)
}}>ALL</div>
</div> </div>
</div> </div>
<div className='tar sub-text fz-14 mt-5px'>可用余额：{currentCoin ? currentCoin.balance : 0} {currentCoin && currentCoin.symbol}</div>
<div className='tar sub-text fz-14 mt-5px'>可用餘額：{currentCoin ? currentCoin.balance : 0} {currentCoin && currentCoin.symbol}</div>
</div> </div>
<div className='mt-2 fz-14'> <div className='mt-2 fz-14'>
<div>手续费</div>
<div>手續費</div>
<div className='mt-5px'>{currentCoin ? currentCoin.withdraw_fee : 0} {currentCoin && currentCoin.symbol}</div> <div className='mt-5px'>{currentCoin ? currentCoin.withdraw_fee : 0} {currentCoin && currentCoin.symbol}</div>
</div> </div>
<div className='mt-3'> <div className='mt-3'>
<Button className='button' loading={loading} loadingType="ball" onClick={withdraw}>提现</Button>
<Button className='button' loading={loading} loadingType="ball" onClick={withdraw}>提現</Button>
</div> </div>
</div> </div>
</div> </div>

1
src/router/layout/Navbar.tsx
View File

@ -22,7 +22,6 @@ const Navbar = (props: NavbarProps) => {
const msgCount = useMemo(() => { const msgCount = useMemo(() => {
// status 1.未讀 2.已讀 // status 1.未讀 2.已讀
let list = messages.filter(v => v.status === 1) let list = messages.filter(v => v.status === 1)
console.log(list);
return list.length return list.length
}, [messages]) }, [messages])

16
src/router/layout/index.tsx
View File

@ -12,6 +12,7 @@ import useNotify from '~/hooks/useNotify';
import { ethers } from 'ethers'; import { ethers } from 'ethers';
import { bind_rmd } from '~/api'; import { bind_rmd } from '~/api';
import { AlreadyBind, BindRmd, BindSuccess, DefaultBind, UnLogin, VaildLink } from './ui'; import { AlreadyBind, BindRmd, BindSuccess, DefaultBind, UnLogin, VaildLink } from './ui';
import Modal from '~/components/Modal';
const LayoutRouter = () => { const LayoutRouter = () => {
@ -129,6 +130,21 @@ const LayoutRouter = () => {
/> />
<div className="ui"> <div className="ui">
{/* success */}
<Modal
visible={store.state.buyNFTSuccessVisible}
setVisible={() => store.setBuyNFTSuccessVisible(false)}
showConfirmButton
title=''
>
<div>
<div className='row-center'>
<img src={require('~/assets/buy-success.png')} alt="" className='success-img' />
</div>
<div className='fz-18 fz-wb-550 tac'>恭喜購買成功</div>
<div className='fz-24 fz-wb-550 tac mt-1'>{store.state.buyNFTSuccessName}</div>
</div>
</Modal>
{/* 無效鏈接 */} {/* 無效鏈接 */}
{visibleVaildLink && <VaildLink visible={visibleVaildLink} setVisible={setVisibleVaildLink} />} {visibleVaildLink && <VaildLink visible={visibleVaildLink} setVisible={setVisibleVaildLink} />}
{/* 已經綁定 */} {/* 已經綁定 */}

15
src/store/index.ts
View File

@ -14,6 +14,8 @@ class AppStore implements Store {
coinList: [] as CoinList[], coinList: [] as CoinList[],
userInfo: {} as UserInfo, userInfo: {} as UserInfo,
visibleUnLogin: false, visibleUnLogin: false,
buyNFTSuccessVisible: false,
buyNFTSuccessName: "",
likeNft: [] as MarketNFTData[], //喜歡的NFT likeNft: [] as MarketNFTData[], //喜歡的NFT
myNft: [] as MarketNFTData[], //我的NFT myNft: [] as MarketNFTData[], //我的NFT
auctionNft: [] as MarketNFTData[], //拍賣NFT auctionNft: [] as MarketNFTData[], //拍賣NFT
@ -124,6 +126,19 @@ class AppStore implements Store {
this.state[key] = res.data; this.state[key] = res.data;
} }
} }
updateIssueNftIsTime(index: number) {
this.state.issueNft[index].isTime = true;
}
setBuyNFTSuccessVisible(bool: boolean, name?: string) {
this.state.buyNFTSuccessVisible = bool;
if (bool && name) {
this.state.buyNFTSuccessName = name;
} else {
this.state.buyNFTSuccessName = "";
}
}
} }
const store = new AppStore(); const store = new AppStore();

5
src/styles/detail.scss
View File

@ -6,11 +6,6 @@
} }
.buy-nft{ .buy-nft{
.success-img{
width: 125px;
height: 140px;
object-fit: cover;
}
.tag-mark{ .tag-mark{
width: 90px; width: 90px;

8
src/styles/layout.scss
View File

@ -71,6 +71,14 @@
} }
.ui{ .ui{
.success-img{
width: 125px;
height: 140px;
object-fit: cover;
}
.unlogin-box{ .unlogin-box{
width: 100%; width: 100%;
height: 32px; height: 32px;

5
src/styles/share.scss
View File

@ -22,8 +22,11 @@
bottom: -71px; bottom: -71px;
.img{ .img{
@include img-size(142px,142px);
width: 142px;
height: 142px;
border-radius: 71px; border-radius: 71px;
overflow: hidden;
object-fit:cover;
} }
} }
} }

1
src/types/store.d.ts
View File

@ -68,6 +68,7 @@ interface MarketNFTData {
current_number: number; current_number: number;
remain_quantity: number; remain_quantity: number;
illustrate: string; illustrate: string;
isTime: boolean;
} }
interface InviteRecordData { interface InviteRecordData {

Write Preview
Loading…
Cancel
Save