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

【【蜘蛛管家】-退款/售后- UI还原】 https://www.tapd.cn/53459131/bugtrace/bugs/view/1153459131001000944
2022-12-08 22:19:04 +08:00 · 2022-12-08 22:19:04 +08:00 · af3eeaf9a1
commit af3eeaf9a1
parent b9dd27ebb7
6 changed files with 254 additions and 274 deletions
--- a/project.private.config.json
+++ b/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
        }
      ]
    }
--- a/src/pages/refundPage/components/itemList/index.module.scss
+++ b/src/pages/refundPage/components/itemList/index.module.scss
@ -1,243 +1,223 @@
 .itemBox {
-    margin-top: 38px;
-    overflow: hidden;
-    margin: 24px;
-    // height: 416px;
-    padding-bottom: 20px;
-    background: #FFFFFF;
-    border-radius: 16px;
-    margin-left: 24px;
+  margin-top: 38px;
+  overflow: hidden;
+  margin: 24px;
+  // height: 416px;
+  padding-bottom: 20px;
+  background: #ffffff;
+  border-radius: 16px;
+  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: 500;
+            font-weight: 400;
            color: #000000;
-            margin-left: 32px;
+          }

-        }
-
-        .status {
-            margin-right: 32px;
-            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;
+          .productMode {
+            width: 60px;
+            height: 28px;
+            background: #337fff;
            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-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                text-align: center;
-                line-height: 39px;
-            }
+            font-size: 20px;
+            font-weight: 500;
+            color: #ffffff;
+            text-align: center;
+            line-height: 28px;
+          }
        }

-        .rightCont {
-            margin-left: 24px;
-            min-width: 76%;
-
-            .rightTop {
-                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;
-                }
-            }
+        .shipMode {
+          font-size: 28px;
+          font-weight: 400;
+          color: #000000;
+          margin-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;
+      .colorsBox {
+        padding-right: 60px;
        display: flex;
        align-items: center;
-        justify-content: space-between;
+        // width: 480px;
+        margin-bottom: 8px;

-        .msgLeft {
-            margin-left: 32px;
-            font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #000000;
+        .colorNameOne {
+          flex: 1;
+          font-size: 24px;
+          font-weight: 400;
+          color: #000000;
+          width: 133px;
+          height: 30px;
+          text-align: left;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
        }

-        .msgRight {
-            margin-right: 32px;
-            font-size: 24px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #000000;
+        .colorName {
+          flex: 1;
+          font-size: 24px;
+          font-weight: 400;
+          color: #000000;
+          text-align: center;
        }

-        .msgRightOne {
-            margin-right: 32px;
-            font-size: 28px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #F64861;
+        .colorNameTwo {
+          flex: 1;
+          font-size: 24px;
+          font-weight: 400;
+          color: #000000;
+          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 {
-        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;
-        }
+    .msgRight {
+      margin-right: 32px;
+      font-size: 24px;
+      font-weight: 400;
    }
-}
+
+    .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;
+    }
+  }
+}
--- a/src/pages/refundPage/components/tabs/index.module.scss
+++ b/src/pages/refundPage/components/tabs/index.module.scss
@ -1,42 +1,40 @@
 .flexBox {
-    width: 100%;
-    height: 102px;
-    background: #ffffff;
+  width: 100%;
+  height: 102px;
+  background: #ffffff;
+  display: flex;
+  position: sticky;
+  top: 80px;
+  .itemBox {
+    position: relative;
+    flex: 1;
+    min-width: 138px;
    display: flex;
-    position: sticky;
-    top: 80px;
-    .itemBox {
-        position: relative;
-        flex: 1;
-        min-width: 138px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        height: 102px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 102px;

-        .itemFont {
-            font-size: 28px;
-            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
-            font-weight: 700;
-            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;
-        }
+    .itemFont {
+      font-size: 28px;
+      font-weight: 400;
+      color: #000000;
    }
-}
+
+    .activeItems {
+      font-size: 28px;
+      font-weight: 550;
+      color: #337fff;
+    }
+
+    .borderBox {
+      position: absolute;
+      bottom: 0;
+      width: 138px;
+      height: 6px;
+      background: #337fff;
+      border-radius: 4px;
+    }
+  }
+}
--- a/src/pages/refundPage/components/tabs/index.tsx
+++ b/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>
--- a/src/pages/refundPage/index.module.scss
+++ b/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-family: PingFangSC-Medium, PingFang SC;
+      font-size: 28px;
      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;
--- a/src/pages/refundPage/index.tsx
+++ b/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>
  )
 }