🦄 refactor:订单详情静态界面

2022-09-08 16:19:37 +08:00
parent caf7066663
commit 2ae58233f4
19 changed files with 1456 additions and 6 deletions
@@ -0,0 +1,48 @@
+.flexBox {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .cancle {
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        opacity: 0.6;
+        border: 1px solid #000000;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        text-align: center;
+        line-height: 72px;
+        margin-right: 24px;
+    }
+
+    .nextBuy {
+        margin-right: 24px;
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        opacity: 0.6;
+        border: 1px solid #000000;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        text-align: center;
+        line-height: 72px;
+        margin-right: 24px;
+    }
+
+    .toBuy {
+        margin-right: 24px;
+        width: 160px;
+        height: 72px;
+        border-radius: 40px;
+        border: 1px solid #087EFF;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #4581FF;
+    }
+}
@@ -0,0 +1,81 @@
+import { View } from "@tarojs/components"
+import { memo, useEffect, useState, useMemo } from "react"
+import style from "./index.module.scss"
+interface prosObj {
+    obj?: {
+        sale_mode?: Number,
+        collect_status?: Number | string,
+        status?: Number,
+        payment_method?: Number
+    }
+    cancle?: () => void,
+    nextBuy?: () => void,
+    toPay?: () => void,
+}
+
+export default memo((props: prosObj) => {
+    const {
+        obj = {
+            sale_mode: 0,
+            collect_status: '',
+            status: '',
+            payment_method: 0,
+        },
+        cancle,
+        nextBuy,
+        toPay
+    } = props
+    //判断显示取消订单
+    const showCancel = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 0) ||
+            (obj.sale_mode === 0 && obj.status === 1) ||
+            (obj.sale_mode === 0 && obj.status === 2) ||
+            (obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status === 3 && (obj.payment_method == 3 || obj.payment_method == 5)) ||
+            (obj.sale_mode === 1 && obj.status === 10) ||
+            (obj.sale_mode === 2 && obj.status === 10)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示再次购买
+    const showBuy = useMemo(() => {
+        if (
+            obj.sale_mode === 0 ||
+            (obj.sale_mode === 1 && obj.status !== 10) ||
+            (obj.sale_mode === 2 && obj.status !== 10)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示去付款
+    const canBuy = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status === 3 && (obj.payment_method == 3 || obj.payment_method == 5)) ||
+            (obj.sale_mode === 0 && obj.status === 8 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status == 1)) ||
+            (obj.sale_mode === 0 && obj.status === 9 && (obj.payment_method == 3 || obj.payment_method == 5 || obj.collect_status == 1)) ||
+            (obj.sale_mode === 2 && obj.status === 7)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+
+    return (
+        <View className={style.flexBox}>
+            {
+                showCancel && <View className={style.cancle} onClick={() => cancle?.()}>取消订单</View>
+            }
+            {
+                showBuy && <View className={style.nextBuy} onClick={() => nextBuy?.()}>再次购买</View>
+            }
+            {
+                canBuy && <View className={style.toBuy} onClick={() => toPay?.()}>去付款</View>
+            }
+
+        </View>
+    )
+})