订单列表对接

src/components/orderBtns/index.module.scss

@@ -0,0 +1,22 @@
+.btns_list{
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 30px;
+    .btns_item{
+        width: 152px;
+        height: 72px;
+        border: 2px solid #dddddd;
+        border-radius: 38px;
+        text-align: center;
+        line-height: 72px;
+        font-size: $font_size;
+        color: $color_font_three;
+        &:nth-child(n+2) {
+            margin-left: 32px;
+        }
+    }
+    .end_btn{
+        border: 2px solid $color_main;
+        color: $color_main;
+    }
+}

src/components/orderBtns/index.tsx

@@ -0,0 +1,80 @@
+import { CancelOrderApi } from "@/api/order"
+import { alert } from "@/common/common"
+import { View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { useCallback, useRef, memo } from "react"
+import styles  from './index.module.scss'
+
+type Param = {
+    status?: number //订单状态
+    orderId?: number //订单id
+}
+export default memo(({status = 0, orderId = 0}:Param) => {
+    //订单按钮按订单状态归类
+    const orderBtnsList = useRef([
+        {
+            value: [0, 1, 2, 9, 3], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
+            label: '取消订单'
+        },
+        {
+            value: [3, 9], //去付款按钮对应：待付款， 待发货
+            label: '去付款'
+        },
+        {
+            value: [3], //取消订单按钮对应： 待发货
+            label: '申请退款'
+        },
+        {
+            value: [4, 7, 8, 6], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
+            label: '查看物流'
+        },
+        {
+            value: [4, 7, 6], //取消订单按钮对应： 待收货, 已收货, 已退款
+            label: '申请退货'
+        },
+        {
+            value: [4], //取消订单按钮对应： 待收货
+            label: '确认收货'
+        },
+        {
+            value: [4,7,8,6], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
+            label: '再次购买'
+        }
+    ])
+    const orderBtnsShow = useCallback((item, status) => {
+        return item.value.includes(status)
+    },[])
+
+    //点击按钮操作
+    const submitBtns = (val) => {
+        if( val == 0 ) cancelOrder()
+    }
+
+    //取消订单
+    const {fetchData: cancelFetchData} = CancelOrderApi()
+    const cancelOrder = () => {
+        Taro.showModal({
+            title: '要取消该订单吗？',
+            success: async function (res) {
+              if (res.confirm) {
+                let res = await cancelFetchData({id: orderId})
+                if(res.success) {
+                    alert.success('取消成功')
+                } else {
+                    alert.none(res.msg)
+                }
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+          })
+    }
+
+    return (
+        <View className={styles.btns_list}>
+            {orderBtnsList.current.map((item, index) => 
+                orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(index)}>{item.label}</View>
+            )}
+        </View>
+    )
+})