!9 公告，首页

Merge pull request !9 from 骚/myf-dev

.env.development

@@ -20,3 +20,4 @@ REACT_APP_SNAPSHOT_VOTING_API = "https://xtjyd0liqe.execute-api.ap-northeast-1.a
 
 
 REACT_APP_REQUEST_URL = 'http://101.35.117.69:9090'
+# REACT_APP_REQUEST_URL = 'http://192.168.2.210:8080'

public/locales/zh-CN.json

@@ -1118,5 +1118,7 @@
   "purchase":"购买",
   "Enter a keyword search":"输入关键字搜索",
   "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins":"使用页面右上方的邀请，可邀请新用户进入，并在用户购买币后获得",
-  "The commission":"的提成！"
+  "The commission":"的提成！",
+  "market value":"市值",
+  "Loaded all":"已加载全部"
 }

src/config/localization/translations.json

@@ -1245,5 +1245,7 @@
   "purchase":"purchase",
   "Enter a keyword search":"Enter a keyword search",
   "By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins":"By using the invitation at the top right of the page, new users can be invited to enter and obtained after users purchase coins",
-  "The commission":"The commission！"
+  "The commission":"The commission！",
+  "market value":"market value",
+  "Loaded all":"Loaded all"
 }

src/services/user.ts

@@ -6,4 +6,10 @@ export const queryUserInfo = () => {
     method: 'get',
   })
 }
+export const uccnDetail = () => {
+  return request.request({
+    url: '/high_city/app/api/user/uccn/detail',
+    method: 'get',
+  })
+}
 export default queryUserInfo

src/utils/request.ts

@@ -4,7 +4,7 @@ import { CACHE_TOKEN } from 'config/constants/cacheKey'
 // create an axios instance
 const request = axios.create({
   baseURL: process.env.REACT_APP_REQUEST_URL,
-  timeout: 10000, // request timeout
+  timeout: 50000, // request timeout
 })
 let hasInit = false
 export const initAxios = (clearUserInfo, toast) => {

src/views/Announcement/index.tsx

@@ -112,22 +112,49 @@ const TextInfo = styled(Text)`
   color: #999999;
   margin-top: 30px;
 `
+const TextAll = styled(Text)`
+  text-align: center;
+  padding: 20px 0;
+  color: #999;
+`
 
 const Announcement: React.FC = () => {
   const { t } = useTranslation()
+  const [pageNum, setPage] = useState(1)
   const loadMoreRef = useRef<HTMLDivElement>(null)
-
+  const [searchTitle, setSearchTitle] = useState('')
   const [detailVisible, setDetailVisible] = useState(false)
   const [list, setList] = useState([])
+  const [totalVisible, setTotalVisible] = useState(false)
   const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
-  const getList = async (page: number, size: number) => {
+  const getList = async (page: number, size: number, title?: string) => {
-    const data = await getAnnouncementPage({ page, size })
+    if (totalVisible) return
-    console.log(data.content)
+    const data = await getAnnouncementPage({ page, size, title })
-    setList(data.content)
+    const dataList = [...list, ...data.content]
+    setList(dataList)
+    if (data.content.length === 0 || !data.content) {
+      setTotalVisible(true)
+    }
+  }
+
+  const onScrollCapture = () => {
+    const innerHeight = window.innerHeight
+    const screenH = Math.ceil(innerHeight + window.scrollY)
+    const eleH = document.documentElement.offsetHeight
+    if (screenH >= eleH) {
+      setPage(pageNum + 1)
+    }
   }
   useEffect(() => {
-    getList(1, 10)
+    if (!totalVisible) {
-  }, [])
+      window.addEventListener('scroll', onScrollCapture)
+      getList(pageNum, 10, searchTitle)
+    }
+
+    return () => {
+      window.removeEventListener('scroll', onScrollCapture)
+    }
+  }, [pageNum])
 
   const lookDetail = async (id) => {
     const data = await getAnnouncementDetail(id)
@@ -135,7 +162,8 @@ const Announcement: React.FC = () => {
     setDetailVisible(true)
   }
   const searchList = () => {
-    getList(1, 10)
+    setList([])
+    getList(1, 10, searchTitle)
   }
   const close = () => {
     setDetailVisible(false)
@@ -152,9 +180,13 @@ const Announcement: React.FC = () => {
       </div>
     )
   }
-
+  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const { value: inputValue } = evt.target
+    setSearchTitle(inputValue)
+    console.log(searchTitle)
+  }
   return (
-    <MainDiv>
+    <MainDiv ref={loadMoreRef as any} onScrollCapture={onScrollCapture}>
       {detailVisible ? (
         <Detail
           title={detailData.title}
@@ -166,7 +198,7 @@ const Announcement: React.FC = () => {
         <TableDiv>
           <SearchDiv>
             <InputMain>
-              <SearchInput placeholder={t('Enter a keyword search')} />
+              <SearchInput placeholder={t('Enter a keyword search')} value={searchTitle} onChange={handleChange} />
               <SearchBtn onClick={searchList}>
                 <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
               </SearchBtn>
@@ -174,7 +206,9 @@ const Announcement: React.FC = () => {
           </SearchDiv>
           <ListMain>
             {renderContent()}
-            <div ref={loadMoreRef} />
+            {totalVisible ? <TextAll>{t('Loaded all')}</TextAll> : ''}
+
+            {/* <div ref={loadMoreRef} /> */}
             {/* {list.map((item) => (
               <Text key={item.id} onClick={() => lookDetail(item.id)}>
                 <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />

src/views/Home/components/FlexItemCom.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
+import Balance from 'components/Balance'
 import { Text } from '@pancakeswap/uikit'
 
 interface FlexProp {
-  name: string
+  name?: string | number
-  value: string
+  valueNum?: string | number
 }
 
 const ScoreItem = styled.div`
@@ -21,10 +22,10 @@ const ItemSubText = styled(Text)`
   font-size: 20px;
 `
 
-const FlexItemCom: React.FC<FlexProp> = ({ name, value }) => {
+const FlexItemCom: React.FC<FlexProp> = ({ name, valueNum }) => {
   return (
     <ScoreItem>
-      <ItemText color="text">{value}</ItemText>
+      <Balance lineHeight="1" fontSize="36px" textAlign="center" decimals={0} value={Number(valueNum)} />
       <ItemSubText color="textSubtle">{name}</ItemSubText>
     </ScoreItem>
   )

src/views/Home/components/FristCom.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
-import { Flex, Heading, Text, Box, Button, Image } from '@pancakeswap/uikit'
+import { uccnDetail } from 'services/user'
+import { Flex, Heading, Text, Box, Button, Image, Link } from '@pancakeswap/uikit'
 import { useTranslation } from 'contexts/Localization'
 
 import FlexItemCom from './FlexItemCom'
@@ -99,7 +100,12 @@ const WhiteBtn = styled(Button)`
 const BtnImage = styled(Image)`
   width: 34px;
   height: 34px;
+  border-radius: 50%;
   margin-right: 12px;
+  cursor: pointer;
+  & > img {
+    border-radius: 50%;
+  }
 `
 
 const ScoreDiv = styled(Flex)`
@@ -125,12 +131,23 @@ const InfoDiv = styled.div``
 
 const FristCom: React.FC = () => {
   const { t } = useTranslation()
-  const [burned, BurnedState] = useState([
+  // const [burned, BurnedState] = useState([
-    { id: 1, name: 'Burned', value: '62.55%' },
+  //   { id: 'userNumb', name: '持有人数量', value: '0' },
-    { id: 2, name: 'Burned', value: '62.55%' },
+  //   { id: 'tradingVolume', name: '交易量', value: '0' },
-    { id: 3, name: 'Burned', value: '62.55%' },
+  //   { id: 3, name: '市值', value: '62.55%' },
-    { id: 4, name: 'Burned', value: '62.55%' },
+  // ])
-  ])
+  const [detail, setDetail] = useState({ userNumb: 0, tradingVolume: 0, outsideChainVos: [] })
+  const getDetail = async () => {
+    const data = await uccnDetail()
+    setDetail(data)
+  }
+
+  useEffect(() => {
+    getDetail()
+  }, [])
+  const openLink = (link) => {
+    window.open(link)
+  }
   return (
     <>
       <FirstPage>
@@ -148,16 +165,31 @@ const FristCom: React.FC = () => {
                 <RadiusBtn variant="primary">{t('Exchange')}</RadiusBtn>
                 <WhiteBtn variant="secondary">{t('Bazaar')}</WhiteBtn>
                 <Flex>
-                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                  {detail.outsideChainVos.map((item) => {
-                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                    return (
+                      <BtnImage
+                        style={{ borderRadius: '50%' }}
+                        src={item.cover}
+                        alt={item.name}
+                        width={34}
+                        height={34}
+                        onClick={() => openLink(item.link)}
+                      />
+                    )
+                  })}
+                  {/* <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} />
+                  <BtnImage src="/images/home/fg.png" alt="" width={34} height={34} /> */}
                 </Flex>
               </BtnFlex>
             </InfoDiv>
           </FlexDiv>
           <ScoreDiv>
-            {burned.map((item) => {
+            <FlexItemCom name={t('Number of holders')} valueNum={detail.userNumb} />
+            <FlexItemCom name={t('Your volume')} valueNum={detail.tradingVolume} />
+            <FlexItemCom name={t('market value')} valueNum={0} />
+            {/* {burned.map((item) => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
-            })}
+            })} */}
           </ScoreDiv>
         </StyledPage>
       </FirstPage>