feats

project.config.dev.json

@@ -4,7 +4,7 @@
   "description": "十公里",
   "appid": "wx835627a9b9b3932a",
   "setting": {
-    "urlCheck": true,
+    "urlCheck": false,
     "es6": false,
     "postcss": false,
     "minified": false

src/pages/MineUserAll/AllOrder/index.jsx

@@ -1,11 +1,34 @@
-import { useState, useEffect, } from 'react'
-import { Taro, useRouter } from '@tarojs/taro'
+import { useState, useEffect, useMemo, } from 'react'
+import { Current, 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) => {
+    console.log('-----------------handleTabChange----------------', 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)
@@ -13,7 +36,6 @@ export default withLayout((props) => {
   const { params } = useRouter()
   const { tabJump } = params || {}
 
-
   useEffect(() => {
     if (tabJump) {
       setActiveTab(tabJump - 0)
@@ -21,33 +43,13 @@ export default withLayout((props) => {
   }, [tabJump])
 
 
-
-  const tabs = [
-    {
-      title: '全部',
-    },
-    {
-      title: '待支付',
-
-    },
-    {
-      title: '待核销',
-
-    },
-    {
-      title: '已使用',
-
-    },
-    {
-      title: '已过期',
-
-    },
-  ]
-
-  const handleTabChange = (e) => {
-    const { index } = e.detail
+  const handleTabClick = (index) => {
+    console.log('------tab-----event--------', index)
     setActiveTab(index)
   }
+  
+  console.log('------setActiveTab--------', activeTab)
+
   return (
     <view className='page-index box-content'>
       <view className='index-navbar'>
@@ -55,18 +57,7 @@ export default withLayout((props) => {
       </view>
       <View className='index-container' style={{display:'flex',flexDirection:'column',boxSizing:'border-box'}}>
         <view className='index-tabs'>
-          <mp-tabs
-            tabClass='tabs-Unselected'
-            swiperClass='tabs-swiper'
-            activeClass='tabs-Selected'
-            tabUnderlineColor='#000'
-            tabInactiveTextColor='#C0C8D3'
-            tabs={tabs}
-            current={activeTab}
-            onChange={handleTabChange}
-            activeTab={activeTab}
-          >
-          </mp-tabs>
+          <TabBar onClick={handleTabClick} current={activeTab} />
         </view>
         {activeTab === 0 && <Complete />}
         {activeTab === 1 && <Complete type={0} />}

src/pages/MineUserAll/AllOrder/style.less

@@ -3,25 +3,24 @@
   .index-tabs {
     width: 100%;
 
-    .tabs-Unselected {
+    .tabs-extend {
       width: 20vw;
       text-align: center;
-      height: 26px;
+      line-height: 84px;
+      height: 84px;
       font-size: 28px;
       font-weight: bold;
       color: #c0c8d3;
+      box-sizing: border-box;
     }
-    .tabs-swiper {
-      max-height: 0px;
-    }
-    .tabs-Selected {
-      height: 30px;
-      font-size: 32px;
-      font-weight: bold;
+
+    .tabs-extend-active {
       color: #4c4c4c;
-      padding-top: 33px;
-      padding-bottom: 28px;
       border-bottom: 5px solid black;
     }
+
+    .tabs-extend-swiper {
+      max-height: 0;
+    }
   }
 }