@uxda/appkit 1.2.8 → 1.2.12

package/src/balance/components/AccountView.vue

@@ -1,649 +1,754 @@
-<template>
-  <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>
-      <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
-        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
-            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>
-                    <div class="item-info-title">{{ it.title }}</div>
-                  </div>
-                  <div class="item-info-amount number">
-                    {{ it.收入还是支出 == "支出" ? "-" : "+" }}{{ it.amount }}
-                  </div>
-                </div>
-                <div class="item-detail-remark">{{ it.description }}</div>
-              </div>
-            </div>
-          </div>
-          <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
-        </div>
-        <empty-view v-else></empty-view>
-      </div>
-    </div>
-  </scroll-view>
-  <nut-popup
-    pop-class="consumption-rules-popup"
-    v-model:visible="rulesPopupOpen"
-    :close-on-click-overlay="false"
-  >
-    <consumption-rules @complete="rulesPopupOpen = false" />
-  </nut-popup>
-  <nut-popup
-    position="bottom"
-    :style="{ height: '40%' }"
-    round
-    :close-on-click-overlay="true"
-    v-model:visible="datePickerOpen"
-  >
-    <date-filter
-      v-if="datePickerOpen"
-      :from="filtering.dateFrom"
-      :to="filtering.dateTo"
-      @reset="onDateReset"
-      @complete="onDateFilterComplete"
-    />
-  </nut-popup>
-  <nut-popup
-    position="bottom"
-    :style="{ height: '75%' }"
-    round
-    :close-on-click-overlay="true"
-    v-model:visible="filterOpen"
-  >
-    <consumption-filter
-      :modelValue="[
-        filtering.账户类型,
-        filtering.收入还是支出,
-        filtering.交易类型,
-        filtering.权益类目,
-      ]"
-      @complete="onFilterComplete"
-    />
-  </nut-popup>
-  <app-drawer v-model="secondBalanceOpen" title="权益余额">
-    <second-balance :data="balance.privileges" />
-  </app-drawer>
-</template>
-
-<script lang="ts" setup>
-import Taro, { useDidShow } from "@tarojs/taro";
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { endpoints, useHttp } from "../api";
-import { 账户流水筛选项, Balance, ConsumptionGroup, 账户流水 } from "../types";
-import ConsumptionFilter from "./ConsumptionFilter.vue";
-import DateFilter from "./DateFilter.vue";
-import ConsumptionRules from "./ConsumptionRules.vue";
-import { AppDrawer, PageHeader, WithPaging } from "../../shared";
-import SecondBalance from "./SecondBalance.vue";
-import dayjs from "dayjs";
-import EmptyView from "../../shared/components/EmptyView.vue";
-import { useSafeArea } from "../../shared";
-
-const safeArea = useSafeArea();
-
-const refreshing = ref(false);
-
-type AccountViewProps = {
-  app: string;
-};
-const props = withDefaults(defineProps<AccountViewProps>(), {
-  app: "",
-});
-
-const emit = defineEmits(["recharge"]);
-
-const filterOpen = ref<boolean>(false);
-
-// 规则说明弹窗
-const rulesPopupOpen = ref<boolean>(false);
-
-const filtering = reactive<账户流水筛选项>({
-  账户类型: "全部",
-  收入还是支出: "全部",
-  交易类型: "全部",
-  权益类目: "",
-  dateFrom: "",
-  dateTo: "",
-  page: 1,
-  pageSize: 20,
-});
-
-const reachedLastPage = ref<boolean>(false);
-
-/**
- * 全新搜索
- * 重置某些查询条件
- */
-function restartSearch() {
-  // 从第一页开始
-  filtering.page = 1;
-  consumptionGroups.value = [];
-  loadConsumptions();
-}
-
-// 时间筛选
-const datePickerOpen = ref<boolean>(false);
-
-function openDateFilter() {
-  datePickerOpen.value = true;
-}
-
-const dateRangeDisplay = computed(() => {
-  let startTime = filtering.dateFrom?.replace(/-/g, ".").substring(2);
-  let endTime = filtering.dateTo?.replace(/-/g, ".").substring(2);
-  return startTime + " - " + endTime;
-});
-
-const consumptionGroups = ref<ConsumptionGroup[]>([]);
-
-/**
- * 余额数据
- */
-const balance = ref<Balance>({
-  total: 0,
-  privileges: [],
-});
-
-useDidShow(() => {
-  Taro.setNavigationBarTitle({
-    title: "我的账户",
-  });
-  loadConsumptions();
-  loadBalance();
-});
-
-function groupDataByDate(data: 账户流水[]): ConsumptionGroup[] {
-  // 按照日期分组
-  const groups: ConsumptionGroup[] = consumptionGroups.value || [];
-  // [
-  //  date: '2023-10-1',
-  //  consumptions: []
-  // ]
-  // 组装成按日期分组
-  data.forEach((d) => {
-    const date = dayjs(d.time).format("YYYY-MM-DD");
-    let group: ConsumptionGroup | undefined = groups.find(
-      (g) => g.date === date
-    );
-    if (!group) {
-      group = {
-        date,
-        consumptions: [],
-      };
-      groups.push(group);
-    }
-    group.consumptions.push(d);
-  });
-  groups.sort((a, b) => (a.date > b.date ? -1 : 1));
-  return groups;
-}
-
-/**
- * 请求账户流水
- * @param append 搜索结果累加 上拉分页时
- */
-async function loadConsumptions(append: boolean = false) {
-  if (!append) {
-    consumptionGroups.value = [];
-  }
-  const $http = useHttp();
-  Taro.showLoading({
-    title: `加载中...`,
-    mask: true,
-  });
-  $http
-    .get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
-      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();
-    });
-}
-
-/**
- * 获取账户余额明细
- */
-async function loadBalance() {
-  const $http = useHttp();
-  $http
-    .get<Balance>(endpoints.获取余额明细, {
-      app: props.app,
-    })
-    .then((data) => {
-      balance.value = data;
-    });
-}
-
-const onFilterComplete = (value) => {
-  filtering.账户类型 = value[0];
-  filtering.收入还是支出 = value[1];
-  filtering.交易类型 = value[2];
-  filtering.权益类目 = value[3];
-  filterOpen.value = false;
-  restartSearch();
-};
-
-const onDateFilterComplete = (value) => {
-  filtering.dateFrom = value.from;
-  filtering.dateTo = value.to;
-  datePickerOpen.value = false;
-  restartSearch();
-};
-
-function gotoRecharge() {
-  emit("recharge");
-}
-
-function loadNextPage() {
-  filtering.page++;
-  loadConsumptions(true);
-}
-
-// 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
-const scrolled = ref<number>(0);
-
-/**
- * 记录 scroll-view 滚动的位置
- */
-const onScroll = (e) => {
-  const { scrollTop } = e;
-  scrolled.value = scrollTop;
-};
-
-/**
- * 下拉刷新 pull down refresh
- */
-const onPullDownRefresh = () => {
-  refreshing.value = true;
-  // 重新请求余额数据
-  loadBalance();
-  setTimeout(() => {
-    refreshing.value = false;
-  }, 500);
-};
-
-/**
- * 滑动到底部请求下一页并合并查询结果
- */
-const onReachBottom = () => {
-  if (reachedLastPage.value) {
-    return false;
-  }
-  loadNextPage();
-};
-
-/**
- * 浮窗弹出时不允许
- * 1. 下拉刷新
- * 2. 上滑分页
- */
-const isAnyPopupOpen = computed(() => {
-  return (
-    rulesPopupOpen.value ||
-    datePickerOpen.value ||
-    filterOpen.value ||
-    secondBalanceOpen.value
-  );
-});
-
-const secondBalanceOpen = ref<boolean>(false);
-
-function onSecondBalanceButtonClick() {
-  secondBalanceOpen.value = true;
-}
-
-watch(secondBalanceOpen, () => {
-  Taro.setNavigationBarColor({
-    frontColor: secondBalanceOpen.value ? "#000000" : "#ffffff",
-    backgroundColor: "#ffffff",
-    animation: {
-      duration: 400,
-      timingFunc: "easeIn",
-    },
-  });
-});
-
-function onDateReset() {
-  resetDateRange();
-}
-
-/**
- * 充值筛选的起止时间
- */
-function resetDateRange() {
-  // 筛选的起止时间
-  filtering.dateTo = dayjs().format("YYYY-MM-DD");
-  filtering.dateFrom = dayjs().add(-3, "M").format("YYYY-MM-DD");
-}
-
-function onPageHeaderClose() {
-  Taro.navigateBack({
-    delta: 1,
-  });
-}
-
-onMounted(() => {
-  resetDateRange();
-});
-</script>
-
-<style lang="scss">
-.account-view {
-  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;
-    top: 0;
-    z-index: 1;
-    transition: background-color 0.3s;
-    &.with-background {
-      background-color: #3b393c;
-    }
-  }
-  &.popupOpen {
-    height: 100vh;
-    overflow: hidden;
-  }
-  .spa-between {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .row {
-    display: flex;
-    flex-direction: row;
-    margin: 10px 15px;
-  }
-  .jusify-right {
-    justify-content: flex-end;
-  }
-  .small-bean-button {
-    height: 22px;
-    border-radius: 11px;
-    border: 1px solid #ffffff10;
-    background-color: #ffffff18;
-    display: inline-block;
-    padding: 0 10px;
-    line-height: 22px;
-    color: #e7caad;
-    font-size: 12px;
-    label {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiNFN0NBQUQiIHN0cm9rZT0iI0U3Q0FBRCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
-      padding-right: 18px;
-      background-repeat: no-repeat;
-      background-position: right center;
-      background-size: 16px;
-    }
-  }
-  .balance {
-    border-radius: 15px;
-    background: linear-gradient(105deg, #f4e2ce 1.88%, #debb9b 98.18%);
-    box-shadow: 0px -10px 9px -3px rgba(0, 0, 0, 0.33);
-    height: 112px;
-    padding: 20px;
-    margin: 0 15px;
-    box-sizing: border-box;
-    font-size: 10px;
-    .bean-img {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      .bean-icon {
-        display: block;
-        font-size: 0;
-        width: 20px;
-        height: 20px;
-        margin-right: 4px;
-      }
-      .bean-tag {
-        color: #353535;
-        height: 15px;
-        line-height: 15px;
-        border-radius: 30px 50px 50px 0px;
-        background: rgba(#ff8320, 0.3);
-        padding-left: 5px;
-        padding-right: 10px;
-      }
-      .tag {
-        background: #ff8320;
-        color: #fff;
-      }
-    }
-    .rule {
-      color: #353535;
-      opacity: 0.5;
-    }
-  }
-  .bean-counts {
-    margin-top: 12px;
-    .counts {
-      color: #3d3835;
-      font-size: 32px;
-      font-weight: 700;
-    }
-    .pay {
-      padding: 0 20px;
-      height: 32px;
-      line-height: 32px;
-      background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
-      border-radius: 16px;
-      color: #e7caad;
-      font-size: 15px;
-      font-weight: 500;
-    }
-  }
-  .operation-title {
-    padding: 10px 15px;
-    background: #fff;
-    position: sticky;
-    z-index: 10;
-    transition: box-shadow 0.3s;
-    &.with-shadow {
-      box-shadow: 0px 1px 10px 0px #99999933;
-    }
-    .text {
-      color: #353535;
-      font-size: 12px;
-      opacity: 0.5;
-    }
-    .time-icon {
-      display: block;
-      font-size: 0;
-      width: 12px;
-      height: 12px;
-      margin-left: 4px;
-    }
-    .search-time {
-      display: flex;
-      align-items: center;
-      .title {
-        color: #000;
-        font-weight: 500;
-        font-size: 17px;
-        margin-right: 10px;
-      }
-      .time {
-        height: 22px;
-        padding-right: 5px;
-        flex: 1;
-        display: flex;
-        align-items: center;
-      }
-    }
-    .search {
-      display: flex;
-      align-items: center;
-      height: 22px;
-      padding-left: 5px;
-    }
-  }
-  .operation-list {
-    margin: 0 15px;
-    padding-bottom: 15px;
-    .box {
-      &-detail {
-        .title {
-          line-height: 22px;
-          font-weight: 700;
-          font-size: 12px;
-          color: #000;
-          opacity: 0.5;
-          margin-bottom: 10px;
-        }
-        .item {
-          border-radius: 5px;
-          background: rgba(255, 255, 255, 0.5);
-          box-shadow: 0px 2.5px 9.5px 2px rgba(0, 0, 0, 0.05);
-          border-radius: 5px;
-          padding: 12px 10px;
-          display: flex;
-          margin-bottom: 10px;
-          &-type {
-            background: linear-gradient(
-              113.95deg,
-              #f4e2ce 1.2%,
-              #debb9b 77.63%
-            );
-            width: 30px;
-            height: 30px;
-            border-radius: 15px;
-            margin-right: 15px;
-            line-height: 30px;
-            font-size: 10px;
-            font-weight: 500;
-            color: #000;
-            text-align: center;
-          }
-          &-detail {
-            flex: 1;
-            .item-info {
-              padding: 0;
-              font-size: 14px;
-              font-weight: 700;
-              color: #000;
-              &-type {
-                line-height: 15px;
-              }
-              &-title {
-                font-weight: 400;
-                opacity: 0.8;
-                font-size: 11px;
-              }
-              &-amount {
-                color: #9e7b5a;
-              }
-            }
-            &-remark {
-              opacity: 0.3;
-              line-height: 15px;
-              font-size: 10px;
-            }
-          }
-        }
-      }
-      &-not-text {
-        opacity: 0.4;
-        color: #353535;
-        font-size: 12px;
-        line-height: 20px;
-        margin: 0 auto 40px;
-        text-align: center;
-      }
-    }
-  }
-}
-.consumption-rules-popup {
-  border-radius: 16px;
-  width: 70%;
-  max-height: 80%;
-  padding: 24px;
-}
-</style>
+<template>
+  <div class="account-view">
+    <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>
+      <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>
+      <Tip />
+      <div class="rights-card" v-if="balance.privileges.corporateStar">
+        <div class="title">启明星权益</div>
+        <div class="list">
+          <div class="item star-item" v-for="(item, index) in balance.privileges.corporateStar" :key="index">
+            <div class="item-count">{{ item.count }}</div>
+            <div class="item-title">
+              <div>{{ item.title }}</div>
+              <div class="item-title-button" v-if="item.activityId"> 
+                <div @click="gotoTrade(item)">超值换购</div>
+                <img class="button-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/button-hg.svg" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rights-card" v-if="balance.privileges.aiapprove">
+        <div class="title">AI审批权益</div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in balance.privileges.aiapprove" :key="index">
+            <div class="item-count">{{ item.count }}</div>
+            <div class="item-title">{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>  
+  <nut-popup
+    pop-class="consumption-rules-popup"
+    v-model:visible="rulesPopupOpen"
+    :close-on-click-overlay="false"
+  >
+    <consumption-rules @complete="rulesPopupOpen = false" />
+  </nut-popup>
+  <nut-popup
+    position="bottom"
+    :style="{ height: '40%' }"
+    round
+    :close-on-click-overlay="true"
+    v-model:visible="datePickerOpen"
+  >
+    <date-filter
+      v-if="datePickerOpen"
+      :from="filtering.dateFrom"
+      :to="filtering.dateTo"
+      @reset="onDateReset"
+      @complete="onDateFilterComplete"
+    />
+  </nut-popup>
+  <nut-popup
+    position="bottom"
+    :style="{ height: '75%' }"
+    round
+    :close-on-click-overlay="true"
+    v-model:visible="filterOpen"
+  >
+    <consumption-filter
+      :modelValue="[
+        filtering.账户类型,
+        filtering.收入还是支出,
+        filtering.交易类型,
+        filtering.权益类目,
+      ]"
+      @complete="onFilterComplete"
+    />
+  </nut-popup>
+  <app-drawer v-model="secondBalanceOpen" title="收支明细">
+    <div class="operation-box">
+      <div
+        class="operation-title spa-between"
+        :class="{ 'with-shadow': scrolled > 0 }"
+      >
+        <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
+            class="time-icon"
+            src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png"
+          />
+        </div>
+      </div>
+      <div class="operation-list">
+        <scroll-view
+          class="operation-scroll"
+          :scroll-y="true"
+          @scroll="onScroll"
+          :lower-threshold="50"
+          @scrolltolower="onReachBottom"
+        >
+          <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>
+                  <div class="item-detail-remark">{{ it.description }}</div>
+                </div>
+              </div>
+            </div>
+            <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
+          </div>
+          <empty-view v-else></empty-view>
+        </scroll-view>
+      </div>
+    </div>
+  </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import Taro, { useDidShow } from "@tarojs/taro";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { endpoints, useHttp } from "../api";
+import { 账户流水筛选项, Balance, ConsumptionGroup, 账户流水 } from "../types";
+import ConsumptionFilter from "./ConsumptionFilter.vue";
+import DateFilter from "./DateFilter.vue";
+import ConsumptionRules from "./ConsumptionRules.vue";
+import { AppDrawer, PageHeader, WithPaging } from "../../shared";
+import dayjs from "dayjs";
+import EmptyView from "../../shared/components/EmptyView.vue";
+import Tip from './Tip.vue'
+import _ from "lodash";
+
+const refreshing = ref(false);
+
+type AccountViewProps = {
+  app: string;
+};
+const props = withDefaults(defineProps<AccountViewProps>(), {
+  app: "",
+});
+
+const emit = defineEmits(["recharge", "trade"]);
+
+const filterOpen = ref<boolean>(false);
+
+// 规则说明弹窗
+const rulesPopupOpen = ref<boolean>(false);
+
+const filtering = reactive<账户流水筛选项>({
+  账户类型: "全部",
+  收入还是支出: "全部",
+  交易类型: "全部",
+  权益类目: "",
+  dateFrom: "",
+  dateTo: "",
+  page: 1,
+  pageSize: 20,
+});
+
+const reachedLastPage = ref<boolean>(false);
+
+/**
+ * 全新搜索
+ * 重置某些查询条件
+ */
+function restartSearch() {
+  // 从第一页开始
+  filtering.page = 1;
+  consumptionGroups.value = [];
+  loadConsumptions();
+}
+
+// 时间筛选
+const datePickerOpen = ref<boolean>(false);
+
+function openDateFilter() {
+  datePickerOpen.value = true;
+}
+
+const dateRangeDisplay = computed(() => {
+  let startTime = filtering.dateFrom?.replace(/-/g, ".").substring(2);
+  let endTime = filtering.dateTo?.replace(/-/g, ".").substring(2);
+  return startTime + " - " + endTime;
+});
+
+const consumptionGroups = ref<ConsumptionGroup[]>([]);
+
+/**
+ * 余额数据
+ */
+const balance = ref<Balance>({
+  total: 0,
+  privileges: {},
+});
+
+useDidShow(() => {
+  Taro.setNavigationBarTitle({
+    title: "我的账户",
+  });
+  loadBalance();
+});
+
+function groupDataByDate(data: 账户流水[]): ConsumptionGroup[] {
+  // 按照日期分组
+  const groups: ConsumptionGroup[] = consumptionGroups.value || [];
+  // [
+  //  date: '2023-10-1',
+  //  consumptions: []
+  // ]
+  // 组装成按日期分组
+  data.forEach((d) => {
+    const date = dayjs(d.time).format("YYYY-MM-DD");
+    let group: ConsumptionGroup | undefined = groups.find(
+      (g) => g.date === date
+    );
+    if (!group) {
+      group = {
+        date,
+        consumptions: [],
+      };
+      groups.push(group);
+    }
+    group.consumptions.push(d);
+  });
+  groups.sort((a, b) => (a.date > b.date ? -1 : 1));
+  return groups;
+}
+
+/**
+ * 请求账户流水
+ * @param append 搜索结果累加 上拉分页时
+ */
+async function loadConsumptions(append: boolean = false) {
+  if (!append) {
+    consumptionGroups.value = [];
+  }
+  const $http = useHttp();
+  Taro.showLoading({
+    title: `加载中...`,
+    mask: true,
+  });
+  $http
+    .get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
+      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();
+    });
+}
+
+/**
+ * 获取账户余额明细
+ */
+async function loadBalance() {
+  const $http = useHttp();
+  $http
+    .get<Balance>(endpoints.获取余额明细, {
+      app: props.app,
+    })
+    .then((data) => {
+      const { privileges, total } = data
+      const filterData = {
+        total,
+        privileges: _.groupBy(privileges, 'appCode')
+      }
+      balance.value = filterData;
+    });
+}
+
+const onFilterComplete = (value) => {
+  filtering.账户类型 = value[0];
+  filtering.收入还是支出 = value[1];
+  filtering.交易类型 = value[2];
+  filtering.权益类目 = value[3];
+  filterOpen.value = false;
+  restartSearch();
+};
+
+const onDateFilterComplete = (value) => {
+  filtering.dateFrom = value.from;
+  filtering.dateTo = value.to;
+  datePickerOpen.value = false;
+  restartSearch();
+};
+
+function gotoRecharge() {
+  emit("recharge");
+}
+
+function gotoTrade(item: any){
+  emit("trade", item);
+}
+
+function loadNextPage() {
+  filtering.page++;
+  loadConsumptions(true);
+}
+
+// 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
+const scrolled = ref<number>(0);
+
+/**
+ * 记录 scroll-view 滚动的位置
+ */
+const onScroll = (e) => {
+  const { scrollTop } = e;
+  scrolled.value = scrollTop;
+};
+
+/**
+ * 下拉刷新 pull down refresh
+ */
+const onPullDownRefresh = () => {
+  refreshing.value = true;
+  // 重新请求余额数据
+  loadBalance();
+  setTimeout(() => {
+    refreshing.value = false;
+  }, 500);
+};
+
+/**
+ * 滑动到底部请求下一页并合并查询结果
+ */
+const onReachBottom = () => {
+  console.log('到底了')
+  if (reachedLastPage.value) {
+    return false;
+  }
+  loadNextPage();
+};
+
+/**
+ * 浮窗弹出时不允许
+ * 1. 下拉刷新
+ * 2. 上滑分页
+ */
+const isAnyPopupOpen = computed(() => {
+  return (
+    rulesPopupOpen.value ||
+    datePickerOpen.value ||
+    filterOpen.value ||
+    secondBalanceOpen.value
+  );
+});
+
+const secondBalanceOpen = ref<boolean>(false);
+
+function onSecondBalanceButtonClick() {
+  secondBalanceOpen.value = true;
+  loadConsumptions();
+}
+
+watch(secondBalanceOpen, () => {
+  Taro.setNavigationBarColor({
+    frontColor: secondBalanceOpen.value ? "#000000" : "#ffffff",
+    backgroundColor: "#ffffff",
+    animation: {
+      duration: 400,
+      timingFunc: "easeIn",
+    },
+  });
+});
+
+function onDateReset() {
+  resetDateRange();
+}
+
+/**
+ * 充值筛选的起止时间
+ */
+function resetDateRange() {
+  // 筛选的起止时间
+  filtering.dateTo = dayjs().format("YYYY-MM-DD");
+  filtering.dateFrom = dayjs().add(-3, "M").format("YYYY-MM-DD");
+}
+
+function onPageHeaderClose() {
+  Taro.navigateBack({
+    delta: 1,
+  });
+}
+
+onMounted(() => {
+  resetDateRange();
+});
+</script>
+
+<style lang="scss">
+.account-view {
+  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;
+    top: 0;
+    z-index: 1;
+    transition: background-color 0.3s;
+    &.with-background {
+      background-color: #3b393c;
+    }
+  }
+  .spa-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    margin: 10px 15px;
+  }
+  .jusify-right {
+    justify-content: flex-end;
+  }
+  .small-bean-button {
+    height: 22px;
+    border-radius: 11px;
+    border: 1px solid #ffffff10;
+    background-color: #ffffff18;
+    display: inline-block;
+    padding: 0 10px;
+    line-height: 22px;
+    color: #e7caad;
+    font-size: 12px;
+    label {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiNFN0NBQUQiIHN0cm9rZT0iI0U3Q0FBRCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
+      padding-right: 18px;
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: 16px;
+    }
+  }
+  .balance {
+    border-radius: 15px;
+    background: linear-gradient(105deg, #f4e2ce 1.88%, #debb9b 98.18%);
+    box-shadow: 0px -10px 9px -3px rgba(0, 0, 0, 0.33);
+    height: 112px;
+    padding: 20px;
+    margin: 0 15px;
+    box-sizing: border-box;
+    font-size: 10px;
+    .bean-img {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .bean-icon {
+        display: block;
+        font-size: 0;
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+      }
+      .bean-tag {
+        color: #353535;
+        height: 15px;
+        line-height: 15px;
+        border-radius: 30px 50px 50px 0px;
+        background: rgba(#ff8320, 0.3);
+        padding-left: 5px;
+        padding-right: 10px;
+      }
+      .tag {
+        background: #ff8320;
+        color: #fff;
+      }
+    }
+    .rule {
+      color: #353535;
+      opacity: 0.5;
+    }
+  }
+  .bean-counts {
+    margin-top: 12px;
+    .counts {
+      color: #3d3835;
+      font-size: 32px;
+      font-weight: 700;
+    }
+    .pay {
+      padding: 0 20px;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
+      border-radius: 16px;
+      color: #e7caad;
+      font-size: 15px;
+      font-weight: 500;
+    }
+  }
+}
+.consumption-rules-popup {
+  border-radius: 16px;
+  width: 70%;
+  max-height: 80%;
+  padding: 24px;
+}
+
+.operation-box{
+  width: 100vw;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 87px);
+  .operation-title {
+    padding: 10px 15px;
+    background: #fff;
+    transition: box-shadow 0.3s;
+
+    &.with-shadow {
+      box-shadow: 0px 1px 10px 0px #99999933;
+    }
+    .text {
+      color: #353535;
+      font-size: 12px;
+      opacity: 0.5;
+    }
+    .time-icon {
+      display: block;
+      font-size: 0;
+      width: 12px;
+      height: 12px;
+      margin-left: 4px;
+    }
+    .search-time {
+      display: flex;
+      align-items: center;
+      .title {
+        color: #000;
+        font-weight: 500;
+        font-size: 17px;
+        margin-right: 10px;
+      }
+      .time {
+        height: 22px;
+        padding-right: 5px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .search {
+      display: flex;
+      align-items: center;
+      height: 22px;
+      padding-left: 5px;
+    }
+  }
+  .spa-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .operation-list {
+    flex: 1;
+    margin: 0 15px;
+    .operation-scroll{
+      height: calc(100vh - 130px)
+    }
+    .box {
+      &-detail {
+        .title {
+          line-height: 22px;
+          font-weight: 700;
+          font-size: 12px;
+          color: #000;
+          opacity: 0.5;
+          margin-bottom: 10px;
+        }
+        .item {
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.5);
+          box-shadow: 0px 2.5px 9.5px 2px rgba(0, 0, 0, 0.05);
+          border-radius: 5px;
+          padding: 12px 10px;
+          display: flex;
+          margin-bottom: 10px;
+          &-type {
+            background: linear-gradient(
+              113.95deg,
+              #f4e2ce 1.2%,
+              #debb9b 77.63%
+            );
+            width: 30px;
+            height: 30px;
+            border-radius: 15px;
+            margin-right: 15px;
+            line-height: 30px;
+            font-size: 10px;
+            font-weight: 500;
+            color: #000;
+            text-align: center;
+          }
+          &-detail {
+            flex: 1;
+            .item-info {
+              padding: 0;
+              font-size: 14px;
+              font-weight: 700;
+              color: #000;
+              &-type {
+                line-height: 15px;
+              }
+              &-title {
+                font-weight: 400;
+                opacity: 0.8;
+                font-size: 11px;
+              }
+              &-amount {
+                color: #9e7b5a;
+              }
+            }
+            &-remark {
+              opacity: 0.3;
+              line-height: 15px;
+              font-size: 10px;
+            }
+          }
+        }
+      }
+      &-not-text {
+        opacity: 0.4;
+        color: #353535;
+        font-size: 12px;
+        line-height: 20px;
+        margin: 0 auto 40px;
+        text-align: center;
+      }
+    }
+  }
+}
+.rights-card{
+  margin: 10px 15px 0px;
+  background: #FFF8F3;
+  border-radius: 5px;
+  box-shadow: 0px 5px 18.9px 2px #0000000D;
+  padding: 15px 20px;
+  .title{
+    height: 25px;
+    line-height: 25px;
+    background: rgba($color: #FF8320, $alpha: 0.3);
+    border-radius: 20px 50px 50px 0px;
+    color: #353535;
+    font-size: 12px;
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 12px;
+  }
+  .list{
+    display: flex;
+    flex-wrap: wrap;
+    .item{
+      width: 50%;
+      margin-top: 15px;
+      .item-count{
+        font-size: 20px;
+        color:#353535;
+        font-weight: 700;
+        line-height: 23px;
+      }
+      .item-title{
+        line-height: 23px;
+        color: #987356;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        .item-title-button{
+          padding: 0 27rpx;
+          height: 54rpx;
+          line-height: 54rpx;
+          background: -webkit-linear-gradient(262.82deg, #353535 10.04%, #433f46 90.21%);
+          background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
+          border-radius: 27rpx;
+          color: #E7CAAD;
+          font-size: 24rpx;
+          font-weight: 400;
+          margin-left: 40rpx;
+          display: flex;
+          align-items: center;
+          .button-icon{
+            display: block;
+            width: 24rpx;
+            height: 24rpx;
+            font-size: 0;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+    .star-item{
+      width: 100%;
+    }
+  }
+}
+</style>