🌈 style:修改样式

src/components/BottomBtns/index.module.scss

@@ -1,4 +1,5 @@
 .flexBox {
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;

src/components/BottomBtns/index.tsx

@@ -1,5 +1,5 @@
 import { View } from "@tarojs/components"
-import { memo, useEffect, useState, useMemo } from "react"
+import { memo, useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from "react"
 import style from "./index.module.scss"
 interface prosObj {
     obj?: {
@@ -13,10 +13,13 @@ interface prosObj {
     nextBuy?: (any) => void,
     toPay?: (any) => void,
     handSureGoods?: () => void,
-    showTuiGoods?: boolean
+    showTuiGoods?: boolean,
+    handApplyGoods?: () => void,
+    handApplyMoney?: () => void,
+    showDetail?: boolean
 }
 
-export default memo((props: prosObj) => {
+export default memo(forwardRef((props: prosObj, ref) => {
     const {
         obj = {
             sale_mode: 0,
@@ -29,7 +32,10 @@ export default memo((props: prosObj) => {
         cancle,
         nextBuy,
         toPay,
-        handSureGoods
+        handSureGoods,
+        handApplyGoods,
+        handApplyMoney,
+        showDetail = false
     } = props
     //判断显示取消订单
 
@@ -97,8 +103,70 @@ export default memo((props: prosObj) => {
         } else return false
     }, [obj])
 
+
+
+
+    //判断显示申请退货
+    const showTuihuo = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status == 9 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status == 9 && obj.settle_mode == 3) ||
+            (obj.sale_mode === 2 && obj.status == 9)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示申请退款
+    const showTuikuan = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status == 2 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status == 11 && (obj.collect_status == 1 || obj.collect_status == 2)) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 1) ||
+            (obj.sale_mode === 1 && obj.status == 0) ||
+            (obj.sale_mode === 1 && obj.status == 9) ||
+            (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 1) ||
+            (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 2)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+
+    //多的不显示别的按钮
+    // const currentNums = useRef<any>({ nums: 0 })
+    const itemNums = useMemo(() => {
+        let nums = 0
+        if (showTake) {
+            nums = nums + 1
+        }
+        if (showCancel) {
+            nums = nums + 1
+        }
+        if (canBuy) {
+            nums = nums + 1
+        }
+        return nums
+    }, [obj])
+
+    useImperativeHandle(ref, () => ({
+        itemNums
+    }))
+
     return (
         <View className={style.flexBox}>
+
+            {
+                (showTuihuo && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
+            }
+
+            {
+                (showTuikuan && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
+
+            }
             {
                 showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
             }
@@ -114,4 +182,4 @@ export default memo((props: prosObj) => {
 
         </View>
     )
-})
+}))

src/components/goodsItem/index.module.scss

@@ -104,8 +104,10 @@
                     width: 64px;
                     height: 64px;
                     display: flex;
+                    line-height: 64px;
                     align-items: center;
                     justify-content: center;
+                    flex-direction: column;
                     color: #000;
                     font-size: 35px;
                 }

src/components/sideBar/index.module.scss

@@ -1,41 +1,75 @@
 .sideBar_main {
     display: flex;
     height: 100%;
+
     .sideBar_select {
-        width: 150px;
+        width: 176px;
         height: 100%;
-        background-color: #eaeaea;
+        background-color: #f7f7f7;
-        border-radius: 0 10px 10px 0;
+        border-top-right-radius: 16px;
+
+        // border-radius: 0 10px 10px 0;
         ::-webkit-scrollbar {
             display: none;
             width: 0;
             height: 0;
             color: transparent;
         }
+
         .sideBar_select_title {
+            position: relative;
             height: 100px;
-            width: 100%;
+            width: 176px;
             font-size: $font_size;
             color: #727272;
             display: flex;
-            flex-direction: column;
             align-items: center;
+            flex-direction: column;
             justify-content: center;
             font-weight: 400;
+            text-align: center;
+            // border-top-right-radius: 16px;
+            // border-bottom-right-radius: 16px;
+            background-color: #ffffff;
+
+            .shu {
+                top: 55px;
+                left: 0px;
+                position: absolute;
+                width: 8px;
+                height: 40px;
+                background: #4581FF;
+                border-radius: 0px 4px 4px 0px;
+                margin-right: 20px;
+            }
+
             .title_con {
-                width: 74px;
+                // width: 74px;
+                width: 112px;
+                // margin-left: 32px;
                 @include common_ellipsis($params: 4);
+
             }
 
         }
+
         .sideBar_select_title_select {
-            background-color: #007AFF;
+            background-color: #f7f7f7;
-            color: #fff;
+            color: #4581FF;
-            border-radius: 0px 14px 14px 0px;
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+            // border-top-right-radius: 16px;
+            // border-radius: 0px 14px 14px 0px;
+        }
+
+        .indexBox {
+            background-color: red;
         }
     }
+
     .sideBar_con {
         flex: 1;
+
         .sideBar_con_scroll {
             width: 100%;
             height: 100%;

src/components/sideBar/index.tsx

@@ -1,5 +1,5 @@
 import { ScrollView, View } from "@tarojs/components"
-import React, { memo, ReactNode, useEffect, useRef, useState } from "react"
+import React, { memo, ReactNode, useEffect, useMemo, useRef, useState } from "react"
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { useReady } from "@tarojs/taro";
@@ -83,6 +83,15 @@ export default memo(({list = [],
         })
     })
 
+    const [currentIndex, setcurrentIndex] = useState(0)
+    useMemo(() => {
+        Taro.nextTick(() => {
+            let index = 0
+            index = list.findIndex(item => { return item.id == selected })
+            setcurrentIndex(currentIndex)
+        })
+    }, [selected])
+
     return (
         <>
             <View className={classnames(styles.sideBar_main, 'side_bar_select')}>
@@ -97,6 +106,9 @@ export default memo(({list = [],
                                     key={item.id}
                                     style={{ height: heightItem + 'rpx' }}
                                 >
+                                    {
+                                        selected == item.id && <View className={styles.shu}></View>
+                                    }
                                     <View className={styles.title_con}>
                                         {item.name}
                                     </View>

src/pages/orderDetails/index.module.scss

@@ -320,7 +320,10 @@ page {
     position: fixed;
     bottom: 0;
     padding-bottom: 24px;
+
     // position: relative;
+    .moreFontBox {
+        width: 200px;
 
         .moreFont {
             font-size: 28px;
@@ -328,6 +331,9 @@ page {
             color: rgba(0, 0, 0, 0.8);
             margin-left: 48px;
         }
+    }
+
+
 
     .posssBox {
         position: absolute;

src/pages/orderDetails/index.tsx

@@ -596,6 +596,21 @@ export default () => {
         }
     }, [infoObj])
 
+    const BottomBtnsRef = useRef<any>()
+    const [showOther, setshowOther] = useState(false)
+    const testOther = useMemo(() => {
+        Taro.nextTick(() => {
+            if (BottomBtnsRef.current?.itemNums >= 2) {
+                setshowOther(true)
+                return true
+            } else {
+                setshowOther(false)
+                return false
+            }
+        })
+    }, [infoObj])
+
+
     return (
         <View className={styles.mainBox}>
             {(infoObj?.status != 10 && <OrderState orderInfo={infoObj} />)}
@@ -680,10 +695,13 @@ export default () => {
             <View className={styles.safeBottom}></View>
             <View className={styles.bottomBox}>
                 {
-                    !showMore && <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View>
+                    showOther &&
+                    <>
+                        {
+                            !showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View></View>
                         }
                         {
-                    showMore && <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View>
+                            showMore && <View className={styles.moreFontBox}>  <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View></View>
                         }
                         {
                             showMore && <View className={styles.posssBox}>
@@ -694,13 +712,21 @@ export default () => {
                                 ></BottomApply>
                             </View>
                         }
+                    </>
+                }
+
+
                 <BottomBtns
+                    ref={BottomBtnsRef}
+                    showDetail
                     obj={infoObj}
                     showTuiGoods
                     cancle={(e) => cancle?.(e, infoObj)}
                     nextBuy={(e) => nextBuy?.(e, infoObj)}
                     toPay={(e) => toPay?.(e, infoObj)}
                     handSureGoods={() => handSureGoods?.()}
+                    handApplyGoods={() => handApplyGood?.()}
+                    handApplyMoney={() => handApplyMoney?.()}
                 ></BottomBtns>
             </View>
             <PayPopup

src/pages/searchPage/components/empty/index.module.scss

@@ -6,7 +6,7 @@
     flex-direction: column;
 
     .pic {
-        width: 322px;
+        width: 522px;
         height: 322px; 
         background: #fff;
         // opacity: 0.3;

src/pages/searchPage/index.module.scss

@@ -5,6 +5,10 @@ page {
 .main {
     background: #ffff;
 
+    .topBox {
+        padding-left: 24px;
+    }
+
     .cancelFont {
         width: 76px;
         font-size: 28px;

src/pages/searchPage/index.tsx

@@ -350,9 +350,11 @@ export default memo(() => {
     }
     return (
         <View className={styles.main}>
+            <View className={styles.topBox}>
                 <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
                     <View className={styles.cancelFont} onClick={() => back()}>取消</View>
                 </Search>
+            </View>
             <View className={styles.line}></View>
             {
                 !hasFonts && <>