From 01d74f16f4665c0c604c65b529af195078976db1 Mon Sep 17 00:00:00 2001 From: yyy9608 Date: Wed, 10 Jan 2024 11:11:38 +0800 Subject: [PATCH] commit --- src/components/ProductInfo.tsx | 2 +- src/components/ProductItem.tsx | 12 +- src/pages/home/index.tsx | 232 ++++++++++++++++++--------------- src/pages/personal/index.tsx | 73 ++++++----- src/pages/product/index.tsx | 4 +- src/pages/share/index.tsx | 4 +- src/styles/components.scss | 12 ++ 7 files changed, 193 insertions(+), 146 deletions(-) diff --git a/src/components/ProductInfo.tsx b/src/components/ProductInfo.tsx index ec0517a..74d4a12 100644 --- a/src/components/ProductInfo.tsx +++ b/src/components/ProductInfo.tsx @@ -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' diff --git a/src/components/ProductItem.tsx b/src/components/ProductItem.tsx index 4b05401..75898ed 100644 --- a/src/components/ProductItem.tsx +++ b/src/components/ProductItem.tsx @@ -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 (
+ { + data.type !== 0 && data.sell_id === userInfo.id && ( +
{data.type === 1 ? '拍賣中' : '售賣中'}
+ ) + } {/*
*/}
@@ -41,4 +49,4 @@ export const NotOpenProductItem = () => { ) } -export default ProductItem \ No newline at end of file +export default observer(ProductItem) \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 74e9085..2f31728 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -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(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 ( -
- {issueNft.length > 0 &&
發行搶購
} -
-
- { - swiperRef.current && swiperRef.current.swipePrev() - }}> -
-
- - { - issueNft.map((item, index) => ( - -
push('/detail', { id: item.id, type: item.type })}> -
- -
-
回購型NFT
-
{item.name}
-
-
-
{item.symbol} {item.price}
-
- + +
+ {issueNft.length > 0 &&
發行搶購
} +
+
+ { + swiperRef.current && swiperRef.current.swipePrev() + }}> +
+
+ + { + issueNft.map((item, index) => ( + +
push('/detail', { id: item.id, type: item.type })}> +
+ +
+
回購型NFT
+
{item.name}
+
+
+
{item.symbol} {item.price}
+
+ +
-
-
- { - item.isTime ? ( -
售賣中
- ) : ( -
-
即將發售
-
- store.updateIssueNftIsTime(index)} /> +
+ { + item.isTime ? ( +
售賣中
+ ) : ( +
+
即將發售
+
+ store.updateIssueNftIsTime(index)} /> +
-
- ) - } -
{item.cast_name}
+ ) + } +
{item.cast_name}
+
-
+
-
- - )) - } - -
-
- { - swiperRef.current && swiperRef.current.swipeNext() - }}> + + )) + } + +
+
+ { + swiperRef.current && swiperRef.current.swipeNext() + }}> +
-
-
拍賣趨勢
-
- { - auctionNft.length <= 0 ? - Array.from({ length: 2 }).map((_, index) => ( -
- -
- )) : auctionNft.map((item, index) => ( -
- push('/detail', { id: item.id, type: item.type })} /> -
-
-
-
{item.name}
-
-
-
鑄造者
-
- -
{item.cast_name}
+
拍賣趨勢
+
+ { + auctionNft.length <= 0 ? + Array.from({ length: 2 }).map((_, index) => ( +
+ +
+ )) : auctionNft.map((item, index) => ( +
+ push('/detail', { id: item.id, type: item.type })} /> +
+
+
+
{item.name}
+
+
+
鑄造者
+
+ +
{item.cast_name}
+
-
-
-
售賣者
-
- -
{item.sell_name}
+
+
售賣者
+
+ +
{item.sell_name}
+
-
-
- - + + like.setLike(item.id)} /> +
-
- )) - } -
-
售賣市場
-
-
- { - sellNft.length <= 0 ? - Array.from({ length: 2 }).map((_, index) => ( -
- -
- )) - : sellNft.map((item, index) => ( -
push('/detail', { id: item.id, type: item.type })}> - -
)) }
+
售賣市場
+
+
+ { + sellNft.length <= 0 ? + Array.from({ length: 2 }).map((_, index) => ( +
+ +
+ )) + : sellNft.map((item, index) => ( +
push('/detail', { id: item.id, type: item.type })}> + +
+ )) + } +
+
+
+ -
) } diff --git a/src/pages/personal/index.tsx b/src/pages/personal/index.tsx index 01260c4..7ab67ce 100644 --- a/src/pages/personal/index.tsx +++ b/src/pages/personal/index.tsx @@ -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 ( -
-
-
- + +
+
+
+ +
-
-
-
資產
- -
-
名稱
-
可用
-
-
- { - userInfo.assets && userInfo.assets.map(item => ( -
-
- -
-
{item.symbol}
-
{item.name}
+
+
資產
+ +
+
名稱
+
可用
+
+
+ { + userInfo.assets && userInfo.assets.map(item => ( +
+
+ +
+
{item.symbol}
+
{item.name}
+
+
+
+
{item.amount}
+
{item.symbol !== 'USDT' && item.amount_usdt}
-
-
{item.amount}
-
{item.symbol !== 'USDT' && item.amount_usdt}
-
-
- )) - } + )) + } +
-
-
+
+ ) } diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx index 4128690..b72cfa8 100644 --- a/src/pages/product/index.tsx +++ b/src/pages/product/index.tsx @@ -53,9 +53,7 @@ const Product = () => { ) }
- { - isSearch &&
{nftList.length}個結果
- } +
{nftList.length}個結果
{ diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index 9fc2141..7245b78 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -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' @@ -152,7 +152,7 @@ const Share = () => {
{ + onChange={(_, index) => { store.setShareTabIndex(index) }} lineWidth={100} diff --git a/src/styles/components.scss b/src/styles/components.scss index 23f66af..bd63aee 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -2,6 +2,18 @@ width: 181px; 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;