🌈 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,42 +1,76 @@
-.sideBar_main{
+.sideBar_main {
     display: flex;
     height: 100%;
-    .sideBar_select{
+
-        width: 150px;
+    .sideBar_select {
+        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;
+            display: none;
-            width:0;
+            width: 0;
-            height:0;
+            height: 0;
-            color:transparent;
+            color: transparent;
         }
-        .sideBar_select_title{
+
+        .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;
-            .title_con{
+            text-align: center;
-                width: 74px;
+            // border-top-right-radius: 16px;
-                @include common_ellipsis($params:4);
+            // 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: 112px;
+                // margin-left: 32px;
+                @include common_ellipsis($params: 4);
+
             }
 
         }
-        .sideBar_select_title_select{
+
-            background-color: #007AFF;
+        .sideBar_select_title_select {
-            color: #fff;
+            background-color: #f7f7f7;
-            border-radius: 0px 14px 14px 0px;
+            color: #4581FF;
+            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{
+
+    .sideBar_con {
         flex: 1;
-        .sideBar_con_scroll{
+
+        .sideBar_con_scroll {
             width: 100%;
             height: 100%;
         }

src/components/sideBar/index.tsx

@@ -1,29 +1,29 @@
 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";
-import InfiniteScroll, {StatusParam} from "../infiniteScroll";
+import InfiniteScroll, { StatusParam } from "../infiniteScroll";
 import LoadingCard from "../loadingCard";
 
 
 type Params = {
     list?: any[],
-    defaultValue?: number|string,
+    defaultValue?: number | string,
     children?: ReactNode,
     height?: string,
     heightItem?: number,
-    sideBarOnClick?: (val:any) => void,
+    sideBarOnClick?: (val: any) => void,
-    refresherTriggered?: true|false,
+    refresherTriggered?: true | false,
     selfOnRefresherRefresh?: () => void
     selfOnScrolltolower?: () => void,
-    hasMore?: true|false,
+    hasMore?: true | false,
     statusMore?: StatusParam
 }
 
-export default memo(({list = [], 
+export default memo(({ list = [],
     defaultValue = 0,
-    height='100vh', 
+    height = '100vh',
     sideBarOnClick,
     children,
     heightItem = 100,
@@ -47,19 +47,19 @@ export default memo(({list = [],
         const index = list?.findIndex(item => {
             return item.id == defaultValue
         })
-        if(index !== -1) {
+        if (index !== -1) {
             computeSelectTab(index)
         }
     }
 
-    const clickEvent = ({item, index}: {item, index:number}) => {
+    const clickEvent = ({ item, index }: { item, index: number }) => {
         setSelected(item.id)
         sideBarOnClick?.(item)
         computeSelectTab(index)
     }
 
     const computeSelectTab = (index) => {
-        if((index + 1) > num_half.current) {
+        if ((index + 1) > num_half.current) {
             let num = index + 1 - num_half.current
             setTabId(list[num].id.toString())
         } else {
@@ -71,32 +71,44 @@ export default memo(({list = [],
     useReady(() => {
         Taro.nextTick(() => {
             let query = Taro.createSelectorQuery();
-            query.select('.side_bar_select').boundingClientRect(rect=>{
+            query.select('.side_bar_select').boundingClientRect(rect => {
-                console.log('rect::',rect)
+                console.log('rect::', rect)
                 let clientHeight = rect.height;
                 let clientWidth = rect.width;
                 let ratio = 750 / clientWidth;
                 let height = clientHeight * ratio;
-                num_half.current = Math.ceil(height/2/heightItem)
+                num_half.current = Math.ceil(height / 2 / heightItem)
                 init()
             }).exec();
         })
     })
 
+    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')}>
+            <View className={classnames(styles.sideBar_main, 'side_bar_select')}>
-                <ScrollView scrollWithAnimation={true} style={{height}} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
+                <ScrollView scrollWithAnimation={true} style={{ height }} className={styles.sideBar_select} scrollY scrollIntoView={`tab_${tabId}`}>
                     {
                         list?.map((item, index) => {
-                            return(
+                            return (
                                 <View
-                                    className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.id)})}
+                                    className={classnames(styles.sideBar_select_title, { [styles.sideBar_select_title_select]: (selected == item.id) })}
-                                    onClick={() => clickEvent({item, index})}
+                                    onClick={() => clickEvent({ item, index })}
                                     id={`tab_${item.id}`}
                                     key={item.id}
-                                    style={{height:heightItem+'rpx'}}
+                                    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,15 +320,21 @@ page {
     position: fixed;
     bottom: 0;
     padding-bottom: 24px;
-    // position: relative;
 
-    .moreFont {
+    // position: relative;
-        font-size: 28px;
+    .moreFontBox {
-        font-weight: 400;
+        width: 200px;
-        color: rgba(0, 0, 0, 0.8);
+
-        margin-left: 48px;
+        .moreFont {
+            font-size: 28px;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 0.8);
+            margin-left: 48px;
+        }
     }
 
+
+
     .posssBox {
         position: absolute;
         left: 32px;

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,27 +695,38 @@ 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.moreFont} onClick={() => setShowMore(false)}>关闭</View>
+                            !showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View></View>
-                }
+                        }
-                {
+                        {
-                    showMore && <View className={styles.posssBox}>
+                            showMore && <View className={styles.moreFontBox}>  <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View></View>
-                        <BottomApply
+                        }
-                            obj={infoObj}
+                        {
-                            handApplyGoods={() => handApplyGood?.()}
+                            showMore && <View className={styles.posssBox}>
-                            handApplyMoney={() => handApplyMoney?.()}
+                                <BottomApply
-                        ></BottomApply>
+                                    obj={infoObj}
-                    </View>
+                                    handApplyGoods={() => handApplyGood?.()}
+                                    handApplyMoney={() => handApplyMoney?.()}
+                                ></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
@@ -715,7 +741,7 @@ export default () => {
                 picUrl={picUrl}
             ></PayPopup>
             <OfflinePay showKong={false} show={showOffline} onClose={() => setShowOffine(false)} offlineInfo={infoObj}></OfflinePay>
-        </View>
+        </View >
     )
 }
 

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}>
-            <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
+            <View className={styles.topBox}>
-                <View className={styles.cancelFont} onClick={() => back()}>取消</View>
+                <Search placeholder='请输入搜索布料' defaultValue={defaultvalue} showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
-            </Search>
+                    <View className={styles.cancelFont} onClick={() => back()}>取消</View>
+                </Search>
+            </View>
             <View className={styles.line}></View>
             {
                 !hasFonts && <>