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,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 (
     <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,139 +14,157 @@ 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 (
-    <div className="home">
-      {issueNft.length > 0 && <div className='fz-20 mt-2 plr-3'>發行搶購</div>}
-      <div className='row-between mt-2 plr-5px'>
-        <div>
-          <i className='iconfont icon-arrow-left-bold fz-wb-550 fz-24' onClick={() => {
-            swiperRef.current && swiperRef.current.swipePrev()
-          }}></i>
-        </div>
-        <div style={{ flex: 1 }}>
-          <Swiper ref={swiperRef} indicator={false}>
-            {
-              issueNft.map((item, index) => (
-                <Swiper.Item key={item.id}>
-                  <div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                    <div className='rush-swiper'>
-                      <img src={item.url} alt="" />
-                      <div className='content-box p-2'>
-                        <div className='sub-text fz-14'>回購型NFT</div>
-                        <div className='mt-5px'>{item.name}</div>
-                        <div className='mt-5px fz-12'>
-                          <div className='row-between'>
-                            <div className={`tag ${item.symbol}-bg`}>{item.symbol} {item.price}</div>
-                            <div className='row-center right-box'>
-                              <img src={item.cast_url} className='avatar-img' alt="" />
+    <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'>
+          <div>
+            <i className='iconfont icon-arrow-left-bold fz-wb-550 fz-24' onClick={() => {
+              swiperRef.current && swiperRef.current.swipePrev()
+            }}></i>
+          </div>
+          <div style={{ flex: 1 }}>
+            <Swiper ref={swiperRef} indicator={false}>
+              {
+                issueNft.map((item, index) => (
+                  <Swiper.Item key={item.id}>
+                    <div className='plr-5px' onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                      <div className='rush-swiper'>
+                        <img src={item.url} alt="" />
+                        <div className='content-box p-2'>
+                          <div className='sub-text fz-14'>回購型NFT</div>
+                          <div className='mt-5px'>{item.name}</div>
+                          <div className='mt-5px fz-12'>
+                            <div className='row-between'>
+                              <div className={`tag ${item.symbol}-bg`}>{item.symbol} {item.price}</div>
+                              <div className='row-center right-box'>
+                                <img src={item.cast_url} className='avatar-img' alt="" />
+                              </div>
                             </div>
-                          </div>
-                          <div className='row-between'>
-                            {
-                              item.isTime ? (
-                                <div className={`${item.symbol}-text`}>售賣中</div>
-                              ) : (
-                                <div className='row-items'>
-                                  <div>即將發售</div>
-                                  <div className={`ml-1 fz-14 mt-3px ${item.symbol}-text`}>
-                                    <CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
+                            <div className='row-between'>
+                              {
+                                item.isTime ? (
+                                  <div className={`${item.symbol}-text`}>售賣中</div>
+                                ) : (
+                                  <div className='row-items'>
+                                    <div>即將發售</div>
+                                    <div className={`ml-1 fz-14 mt-3px ${item.symbol}-text`}>
+                                      <CountDown time={item.start_time * 1000 - Date.now()} className={`${item.symbol}-text`} onFinish={() => store.updateIssueNftIsTime(index)} />
+                                    </div>
                                   </div>
-                                </div>
-                              )
-                            }
-                            <div className='right-box'>{item.cast_name}</div>
+                                )
+                              }
+                              <div className='right-box'>{item.cast_name}</div>
+                            </div>
                           </div>
                         </div>
-                      </div>
 
+                      </div>
                     </div>
-                  </div>
-                </Swiper.Item>
-              ))
-            }
-          </Swiper>
-        </div>
-        <div>
-          <i className='iconfont icon-arrow-right-bold fz-wb-550 fz-24' onClick={() => {
-            swiperRef.current && swiperRef.current.swipeNext()
-          }}></i>
+                  </Swiper.Item>
+                ))
+              }
+            </Swiper>
+          </div>
+          <div>
+            <i className='iconfont icon-arrow-right-bold fz-wb-550 fz-24' onClick={() => {
+              swiperRef.current && swiperRef.current.swipeNext()
+            }}></i>
+          </div>
         </div>
-      </div>
-      <div className='plr-3 fz-20 mt-2'>拍賣趨勢</div>
-      <div className='mt-2 row-items swiper'>
-        {
-          auctionNft.length <= 0 ?
-            Array.from({ length: 2 }).map((_, index) => (
-              <div key={index} className={`${index === 0 ? 'ml-3' : 'ml-1 mr-3'}`}>
-                <AuctionNotOpen />
-              </div>
-            )) : auctionNft.map((item, index) => (
-              <div
-                key={index}
-                className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
-              >
-                <img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
-                <div className='cover-box' >
-                  <div className='cover-box-item p-1 fz-12'>
-                    <div>
-                      <div>{item.name}</div>
-                      <div className='row-items mt-2px'>
-                        <div className='flex-1'>
-                          <div className='fz-8 fz-wb-550'>鑄造者</div>
-                          <div className='user-tag row-items mt-2px'>
-                            <img src={item.cast_url} alt="" />
-                            <div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
+        <div className='plr-3 fz-20 mt-2'>拍賣趨勢</div>
+        <div className='mt-2 row-items swiper'>
+          {
+            auctionNft.length <= 0 ?
+              Array.from({ length: 2 }).map((_, index) => (
+                <div key={index} className={`${index === 0 ? 'ml-3' : 'ml-1 mr-3'}`}>
+                  <AuctionNotOpen />
+                </div>
+              )) : auctionNft.map((item, index) => (
+                <div
+                  key={index}
+                  className={`swiper-item ${index === 0 ? 'ml-3' : 'ml-1'} ${index === auctionNft.length - 1 && 'mr-3'}`}
+                >
+                  <img src={item.url} alt="" className='swiper-img' onClick={() => push('/detail', { id: item.id, type: item.type })} />
+                  <div className='cover-box' >
+                    <div className='cover-box-item p-1 fz-12'>
+                      <div>
+                        <div>{item.name}</div>
+                        <div className='row-items mt-2px'>
+                          <div className='flex-1'>
+                            <div className='fz-8 fz-wb-550'>鑄造者</div>
+                            <div className='user-tag row-items mt-2px'>
+                              <img src={item.cast_url} alt="" />
+                              <div className='flex-1 ml-5px text-overflow'>{item.cast_name}</div>
+                            </div>
                           </div>
-                        </div>
-                        <div className='flex-1'>
-                          <div className='fz-8 fz-wb-550'>售賣者</div>
-                          <div className='user-tag row-items mt-2px'>
-                            <img src={item.sell_url} alt="" />
-                            <div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
+                          <div className='flex-1'>
+                            <div className='fz-8 fz-wb-550'>售賣者</div>
+                            <div className='user-tag row-items mt-2px'>
+                              <img src={item.sell_url} alt="" />
+                              <div className='flex-1 ml-5px text-overflow'>{item.sell_name}</div>
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                    <div className='row-between'>
-                      <Button className={`button ${item.symbol}-bg`} round onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                        <div className='fz-wb-550 white'>出價</div>
-                      </Button>
-                      <i className={`
+                      <div className='row-between'>
+                        <Button className={`button ${item.symbol}-bg`} round onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                          <div className='fz-wb-550 white'>出價</div>
+                        </Button>
+                        <i className={`
                     iconfont icon-daohangshoucangyishoucang fz-18 ${like.isLike(item.id, likeNft) ? item.symbol + '-text' : 'sub-text'}
                     `} onClick={() => like.setLike(item.id)} />
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            ))
-        }
-      </div>
-      <div className='plr-3 fz-20 mt-2'>售賣市場</div>
-      <div className='plr-3'>
-        <div className='row-between flex-wrap'>
-          {
-            sellNft.length <= 0 ?
-              Array.from({ length: 2 }).map((_, index) => (
-                <div key={index}>
-                  <NotOpenProductItem />
-                </div>
-              ))
-              : sellNft.map((item, index) => (
-                <div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
-                  <ProductItem data={item} />
-                </div>
               ))
           }
         </div>
+        <div className='plr-3 fz-20 mt-2'>售賣市場</div>
+        <div className='plr-3'>
+          <div className='row-between flex-wrap'>
+            {
+              sellNft.length <= 0 ?
+                Array.from({ length: 2 }).map((_, index) => (
+                  <div key={index}>
+                    <NotOpenProductItem />
+                  </div>
+                ))
+                : sellNft.map((item, index) => (
+                  <div key={index} onClick={() => push('/detail', { id: item.id, type: item.type })}>
+                    <ProductItem data={item} />
+                  </div>
+                ))
+            }
+          </div>
+        </div>
+
       </div>
+    </PullRefresh>
 
-    </div>
   )
 }
 

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 (
-    <div className='personal'>
-      <div className='plr-2 '>
-        <div className='mt-3'>
-          <AccountAssetsCard />
+    <PullRefresh onRefresh={onRefresh}>
+      <div className='personal'>
+        <div className='plr-2 '>
+          <div className='mt-3'>
+            <AccountAssetsCard />
+          </div>
         </div>
-      </div>
 
-      <div className='mt-2 assets-box'>
-        <div>資產</div>
-        <Divider style={{ margin: 0, borderColor: "#d8d8d8" }} />
-        <div className='mt-1 row-between fz-14 sub-text'>
-          <div>名稱</div>
-          <div>可用</div>
-        </div>
-        <div>
-          {
-            userInfo.assets && userInfo.assets.map(item => (
-              <div className='row-between mt-2' style={{ alignItems: 'flex-start' }} key={item.id}>
-                <div className='row'>
-                  <img src={require(`~/assets/${item.symbol}.png`)} className='symbol-img' alt="" />
-                  <div className='ml-1'>
-                    <div className='fz-wb-550'>{item.symbol}</div>
-                    <div className='fz-14 sub-text mt-5px'>{item.name}</div>
+        <div className='mt-2 assets-box'>
+          <div>資產</div>
+          <Divider style={{ margin: 0, borderColor: "#d8d8d8" }} />
+          <div className='mt-1 row-between fz-14 sub-text'>
+            <div>名稱</div>
+            <div>可用</div>
+          </div>
+          <div>
+            {
+              userInfo.assets && userInfo.assets.map(item => (
+                <div className='row-between mt-2' style={{ alignItems: 'flex-start' }} key={item.id}>
+                  <div className='row'>
+                    <img src={require(`~/assets/${item.symbol}.png`)} className='symbol-img' alt="" />
+                    <div className='ml-1'>
+                      <div className='fz-wb-550'>{item.symbol}</div>
+                      <div className='fz-14 sub-text mt-5px'>{item.name}</div>
+                    </div>
+                  </div>
+                  <div className='tar'>
+                    <div className='fz-wb-550'>{item.amount}</div>
+                    <div className='sub-text fz-14 mt-5px'>{item.symbol !== 'USDT' && item.amount_usdt}</div>
                   </div>
                 </div>
-                <div className='tar'>
-                  <div className='fz-wb-550'>{item.amount}</div>
-                  <div className='sub-text fz-14 mt-5px'>{item.symbol !== 'USDT' && item.amount_usdt}</div>
-                </div>
-              </div>
-            ))
-          }
+              ))
+            }
+          </div>
         </div>
-      </div>
 
-    </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'
@@ -152,7 +152,7 @@ const Share = () => {
       <div className='mt-3'>
         <Tabs
           defaultActive={shareTabIndex}
-          onChange={(_, index) => { 
+          onChange={(_, index) => {
             store.setShareTabIndex(index)
           }}
           lineWidth={100}

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;