🐞 fix(ID1000944): 【蜘蛛管家】-退款/售后- UI还原

【【蜘蛛管家】-退款/售后- UI还原】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000944

project.private.config.json

@@ -253,6 +253,13 @@
           "query": "id=34626",
           "launchMode": "default",
           "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/refundPage/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
         }
       ]
     }

src/pages/refundPage/components/itemList/index.module.scss

@@ -1,243 +1,223 @@
 .itemBox {
-    margin-top: 38px;
+  margin-top: 38px;
-    overflow: hidden;
+  overflow: hidden;
-    margin: 24px;
+  margin: 24px;
-    // height: 416px;
+  // height: 416px;
-    padding-bottom: 20px;
+  padding-bottom: 20px;
-    background: #FFFFFF;
+  background: #ffffff;
-    border-radius: 16px;
+  border-radius: 16px;
-    margin-left: 24px;
+  margin-left: 24px;
 
-    .topItem {
+  .topItem {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 24px;
+
+    .orderNo {
+      font-size: 28px;
+      font-weight: 550;
+      color: #000000;
+      margin-left: 32px;
+    }
+
+    .status {
+      margin-right: 32px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #0d7cff;
+    }
+  }
+
+  .pussName {
+    margin-left: 32px;
+    font-size: 28px;
+    font-weight: 550;
+    color: #505050;
+  }
+
+  .line {
+    margin-left: 32px;
+    margin-right: 32px;
+    // width: 638px;
+    height: 1px;
+    background: #000000;
+    opacity: 0.1;
+    margin-top: 16px;
+    margin-bottom: 24px;
+  }
+
+  .contBox {
+    // width: 638px;
+    margin-left: 32px;
+    display: flex;
+    justify-content: space-between;
+
+    .leftCont {
+      // min-width: 24%;
+      width: 134px;
+      height: 134px;
+      // background: #000000;
+      border-radius: 8px;
+      position: relative;
+
+      .leftContNums {
+        width: 134px;
+        height: 39px;
+        background: #000000;
+        border-radius: 0px 0px 8px 8px;
+        opacity: 0.5;
+        position: absolute;
+        bottom: 0;
+        font-size: 20px;
+        font-weight: 400;
+        color: #ffffff;
+        text-align: center;
+        line-height: 39px;
+      }
+    }
+
+    .rightCont {
+      margin-left: 24px;
+      min-width: 76%;
+
+      .rightTop {
+        min-width: 76%;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 24px;
+        // width: 480px;
+        margin-bottom: 32px;
 
-        .orderNo {
+        .productBox {
+          display: flex;
+          align-items: center;
 
+          .productName {
+            max-width: 285px;
+            height: 34px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin-right: 8px;
             font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 400;
-            font-weight: 500;
             color: #000000;
-            margin-left: 32px;
+          }
 
-        }
+          .productMode {
-
+            width: 60px;
-        .status {
+            height: 28px;
-            margin-right: 32px;
+            background: #337fff;
-            font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #0D7CFF;
-        }
-    }
-
-    .pussName {
-        margin-left: 32px;
-        font-size: 28px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #000000;
-    }
-
-    .line {
-        margin-left: 32px;
-        margin-right: 32px;
-        // width: 638px;
-        height: 1px;
-        background: #000000;
-        opacity: 0.1;
-        margin-top: 16px;
-        margin-bottom: 24px;
-    }
-
-    .contBox {
-        // width: 638px;
-        margin-left: 32px;
-        display: flex;
-        justify-content: space-between;
-
-        .leftCont {
-            // min-width: 24%;
-            width: 134px;
-            height: 134px;
-            // background: #000000;
             border-radius: 8px;
-            position: relative;
+            font-size: 20px;
-
+            font-weight: 500;
-            .leftContNums {
+            color: #ffffff;
-                width: 134px;
+            text-align: center;
-                height: 39px;
+            line-height: 28px;
-                background: #000000;
+          }
-                border-radius: 0px 0px 8px 8px;
-                opacity: 0.5;
-                position: absolute;
-                bottom: 0;
-                font-size: 20px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                text-align: center;
-                line-height: 39px;
-            }
         }
 
-        .rightCont {
+        .shipMode {
-            margin-left: 24px;
+          font-size: 28px;
-            min-width: 76%;
+          font-weight: 400;
-
+          color: #000000;
-            .rightTop {
+          margin-right: 60px;
-                min-width: 76%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                // width: 480px;
-                margin-bottom: 32px;
-
-                .productBox {
-                    display: flex;
-                    align-items: center;
-
-                    .productName {
-                        max-width: 285px;
-                        height: 34px;
-                        overflow: hidden;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        margin-right: 8px;
-                        font-size: 28px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #000000;
-                    }
-
-                    .productMode {
-                        width: 60px;
-                        height: 28px;
-                        background: #337FFF;
-                        border-radius: 8px;
-                        font-size: 20px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #FFFFFF;
-                        text-align: center;
-                        line-height: 28px;
-                    }
-                }
-
-                .shipMode {
-                    font-size: 28px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #000000;
-                    margin-right: 60px;
-                }
-            }
-
-            .colorsBox {
-                padding-right: 60px;
-                display: flex;
-                align-items: center;
-                // width: 480px;
-                margin-bottom: 8px;
-
-                .colorNameOne {
-                    flex: 1;
-                    font-size: 24px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #000000;
-                    width: 133px;
-                    height: 30px;
-                    text-align: left;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                }
-
-                .colorName {
-                    flex: 1;
-                    font-size: 24px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #000000;
-                    text-align: center;
-                }
-
-                .colorNameTwo {
-                    flex: 1;
-                    font-size: 24px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #000000;
-                    text-align: right;
-                }
-            }
         }
+      }
 
-
+      .colorsBox {
-    }
+        padding-right: 60px;
-
-    .lineOne {
-        // width: 638px;
-        height: 1px;
-        margin-right: 32px;
-        background: #000000;
-        opacity: 0.1;
-        margin-left: 32px;
-        margin-top: 24px;
-    }
-
-    .bottomMsg {
-
-        margin-top: 16px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        // width: 480px;
+        margin-bottom: 8px;
 
-        .msgLeft {
+        .colorNameOne {
-            margin-left: 32px;
+          flex: 1;
-            font-size: 24px;
+          font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
-            font-weight: 400;
+          color: #000000;
-            color: #000000;
+          width: 133px;
+          height: 30px;
+          text-align: left;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
-        .msgRight {
+        .colorName {
-            margin-right: 32px;
+          flex: 1;
-            font-size: 24px;
+          font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
-            font-weight: 400;
+          color: #000000;
-            color: #000000;
+          text-align: center;
         }
 
-        .msgRightOne {
+        .colorNameTwo {
-            margin-right: 32px;
+          flex: 1;
-            font-size: 28px;
+          font-size: 24px;
-            font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 400;
-            font-weight: 500;
+          color: #000000;
-            color: #F64861;
+          text-align: right;
         }
+      }
+    }
+  }
+
+  .lineOne {
+    // width: 638px;
+    height: 1px;
+    margin-right: 32px;
+    background: #000000;
+    opacity: 0.1;
+    margin-left: 32px;
+    margin-top: 24px;
+  }
+
+  .bottomMsg {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #a8a8a8;
+    .msgLeft {
+      margin-left: 32px;
+      font-size: 24px;
+      font-weight: 400;
     }
 
-    .bottomBox {
+    .msgRight {
-        margin-top: 10px;
+      margin-right: 32px;
-        display: flex;
+      font-size: 24px;
-        justify-content: flex-end;
+      font-weight: 400;
-
-        .seeButon {
-            margin-right: 30px;
-            width: 160px;
-            height: 72px;
-            border-radius: 40px;
-            opacity: 0.6;
-            border: 1px solid #000000;
-            font-size: 28px;
-            font-weight: 400;
-            color: #000000;
-            text-align: center;
-            line-height: 72px;
-        }
     }
-}
+
+    .msgRightOne {
+      margin-right: 32px;
+      font-size: 28px;
+      font-weight: 500;
+      color: #f64861;
+    }
+  }
+
+  .bottomBox {
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+
+    .seeButon {
+      margin-right: 30px;
+      width: 160px;
+      height: 72px;
+      border-radius: 40px;
+      opacity: 0.6;
+      border: 1px solid #000000;
+      font-size: 28px;
+      font-weight: 400;
+      color: #000000;
+      text-align: center;
+      line-height: 72px;
+    }
+  }
+}

src/pages/refundPage/components/tabs/index.module.scss

@@ -1,42 +1,40 @@
 .flexBox {
-    width: 100%;
+  width: 100%;
-    height: 102px;
+  height: 102px;
-    background: #ffffff;
+  background: #ffffff;
+  display: flex;
+  position: sticky;
+  top: 80px;
+  .itemBox {
+    position: relative;
+    flex: 1;
+    min-width: 138px;
     display: flex;
-    position: sticky;
+    flex-direction: column;
-    top: 80px;
+    align-items: center;
-    .itemBox {
+    justify-content: center;
-        position: relative;
+    text-align: center;
-        flex: 1;
+    height: 102px;
-        min-width: 138px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        height: 102px;
 
-        .itemFont {
+    .itemFont {
-            font-size: 28px;
+      font-size: 28px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+      font-weight: 400;
-            font-weight: 700;
+      color: #000000;
-            color: #000000;
-        }
-
-        .activeItems {
-            font-size: 28px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-            font-weight: 400;
-            color: #337FFF;
-        }
-
-        .borderBox {
-            position: absolute;
-            bottom: 0;
-            width: 138px;
-            height: 6px;
-            background: #337FFF;
-            border-radius: 4px;
-        }
     }
-}
+
+    .activeItems {
+      font-size: 28px;
+      font-weight: 550;
+      color: #337fff;
+    }
+
+    .borderBox {
+      position: absolute;
+      bottom: 0;
+      width: 138px;
+      height: 6px;
+      background: #337fff;
+      border-radius: 4px;
+    }
+  }
+}

src/pages/refundPage/components/tabs/index.tsx

@@ -18,7 +18,6 @@ const Tabs = (props: Props) => {
             <View className={styles.itemBox} key={index} onClick={() => handChose?.(item)}>
               <View
                 className={classnames(item.showBorder ? styles.activeItems : styles.itemFont)}
-
               >{item?.name}</View >
               {
                 item.showBorder && <View className={styles.borderBox} ></View>

src/pages/refundPage/index.module.scss

@@ -1,3 +1,12 @@
+page {
+  height: 100%;
+}
+.refundPage {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
 .flexBox {
   display: flex;
   align-items: center;
@@ -20,7 +29,6 @@
 .shaixuan {
   margin-right: 32px;
   font-size: 28px;
-  font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #000000;
 }
@@ -29,21 +37,16 @@
   color: #0d7cff;
   margin-right: 32px;
   font-size: 28px;
-  font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
 }
 
 .order_list {
-  height: calc(100vh - 300px);
+  flex: 1 1 auto;
   background: #f7f7f7;
-
+  overflow: hidden;
   .bigBpx {
     height: 200px;
   }
-
-  .kongboxTwo {
-    height: 100px;
-  }
 }
 
 .scrllStyle {
@@ -64,7 +67,6 @@
 
     .thirdTopfont {
       font-size: 28px;
-      font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #000000;
     }
@@ -105,7 +107,6 @@
         background: rgba(51, 127, 255, 0.1);
         border-radius: 8px;
         font-size: 28px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #337fff;
         text-align: center;
@@ -123,7 +124,6 @@
         background: #f6f6f6;
         border-radius: 8px;
         font-size: 28px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #000000;
         border: 1px solid #f6f6f6;
@@ -155,7 +155,6 @@
       border-radius: 44px;
       border: 1px solid #087eff;
       font-size: 28px;
-      font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #337fff;
       text-align: center;
@@ -169,8 +168,7 @@
       height: 80px;
       background: #68b4ff;
       border-radius: 44px;
-      font-size: 32px;
+      font-size: 28px;
-      font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #ffffff;
       text-align: center;
@@ -184,7 +182,6 @@
       background: #337fff;
       border-radius: 44px;
       font-size: 32px;
-      font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #fff;
       text-align: center;

src/pages/refundPage/index.tsx

@@ -302,7 +302,7 @@ const RefundPage = () => {
     getOrderList()
   }, [searchField.size, searchField.name, searchField.status])
   return (
-    <>
+    <View className={styles.refundPage}>
       <View style={{ background: '#FFFFFF', paddingLeft: '20rpx', paddingBottom: '20rpx', position: 'sticky', top: '0', zIndex: '99' }}>
         <Search placeholder="搜索商品/名称/颜色/订单号" showBtn={false} changeOnSearch={getSearchData} >
           <View className={styles.flexBox} onClick={() => showSelctPopup()}>
@@ -333,7 +333,6 @@ const RefundPage = () => {
             )
           })}
         </InfiniteScroll>
-        <View className={styles.kongboxTwo}></View>
       </View>
       <Popup title="筛选订单" show={showPopup} onClose={() => closePopup()}>
         <View className={styles.popupBox}>
@@ -408,7 +407,7 @@ const RefundPage = () => {
         showPopup={ShowCode}
         popupClose={() => setShowCode(false)}
       ></RefundCodelist>
-    </>
+    </View>
   )
 }