From 10829255e2855e096f4e9917605637b6167383ae Mon Sep 17 00:00:00 2001 From: yyy9608 Date: Fri, 5 Jan 2024 18:05:52 +0800 Subject: [PATCH] commit --- src/api/index.ts | 30 ++++- src/components/Modal.tsx | 13 +- src/components/ProductInfo.tsx | 65 ++++++++-- src/components/ProductItem.tsx | 2 +- src/hooks/useConnectWallet.ts | 1 + src/hooks/useLike.ts | 2 +- src/pages/detail/AuctionNFT.tsx | 85 +++++++++++++ src/pages/detail/BuyNft.tsx | 14 ++- src/pages/detail/IssuanceRushNFT.tsx | 101 ++++++++++++++++ src/pages/detail/OnShelvesNFT.tsx | 144 ++++++++++++++++++++++- src/pages/detail/RemoveMarketMyNFT.tsx | 58 +++++++++ src/pages/detail/index.tsx | 82 ++++++++----- src/pages/home/index.tsx | 82 +++++++------ src/pages/no-share/index.tsx | 104 ++++++++++++++++ src/pages/personal/AccountAssetsCard.tsx | 5 +- src/pages/record/index.tsx | 40 +++---- src/pages/share/index.tsx | 2 +- src/pages/withdraw/index.tsx | 3 +- src/router/layout/Navbar.tsx | 20 +++- src/router/layout/index.tsx | 4 +- src/router/routes.tsx | 5 + src/store/index.ts | 3 +- src/styles/components.scss | 13 ++ src/styles/detail.scss | 93 ++++++++++++++- src/styles/global.scss | 8 ++ src/styles/home.scss | 11 +- src/styles/share.scss | 6 +- src/types/store.d.ts | 10 +- 28 files changed, 876 insertions(+), 130 deletions(-) create mode 100644 src/pages/detail/AuctionNFT.tsx create mode 100644 src/pages/detail/IssuanceRushNFT.tsx create mode 100644 src/pages/detail/RemoveMarketMyNFT.tsx create mode 100644 src/pages/no-share/index.tsx diff --git a/src/api/index.ts b/src/api/index.ts index 45ee268..d4844a8 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -124,7 +124,35 @@ export const nft_detail = (query: object) => * @description Buy NFT * @param {number} id * @param {number} type - * @param {string} amount 拍賣時傳入 + * @param {string} mark 拍賣時傳入 */ export const buy_nft = (query: object) => request({ url: "/v1/buy", data: query }); + +/** + * @description 上架NFT + * @param {number} id NFT id + * @param {number} type 1.拍賣 2.售賣 + * @param {string} amount 價格 + * @param {number} mark 加價比例 + * @param {string} symbol 售賣代筆 USDT FIL + * @param {number} time 拍賣時間 + */ +export const shelves_nft = (query: object) => + request({ url: "/v1/shelves", data: query }); + +/** + * @description 下架NFT + * @param {number} id NFT id + */ + +export const un_shelves_nft = (id: number) => + request({ url: "/v1/unshelves", data: { id } }); + +/** + * @description 查詢其他人的信息 + * @param {number} id user id + */ + +export const no_user_info = (id: number) => + request({ url: "/v1/showAccount", data: { id } }); diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index f191ee2..bee708e 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -15,10 +15,11 @@ interface ModalProps { showConfirmButton?: boolean; confirmButtonClass?: string; backgroundColosed?: boolean; + width?: string; } const Modal = ( - { title, buttonClick, visible, setVisible, children, buttonText, hiddenCloseIcon, showCancelButton, showCancelButtonText, showCancelButtonClick, showConfirmButton, backgroundColosed }: ModalProps + { title, buttonClick, visible, setVisible, children, buttonText, hiddenCloseIcon, showCancelButton, showCancelButtonText, showCancelButtonClick, showConfirmButton, backgroundColosed, width }: ModalProps ) => { return ( backgroundColosed && setVisible(false)} > -
+
{title}
@@ -40,17 +41,19 @@ const Modal = (
{children} -
+ +
{ !showConfirmButton && ( -
buttonClick && buttonClick()}>{buttonText}
+
buttonClick && buttonClick()}>{buttonText}
) } { showCancelButton && -
showCancelButtonClick && showCancelButtonClick()}>{showCancelButtonText || '關閉'}
+
showCancelButtonClick && showCancelButtonClick()}>{showCancelButtonText || '關閉'}
}
+
) diff --git a/src/components/ProductInfo.tsx b/src/components/ProductInfo.tsx index 53d6cdc..02917c3 100644 --- a/src/components/ProductInfo.tsx +++ b/src/components/ProductInfo.tsx @@ -1,10 +1,12 @@ 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 { toThousands } from '~/utils' +import { getTime, toThousands } from '~/utils' import { copy } from '~/utils/copy' import Modal from './Modal' @@ -15,7 +17,8 @@ interface ProductInfoProps { const ProductInfo = (props: ProductInfoProps) => { const { data } = props - const { likeNft } = store.state + const { push } = useRouter() + const { likeNft, userInfo } = store.state const { setLike, isLike } = useLike() const [visible, setVisible] = useState(false) @@ -25,6 +28,32 @@ const ProductInfo = (props: ProductInfoProps) => { 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 (
@@ -32,6 +61,12 @@ const ProductInfo = (props: ProductInfoProps) => {
+ {data.type === 1 &&
+ +
} + {data.type === 3 &&
+ +
} {data.type !== 0 &&
setLike(data.id)} /> @@ -39,21 +74,29 @@ const ProductInfo = (props: ProductInfoProps) => {
{data.name}
{data.symbol} {toThousands(data.price)}
-
+
toShare('cast')}>
铸造者
{data.cast_name}
-
-
售卖者
-
- -
{data.sell_name}
+ {data.type === 3 ? ( +
+
當前編號：{data.current_number}
+
剩餘數量：{data.remain_quantity}
-
-
+ ) : ( +
toShare('sell')}> +
售卖者
+
+ +
{data.sell_name}
+
+
+ ) + } +
{ 已複製鏈接
-
+
) } diff --git a/src/components/ProductItem.tsx b/src/components/ProductItem.tsx index a306d18..c7c5705 100644 --- a/src/components/ProductItem.tsx +++ b/src/components/ProductItem.tsx @@ -20,7 +20,7 @@ const ProductItem = (props: ProductItemProps) => {
{data?.symbol} {toThousands(data?.price)}
-
{splitAddress(data.sell_name,4)}
+
{data.sell_name}
diff --git a/src/hooks/useConnectWallet.ts b/src/hooks/useConnectWallet.ts index a8cf94d..497a6cc 100644 --- a/src/hooks/useConnectWallet.ts +++ b/src/hooks/useConnectWallet.ts @@ -6,6 +6,7 @@ import $store from "../store"; export default function useConnectWallet() { const connect = async () => { if (!(window as any).ethereum) { + window.location.reload(); return; } let res = await (window as any).ethereum.request({ diff --git a/src/hooks/useLike.ts b/src/hooks/useLike.ts index 76f0ecc..c025149 100644 --- a/src/hooks/useLike.ts +++ b/src/hooks/useLike.ts @@ -19,7 +19,7 @@ const useLike = () => { let res: any = await set_like(id, status); throttle.current = false if (res && res.code === 0) { - store.getMyNft("likeNft", 2); + store.getMyNft("likeNft"); } }; diff --git a/src/pages/detail/AuctionNFT.tsx b/src/pages/detail/AuctionNFT.tsx new file mode 100644 index 0000000..04b68b8 --- /dev/null +++ b/src/pages/detail/AuctionNFT.tsx @@ -0,0 +1,85 @@ +import { useMemo, useState } from "react" +import { Button, Toast } from "react-vant" +import { buy_nft } from "~/api" +import Modal from "~/components/Modal" +import store from "~/store" +import '~/styles/detail.scss' +import { MarketNFTData } from "~/types/store" +import { toFixed2, toThousands } from "~/utils" + +interface AuctionNFTProps { + data: MarketNFTData, + getData: Function +} + +const AuctionNFT = (props: AuctionNFTProps) => { + + const { data, getData } = props + const [visible, setVisible] = useState(false) + const [markupCount, setMarkupCount] = useState(0) + const currentPrice = useMemo(() => { + let price = (data.mark * markupCount / 100 * Number(data.auction_price)) + Number(data.price) + return toFixed2(`${price}`, 3) + }, [data, markupCount]) + + const openModal = () => { + if (!store.state.token) return store.setVisibleUnLogin(true) + const diffTime = data.end_Time - Date.now() / 1000 + if (diffTime <= 0) return Toast.fail("拍賣時間已過") + setVisible(true) + } + + const confirm = async () => { + setVisible(false) + const params = { + mark: markupCount * data.mark, + id: data.id, + type: data.type + } + const res: any = await buy_nft(params) + if (res && res.code === 0) { + getData() + store.getMarketNft("auctionNft") + store.getUserInfo() + Toast.success('出價成功') + } + } + + return ( +
+ + +
+
當前出價 "{toThousands(currentPrice)}" {data.symbol}
+
您的最低出價 +{data.mark}% {toThousands((data.mark / 100 * Number(data.auction_price)) + Number(data.price))} {data.symbol}
+
+
{ + setMarkupCount(val => val + 1) + }}>+{data.mark}%
+
markupCount > 0 && setMarkupCount(val => val - 1)}>-{data.mark}%
+
+
+ +
+
+ +
+ ) +} + +export default AuctionNFT \ No newline at end of file diff --git a/src/pages/detail/BuyNft.tsx b/src/pages/detail/BuyNft.tsx index a698553..aef7360 100644 --- a/src/pages/detail/BuyNft.tsx +++ b/src/pages/detail/BuyNft.tsx @@ -42,14 +42,14 @@ const BuyNft = (props: BuyNftProps) => { const res: any = await buy_nft(params) if (res && res.code === 0) { setSuccessVisible(true) - store.getMyNft("myNft", 1) - store.getMarketNft("issueNft") + store.getMyNft("myNft") store.getMarketNft("sellNft") + store.getUserInfo() } } return ( -
+
+
{/* success */} diff --git a/src/pages/detail/IssuanceRushNFT.tsx b/src/pages/detail/IssuanceRushNFT.tsx new file mode 100644 index 0000000..7d6f1be --- /dev/null +++ b/src/pages/detail/IssuanceRushNFT.tsx @@ -0,0 +1,101 @@ +import { useMemo, useState } from "react" +import { Button, CountDown } from "react-vant" +import { buy_nft } from "~/api" +import Modal from "~/components/Modal" +import store from "~/store" +import '~/styles/detail.scss' +import { MarketNFTData } from "~/types/store" +import { getTime, toThousands } from "~/utils" +import NFTProperties from "./NFTProperties" + +interface IssuanceRushNFTProps { + data: MarketNFTData, + getData: Function +} + +const IssuanceRushNFT = (props: IssuanceRushNFTProps) => { + + const { data, getData } = props + const [isBuy, setIsBuy] = useState(false) + const [buyVisible, setBuyVisible] = useState(false) + const [successVisible, setSuccessVisible] = useState(false) + + const openModal = () => { + if (!isBuy) return + setBuyVisible(true) + } + + const buyNft = async () => { + setBuyVisible(false) + const params = { + id: data.id, + type: data.type + } + const res: any = await buy_nft(params) + if (res && res.code === 0) { + setSuccessVisible(true) + getData() + store.getMyNft("myNft") + store.getMarketNft("issueNft") + store.getUserInfo() + } + } + + return ( +
+
NFT説明:
+
{data.illustrate}
+
+ +
+ + +
+
您將以 {toThousands(data.price)} {data.symbol}
+
購買一張 "{data.name}" NFT
+
+ +
+
+ + {/* success */} + +
+
+ +
+
恭喜購買成功
+
{data.name}
+
+ +
+ ) +} + +export default IssuanceRushNFT \ No newline at end of file diff --git a/src/pages/detail/OnShelvesNFT.tsx b/src/pages/detail/OnShelvesNFT.tsx index 9fcf5e3..c6ac68c 100644 --- a/src/pages/detail/OnShelvesNFT.tsx +++ b/src/pages/detail/OnShelvesNFT.tsx @@ -1,4 +1,12 @@ +import { useMemo, useRef, useState } from "react" +import { Button, Radio, Toast } from "react-vant" import { MarketNFTData } from "~/types/store" +import '~/styles/detail.scss' +import Modal from "~/components/Modal" +import { toThousands } from "~/utils" +import { shelves_nft } from "~/api" +import store from "~/store" +import { useRouter } from "~/hooks/useRouter" interface OnShelvesNFTProps { data: MarketNFTData @@ -7,10 +15,142 @@ interface OnShelvesNFTProps { const OnShelvesNFT = (props: OnShelvesNFTProps) => { const { data } = props + const { push } = useRouter() + const [defaultValue, setDefaultValue] = useState("") //1.拍賣 2.售賣 + const symbols = useMemo(() => ['FIL', 'USDT'], []) + const markups = useMemo(() => [1, 5, 10], []) // 拍賣加價 + const auctionTimes = useMemo(() => [24, 48, 72], []) // 拍賣時間 + const [currentMarkeup, setCurrentMarkeup] = useState(5) //當前拍賣加價 + const [currentSymbol, setCurrentSymbol] = useState('') //當前代筆 + const [currentAuctionTime, setCurrentAuctionTime] = useState(24) //當前拍賣時間 + const [visible, setVisible] = useState(false)//拍賣 + const [sellVisible, setSellVisible] = useState(false)//售賣 + + const amountRef = useRef(null) + + const openModal = () => { + if (!store.state.token) return store.setVisibleUnLogin(true) + if (!defaultValue) return Toast.fail('請選擇拍賣或售賣') + if (!currentSymbol) return Toast.fail('請選擇代筆') + if (!amountRef.current!.value) return Toast.fail('請輸入上架金額'); + if (defaultValue === "1") return setVisible(true) + setSellVisible(true) + } + + // 確認拍賣 + const confirmAuction = async () => { + setVisible(false) + const params = { + id: data.id, + amount: amountRef.current?.value, + symbol: currentSymbol, + mark: currentMarkeup, + time: currentAuctionTime, + type: Number(defaultValue) + } + const res: any = await shelves_nft(params) + if (res && res.code === 0) { + Toast.success('上架成功') + store.getMarketNft("auctionNft") + store.getMyNft("myNft"); + store.getUserInfo() + push(-1) + } + } + + // 確認售賣 + const confirmSell = async () => { + setSellVisible(false) + const params = { + id: data.id, + amount: amountRef.current?.value, + symbol: currentSymbol, + type: Number(defaultValue) + } + const res: any = await shelves_nft(params) + if (res && res.code === 0) { + Toast.success('上架成功') + store.getMarketNft("sellNft") + store.getMyNft("myNft"); + store.getUserInfo() + push(-1) + } + } return ( -
- 售賣 拍賣 +
+ + 拍賣 + 售賣 + +
+ { + symbols.map(item => ( +
{ + setCurrentSymbol(item) + console.log(currentSymbol); + + }}> + +
{item}
+
+ )) + } +
+
+ +
+
+ +
+ {/* 拍賣 */} + +
+
起拍價 "{toThousands(amountRef.current?.value || '0')}" {currentSymbol}
+
每次加價 {currentMarkeup}%
+
+ { + markups.map((item, index) => ( +
setCurrentMarkeup(item)}>+{item}%
+ )) + } +
+
拍賣時間 "{currentAuctionTime}" 小時
+
+ { + auctionTimes.map((item, index) => ( +
setCurrentAuctionTime(item)}>{item}
+ )) + } +
+
+ +
+
+ + {/* 售賣 */} + +
+
售價 "{toThousands(amountRef.current?.value || '0')}" {currentSymbol}
+ + +
+ +
+
+
) } diff --git a/src/pages/detail/RemoveMarketMyNFT.tsx b/src/pages/detail/RemoveMarketMyNFT.tsx new file mode 100644 index 0000000..39cc434 --- /dev/null +++ b/src/pages/detail/RemoveMarketMyNFT.tsx @@ -0,0 +1,58 @@ +import { useState } from 'react' +import { Button, Toast } from 'react-vant' +import { un_shelves_nft } from '~/api' +import Modal from '~/components/Modal' +import { useRouter } from '~/hooks/useRouter' +import store from '~/store' +import '~/styles/detail.scss' +import { MarketNFTData } from '~/types/store' + +interface RemoveMarketMyNFTProps { + data: MarketNFTData +} + +const RemoveMarketMyNFT = (props: RemoveMarketMyNFTProps) => { + + const { data } = props + const { push } = useRouter() + const [visible, setVisible] = useState(false) + + const confirm = async () => { + setVisible(false) + const res: any = await un_shelves_nft(data.id) + if (res && res.code === 0) { + Toast.success('下架成功') + store.getMarketNft("auctionNft") + store.getMarketNft("sellNft") + store.getMyNft("myNft") + store.getUserInfo() + push(-1) + } + } + + return ( +
+ + 確定下架
} + buttonClick={confirm} + > + <> + +
+ ) +} + +export default RemoveMarketMyNFT \ No newline at end of file diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx index 8b4d706..340885c 100644 --- a/src/pages/detail/index.tsx +++ b/src/pages/detail/index.tsx @@ -1,18 +1,24 @@ -import { useEffect, useMemo, useState } from "react" +import { observer } from "mobx-react" +import { useEffect, useMemo, useRef, useState } from "react" import { Button, Empty, Loading } from "react-vant" import { nft_detail } from "~/api" import BackBar from "~/components/BackBar" import ProductInfo from "~/components/ProductInfo" import { useRouter } from "~/hooks/useRouter" +import store from "~/store" import '~/styles/detail.scss' import { MarketNFTData } from "~/types/store" +import AuctionNFT from "./AuctionNFT" import BuyNft from "./BuyNft" +import IssuanceRushNFT from "./IssuanceRushNFT" import NFTProperties from "./NFTProperties" import OnShelvesNFT from "./OnShelvesNFT" +import RemoveMarketMyNFT from "./RemoveMarketMyNFT" const Detail = () => { const { location } = useRouter() + const { userInfo } = store.state const query = useMemo(() => { let obj = {} as { [key: string]: number } if (location.state) { @@ -31,23 +37,56 @@ const Detail = () => { const [product, setProduct] = useState({} as MarketNFTData) const [loading, setLoading] = useState(false) - console.log(product); + const isFirst = useRef(false) const titles = useMemo(() => ({ - "0": "上架", "1": "拍賣", "2": "售賣", - "3": "發行" + "3": "發行搶購" } as any), []) - useEffect(() => { - const getData = async () => { + const renderItem = () => { + // type為 0 時 顯示NFT屬性 + if (product.type === 0) { + return ( + <> +
+ +
+ {/* 屬於自己時顯示上架 */} + {product.sell_id === userInfo.id && } + + ) + } + // 如果type為2時 并且不屬於自己時 顯示購買 + if (product.type === 2 && product.sell_id !== userInfo.id) { + return + } + // 如果type為1時 并且不屬於自己時 顯示拍賣 + if (product.type === 1 && product.sell_id !== userInfo.id) { + return + } + // {/* 如果type為1或2時 并且屬於自己時 顯示下架 */ } + if (product.type === 2 && product.sell_id === userInfo.id) { + return + } + if (product.type === 3) { + return + } + return <> + } + + const getData = async () => { + if (!isFirst.current) { setLoading(true) - const res: any = await nft_detail(query) - setLoading(false) - res && res.code === 0 && setProduct(res.data) } + isFirst.current = true + const res: any = await nft_detail(query) + setLoading(false) + res && res.code === 0 && setProduct(res.data) + } + useEffect(() => { Object.keys(query).length === 2 && getData() }, []) @@ -74,33 +113,14 @@ const Detail = () => { return (
- {/* type 0.表示上架NFT 2.購買NFT 3.搶購 */} - { - product.type === 0 && ( -
- -
- ) - } - - { - product.type === 0 && ( - - ) - } - - { - product.type === 2 && ( - - ) - } + {renderItem()}
) } -export default Detail \ No newline at end of file +export default observer(Detail) \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index d20692b..60ed584 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,9 +1,9 @@ import '~/styles/home.scss' import ProductItem from '~/components/ProductItem' import { useRouter } from '~/hooks/useRouter' -import { Button, Swiper, SwiperInstance } from 'react-vant' +import { Button, CountDown, Swiper, SwiperInstance } from 'react-vant' import { useEffect, useRef } from 'react' -import { splitAddress } from '~/utils' +import { getTime, splitAddress } from '~/utils' import { observer } from 'mobx-react' import store from '~/store' import useLike from '~/hooks/useLike' @@ -11,7 +11,7 @@ import useLike from '~/hooks/useLike' const Home = () => { const { push } = useRouter() - const { sellNft, auctionNft, likeNft } = store.state + const { sellNft, auctionNft, likeNft, issueNft } = store.state const like = useLike() const swiperRef = useRef(null) @@ -31,34 +31,40 @@ const Home = () => { }}>
- - -
-
- -
-
回購型NFT
-
生肖唐彩-猴
-
-
-
USDT 10000
-
- + + { + issueNft.map(item => ( + +
push('/detail', { id: item.id, type: item.type })}> +
+ +
+
回購型NFT
+
{item.name}
+
+
+
{item.symbol} {item.price}
+
+ +
+
+
+
+
即將發售
+
+ +
+
+
{item.cast_name}
+
-
-
-
即將發售
-
54:42:15
-
-
Filefaasdasdasdfdsfsdf
-
+
- -
-
- + + )) + }
@@ -67,39 +73,39 @@ const Home = () => { }}>
-
拍卖趋势
+
拍賣趨勢
{ auctionNft.map((item, index) => (
push('/detail', { id: item.id, type: item.type })} /> -
+
{item.name}
-
铸造者
+
鑄造者
-
{splitAddress(item.cast_name, 4)}
+
{item.cast_name}
-
售卖者
+
售賣者
-
{splitAddress(item.sell_name, 4)}
+
{item.sell_name}
- { )) }
-
售卖市场
-
+
售賣市場
+
{ sellNft.map((item, index) => ( diff --git a/src/pages/no-share/index.tsx b/src/pages/no-share/index.tsx new file mode 100644 index 0000000..acf2c5a --- /dev/null +++ b/src/pages/no-share/index.tsx @@ -0,0 +1,104 @@ +import '~/styles/share.scss' +import { Tabs, Toast } from 'react-vant' +import ProductItem from '~/components/ProductItem' +import store from '~/store' +import { toFixed2 } from '~/utils' +import { useEffect, useMemo, useState } from 'react' +import { no_user_info } from '~/api' +import { useRouter } from '~/hooks/useRouter' +import { UserInfo } from '~/types/store' + +const NoShare = () => { + + const { location } = useRouter() + const state = location.state + const [userInfo, setUserInfo] = useState({} as UserInfo) + const tabs = useMemo(() => ['我的NFT', '我喜歡的NFT'], []) + + const getLength = (index: number) => { + if(!userInfo.my_like || !userInfo.my_nft ) return 0 + if(index === 0) return userInfo.my_nft.length + return userInfo.my_like.length + } + + useEffect(() => { + const getData = async () => { + const res: any = await no_user_info(state.id) + res && res.code === 0 && setUserInfo(res.data) + } + + if (state && state.id) { + getData() + } + }, [state]) + + return ( +
+
+ +
+ +
+
+
+
+
{userInfo.name}
+
+
+
+
{userInfo.sell || 0}
+
售卖作品
+
+
+
{userInfo.auction || 0}
+
拍卖作品
+
+
+
{toFixed2(userInfo.income, 2)} FIL
+
收入
+
+
+
+ + { + tabs.map((item, index) => ( + + {item} + {getLength(index)} +
} + titleClass='fz-wb-550' + > +
+ { + userInfo.my_like && userInfo.my_nft &&
+ {(index === 0 ? userInfo.my_nft : userInfo.my_like).map((item, index) => ( +
+ +
+ ))} +
+ } +
+ + )) + } + + +
+ + +
+ ) +} + +export default NoShare \ No newline at end of file diff --git a/src/pages/personal/AccountAssetsCard.tsx b/src/pages/personal/AccountAssetsCard.tsx index b89c510..ee033f2 100644 --- a/src/pages/personal/AccountAssetsCard.tsx +++ b/src/pages/personal/AccountAssetsCard.tsx @@ -3,6 +3,7 @@ import { useMemo } from "react"; import { useRouter } from "~/hooks/useRouter"; import { observer } from 'mobx-react'; import store from '~/store'; +import { toThousands } from '~/utils'; const AccountAssetsCard = () => { @@ -27,7 +28,7 @@ const AccountAssetsCard = () => {
总资产估值
-
{userInfo.total} USDT
+
{toThousands(userInfo.total)} USDT
{ @@ -36,7 +37,7 @@ const AccountAssetsCard = () => {
{item.title}
- {item.value} + {toThousands(item.value)} {item.symbol}
diff --git a/src/pages/record/index.tsx b/src/pages/record/index.tsx index 6f08946..0f3bbbc 100644 --- a/src/pages/record/index.tsx +++ b/src/pages/record/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useState } from "react"; import useCopyLink from "~/hooks/useCopy"; -import { getTime, splitAddress } from "~/utils"; +import { getTime, splitAddress, toThousands } from "~/utils"; import store from "~/store"; import { observer } from "mobx-react"; import { useRouter } from "~/hooks/useRouter"; @@ -13,9 +13,11 @@ import { history_record } from "~/api"; const Record = () => { const { token } = store.state; - const { push } = useRouter() + const { push, location } = useRouter() + console.log(location); + const recordTabs = useMemo(() => ['充值', '提现', '收益'], []); - const [recordIndex, setRecordIndex] = useState(0); + const [recordIndex, setRecordIndex] = useState(location.state ? location.state.index : 0); const { copyVal } = useCopyLink(); const [query, setQuery] = useState([ { page: 1, page_size: 20 }, @@ -83,6 +85,7 @@ const Record = () => { type="capsule" background="rgb(248,247,255)" sticky + defaultActive={recordIndex} offsetTop={window.innerWidth / 430 * 60} onChange={(_, index) => setRecordIndex(index)} align="start" @@ -137,7 +140,7 @@ const RechargeRecord = (
-
+{item.amount} {item.symbol}
+
+{toThousands(item.amount)} {item.symbol}
{item.status === 1 ? '完成' : '確認中'}
@@ -158,25 +161,24 @@ const WithdrawRecord = ({ list, finished, getData, copy }: ChildProps) => { getData()} errorText="请求失败，点击重新加载" offset={10}> { list.map((item, index) => ( - +
提现
-
手续费
{getTime(item.time * 1000)}
- 交易哈希：{item.order && splitAddress(item.order, 10)} - {item.order && { - copy && copy(item.order) + 交易哈希：{item.tx_hash && splitAddress(item.tx_hash, 8)} + {item.tx_hash && { + copy && copy(item.tx_hash) }}>}
-
-
{item.amount} {item.symbol}
-
{item.amount_fee} {item.symbol_fee}
+
+
-{toThousands(item.amount)} {item.symbol}
+
手續費：{item.withdraw_fee} {item.withdraw_fee_symbol}
-
{item.status === 5 ? '完成' : '审核中'}
+
{item.status === 4 ? '完成' : '確認中'}
@@ -195,19 +197,17 @@ const TransferRecord = ({ list, finished, getData }: ChildProps) => { getData()} errorText="请求失败，点击重新加载" offset={10}> { list.map((item, index) => ( - +
-
划转 {item.name}
-
手续费
+
{item.name}
{getTime(item.time * 1000)}
-
+
-
{Number(item.amount) >= 0 && '+'}{item.amount} {item.symbol}
-
{item.amount_fee} {item.symbol_fee}
+
+{toThousands(item.amount)} {item.symbol}
-
完成
+
+{toThousands(item.amount_usdt)} USDT(價值)
diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index aa4dd26..64830a0 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -109,7 +109,7 @@ const Share = () => { }, 100) }} /> ) : ( -
{userInfo.name}
+
{userInfo.name}
) }
diff --git a/src/pages/withdraw/index.tsx b/src/pages/withdraw/index.tsx index 3291d55..cfb9124 100644 --- a/src/pages/withdraw/index.tsx +++ b/src/pages/withdraw/index.tsx @@ -17,7 +17,8 @@ const Recharge = () => { const inputRef = useRef(null); const currentCoin = useMemo(() => coinList[coinIndex], [coinIndex, coinList]) const [loading, setLoading] = useState(false); - + console.log(currentCoin); + const withdraw = async () => { const amount = inputRef.current?.value const balance = currentCoin.balance diff --git a/src/router/layout/Navbar.tsx b/src/router/layout/Navbar.tsx index 94085de..85e63e0 100644 --- a/src/router/layout/Navbar.tsx +++ b/src/router/layout/Navbar.tsx @@ -1,4 +1,5 @@ +import { useRouter } from '~/hooks/useRouter' import '~/styles/layout.scss' import ConnectButton from './ConnectButton' @@ -10,11 +11,26 @@ interface NavbarProps { const Navbar = (props: NavbarProps) => { const { pathname, setVisible } = props + const { push } = useRouter() + + const isBlue = () => { + if (pathname === '/share') return 'header-bg-color' + if (pathname === '/noShare') return 'header-bg-color' + return '' + } return (
-
-
9527
+
+
+ { + pathname === '/noShare' ? ( +
push(-1)}>
+ ) : ( +
9527
+ ) + } +
{/*
首页
*/}
diff --git a/src/router/layout/index.tsx b/src/router/layout/index.tsx index 1d81137..a4bee4f 100644 --- a/src/router/layout/index.tsx +++ b/src/router/layout/index.tsx @@ -44,8 +44,8 @@ const LayoutRouter = () => { if (token) { store.getUserInfo() store.getCoinList() - store.getMyNft('myNft', 1) - store.getMyNft('likeNft', 2) + store.getMyNft('myNft') + store.getMyNft('likeNft') } if (!token) { diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 6bc2b1a..1ef866c 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -10,6 +10,7 @@ const Recharge = lazy(() => import("~/pages/recharge")); const Withdraw = lazy(() => import("~/pages/withdraw")); const Record = lazy(() => import("~/pages/record")); const Team = lazy(() => import("~/pages/team")) +const NoShare = lazy(() => import("~/pages/no-share")); const routes = [ { @@ -51,6 +52,10 @@ const routes = [ { path: '/team', element: + }, + { + path: '/noShare', + element: } ] as RouteObject[]; diff --git a/src/store/index.ts b/src/store/index.ts index d3fbf19..ca13d0c 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -100,7 +100,8 @@ class AppStore implements Store { * @param key * @param type 1.我的 2.喜歡的 */ - async getMyNft(key: "myNft" | "likeNft", type: number) { + async getMyNft(key: "myNft" | "likeNft") { + let type = key === "myNft" ? 1 : 2; const res: any = await personal_nft(type); if (res && res.code === 0) { this.state[key] = res.data; diff --git a/src/styles/components.scss b/src/styles/components.scss index 7bbda0f..f2df7ba 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -2,6 +2,13 @@ width: 181px; height: 160px; position: relative; + + .text-overflow{ + max-width: 50px; + overflow: hidden; + text-overflow: ellipsis; + } + .img{ width: 171px; height: 132px; @@ -33,6 +40,9 @@ display: flex; align-items: center; white-space: nowrap; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; } .user-tag{ @@ -115,5 +125,8 @@ border-radius: 10px; background: $button-background; color: $white; + &:active{ + opacity: .8; + } } } \ No newline at end of file diff --git a/src/styles/detail.scss b/src/styles/detail.scss index a4593e8..b391b37 100644 --- a/src/styles/detail.scss +++ b/src/styles/detail.scss @@ -8,9 +8,100 @@ .buy-nft{ .success-img{ width: 125px; - height: 100%; + height: 140px; object-fit: cover; } + + .tag-mark{ + width: 90px; + height: 35px; + border-radius: 20px; + display: flex; + color: $white; + justify-content: center; + align-items: center; + &:active{ + opacity: .8; + } + } + + .mark-button{ + width: 240px; + height: 45px; + border-radius: 45px; + color: $white; + font-weight: bold; + } + + .mark-button-disable{ + background-color: #C4C4C4; + color: $black; + font-weight: bold; + } + } + + .on-shelves-nft{ + + .tag{ + width: 102px; + height: 35px; + border-radius: 10px; + color: #fff; + font-size: 14px; + font-weight: bold; + font-family:Georgia, 'Times New Roman', Times, serif; + &:active{ + opacity: 0.8; + } + + img{ + @include img-size(20px,20px); + margin-right: 5px; + } + } + + .tag-active{ + border: 3px solid $black; + } + + .input{ + width: 100%; + height: 45px; + background: none; + border: 1px solid #898989; + border-radius: 10px; + padding: 0 10px; + } + + .on-button{ + width: 100%; + height: 50px; + background-color: $primary; + border-radius: 10px; + color: $white; + font-weight: bold; + font-size: 18px; + } + + .auction-tag{ + width: 80px; + height: 35px; + border-radius: 35px; + font-weight: bold; + color: $white; + &:active{ + opacity: 0.8; + } + } + + .markeup-button{ + width: 240px; + height: 45px; + border-radius: 45px; + color: $white; + font-weight: bold; + } + } } \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.scss index a863d87..4977502 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -27,6 +27,14 @@ body { background-color: rgb(248,247,255); } +.FIL-text{ + color: #F96900; +} + +.USDT-text{ + color: #8A4CED; +} + .USDT-bg{ background: $usdt-bg; } diff --git a/src/styles/home.scss b/src/styles/home.scss index 739ad9c..0e8c1ab 100644 --- a/src/styles/home.scss +++ b/src/styles/home.scss @@ -25,6 +25,8 @@ .tag{ background: $usdt-bg; color: $white; + padding: 3px 15px; + border-radius: 20px; } .avatar-img { @@ -56,8 +58,8 @@ } .swiper-item{ - min-width: 284px; - min-height: 375px; + min-width: 264px; + min-height: 355px; position: relative; } @@ -91,6 +93,11 @@ background: #f5f5f5; font-size: 8px; border-radius: 8px; + .text-overflow{ + text-overflow: ellipsis; + overflow: hidden; + max-width: 50px; + } img{ width: 16px; diff --git a/src/styles/share.scss b/src/styles/share.scss index cad626b..7c906ac 100644 --- a/src/styles/share.scss +++ b/src/styles/share.scss @@ -46,7 +46,7 @@ width: 100%; } - .text-overflow{ + .shar-name-overflow{ max-width: 200px; overflow: hidden; text-overflow: ellipsis; @@ -59,4 +59,8 @@ border-radius: 20px; } +} + +.rv-tabs__line{ + z-index: 0; } \ No newline at end of file diff --git a/src/types/store.d.ts b/src/types/store.d.ts index 52a7fd8..acfbe20 100644 --- a/src/types/store.d.ts +++ b/src/types/store.d.ts @@ -16,6 +16,9 @@ interface UserInfo { total: string; url: string; assets: Assets[]; + id: number; + my_like: MarketNFTData[]; + my_nft: MarketNFTData[]; } interface Assets { @@ -59,7 +62,12 @@ interface MarketNFTData { time: number; total_stock: number; url: string; - type:number; + type: number; + start_time: number; + end_time: number; + current_number: number; + remain_quantity: number; + illustrate: string; } interface InviteRecordData {