hiCity-nft/src/views/Nft/index.tsx

import React, { useState } from 'react'
import styled from 'styled-components'
// import SearchInput from 'components/SearchInput'
import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'

import FlexText from './component/FlexText'
// import Step from './component/Step'

import StepCom from './component/StepCom'

import 'swiper/swiper.min.css'

import 'swiper/components/pagination/pagination.min.css'

SwiperCore.use([Keyboard, Mousewheel, Pagination])

const MainDiv = styled.div`
  width: 100%;
  min-height: calc(100vh - 64px);
  background: ${({ theme }) => theme.colors.gradients.bubblegum};
`

const StyledPage = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px;
  padding-bottom: 0;

  ${({ theme }) => theme.mediaQueries.xs} {
    background-size: auto;
  }

  ${({ theme }) => theme.mediaQueries.sm} {
    padding: 24px;
    padding-bottom: 0;
  }

  ${({ theme }) => theme.mediaQueries.lg} {
    padding-top: 32px;
    min-height: calc(100vh - 64px);
  }
`

const BodyWrapper = styled(Card)`
  padding-bottom: 20px;
  border-radius: 24px;
  /* width: 60%; */
  width: 500px;
  overflow: visible;
  position: relative;
`
const TextKey = styled(Text)`
  font-size: 26px;
  color: #999999;
`
const TextVal = styled(Text)`
  font-size: 26px;
  color: #1fc7d4;
  margin-left: 10px;
`

const FlexTime = styled(Flex)`
  position: absolute;
  width: 100%;
  top: 20px;
  justify-content: center;
`

const HindDiv = styled.div`
  width: 32px;
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 10;
`
const BlindboxImage = styled(Image)`
  max-width: 377px;
  max-height: 367px;
  z-index: 9;
`

const Divs = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px;
  padding-bottom: 0;
  min-height: calc(100vh - 104px);
  background: ${({ theme }) => theme.colors.gradients.bubblegum};
`
const DetailDiv = styled.div`
  margin-top: -100px;
`
const DetailInfo = styled(Flex)`
  padding: 0 21px;
  margin-top: 15px;
`

const SwiperDiv = styled(Swiper)`
  height: 730px;
  & > .swiper-wrapper > .swiper-slide > div > div {
    background: transparent;
  }

  & > .swiper-pagination {
    & > .swiper-pagination-bullet {
      background: #fff;
      width: 14px;
      height: 9px;
      opacity: 1;
      border-radius: 3px;
    }
    & > .swiper-pagination-bullet-active {
      background: #000;
    }
  }
`

const Nft: React.FC = () => {
  const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
  const [hour, setHour] = useState('0')
  const [minute, setMinute] = useState('0')
  const [second, setSecond] = useState('0')
  const countFun = (time) => {
    // const timer: any = null
    // let sys_second = new Date(time).getTime() - new Date().getTime()
    // timer = setInterval(() => {
    //   // 防止倒计时出现负数
    //   if (sys_second > 1000) {
    //     sys_second -= 1000
    //     // let day = Math.floor(sys_second / 1000 / 3600 / 24)
    //     setHour(Math.floor((sys_second / 1000 / 3600) % 24))
    //     setMinute(Math.floor((sys_second / 1000 / 60) % 60))
    //     setSecond(Math.floor((sys_second / 1000) % 60))
    //     // this.setState({
    //     //   day: day,
    //     //   hour: hour < 10 ? '0' + hour : hour,
    //     //   minute: minute < 10 ? '0' + minute : minute,
    //     //   second: second < 10 ? '0' + second : second,
    //     // })
    //   } else {
    //     clearInterval(timer)
    //   }
    // }, 1000)
  }
  return (
    <MainDiv>
      <SwiperDiv
        loop
        pagination={{ clickable: true }}
        spaceBetween={16}
        freeModeMomentumRatio={0.25}
        freeModeMomentumVelocityRatio={0.5}
      >
        {blindboxList.map((item) => {
          return (
            <SwiperSlide key={item.id}>
              <StyledPage>
                <Divs>
                  <BodyWrapper>
                    {/* <Flex justifyContent="center" marginTop="-40px">
                      <BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
                    </Flex> */}
                    <FlexTime>
                      <TextKey>剩余时间</TextKey>
                      <TextVal>7小时</TextVal>
                    </FlexTime>
                    <Image src="/images/nft/blindbox.svg" width={500} height={460} />
                    <DetailDiv>
                      <DetailInfo justifyContent="space-between" alignItems="center">
                        <Text color="textSubtle">系列</Text>
                        <Text color="text">法式盛宴</Text>
                      </DetailInfo>
                      <DetailInfo justifyContent="space-between" alignItems="center">
                        <Text color="textSubtle">价格</Text>
                        <Flex alignItems="center" justifyContent="flex-end">
                          <Text color="#1FC7D4" fontSize="24px">
                            500
                          </Text>
                          <Text color="text">黄油</Text>
                        </Flex>
                      </DetailInfo>
                      <DetailInfo justifyContent="space-between" alignItems="center">
                        <Text color="textSubtle">数量</Text>
                        <StepCom />
                      </DetailInfo>
                    </DetailDiv>

                    <FlexText name="钱包中的 BUTTER" value="0" />
                    <FlexText name="回收点数抵扣" value="0" />
                    <FlexText name="实际黄油成本" value="0" />
                  </BodyWrapper>
                </Divs>
              </StyledPage>
            </SwiperSlide>
          )
        })}
      </SwiperDiv>
    </MainDiv>
  )
}
export default Nft