commit

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'
 

src/components/ProductItem.tsx

@@ -1,3 +1,5 @@
+import { observer } from 'mobx-react'
+import store from '~/store'
 import '~/styles/components.scss'
 import { MarketNFTData } from '~/types/store'
 import { toThousands } from '~/utils'
@@ -9,9 +11,15 @@ interface ProductItemProps {
 const ProductItem = (props: ProductItemProps) => {
 
   const { data } = props
+  const { userInfo } = store.state
 
   return (
     <div className='product-item mt-2'>
+      {
+        data.type !== 0 && data.sell_id === userInfo.id && (
+          <div className='sell-box row-center'>{data.type === 1 ? '拍賣中' : '售賣中'}</div>
+        )
+      }
       <img src={data?.url} className='img' alt="" />
       {/* <div className='img'></div> */}
       <div className='desc-box p-1'>
@@ -41,4 +49,4 @@ export const NotOpenProductItem = () => {
   )
 }
 
-export default ProductItem
+export default observer(ProductItem)

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,13 +14,29 @@ const Home = () => {
   const like = useLike()
   const swiperRef = useRef<SwiperInstance>(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 (
+    <PullRefresh
+      onRefresh={onRefresh}
+    >
       <div className="home">
         {issueNft.length > 0 && <div className='fz-20 mt-2 plr-3'>發行搶購</div>}
         <div className='row-between mt-2 plr-5px'>
@@ -147,6 +163,8 @@ const Home = () => {
         </div>
 
       </div>
+    </PullRefresh>
+
   )
 }
 

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,7 +8,17 @@ const Personal = () => {
 
   const { userInfo } = store.state
 
+  const onRefresh = () => {
+    return new Promise((resolve) => {
+      store.getUserInfo()
+      setTimeout(() => {
+        resolve(true)
+      }, 2000)
+    })
+  }
+
   return (
+    <PullRefresh onRefresh={onRefresh}>
       <div className='personal'>
         <div className='plr-2 '>
           <div className='mt-3'>
@@ -45,6 +55,7 @@ const Personal = () => {
         </div>
 
       </div>
+    </PullRefresh>
   )
 }
 

src/pages/product/index.tsx

@@ -53,9 +53,7 @@ const Product = () => {
           )
         }
       </div>
-      {
-        isSearch && <div className='mt-2 fz-16 fz-wb-550'>{nftList.length}個結果</div>
-      }
+      <div className='mt-2 fz-16 fz-wb-550' style={{ opacity: isSearch ? 1 : 0 }}>{nftList.length}個結果</div>
       <div className='box'>
         <div className='row-between flex-wrap'>
           {

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'

src/styles/components.scss

@@ -3,6 +3,18 @@
   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;
     overflow: hidden;