9527-nft-market/src/pages/detail/OnShelvesNFT.tsx

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
}

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<HTMLInputElement>(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 (
    <div className="mt-2 on-shelves-nft">
      <Radio.Group defaultValue={defaultValue} onChange={setDefaultValue} direction="horizontal" checkedColor="#0FC6D4">
        <Radio name="1">拍賣</Radio>
        <Radio name="2" className="ml-2">售賣</Radio>
      </Radio.Group>
      <div className="mt-2 row-items">
        {
          symbols.map(item => (
            <div key={item} className={`row-center tag ${item}-bg mr-2 ${currentSymbol === item && 'tag-active'}`} onClick={() => {
              setCurrentSymbol(item)
            }}>
              <img src={require(`~/assets/${item}.png`)} alt="" />
              <div>{item}</div>
            </div>
          ))
        }
      </div>
      <div className="mt-2">
        <input placeholder="請輸入上架金額" className="input" ref={amountRef} />
      </div>
      <div className="mtb-2">
        <Button className="on-button" onClick={openModal}>上架</Button>
      </div>
      {/* 拍賣 */}
      <Modal
        width="90%"
        title={data.name}
        visible={visible}
        setVisible={setVisible}
        showConfirmButton
      >
        <div className="mt-2">
          <div className="tac fz-wb-550">起拍價 "<span className={`${currentSymbol}-text`}>{toThousands(amountRef.current?.value || '0')}</span>" {currentSymbol}</div>
          <div className="tac mt-5px fz-wb-550">每次加價 <span className={`${currentSymbol}-text`}>{currentMarkeup}%</span></div>
          <div className="row-center mt-1">
            {
              markups.map((item, index) => (
                <div key={item} className={`row-center ${index === 1 && 'mlr-3'} fz-14 auction-tag ${currentSymbol}-bg`} onClick={() => setCurrentMarkeup(item)}>+{item}%</div>
              ))
            }
          </div>
          <div className="tac mt-3 fz-wb-550">拍賣時間 "<span className={`${currentSymbol}-text`}>{currentAuctionTime}</span>" 小時</div>
          <div className="row-center mt-2">
            {
              auctionTimes.map((item, index) => (
                <div key={item} className={`row-center ${index === 1 && 'mlr-3'} fz-14 auction-tag ${currentSymbol}-bg`} onClick={() => setCurrentAuctionTime(item)}>{item}</div>
              ))
            }
          </div>
          <div className="row-center mt-3">
            <Button onClick={confirmAuction} className={`markeup-button ${currentSymbol}-bg`}>確定拍賣</Button>
          </div>
        </div>
      </Modal>
      {/* 售賣 */}
      <Modal
        width="90%"
        title={data.name}
        visible={sellVisible}
        setVisible={setSellVisible}
        showConfirmButton
      >
        <div className="mt-2">
          <div className="tac fz-wb-550">售價 "<span className={`${currentSymbol}-text`}>{toThousands(amountRef.current?.value || '0')}</span>" {currentSymbol}</div>


          <div className="row-center mt-3">
            <Button onClick={confirmSell} className={`markeup-button ${currentSymbol}-bg`}>確定售賣</Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default OnShelvesNFT