售后开发

src/pages/salesAfter/components/orderState/index.module.scss

@@ -0,0 +1,105 @@
+.order_flow_state{
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing:border-box;
+    position: relative;
+    overflow: hidden;
+    .order_status_list{
+        max-height: 250px;
+        overflow: hidden;
+        transition: all 0.3s ease-in-out;
+    }
+    .order_status_list_show {
+        max-height: 1000px !important;
+    }
+    .order_status_item{
+        position: relative;
+        padding-left: 50px;
+        &:nth-last-child(n+2) {
+            padding-bottom: 30px;
+        }
+        .order_status_tail_end, .order_status_tail{
+            width: 15px;
+            height: 15px;
+            border: 2px solid $color_main;
+            background-color: #fff;
+            border-radius: 50%;
+            position:absolute;
+            left: 0;
+            top: 10px;
+            z-index: 10;
+        }
+        .order_status_tail_end{
+            background-color: $color_main;
+        }
+        .order_status_line{
+            border-left: 2px solid $color_main;
+            height: 100%;
+            top: 10px;
+            left: 9px;
+            position: absolute;
+            z-index: 1;
+        }
+        .order_status_content{
+            display: flex;
+            align-items: center;
+            .order_status_title{
+                color: $color_font_two;
+                font-size: $font_size;
+                font-weight: 700;
+            }
+            .order_status_time{
+                color: $color_font_two;
+                font-size: $font_size_medium;
+                padding: 0 20px;
+            }
+            .order_status_tag{
+                font-size: $font_size_min;
+                background: #F0F0F0;
+                border-radius: 6px;
+                padding: 5px 10px;
+                color: $color_font_two;
+            }
+            .order_status_select{
+                color: $color_main;
+            }
+            .order_status_tag_select{
+                color: $color_main;
+            }
+        }
+        .order_status_des{
+            color: $color_font_two;
+            font-size: $font_size_medium;
+        }
+        .order_status_des_select{
+            color: $color_font_one;
+        }
+    }
+    .more{
+        width: 100%;
+        text-align: center;
+        font-size: $font_size_min;
+        color: $color_font_one;
+        padding-top: 20px;
+        .miconfonts{
+            display: inline-block;
+            font-size: 25px;
+            transform:rotate(90deg);
+        }
+        .open_miconfonts{
+            transform:rotate(-90deg);
+        }
+    }
+    .image_tag{
+        width: 140px;
+        height: 144px;
+        .image{
+            width: 140px;
+            height: 144px;
+        }
+        position: absolute;
+        top: -10px;
+        right: -10px;
+    }
+}

src/pages/salesAfter/components/orderState/index.tsx

@@ -0,0 +1,63 @@
+import { Image, Text, View } from "@tarojs/components"
+import { memo, useMemo, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { formatDateTime, formatImgUrl } from "@/common/fotmat";
+import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
+
+
+
+type Param = {
+    list: {
+        status: string,
+        time: string,
+        tag: string,
+        desc: string
+    }[],
+    payment_method: 0|PAYMENT_METHOD_PARAM,
+    
+}
+
+//支付方式枚举
+const {
+    PaymentMethodAccountPeriod,
+    PaymentMethodCashOnDelivery,
+} = PAYMENT_METHOD
+
+export default memo(({list = [], payment_method = 0}:Param) => {
+    
+    const [showMore, setShowMore] = useState(false)
+    const changeMore = () => {
+        setShowMore(() => !showMore)
+    }
+    const dataList = useMemo(() => {
+        return list.reverse()
+    }, [list])
+
+    return (
+        <>
+            {(dataList.length > 0)&&<View className={styles.order_flow_state}>
+                <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
+                    {dataList.map((item, index) => <View className={styles.order_status_item}>
+                        {(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
+                        {(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
+                        <View className={styles.order_status_content}>
+                            <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
+                            <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
+                            {/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
+                        </View>
+                        <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
+                    </View>)}
+                </View>
+                {(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
+                    <Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
+                    <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
+                </View>}
+                <View className={styles.image_tag}>
+                    {(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
+                    {(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
+                </View>
+            </View>}
+        </>
+    )
+})