From 5cc15cec4150f21aec8fa6da58117b675bc93ed8 Mon Sep 17 00:00:00 2001 From: myf <> Date: Sat, 11 Jun 2022 14:38:37 +0800 Subject: [PATCH] =?UTF-8?q?nft=E5=B8=82=E5=9C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/bazaar.ts | 11 ++++ src/views/Bazaar/components/Content.tsx | 68 ++++++++++++++++++--- src/views/Bazaar/components/ContentShop.tsx | 47 ++++++++++++-- src/views/Bazaar/components/ShopList.tsx | 38 ++++++++---- src/views/Bazaar/hooks/index.ts | 12 ++++ 5 files changed, 152 insertions(+), 24 deletions(-) create mode 100644 src/services/bazaar.ts create mode 100644 src/views/Bazaar/hooks/index.ts diff --git a/src/services/bazaar.ts b/src/services/bazaar.ts new file mode 100644 index 0000000..65268fa --- /dev/null +++ b/src/services/bazaar.ts @@ -0,0 +1,11 @@ +import request from 'utils/request' + +export const getOfficialPage = (params) => { + return request.request({ + url: '/high_city/app/api/market/official/page', + method: 'get', + params, + }) +} + +export default getOfficialPage diff --git a/src/views/Bazaar/components/Content.tsx b/src/views/Bazaar/components/Content.tsx index 1454515..040e26c 100644 --- a/src/views/Bazaar/components/Content.tsx +++ b/src/views/Bazaar/components/Content.tsx @@ -1,15 +1,35 @@ import React, { useState, useEffect } from 'react' import styled, { keyframes } from 'styled-components' import { useTranslation } from 'contexts/Localization' +import Pagination from '@mui/material/Pagination' import { Flex, Text, Input, Image, Dropdown } from '@pancakeswap/uikit' import { useAccount } from 'state/userInfo/hooks' import useRefresh from 'hooks/useRefresh' +import { useGetOfficialPage } from '../hooks' import HeaderOperation from './HeaderOperation' import ContentShop from './ContentShop' import Transaction from './Transaction' import ShopDetail from './ShopDetail' +interface ListProps { + coverResource?: CoverResourceProps + grade?: string + id?: string + name?: string + price?: undefined + priceList?: PriceProps[] + type?: string +} +interface CoverResourceProps { + path?: string + url?: string +} +interface PriceProps { + label?: string + value?: string +} + const HeaderFlex = styled(Flex)` width: 100%; justify-content: space-between; @@ -148,13 +168,7 @@ const Content: React.FC = () => { const [priceSelect, setPriceSelect] = useState({ label: t('The latest offer'), value: '0' }) const [searchTitle, setSearchTitle] = useState('') - const list = [ - { label: 'Cat goddess Emerald ', type: 1, id: 1 }, - { label: 'Cat goddess Emerald ', type: 2, id: 2 }, - { label: 'Cat goddess Emerald ', type: 3, id: 3 }, - { label: 'Cat goddess Emerald ', type: 4, id: 4 }, - { label: 'Cat goddess Emerald ', type: 1, id: 5 }, - ] + const [list, setList] = useState([]) const statusList = [ { label: t('All'), id: '1' }, { label: t('epic'), id: '2' }, @@ -164,6 +178,36 @@ const Content: React.FC = () => { ] const [statusIndex, setStatusIndex] = useState(0) + const [pageNum, setPage] = useState(1) + + const [count, setCount] = useState(undefined) + + const getOfficialPage = useGetOfficialPage() + + const getData = async () => { + const params = { + page: pageNum, + size: 10, + } + const data = await getOfficialPage(params) + const arr = [] + data.content.forEach((item) => { + const obj = item + obj.priceList = [] + Object.keys(obj.price).forEach((childItem) => { + obj.priceList.push({ label: childItem, value: obj.price[childItem] }) + }) + obj.price = undefined + arr.push(obj) + }) + setList(arr) + setCount(getTotalPageNum(data.total, data.size)) + } + + useEffect(() => { + getData() + }, [pageNum]) + const handleChange = (evt: React.ChangeEvent) => { const { value } = evt.target setSearchTitle(value) @@ -174,6 +218,13 @@ const Content: React.FC = () => { const showDetail = () => { setDetailVisible(!detailVisible) } + const pageChange = (e, page) => { + setPage(page) + } + const getTotalPageNum = (total, pageSize) => { + const countTotal = ((Number(total) + Number(pageSize) - 1) / Number(pageSize)).toString() + return parseInt(countTotal) + } return ( <> @@ -263,6 +314,9 @@ const Content: React.FC = () => { + + + )} diff --git a/src/views/Bazaar/components/ContentShop.tsx b/src/views/Bazaar/components/ContentShop.tsx index d096d01..ea990d5 100644 --- a/src/views/Bazaar/components/ContentShop.tsx +++ b/src/views/Bazaar/components/ContentShop.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react' import styled, { keyframes } from 'styled-components' import { useTranslation } from 'contexts/Localization' -import { Flex, Text } from '@pancakeswap/uikit' +import { formatTimeNumber } from 'utils/formatBalance' +import { Flex, Text, Image } from '@pancakeswap/uikit' import { useAccount } from 'state/userInfo/hooks' import useRefresh from 'hooks/useRefresh' import { TOKEN_SYMBOL } from 'config/index' @@ -9,10 +10,27 @@ import { TOKEN_SYMBOL } from 'config/index' import ShopList from './ShopList' interface ContentShop { - list?: any + list?: ListProps[] getDetail?: () => void } +interface ListProps { + coverResource?: CoverResourceProps + grade?: string + id?: string + name?: string + price?: undefined + priceList?: PriceProps[] + type?: string +} +interface CoverResourceProps { + path?: string + url?: string +} +interface PriceProps { + label?: string + value?: string +} const ShopMain = styled.div` width: 100%; display: grid; @@ -57,6 +75,7 @@ const FooterLabel = styled(Text)` color: #999999; ` const FooterValue = styled(Text)` + width: 40%; font-size: 16px; color: #1fc7d4; ` @@ -73,11 +92,29 @@ const ContentShop: React.FC = ({ list, getDetail }) => { {list.map((item) => { return ( - - {item.label} + + {item.name} {t('trading value')} - 1000{TOKEN_SYMBOL} + + {item.priceList.map((childItem, index) => { + return ( + + {/* <>{formatTimeNumber(childItem.value)} */} + <>{Number(childItem.value).toFixed(2)} + {childItem.label} + {index === 0 && item.priceList.length === 2 && -} + + ) + })} + ) diff --git a/src/views/Bazaar/components/ShopList.tsx b/src/views/Bazaar/components/ShopList.tsx index 3df0571..d39180a 100644 --- a/src/views/Bazaar/components/ShopList.tsx +++ b/src/views/Bazaar/components/ShopList.tsx @@ -82,6 +82,8 @@ interface ShopListItemProps { width?: number height?: number borderRadius?: string + grade?: string + img?: string } interface Detail { label?: string @@ -89,21 +91,28 @@ interface Detail { id?: number | string } -const ShopList: React.FC = ({ item, width = 186, height = 187, borderRadius = '20px' }) => { +const ShopList: React.FC = ({ + item, + width = 186, + height = 187, + borderRadius = '20px', + img, + grade, +}) => { const { t } = useTranslation() const getClassBcg = () => { let bcg = '' - switch (item.type) { - case 1: + switch (grade) { + case 'EPIC': bcg = 'epicBcg' break - case 2: + case 'LEGEND': bcg = 'legendBcg' break - case 3: + case 'RARE': bcg = 'uncommonBcg' break - case 4: + case 'NORMAL': bcg = 'commonBcg' break default: @@ -116,15 +125,20 @@ const ShopList: React.FC = ({ item, width = 186, height = 187
- {item.type === 1 &&
{t('epic')}
} - {item.type === 2 &&
{t('legend')}
} - {item.type === 3 &&
{t('uncommon')}
} - {item.type === 4 &&
{t('common')}
} + {grade === 'EPIC' &&
{t('epic')}
} + {grade === 'LEGEND' &&
{t('legend')}
} + {grade === 'RARE' &&
{t('uncommon')}
} + {grade === 'NORMAL' &&
{t('common')}
}
- {item.type === 1 && } + {/* {item.type === 1 && } {item.type === 2 && } {item.type === 3 && } - {item.type === 4 && } + {item.type === 4 && } */} + {img ? ( + + ) : ( + + )} ) diff --git a/src/views/Bazaar/hooks/index.ts b/src/views/Bazaar/hooks/index.ts new file mode 100644 index 0000000..4033c4a --- /dev/null +++ b/src/views/Bazaar/hooks/index.ts @@ -0,0 +1,12 @@ +import { useCallback } from 'react' +import { getOfficialPage } from 'services/bazaar' + +export const useGetOfficialPage = () => { + const data = async (params) => { + const result = await getOfficialPage(params) + return result + } + return data +} + +export default useGetOfficialPage