miniapp-v2/src/pages/MineUserAll/AllOrder/index.jsx

import { useState, useEffect, useMemo, } from 'react'
import { Taro, useRouter } from '@tarojs/taro'
import { View } from '@tarojs/components'
import withLayout from '@/layouts'
import CustomNav from '@/components/CustomNav'
import Complete from '@/components/CompoentsOrder/complete'
import './style.less'

const tabs = ['全部', '待支付', '待核销', '已使用', '已过期'].map(x => ({ title: x }))

const TabBar = (props) => {
  const handleClick = (e) => {
    const { index } = e.detail
    props.onClick(index)
  }

  return (
    <mp-tabs
      tabClass='tabs-extend'
      activeClass='tabs-extend-active'
      swiperClass='tabs-extend-swiper'
      tabUnderlineColor='#000'
      tabs={tabs}
      activeTab={props.current}
      onTabclick={handleClick}
    >
    </mp-tabs>
  )
}


export default withLayout((props) => {
  const [activeTab, setActiveTab] = useState(0)
  const { router, person } = props
  const { params } = useRouter()
  const { tabJump } = params || {}

  useEffect(() => {
    if (tabJump) {
      setActiveTab(tabJump - 0)
    }
  }, [tabJump])

  const handleTabClick = (index) => {
    setActiveTab(index)
  }

  return (
    <view className='page-index box-content'>
      <view className='index-navbar'  >
        <CustomNav title='我的订单' />
      </view>
      <View className='index-container' style={{ display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
        <view className='index-tabs'>
          <TabBar onClick={handleTabClick} current={activeTab} />
        </view>
        {activeTab === 0 && <Complete />}
        {activeTab === 1 && <Complete type={0} />}
        {activeTab === 2 && <Complete type={1} />}
        {activeTab === 3 && <Complete type={2} />}
        {activeTab === 4 && <Complete type={3} />}
      </View>
    </view>
  )
})