Selaa lähdekoodia

fix:骨架屏

liushengqiang 2 vuotta sitten
vanhempi
commit
e54582ae3b

+ 32 - 23
src/views/collection-record/component/item-skelete.tsx

@@ -1,6 +1,7 @@
 import {
   Cell,
   CellGroup,
+  Skeleton,
   SkeletonAvatar,
   SkeletonParagraph,
   SkeletonTitle
@@ -13,29 +14,37 @@ export default defineComponent({
   setup(props) {
     return () => (
       <div class={styles.item}>
-        <CellGroup inset>
-          <Cell center>
-            {{
-              title: () => <SkeletonParagraph rowWidth="52%" />,
-              value: () => <SkeletonParagraph />
-            }}
-          </Cell>
-          <Cell center>
-            {{
-              icon: () => <SkeletonAvatar />,
-              title: () => (
-                <div class={styles.name}>
-                  <SkeletonTitle />
-                </div>
-              ),
-              value: () => (
-                <div class={styles.price}>
-                  <SkeletonParagraph />
-                </div>
-              )
-            }}
-          </Cell>
-        </CellGroup>
+        <Skeleton animate>
+          {{
+            template: () => (
+              <div style={{ width: '100%' }}>
+                <CellGroup inset>
+                  <Cell center>
+                    {{
+                      title: () => <SkeletonParagraph rowWidth="52%" />,
+                      value: () => <SkeletonParagraph />
+                    }}
+                  </Cell>
+                  <Cell center>
+                    {{
+                      icon: () => <SkeletonAvatar />,
+                      title: () => (
+                        <div class={styles.name}>
+                          <SkeletonTitle />
+                        </div>
+                      ),
+                      value: () => (
+                        <div class={styles.price}>
+                          <SkeletonParagraph />
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                </CellGroup>
+              </div>
+            )
+          }}
+        </Skeleton>
       </div>
     );
   }

+ 9 - 6
src/views/collection-record/component/list.tsx

@@ -96,12 +96,15 @@ export default defineComponent({
           data.page = data.page + 1;
         }
       } else {
-        res = await api_userPaymentOrderPage({
-          page: data.page,
-          rows: 10,
-          orderStatus: props.orderStatus as any,
-          payMonth: data.dateTime.join('-')
-        });
+        try {
+          res = await api_userPaymentOrderPage({
+            page: data.page,
+            rows: 10,
+            orderStatus: props.orderStatus as any,
+            payMonth: data.dateTime.join('-')
+          });
+        } catch (error) {}
+
         if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
           data.list = res.data.rows.map((item: any) => {
             return {

+ 1 - 2
src/views/collection-record/index.tsx

@@ -18,8 +18,7 @@ export default defineComponent({
           <Tabs v-model:active={data.tab} animated swipeable>
             <Tab name="1" title="待领取">
               <div class={styles.wrap}>
-                {/* WAIT_PAY, */}
-                <List orderStatus="PAYING" />
+                <List orderStatus="WAIT_PAY,PAYING" />
               </div>
             </Tab>
             <Tab name="2" title="已领取">