订单列表对接

src/pages/orderList/components/order/index.module.scss

@@ -118,26 +118,4 @@
         border-radius: 10px;
         padding: 10px 22px;
     }
-    .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/pages/orderList/components/order/index.tsx

@@ -1,8 +1,10 @@
+import { goLink } from "@/common/common";
 import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
+import OrderBtns from "@/components/orderBtns";
 import { useSelector } from "@/reducers/hooks";
 import { Image, Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
 import styles  from './index.module.scss'
 
 type Param = {
@@ -15,7 +17,9 @@ type Param = {
         product_list: any[],
         total_fabrics: number,
         total_colors: number,
-        total_number: number
+        total_number: number,
+        status: 0,
+        id: number
     }
 }
 export default memo(({value}: Param) => {
@@ -28,9 +32,47 @@ export default memo(({value}: Param) => {
     const standardPrice = useCallback((price, sale_mode) => {
         return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
     }, [value])
+
+
+    
+    //订单按钮按订单状态归类
+    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)
+    },[])
+
     return (
         <View className={styles.order_item}>
-            <View className={styles.header}>
+            <View className={styles.header} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
                 <View className={styles.user}>
                 <Image src={`${userInfo.adminUserInfo.avatar_url}`}/>
                 <Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
@@ -41,7 +83,7 @@ export default memo(({value}: Param) => {
                 </View>
                 <View className={styles.tag}>{value?.shipment_mode_name}</View>
             </View>
-            <View className={styles.product_con}>
+            <View className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
                 <View className={styles.product_title}>
                     <View className={styles.product_tag}>{value?.sale_mode_name}</View>
                     <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
@@ -61,7 +103,6 @@ export default memo(({value}: Param) => {
                                         <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
                                     </View>
                                 )
-                            
                             })
                         }
                         <View className={styles.color_item}>
@@ -73,12 +114,8 @@ export default memo(({value}: Param) => {
                 </View>
                 <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
             </View>
-            <View className={styles.btns_list}>
-                <View className={styles.btns_item}>取消订单</View>
-                <View className={styles.btns_item}>修改地址</View>
-                <View className={styles.btns_item}>修改地址</View>
-                <View className={classnames(styles.btns_item, styles.end_btn)}>去付款</View>
-            </View>
+            <OrderBtns status={value?.status}/>
         </View>
     )
-})
+})
+

src/pages/orderList/index.tsx

@@ -100,7 +100,7 @@ export default () => {
       <View className={styles.order_list}>
           <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} >
             {orderData?.list.map(item => {
-              return <View className={styles.order_item_con}> <Order value={item}/></View>
+              return <View key={item.id} className={styles.order_item_con}> <Order value={item}/></View>
             })}
           </InfiniteScroll>
       </View>