update

src/custom-tab-bar/index.tsx

@@ -3,25 +3,42 @@ import './index.scss'
 import { useTranslation } from 'react-i18next'
 import Taro from '@tarojs/taro'
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { changeTabbar } from '@/store/common'
 
 export default function TabBar() {
     const { t } = useTranslation()
     const common = useSelector((state: any) => state.common);
-    const [selIndex, setSelIndex] = useState(global.index?global.index:0)
-    useEffect(() => {
-        setSelIndex(global.index?global.index:0)
-      }, [global.index])
+    const [selIndex, setSelIndex] = useState(common.pageIndex)
+    const dispatch = useDispatch();
+    // useEffect(() => {
+    //     console.log('aaa',global.index)
+    //     setSelIndex(global.index?global.index:0)
+    //   }, [global.index])
+    // useEffect(()=>{
+    //     console.log('page 初始化')
+    // },[])
+
+    useEffect(()=>{
+        setSelIndex(common.pageIndex)
+    },[common.pageIndex])
 
     global.updateTab = (index)=>{
         // setSelIndex(index)
     }
 
     function switchTab(index: number) {
+        // console.log(index,common.showTabbar)
         if (!common.showTabbar){
             return
         }
-        global.index = index;
+        // global.index = index;
+
+        // console.log(index,'apple')
+        // console.log(global.index)
+        dispatch(changeTabbar(index))
+        
+
         switch (index) {
             case 0:
 

src/features/trackSomething/components/Metric.tsx

@@ -53,6 +53,7 @@ export default function Component(props: any) {
     const [modalType, setModalType] = useState(MetricModalType.none)
     const [themeColor, setThemeColor] = useState('#00ffff')
     const [groups, setGroups] = useState([])
+    const [orignalGroups,setOrignalGroups] = useState([])
     const [limits, setLimits] = useState(null)
     const [orders, setOrders] = useState([])
     const dispatch = useDispatch();
@@ -119,7 +120,9 @@ export default function Component(props: any) {
 
     function getGroups() {
         metricGroups().then(res => {
-            setGroups((res as any).groups)
+            var array = (res as any).groups
+            setOrignalGroups(JSON.parse(JSON.stringify(array)))
+            setGroups(array)
             setLimits((res as any).num_options_limit)
         })
     }
@@ -333,16 +336,38 @@ export default function Component(props: any) {
                     limit={limits}
                 />
             case MetricModalType.order:
-                return <MetricModalOrder themeColor={themeColor} cancel={modalOrderCancel} confirm={modalOrderConfirm} array={orders} />
+                return <MetricModalOrder
+                    themeColor={themeColor}
+                    cancel={modalOrderCancel}
+                    confirm={modalOrderConfirm}
+                    array={orders} />
         }
         return <View />
     }
 
     function modalCancel() {
+        dispatch(setTabbarStatus(true))
         setShowPageContainer(false)
+        onPageContainerCancel()
     }
 
     function modalConfirm(datas) {
+        setOrders(datas)
+        setModalType(MetricModalType.order)
+    }
+
+    function modalOrderCancel() {
+        if (global.metricAdd) {
+            setModalType(MetricModalType.choose)
+        }
+        else {
+            dispatch(setTabbarStatus(true))
+            setShowPageContainer(false)
+            onPageContainerCancel()
+        }
+    }
+
+    function modalOrderConfirm(datas) {
         var array: any = []
         datas.map(item => {
             array.push(item.code)
@@ -351,34 +376,26 @@ export default function Component(props: any) {
             getCards()
             getGroups()
         })
+        dispatch(setTabbarStatus(true))
         setShowPageContainer(false)
-
-        setTimeout(() => {
-            dispatch(setTabbarStatus(false))
-            setModalType(MetricModalType.order)
-            setShowPageContainer(true)
-        }, 500)
     }
 
-    function modalOrderCancel() {
-        global.metricAdd ? modalCancel() : modalCancel()
-        if (global.metricAdd) {
-            setShowPageContainer(false)
-            setTimeout(() => {
-                dispatch(setTabbarStatus(false))
-                setModalType(MetricModalType.choose)
-                setShowPageContainer(true)
-            }, 500)
-        }
-        else {
-            setShowPageContainer(false)
+    function onPageContainerCancel() {
+        if (modalType == MetricModalType.choose || modalType == MetricModalType.order) {
+            var array: any = [];
+            list.map(item => {
+                array.push({
+                    name: (item as any).name,
+                    code: (item as any).code
+                })
+            })
+            // debugger
+            setOrders(array)
+            setGroups(JSON.parse(JSON.stringify(orignalGroups)))
+            // setGroups(orignalGroups)
         }
     }
 
-    function modalOrderConfirm() {
-        setShowPageContainer(false)
-    }
-
     return <View style={{ position: 'relative' }}>
         <Layout children={showErrorPage ? <NoData refresh={() => { getCards() }} /> : detailContent()}
             title={t('page.metric.title')}
@@ -393,8 +410,10 @@ export default function Component(props: any) {
             custom-style='background-color:#1c1c1c'
             closeOnSlideDown={false}
             show={showPageContainer} round={true} overlay={true} position='bottom'
+            onClickOverlay={onPageContainerCancel}
+            onAfterLeave={() => { setShowPageContainer(false);setModalType(MetricModalType.none) }}
             onBeforeLeave={() => { dispatch(setTabbarStatus(true)) }}
-            onAfterLeave={() => { setShowPageContainer(false); }}>
+        >
             {
                 metricModalContent()
             }

src/features/trackSomething/components/MetricModalChoose.scss

@@ -31,8 +31,7 @@
     margin-bottom: 40px;
     margin-left: 46px;
     margin-right: 46px;
-    max-height: 60vh;
-    overflow-y: scroll;
+    height: 60vh;
 }
 
 .modal_detail::-webkit-scrollbar {

src/features/trackSomething/components/MetricModalChoose.tsx

@@ -1,20 +1,25 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text, ScrollView } from '@tarojs/components'
 import './MetricModalChoose.scss'
 import { alphaToHex } from '@/utils/tools'
 import { useTranslation } from 'react-i18next'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IconRadio, IconRadioCheck } from '@/components/basic/Icons'
 import Taro from '@tarojs/taro'
 
 export default function Component(props: { themeColor: string, cancel: Function, confirm: Function, array: any, limit: any, orders: any }) {
     const color = props.themeColor ? props.themeColor : '#ff0000'
     const [list, setList] = useState(props.array)
-    const [orderList,setOrderList] = useState(props.orders)
+    const [orderList, setOrderList] = useState(props.orders)
     const min = props.limit.min
     const max = props.limit.max
     const { t } = useTranslation()
     var alpha = alphaToHex(0.4)
 
+    useEffect(()=>{
+        setList(props.array)
+        setOrderList(props.orders)
+    },[props.array,props.orders])
+
     function cancel() {
         props.cancel()
     }
@@ -49,16 +54,16 @@ export default function Component(props: { themeColor: string, cancel: Function,
 
     function tapItem(obj) {
         var check = !obj.is_following
-        if (check){
+        if (check) {
             orderList.push({
-                name:obj.name,
-                code:obj.code
+                name: obj.name,
+                code: obj.code
             })
         }
         else {
-            for (var i =0;i<orderList.length;i++){
-                if (orderList[i].code == obj.code){
-                    orderList.splice(i,1)
+            for (var i = 0; i < orderList.length; i++) {
+                if (orderList[i].code == obj.code) {
+                    orderList.splice(i, 1)
                 }
             }
         }
@@ -70,7 +75,7 @@ export default function Component(props: { themeColor: string, cancel: Function,
                 }
             }
         }
-        
+
         setList(JSON.parse(JSON.stringify(list)))
         setOrderList(JSON.parse(JSON.stringify(orderList)))
     }
@@ -81,26 +86,28 @@ export default function Component(props: { themeColor: string, cancel: Function,
             <Text className='modal_title1'>{t('feature.track_something.metric.choose_metric')}</Text>
             <Text className='modal_subtitle'>按需选择自己常用的指标</Text>
         </View>
-        <View className='modal_detail'>
-            {
-                list.map((item, index) => {
-                    return <View className='modal_group' key={index}>
-                        <Text className='modal_group_title'>{item.name}</Text>
-                        {
-                            item.items.map((obj, i) => {
-                                return <View className='modal_item' onClick={() => tapItem(obj)}>
-                                    {
-                                        obj.is_following ? <IconRadioCheck width={16} color='#fff' /> : <IconRadio width={16} color='#fff' />
-                                    }
+        <ScrollView className='modal_detail' scrollY>
+            <View>
+                {
+                    list.map((item, index) => {
+                        return <View className='modal_group' key={index}>
+                            <Text className='modal_group_title'>{item.name}</Text>
+                            {
+                                item.items.map((obj, i) => {
+                                    return <View className='modal_item' onClick={() => tapItem(obj)}>
+                                        {
+                                            obj.is_following ? <IconRadioCheck width={16} color='#fff' /> : <IconRadio width={16} color='#fff' />
+                                        }
 
-                                    <Text className='modal_item_text' style={{ color: color, marginLeft: 10 }}>{obj.name}</Text>
-                                </View>
-                            })
-                        }
-                    </View>
-                })
-            }
-        </View>
+                                        <Text className='modal_item_text' style={{ color: color, marginLeft: 10 }}>{obj.name}</Text>
+                                    </View>
+                                })
+                            }
+                        </View>
+                    })
+                }
+            </View>
+        </ScrollView>
         <View className='modal_operate'>
             <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
                 <Text className='modal_cancel_text' style={{ color: color }}>取消</Text>

src/features/trackSomething/components/MetricModalOrder.scss

@@ -1,3 +1,17 @@
 .modal_content{
     padding-bottom: 120px;
+}
+
+.modal_order_detail{
+    margin-top: 64px;
+    margin-bottom: 40px;
+    height: 60vh;
+}
+
+.modal_order_item{
+    display: flex;
+    flex-direction: row;
+    width: '100%';
+    align-items: center;
+    justify-content: space-between;
 }

src/features/trackSomething/components/MetricModalOrder.tsx

@@ -2,7 +2,9 @@ import { View, Text } from '@tarojs/components'
 import './MetricModalOrder.scss'
 import { alphaToHex } from '@/utils/tools'
 import { useTranslation } from 'react-i18next'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import MoveOrderList from './MoveOrderList'
+import { IconDrag } from '@/components/basic/Icons'
 
 export default function Component(props: { themeColor: string, cancel: Function, confirm: Function, array: any }) {
     var color = props.themeColor ? props.themeColor : '#ff0000'
@@ -10,28 +12,47 @@ export default function Component(props: { themeColor: string, cancel: Function,
     const { t } = useTranslation()
     var alpha = alphaToHex(0.4)
 
+    useEffect(()=>{
+        setList(props.array)
+    },[props.array])
+
     function cancel() {
         props.cancel()
     }
 
     function confirm() {
-        props.confirm()
+        props.confirm(list)
     }
+
+    // function items() {
+    //     var array:any = []
+    //     for (var i = 0; i < list.length; i++) {
+    //         var item = (
+    //             <View className='modal_order_item' style={{ height: 40 }}>
+    //                 <Text style={{color:color}}>{list[i].name}</Text>
+    //                 <IconDrag width={20}/>
+    //             </View>
+    //         )
+    //         array.push(item)
+    //     }
+    //     return array
+    // }
+
     return <View className='modal_content'>
         <View className='modal_title_view'>
             <Text className='modal_title1'>{t('feature.track_something.metric.order')}</Text>
             <Text className='modal_subtitle'>长按可拖动排序</Text>
         </View>
-        <View className='modal_detail'>
-
+        <View className='modal_order_detail'>
+            <MoveOrderList itemHeight={40} array={list} color={color} update={(temps)=>{setList(temps)}}/>
         </View>
         <View className='modal_operate'>
             <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
-                <Text className='modal_cancel_text' style={{ color: color }}>{global.metricAdd?'上一步':'取消'}</Text>
+                <Text className='modal_cancel_text' style={{ color: color }}>{global.metricAdd ? '上一步' : '取消'}</Text>
             </View>
             <View className='btn_space' />
             <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
-                <Text className='modal_confirm_text' style={{ color: '#000' }}>{global.metricAdd?'完成':'确定'}</Text>
+                <Text className='modal_confirm_text' style={{ color: '#000' }}>{global.metricAdd ? '完成' : '确定'}</Text>
             </View>
 
 

src/features/trackSomething/components/MoveOrderList.scss

@@ -1,6 +1,9 @@
 .drag_item{
     // background-color: gray;
-
+    border-radius: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 710px;
 }
 
 .last_item{
@@ -9,6 +12,31 @@
 }
 
 .demo_item{
-    width: 750px;
-    background-color: #000;
+    // width: 750px;
+    // background-color: #000;
+}
+
+.modal_order_item{
+    display: flex;
+    flex-direction: row;
+    width: '100%';
+    align-items: center;
+    justify-content: space-between;
+    // background-color: pink;
+    border-bottom: solid 1px #999;
+    margin-left: 46px;
+    margin-right: 46px;
+    box-sizing: border-box;
+}
+
+.modal_sel_item{
+    display: flex;
+    flex-direction: row;
+    width: '100%';
+    align-items: center;
+    justify-content: space-between;
+    // background-color: pink;
+    border-bottom: solid 1px #999;
+    margin-left: 26px;
+    margin-right: 26px;
 }

src/features/trackSomething/components/MoveOrderList.tsx

@@ -1,10 +1,11 @@
-import { MovableArea, MovableView, View, ScrollView } from '@tarojs/components'
+import { MovableArea, MovableView, View, ScrollView, Text, Image } from '@tarojs/components'
 import './MoveOrderList.scss'
 import { useEffect, useRef, useState } from 'react';
 import { ColorType } from '@/context/themes/color';
 import Taro from '@tarojs/taro';
+import { IconDrag } from '@/components/basic/Icons';
 
-export default function Component(props: { array: any, itemHeight: number }) {
+export default function Component(props: { array: any, itemHeight: number, color?: string,update:Function }) {
     const [list, setList] = useState(props.array)
     const [movaleViewY, setMovaleViewY] = useState(0)
     const [dragElement, setDragElement] = useState(null)
@@ -73,10 +74,9 @@ export default function Component(props: { array: any, itemHeight: number }) {
     }
 
     function pageScroll(clientY) {
-        
+        return
         // console.log(clientY,contentY,contentHeight)
         if ((clientY - contentY) + upperThreshold >= contentHeight) {
-            console.log('ccc',(clientY - contentY) + props.itemHeight);
             // var scroll = ref.current
             // debugger
             // (ref.current as any).scrollTo({scrollTop:100})
@@ -84,9 +84,9 @@ export default function Component(props: { array: any, itemHeight: number }) {
             // setScrollTop(2200)
             // setCanScroll(true)
             Taro.pageScrollTo({
-                selector:'#myScrollView',
-                scrollTop:(clientY - contentY) + props.itemHeight,
-                duration:200
+                selector: '#myScrollView',
+                scrollTop: (clientY - contentY) + props.itemHeight,
+                duration: 200
             })
         }
         else if ((clientY - contentY) - lowThreshold <= 0) {
@@ -128,6 +128,9 @@ export default function Component(props: { array: any, itemHeight: number }) {
         setChangedIndex(-1)
         setCanScroll(true)
         setHiddenContent(false)
+        setMovaleViewY(-100)
+
+        props.update(list)
     }
 
     function computeFutureIndex(targetMoveDistance, dragElementIndex) {
@@ -172,34 +175,35 @@ export default function Component(props: { array: any, itemHeight: number }) {
         }
     }
 
-    return <View id="myScrollView" ref={ref}  style={{ height: 400,overflow:'scroll' }} catchMove={!canScroll}>
-        <MovableArea style={{ height: list.length * props.itemHeight }}>
+    return <View id="myScrollView" ref={ref} style={{ maxHeight: 400, overflow: 'scroll' }} catchMove>
+        <MovableArea style={{ height: list.length * props.itemHeight, width: '100vw' }}>
             {list.map((item, index) => {
-                var className = 'demo_item'
-                if (lastTarget == index) {
-                    className += ' last_item'
-                }
-
-                if (dragIndex == index) {
-                    className += ' drag_item'
-
-                    // console.log(className)
-                }
-                return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight }}
-                    className={className}
+                return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: '100vw' }}
                     onLongPress={(e) => longPress(e, index)}
+                    
                     onTouchMove={(e) => touchMove(e)}
                     onTouchEnd={(e) => touchEnd(e)}
-                >{item}</View>
+                >
+                    <View className='modal_order_item' style={{ height: 40}}>
+                        <Text style={{ color: props.color }}>{item.name}</Text>
+                        <IconDrag width={17} height={12} />
+                        {/* <Image src={require('@assets/images/menu.png')} style={{width:20,height:20}}/> */}
+                    </View>
+                </View>
             })}
-            <MovableView style={{ height: props.itemHeight }}
+            <MovableView style={{ height: changedIndex>=0?props.itemHeight:0,width:'100vw' }}
                 direction='vertical'
                 disabled
                 animation={false}
                 y={movaleViewY}
             >
-                <View className='demo_item' style={{ backgroundColor: ColorType.fast }}>
-                    {dragElement}
+                <View className='drag_item' style={{ backgroundColor: props.color }}>
+                    {
+                        dragIndex >= 0 && <View className='modal_sel_item' style={{ height: 40, border:'none' }}>
+                            <Text style={{ color: 'black',fontWeight:'bold' }}>{list[changedIndex].name}</Text>
+                            <IconDrag width={17} height={12} />
+                        </View>
+                    }
                 </View>
             </MovableView>
         </MovableArea>

src/store/common.tsx

@@ -9,13 +9,15 @@ interface CommonState {
         step: number;
     } | null;
     showTabbar: boolean | true;
+    pageIndex:number|0;
 }
 
 const initialState: CommonState = {
     resources: [],
     configs: null,
     duration: null,
-    showTabbar: true
+    showTabbar: true,
+    pageIndex:0
 }
 
 const commonSlice = createSlice({
@@ -43,9 +45,12 @@ const commonSlice = createSlice({
                 }
 
             }
+        },
+        changeTabbar(state,action){
+            state.pageIndex = action.payload;
         }
     }
 });
 
 export default commonSlice.reducer;
-export const { setResources, setConfigs,setTabbarStatus } = commonSlice.actions;
+export const { setResources, setConfigs,setTabbarStatus,changeTabbar} = commonSlice.actions;