@uxda/appkit 1.0.76 → 1.1.2

package/README.md

@@ -95,11 +95,12 @@ import { BalanceCard } from '@uxda/appkit'
 
 ```html
 <template>
-  <balance-card @drill="onBalanceCardDrill" @recharge="onBalanceCardRecharge" />
+  <balance-card app="crm" @drill="onBalanceCardDrill" @recharge="onBalanceCardRecharge" />
 <template>
 ```
 
 #### 事件 emits 
+* app 配置到组件上的 app code
 * @drill 点击账户详情时发生
 * @recharge 点击充值按钮时发生
 
@@ -115,6 +116,10 @@ function onBalanceCardRecharge () {
 }
 ```
 
+### 方法 methods
+* reload() 刷新数据
+
+
 
 ### 4️⃣ 余额不足提示框 &lt;balance-reminder&gt;
 

package/dist/appkit.css

@@ -536,6 +536,9 @@ page {
   font-weight: 700;
 }
 .account-view {
+  height: 100vh;
+}
+.account-view .scroll-content {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQwNiIgdmlld0JveD0iMCAwIDc1MCA0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zODIuNSA0MDcuNUM1NzcuMzU3IDQwNy41IDc1My43ODggMzgxLjI0OCA4ODEuNTIxIDMzOC43OTFDOTQ1LjM4NiAzMTcuNTYzIDk5Ny4xMDQgMjkyLjI3NiAxMDMyLjg3IDI2NC4xNzFDMTA2OC42MiAyMzYuMDcxIDEwODguNSAyMDUuMDk3IDEwODguNSAxNzIuNUMxMDg4LjUgMTM5LjkwMyAxMDY4LjYyIDEwOC45MjkgMTAzMi44NyA4MC44Mjg5Qzk5Ny4xMDQgNTIuNzI0NSA5NDUuMzg2IDI3LjQzNjcgODgxLjUyMSA2LjIwODk4Qzc1My43ODggLTM2LjI0ODIgNTc3LjM1NyAtNjIuNSAzODIuNSAtNjIuNUMxODcuNjQzIC02Mi41IDExLjIxMjIgLTM2LjI0ODIgLTExNi41MjIgNi4yMDg5OEMtMTgwLjM4NiAyNy40MzY3IC0yMzIuMTA0IDUyLjcyNDUgLTI2Ny44NjcgODAuODI4OUMtMzAzLjYyNCAxMDguOTI5IC0zMjMuNSAxMzkuOTAzIC0zMjMuNSAxNzIuNUMtMzIzLjUgMjA1LjA5NyAtMzAzLjYyNCAyMzYuMDcxIC0yNjcuODY3IDI2NC4xNzFDLTIzMi4xMDQgMjkyLjI3NiAtMTgwLjM4NiAzMTcuNTYzIC0xMTYuNTIyIDMzOC43OTFDMTEuMjEyMiAzODEuMjQ4IDE4Ny42NDMgNDA3LjUgMzgyLjUgNDA3LjVaIiBmaWxsPSIjM0IzOTNDIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=");
   background-position: center -200px;
   background-repeat: no-repeat;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createTextVNode, createStaticVNode, createCommentVNode, renderSlot, createVNode, ref, onMounted, unref, watch, computed, normalizeStyle, withDirectives, vShow } from 'vue';
-import Taro, { useDidShow, usePageScroll, usePullDownRefresh, useReachBottom } from '@tarojs/taro';
+import Taro, { useDidShow } from '@tarojs/taro';
 import { Grid, GridItem, Button, Checkbox, Popup, OverLay, DatePicker } from '@nutui/nutui-taro';
 import dayjs from 'dayjs';
 
@@ -109,11 +109,11 @@ function requestPayment$2(json) {
 
 function useSafeArea() {
   const systemInfo = Taro.getSystemInfoSync(), capsule = Taro.getMenuButtonBoundingClientRect();
-  const status = systemInfo.statusBarHeight || 0, gap = capsule.top - status, nav = capsule.height + gap * 2;
+  const status = systemInfo.statusBarHeight || 0, gap = capsule.top - status, nav = capsule.height + gap * 2, safeAreaBottom = systemInfo.safeArea?.bottom || 0, bottom = systemInfo.screenHeight - safeAreaBottom;
   return {
     status,
     nav,
-    bottom: systemInfo.safeArea?.bottom || 0
+    bottom
   };
 }
 
@@ -906,6 +906,9 @@ const _hoisted_14$1 = [
 ];
 var script$7 = /* @__PURE__ */ defineComponent({
   __name: "BalanceCard",
+  props: {
+    app: { type: String, required: true, default: "" }
+  },
   emits: [
     /**
      * 跳账户详情
@@ -916,7 +919,8 @@ var script$7 = /* @__PURE__ */ defineComponent({
      */
     "recharge"
   ],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
     const balance = ref({
       total: 0,
       privileges: []
@@ -926,7 +930,9 @@ var script$7 = /* @__PURE__ */ defineComponent({
     };
     async function loadBalance() {
       const $http = useHttp();
-      $http.get(endpoints.\u83B7\u53D6\u4F59\u989D\u660E\u7EC6, {}).then((data) => {
+      $http.get(endpoints.\u83B7\u53D6\u4F59\u989D\u660E\u7EC6, {
+        app: props.app
+      }).then((data) => {
         balance.value = data;
       });
     }
@@ -937,6 +943,9 @@ var script$7 = /* @__PURE__ */ defineComponent({
     useDidShow(() => {
       loadBalance();
     });
+    __expose({
+      reload: loadBalance
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("div", _hoisted_2$7, [
@@ -1416,19 +1425,20 @@ var script$2 = /* @__PURE__ */ defineComponent({
 
 script$2.__file = "src/balance/components/SecondBalance.vue";
 
-const _hoisted_1$1 = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$1 = { class: "scroll-content" };
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode(
   "label",
   null,
   "\u5C0F\u4E91\u8C46\u4F59\u989D",
   -1
   /* HOISTED */
 );
-const _hoisted_2$1 = [
-  _hoisted_1$1
+const _hoisted_3$1 = [
+  _hoisted_2$1
 ];
-const _hoisted_3$1 = { class: "balance" };
-const _hoisted_4$1 = { class: "bean-box spa-between" };
-const _hoisted_5$1 = /* @__PURE__ */ createElementVNode(
+const _hoisted_4$1 = { class: "balance" };
+const _hoisted_5$1 = { class: "bean-box spa-between" };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "bean-img" },
   [
@@ -1441,18 +1451,18 @@ const _hoisted_5$1 = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_6 = { class: "bean-counts spa-between" };
-const _hoisted_7 = { class: "counts number" };
-const _hoisted_8 = { class: "search-time" };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_7 = { class: "bean-counts spa-between" };
+const _hoisted_8 = { class: "counts number" };
+const _hoisted_9 = { class: "search-time" };
+const _hoisted_10 = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "title" },
   "\u6536\u652F\u660E\u7EC6",
   -1
   /* HOISTED */
 );
-const _hoisted_10 = { class: "text number" };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode(
+const _hoisted_11 = { class: "text number" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode(
   "img",
   {
     style: { "margin-top": "-2px" },
@@ -1463,14 +1473,14 @@ const _hoisted_11 = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_12 = /* @__PURE__ */ createElementVNode(
+const _hoisted_13 = /* @__PURE__ */ createElementVNode(
   "span",
   { class: "text" },
   "\u7B5B\u9009",
   -1
   /* HOISTED */
 );
-const _hoisted_13 = /* @__PURE__ */ createElementVNode(
+const _hoisted_14 = /* @__PURE__ */ createElementVNode(
   "img",
   {
     class: "time-icon",
@@ -1480,24 +1490,24 @@ const _hoisted_13 = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_14 = [
-  _hoisted_12,
-  _hoisted_13
+const _hoisted_15 = [
+  _hoisted_13,
+  _hoisted_14
 ];
-const _hoisted_15 = { class: "operation-list" };
-const _hoisted_16 = {
+const _hoisted_16 = { class: "operation-list" };
+const _hoisted_17 = {
   key: 0,
   class: "box"
 };
-const _hoisted_17 = { class: "title number" };
-const _hoisted_18 = { class: "item-type" };
-const _hoisted_19 = { class: "item-detail" };
-const _hoisted_20 = { class: "item-info spa-between" };
-const _hoisted_21 = { class: "item-info-type" };
-const _hoisted_22 = { class: "item-info-title" };
-const _hoisted_23 = { class: "item-info-amount number" };
-const _hoisted_24 = { class: "item-detail-remark" };
-const _hoisted_25 = {
+const _hoisted_18 = { class: "title number" };
+const _hoisted_19 = { class: "item-type" };
+const _hoisted_20 = { class: "item-detail" };
+const _hoisted_21 = { class: "item-info spa-between" };
+const _hoisted_22 = { class: "item-info-type" };
+const _hoisted_23 = { class: "item-info-title" };
+const _hoisted_24 = { class: "item-info-amount number" };
+const _hoisted_25 = { class: "item-detail-remark" };
+const _hoisted_26 = {
   key: 0,
   class: "box-not-text"
 };
@@ -1509,6 +1519,7 @@ var script$1 = /* @__PURE__ */ defineComponent({
   emits: ["recharge"],
   setup(__props, { emit: __emit }) {
     const safeArea = useSafeArea();
+    const refreshing = ref(false);
     const props = __props;
     const emit = __emit;
     const filterOpen = ref(false);
@@ -1619,29 +1630,26 @@ var script$1 = /* @__PURE__ */ defineComponent({
       filtering.page++;
       loadConsumptions(true);
     }
-    const scrollY = ref(0);
-    usePageScroll((e) => {
+    const scrolled = ref(0);
+    const onScroll = (e) => {
       const { scrollTop } = e;
-      scrollY.value = scrollTop;
-    });
-    usePullDownRefresh(() => {
-      if (popupOpen.value) {
-        Taro.stopPullDownRefresh();
-        return;
-      }
+      scrolled.value = scrollTop;
+    };
+    const onPullDownRefresh = () => {
+      refreshing.value = true;
       loadBalance();
       setTimeout(() => {
-        Taro.stopPullDownRefresh();
+        refreshing.value = false;
       }, 500);
-    });
-    useReachBottom(() => {
+    };
+    const onReachBottom = () => {
       if (reachedLastPage.value) {
         return false;
       }
       loadNextPage();
-    });
-    const popupOpen = computed(() => {
-      return rulesPopupOpen.value || datePickerOpen.value || filterOpen.value;
+    };
+    const isAnyPopupOpen = computed(() => {
+      return rulesPopupOpen.value || datePickerOpen.value || filterOpen.value || secondBalanceOpen.value;
     });
     const secondBalanceOpen = ref(false);
     function onSecondBalanceButtonClick() {
@@ -1673,173 +1681,181 @@ var script$1 = /* @__PURE__ */ defineComponent({
       resetDateRange();
     });
     return (_ctx, _cache) => {
+      const _component_scroll_view = resolveComponent("scroll-view");
       const _component_nut_popup = resolveComponent("nut-popup");
       return openBlock(), createElementBlock(
         Fragment,
         null,
         [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["account-view", { popupOpen: popupOpen.value }])
-            },
-            [
-              createVNode(unref(script$b), {
-                "color-mode": "dark",
-                title: "\u6211\u7684\u8D26\u6237",
-                class: normalizeClass({ "with-background": scrollY.value > 0 }),
-                onClose: onPageHeaderClose
-              }, null, 8, ["class"]),
-              createElementVNode("div", { class: "row jusify-right" }, [
-                createElementVNode("div", {
-                  class: "small-bean-button",
-                  onClick: onSecondBalanceButtonClick
-                }, [..._hoisted_2$1])
-              ]),
-              createElementVNode("div", _hoisted_3$1, [
-                createElementVNode("div", _hoisted_4$1, [
-                  _hoisted_5$1,
+          createVNode(_component_scroll_view, {
+            class: normalizeClass(["account-view", { popupOpen: isAnyPopupOpen.value }]),
+            "scroll-y": !isAnyPopupOpen.value,
+            "refresher-enabled": !isAnyPopupOpen.value,
+            "refresher-triggered": refreshing.value,
+            onScroll,
+            onRefresherrefresh: onPullDownRefresh,
+            "lower-threshold": 50,
+            onScrolltolower: onReachBottom
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1$1, [
+                createVNode(unref(script$b), {
+                  "color-mode": "dark",
+                  title: "\u6211\u7684\u8D26\u6237",
+                  class: normalizeClass({ "with-background": scrolled.value > 0 }),
+                  onClose: onPageHeaderClose
+                }, null, 8, ["class"]),
+                createElementVNode("div", { class: "row jusify-right" }, [
                   createElementVNode("div", {
-                    class: "rule",
-                    onClick: _cache[0] || (_cache[0] = ($event) => rulesPopupOpen.value = true)
-                  }, "\u89C4\u5219\u8BF4\u660E")
+                    class: "small-bean-button",
+                    onClick: onSecondBalanceButtonClick
+                  }, [..._hoisted_3$1])
                 ]),
-                createElementVNode("div", _hoisted_6, [
-                  createElementVNode(
-                    "div",
-                    _hoisted_7,
-                    toDisplayString(balance.value.total || 0),
-                    1
-                    /* TEXT */
-                  ),
-                  createElementVNode("div", {
-                    class: "pay",
-                    onClick: gotoRecharge
-                  }, "\u4E91\u8C46\u5145\u503C")
-                ])
-              ]),
-              createElementVNode(
-                "div",
-                {
-                  class: normalizeClass(["operation-title spa-between", { "with-shadow": scrollY.value > 0 }]),
-                  style: normalizeStyle({ top: `${unref(safeArea).status + unref(safeArea).nav}px` })
-                },
-                [
-                  createElementVNode("div", _hoisted_8, [
-                    _hoisted_9,
-                    withDirectives(createElementVNode(
-                      "div",
-                      {
-                        class: "time",
-                        onClick: openDateFilter
-                      },
-                      [
-                        createElementVNode(
-                          "div",
-                          _hoisted_10,
-                          toDisplayString(dateRangeDisplay.value),
-                          1
-                          /* TEXT */
-                        ),
-                        _hoisted_11
-                      ],
-                      512
-                      /* NEED_PATCH */
-                    ), [
-                      [vShow, filtering.dateFrom]
-                    ])
+                createElementVNode("div", _hoisted_4$1, [
+                  createElementVNode("div", _hoisted_5$1, [
+                    _hoisted_6,
+                    createElementVNode("div", {
+                      class: "rule",
+                      onClick: _cache[0] || (_cache[0] = ($event) => rulesPopupOpen.value = true)
+                    }, "\u89C4\u5219\u8BF4\u660E")
                   ]),
-                  createElementVNode("div", {
-                    class: "search",
-                    onClick: _cache[1] || (_cache[1] = ($event) => filterOpen.value = true)
-                  }, [..._hoisted_14])
-                ],
-                6
-                /* CLASS, STYLE */
-              ),
-              createElementVNode("div", _hoisted_15, [
-                consumptionGroups.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_16, [
-                  (openBlock(true), createElementBlock(
-                    Fragment,
-                    null,
-                    renderList(consumptionGroups.value, (item, index) => {
-                      return openBlock(), createElementBlock("div", {
-                        class: "box-detail",
-                        key: index
-                      }, [
-                        createElementVNode(
-                          "div",
-                          _hoisted_17,
-                          toDisplayString(item.date),
-                          1
-                          /* TEXT */
-                        ),
-                        (openBlock(true), createElementBlock(
-                          Fragment,
-                          null,
-                          renderList(item.consumptions, (it, i) => {
-                            return openBlock(), createElementBlock("div", {
-                              class: "item",
-                              key: i
-                            }, [
-                              createElementVNode(
-                                "div",
-                                _hoisted_18,
-                                toDisplayString(it.\u4EA4\u6613\u7C7B\u578B),
-                                1
-                                /* TEXT */
-                              ),
-                              createElementVNode("div", _hoisted_19, [
+                  createElementVNode("div", _hoisted_7, [
+                    createElementVNode(
+                      "div",
+                      _hoisted_8,
+                      toDisplayString(balance.value.total || 0),
+                      1
+                      /* TEXT */
+                    ),
+                    createElementVNode("div", {
+                      class: "pay",
+                      onClick: gotoRecharge
+                    }, "\u4E91\u8C46\u5145\u503C")
+                  ])
+                ]),
+                createElementVNode(
+                  "div",
+                  {
+                    class: normalizeClass(["operation-title spa-between", { "with-shadow": scrolled.value > 0 }]),
+                    style: normalizeStyle({ top: `${unref(safeArea).status + unref(safeArea).nav}px` })
+                  },
+                  [
+                    createElementVNode("div", _hoisted_9, [
+                      _hoisted_10,
+                      withDirectives(createElementVNode(
+                        "div",
+                        {
+                          class: "time",
+                          onClick: openDateFilter
+                        },
+                        [
+                          createElementVNode(
+                            "div",
+                            _hoisted_11,
+                            toDisplayString(dateRangeDisplay.value),
+                            1
+                            /* TEXT */
+                          ),
+                          _hoisted_12
+                        ],
+                        512
+                        /* NEED_PATCH */
+                      ), [
+                        [vShow, filtering.dateFrom]
+                      ])
+                    ]),
+                    createElementVNode("div", {
+                      class: "search",
+                      onClick: _cache[1] || (_cache[1] = ($event) => filterOpen.value = true)
+                    }, [..._hoisted_15])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                ),
+                createElementVNode("div", _hoisted_16, [
+                  consumptionGroups.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_17, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(consumptionGroups.value, (item, index) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "box-detail",
+                          key: index
+                        }, [
+                          createElementVNode(
+                            "div",
+                            _hoisted_18,
+                            toDisplayString(item.date),
+                            1
+                            /* TEXT */
+                          ),
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(item.consumptions, (it, i) => {
+                              return openBlock(), createElementBlock("div", {
+                                class: "item",
+                                key: i
+                              }, [
+                                createElementVNode(
+                                  "div",
+                                  _hoisted_19,
+                                  toDisplayString(it.\u4EA4\u6613\u7C7B\u578B),
+                                  1
+                                  /* TEXT */
+                                ),
                                 createElementVNode("div", _hoisted_20, [
-                                  createElementVNode("div", null, [
+                                  createElementVNode("div", _hoisted_21, [
+                                    createElementVNode("div", null, [
+                                      createElementVNode(
+                                        "div",
+                                        _hoisted_22,
+                                        toDisplayString(it.\u8D26\u6237\u7C7B\u578B),
+                                        1
+                                        /* TEXT */
+                                      ),
+                                      createElementVNode(
+                                        "div",
+                                        _hoisted_23,
+                                        toDisplayString(it.title),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
                                     createElementVNode(
                                       "div",
-                                      _hoisted_21,
-                                      toDisplayString(it.\u8D26\u6237\u7C7B\u578B),
-                                      1
-                                      /* TEXT */
-                                    ),
-                                    createElementVNode(
-                                      "div",
-                                      _hoisted_22,
-                                      toDisplayString(it.title),
+                                      _hoisted_24,
+                                      toDisplayString(it.\u6536\u5165\u8FD8\u662F\u652F\u51FA == "\u652F\u51FA" ? "-" : "+") + toDisplayString(it.amount),
                                       1
                                       /* TEXT */
                                     )
                                   ]),
                                   createElementVNode(
                                     "div",
-                                    _hoisted_23,
-                                    toDisplayString(it.\u6536\u5165\u8FD8\u662F\u652F\u51FA == "\u652F\u51FA" ? "-" : "+") + toDisplayString(it.amount),
+                                    _hoisted_25,
+                                    toDisplayString(it.description),
                                     1
                                     /* TEXT */
                                   )
-                                ]),
-                                createElementVNode(
-                                  "div",
-                                  _hoisted_24,
-                                  toDisplayString(it.description),
-                                  1
-                                  /* TEXT */
-                                )
-                              ])
-                            ]);
-                          }),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ]);
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  )),
-                  reachedLastPage.value ? (openBlock(), createElementBlock("div", _hoisted_25, "\u6CA1\u6709\u66F4\u591A\u4E86")) : createCommentVNode("v-if", true)
-                ])) : (openBlock(), createBlock(script$3, { key: 1 }))
+                                ])
+                              ]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    )),
+                    reachedLastPage.value ? (openBlock(), createElementBlock("div", _hoisted_26, "\u6CA1\u6709\u66F4\u591A\u4E86")) : createCommentVNode("v-if", true)
+                  ])) : (openBlock(), createBlock(script$3, { key: 1 }))
+                ])
               ])
-            ],
-            2
-            /* CLASS */
-          ),
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class", "scroll-y", "refresher-enabled", "refresher-triggered"]),
           createVNode(_component_nut_popup, {
             "pop-class": "consumption-rules-popup",
             visible: rulesPopupOpen.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "1.0.76",
+  "version": "1.1.2",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",

package/src/balance/components/AccountView.vue

@@ -1,80 +1,90 @@
 <template>
-  <div class="account-view" :class="{ popupOpen }">
-    <page-header color-mode="dark" title="我的账户"
-      :class="{'with-background': scrollY > 0}"
-      @close="onPageHeaderClose" />
-    <div class="row jusify-right">
-      <div class="small-bean-button" @click="onSecondBalanceButtonClick">
-        <label>小云豆余额</label>
-      </div>
-    </div>
-    <div class="balance">
-      <div class="bean-box spa-between">
-        <div class="bean-img">
-          <img
-            class="bean-icon"
-            src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
-          <div class="bean-tag tag">云豆</div>
+  <scroll-view class="account-view"
+    :class="{ popupOpen: isAnyPopupOpen }"
+    :scroll-y="!isAnyPopupOpen"
+    :refresher-enabled="!isAnyPopupOpen"
+    :refresher-triggered="refreshing"
+    @scroll="onScroll"
+    @refresherrefresh="onPullDownRefresh"
+    :lower-threshold="50"
+    @scrolltolower="onReachBottom">
+    <div class="scroll-content">
+      <page-header color-mode="dark" title="我的账户"
+        :class="{'with-background': scrolled > 0}"
+        @close="onPageHeaderClose" />
+      <div class="row jusify-right">
+        <div class="small-bean-button" @click="onSecondBalanceButtonClick">
+          <label>小云豆余额</label>
         </div>
-        <div class="rule" @click="rulesPopupOpen = true">规则说明</div>
       </div>
-      <div class="bean-counts spa-between">
-        <div class="counts number">{{ balance.total || 0 }}</div>
-        <div class="pay" @click="gotoRecharge">云豆充值</div>
+      <div class="balance">
+        <div class="bean-box spa-between">
+          <div class="bean-img">
+            <img
+              class="bean-icon"
+              src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
+            <div class="bean-tag tag">云豆</div>
+          </div>
+          <div class="rule" @click="rulesPopupOpen = true">规则说明</div>
+        </div>
+        <div class="bean-counts spa-between">
+          <div class="counts number">{{ balance.total || 0 }}</div>
+          <div class="pay" @click="gotoRecharge">云豆充值</div>
+        </div>
       </div>
-    </div>
-    <div class="operation-title spa-between"
-      :class="{'with-shadow': scrollY > 0}"
-      :style="{top: `${safeArea.status + safeArea.nav}px`}">
-      <div class="search-time">
-        <div class="title">收支明细</div>
-        <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
-          <div class="text number">{{ dateRangeDisplay }}</div>
+      <div class="operation-title spa-between"
+        :class="{'with-shadow': scrolled > 0}"
+        :style="{top: `${safeArea.status + safeArea.nav}px`}">
+        <div class="search-time">
+          <div class="title">收支明细</div>
+          <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
+            <div class="text number">{{ dateRangeDisplay }}</div>
+            <img
+              style="margin-top: -2px"
+              class="time-icon"
+              src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png" />
+          </div>
+        </div>
+        <div class="search" @click="filterOpen = true">
+          <span class="text">筛选</span>
           <img
-            style="margin-top: -2px"
             class="time-icon"
-            src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-down.png" />
+            src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png" />
         </div>
       </div>
-      <div class="search" @click="filterOpen = true">
-        <span class="text">筛选</span>
-        <img
-          class="time-icon"
-          src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png" />
-      </div>
-    </div>
-    <div class="operation-list">
-      <div class="box" v-if="consumptionGroups.length > 0">
-        <div class="box-detail" v-for="(item, index) in consumptionGroups" :key="index">
-          <div class="title number">{{ item.date }}</div>
-          <div
-            class="item"
-            v-for="(it, i) in item.consumptions"
-            :key="i">
-            <div class="item-type">
-              {{ it.交易类型 }}
-            </div>
-            <div class="item-detail">
-              <div class="item-info spa-between">
-                <div>
-                  <div class="item-info-type">
-                    {{ it.账户类型 }}
+      <div class="operation-list">
+        <div class="box" v-if="consumptionGroups.length > 0">
+          <div class="box-detail" v-for="(item, index) in consumptionGroups" :key="index">
+            <div class="title number">{{ item.date }}</div>
+            <div
+              class="item"
+              v-for="(it, i) in item.consumptions"
+              :key="i">
+              <div class="item-type">
+                {{ it.交易类型 }}
+              </div>
+              <div class="item-detail">
+                <div class="item-info spa-between">
+                  <div>
+                    <div class="item-info-type">
+                      {{ it.账户类型 }}
+                    </div>
+                    <div class="item-info-title">{{ it.title }}</div>
+                  </div>
+                  <div class="item-info-amount number">
+                    {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
                   </div>
-                  <div class="item-info-title">{{ it.title }}</div>
-                </div>
-                <div class="item-info-amount number">
-                  {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
                 </div>
+                <div class="item-detail-remark">{{ it.description }}</div>
               </div>
-              <div class="item-detail-remark">{{ it.description }}</div>
             </div>
           </div>
+          <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
         </div>
-        <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
+        <empty-view v-else></empty-view>
       </div>
-      <empty-view v-else></empty-view>
     </div>
-  </div>
+  </scroll-view>
   <nut-popup
     pop-class="consumption-rules-popup"
     v-model:visible="rulesPopupOpen"
@@ -115,7 +125,7 @@
 </template>
 
 <script lang="ts" setup>
-import Taro, { useDidShow, usePageScroll, usePullDownRefresh, useReachBottom } from '@tarojs/taro'
+import Taro, { useDidShow } from '@tarojs/taro'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { endpoints, useHttp } from '../api'
 import { 账户流水筛选项, Balance, ConsumptionGroup, 账户流水 } from '../types'
@@ -130,6 +140,8 @@ import { useSafeArea } from '../../shared'
 
 const safeArea = useSafeArea()
 
+const refreshing = ref(false)
+
 type AccountViewProps = {
   app: string
 }
@@ -242,15 +254,15 @@ async function loadConsumptions (append: boolean = false) {
       app: props.app,
       ...filtering
     }).then(response => {
-    consumptionGroups.value = groupDataByDate(response.data)
-    if (filtering.page >= response.totalPages) {
-      filtering.page = response.totalPages
-      reachedLastPage.value = true
-    } else {
-      reachedLastPage.value = false
-    }
-    Taro.hideLoading()
-  })
+      consumptionGroups.value = groupDataByDate(response.data)
+      if (filtering.page >= response.totalPages) {
+        filtering.page = response.totalPages
+        reachedLastPage.value = true
+      } else {
+        reachedLastPage.value = false
+      }
+      Taro.hideLoading()
+    })
 }
 
 /**
@@ -290,38 +302,49 @@ function loadNextPage () {
   loadConsumptions(true)
 }
 
+// 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
+const scrolled = ref<number>(0)
 
-const scrollY = ref<number>(0)
-usePageScroll((e) => {
+/**
+ * 记录 scroll-view 滚动的位置
+ */
+const onScroll = (e) => {
   const { scrollTop } = e
-  scrollY.value = scrollTop
-})
-
-usePullDownRefresh(() => {
-  if (popupOpen.value) {
-    Taro.stopPullDownRefresh()
-    return
-  }
+  scrolled.value = scrollTop
+}
 
-  // 页面下拉刷新
+/**
+ * 下拉刷新 pull down refresh
+ */
+const onPullDownRefresh = () => {
+  refreshing.value = true
+  // 重新请求余额数据
   loadBalance()
   setTimeout(() => {
-    Taro.stopPullDownRefresh()
+    refreshing.value = false
   }, 500);
-})
+}
 
 /**
  * 滑动到底部请求下一页并合并查询结果
  */
-useReachBottom(() => {
+const onReachBottom = () => {
   if (reachedLastPage.value) {
     return false
   }
   loadNextPage()  
-})
+}
 
-const popupOpen = computed(() => {
-  return rulesPopupOpen.value || datePickerOpen.value || filterOpen.value
+/**
+ * 浮窗弹出时不允许
+ * 1. 下拉刷新
+ * 2. 上滑分页
+ */
+const isAnyPopupOpen = computed(() => {
+  return rulesPopupOpen.value ||
+    datePickerOpen.value ||
+    filterOpen.value ||
+    secondBalanceOpen.value
 })
 
 const secondBalanceOpen = ref<boolean>(false)
@@ -367,9 +390,12 @@ onMounted(() => {
 
 <style lang="scss">
 .account-view {
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQwNiIgdmlld0JveD0iMCAwIDc1MCA0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zODIuNSA0MDcuNUM1NzcuMzU3IDQwNy41IDc1My43ODggMzgxLjI0OCA4ODEuNTIxIDMzOC43OTFDOTQ1LjM4NiAzMTcuNTYzIDk5Ny4xMDQgMjkyLjI3NiAxMDMyLjg3IDI2NC4xNzFDMTA2OC42MiAyMzYuMDcxIDEwODguNSAyMDUuMDk3IDEwODguNSAxNzIuNUMxMDg4LjUgMTM5LjkwMyAxMDY4LjYyIDEwOC45MjkgMTAzMi44NyA4MC44Mjg5Qzk5Ny4xMDQgNTIuNzI0NSA5NDUuMzg2IDI3LjQzNjcgODgxLjUyMSA2LjIwODk4Qzc1My43ODggLTM2LjI0ODIgNTc3LjM1NyAtNjIuNSAzODIuNSAtNjIuNUMxODcuNjQzIC02Mi41IDExLjIxMjIgLTM2LjI0ODIgLTExNi41MjIgNi4yMDg5OEMtMTgwLjM4NiAyNy40MzY3IC0yMzIuMTA0IDUyLjcyNDUgLTI2Ny44NjcgODAuODI4OUMtMzAzLjYyNCAxMDguOTI5IC0zMjMuNSAxMzkuOTAzIC0zMjMuNSAxNzIuNUMtMzIzLjUgMjA1LjA5NyAtMzAzLjYyNCAyMzYuMDcxIC0yNjcuODY3IDI2NC4xNzFDLTIzMi4xMDQgMjkyLjI3NiAtMTgwLjM4NiAzMTcuNTYzIC0xMTYuNTIyIDMzOC43OTFDMTEuMjEyMiAzODEuMjQ4IDE4Ny42NDMgNDA3LjUgMzgyLjUgNDA3LjVaIiBmaWxsPSIjM0IzOTNDIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=");
-  background-position: center -200px;
-  background-repeat: no-repeat;
+  height: 100vh;
+  .scroll-content {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUwIiBoZWlnaHQ9IjQwNiIgdmlld0JveD0iMCAwIDc1MCA0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zODIuNSA0MDcuNUM1NzcuMzU3IDQwNy41IDc1My43ODggMzgxLjI0OCA4ODEuNTIxIDMzOC43OTFDOTQ1LjM4NiAzMTcuNTYzIDk5Ny4xMDQgMjkyLjI3NiAxMDMyLjg3IDI2NC4xNzFDMTA2OC42MiAyMzYuMDcxIDEwODguNSAyMDUuMDk3IDEwODguNSAxNzIuNUMxMDg4LjUgMTM5LjkwMyAxMDY4LjYyIDEwOC45MjkgMTAzMi44NyA4MC44Mjg5Qzk5Ny4xMDQgNTIuNzI0NSA5NDUuMzg2IDI3LjQzNjcgODgxLjUyMSA2LjIwODk4Qzc1My43ODggLTM2LjI0ODIgNTc3LjM1NyAtNjIuNSAzODIuNSAtNjIuNUMxODcuNjQzIC02Mi41IDExLjIxMjIgLTM2LjI0ODIgLTExNi41MjIgNi4yMDg5OEMtMTgwLjM4NiAyNy40MzY3IC0yMzIuMTA0IDUyLjcyNDUgLTI2Ny44NjcgODAuODI4OUMtMzAzLjYyNCAxMDguOTI5IC0zMjMuNSAxMzkuOTAzIC0zMjMuNSAxNzIuNUMtMzIzLjUgMjA1LjA5NyAtMzAzLjYyNCAyMzYuMDcxIC0yNjcuODY3IDI2NC4xNzFDLTIzMi4xMDQgMjkyLjI3NiAtMTgwLjM4NiAzMTcuNTYzIC0xMTYuNTIyIDMzOC43OTFDMTEuMjEyMiAzODEuMjQ4IDE4Ny42NDMgNDA3LjUgMzgyLjUgNDA3LjVaIiBmaWxsPSIjM0IzOTNDIiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=");
+    background-position: center -200px;
+    background-repeat: no-repeat;
+  }
   .page-header {
     background-color: #3B393C;
     position: sticky;

package/src/balance/components/BalanceCard.vue

@@ -40,6 +40,15 @@ import { endpoints, useHttp } from '../api'
 import { Balance } from '../types'
 import { useDidShow } from '@tarojs/taro'
 
+type BalanceCardProps = {
+  app: string
+}
+const props = withDefaults(
+  defineProps<BalanceCardProps>(), {
+    app: ''
+  }
+)
+
 const balance = ref<Balance>({
   total: 0,
   privileges: []
@@ -52,6 +61,7 @@ const gotoRecharge = () => {
 async function loadBalance () {
   const $http = useHttp()
   $http.get<Balance>(endpoints.获取余额明细, {
+    app: props.app
   }).then(data => {
     balance.value = data
   })
@@ -76,6 +86,11 @@ useDidShow(() => {
   loadBalance()
 })
 
+defineExpose({
+  reload: loadBalance
+})
+
+
 </script>
 
 <style lang="scss">

package/src/shared/composables/useSafeArea.ts

@@ -33,10 +33,12 @@ export function useSafeArea (): SafeArea {
      * 据说是胶囊上下间距
      */
     gap = capsule.top - status,
-    nav = capsule.height + gap * 2
+    nav = capsule.height + gap * 2,
+    safeAreaBottom = systemInfo.safeArea?.bottom || 0,
+    bottom = systemInfo.screenHeight - safeAreaBottom
   return {
     status,
     nav,
-    bottom: systemInfo.safeArea?.bottom || 0
+    bottom
   }
 }