订单售后v2

src/components/orderBtns/index.module.scss

@@ -2,13 +2,23 @@
     display: flex;
     justify-content: flex-end;
     // margin-top: 30px;
+    .scroll{
+        white-space: nowrap;
+        width: 100%;
+    }
+    .list_scroll{
+        white-space: nowrap;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+    }
     .btns_item{
-        width: 152px;
-        height: 72px;
+        padding: 0 10px;
+        height: 60px;
         border: 2px solid #dddddd;
         border-radius: 38px;
         text-align: center;
-        line-height: 72px;
+        line-height: 60px;
         font-size: $font_size;
         color: $color_font_three;
         &:nth-child(n+2) {

src/components/orderBtns/index.tsx

@@ -3,7 +3,7 @@ import { alert } from "@/common/common"
 import { ORDER_STATUS } from "@/common/enum"
 import { ScrollView, View } from "@tarojs/components"
 import Taro from "@tarojs/taro"
-import { useCallback, useRef, memo } from "react"
+import { useCallback, useRef, memo, useState, useEffect } from "react"
 import styles  from './index.module.scss'
 
 type Param = {
@@ -72,24 +72,27 @@ export default memo(({orderInfo, onClick}:Param) => {
         if(orderInfo) {
             if(item.id == 1) {
                 //取消订单按钮
-                return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在代发货之前没有付过款
+                return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款
             } else if (item.id == 2) {
                 //去付款按钮
                 return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
             } else if(item.id == 3) {
                 //申请退款
-                return (orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //在代发货之前付过款
+                return (orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //在待发货之前付过款
             } else {
+                //其他按钮
                 return item.value.includes(orderInfo.status)
             }
         }
     },[orderInfo])
 
     //点击按钮操作
-    const submitBtns = (val) => {
+    const submitBtns = (val, index) => {
+        clickEvent(val, index);
         (val == 1)&&cancelOrder(); //取消订单按钮
-        (val == 2)&&onClick?.(val); //去付款按钮
+        (val == 2)&&onClick?.(2); //去付款按钮
         (val == 6)&&receiveOrder(); //确认收货
+        
     }
 
     //取消订单
@@ -136,12 +139,28 @@ export default memo(({orderInfo, onClick}:Param) => {
        
     }
 
+
+    //按钮点击滚动
+    const [selectInfo, setSelectInfo] = useState({
+        selected: -1, //当前选中的id
+        tabId: '', //需要滚动到的id
+    })
+    const clickEvent = (id, index) => {
+        console.log(id, index)
+        const num = index > 0?( index - 1) : 0
+        console.log('num::',orderBtnsList.current[num].id)
+        setSelectInfo((e) => ({...e, tabId:orderBtnsList.current[num].id.toString(), selected: id}))
+    }
+
     return (
         <View className={styles.btns_list}>
-            <ScrollView scrollX >
-                {orderBtnsList.current.map((item) => 
-                    orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
-                )}
+            <ScrollView scrollX scrollIntoView={`orderBtns_${selectInfo.tabId}`} scrollWithAnimation={true} className={styles.scroll}>
+                <View className={styles.list_scroll}>
+                    {orderBtnsList.current.map((item, index) => 
+                        orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
+                        // <View key={item.id} id={`orderBtns_${item.id}`} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
+                    )}
+                </View>
             </ScrollView>
             
         </View>