@uxda/appkit 1.1.0 → 1.2.0

package/src/balance/components/AccountView.vue

@@ -1,5 +1,6 @@
 <template>
-  <scroll-view class="account-view"
+  <scroll-view
+    class="account-view"
     :class="{ popupOpen: isAnyPopupOpen }"
     :scroll-y="!isAnyPopupOpen"
     :refresher-enabled="!isAnyPopupOpen"
@@ -7,14 +8,18 @@
     @scroll="onScroll"
     @refresherrefresh="onPullDownRefresh"
     :lower-threshold="50"
-    @scrolltolower="onReachBottom">
+    @scrolltolower="onReachBottom"
+  >
     <div class="scroll-content">
-      <page-header color-mode="dark" title="我的账户"
-        :class="{'with-background': scrolled > 0}"
-        @close="onPageHeaderClose" />
+      <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>
+          <label>权益余额</label>
         </div>
       </div>
       <div class="balance">
@@ -22,7 +27,8 @@
           <div class="bean-img">
             <img
               class="bean-icon"
-              src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
+              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>
@@ -32,9 +38,11 @@
           <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="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">
@@ -42,24 +50,27 @@
             <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-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" />
+            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="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" v-for="(it, i) in item.consumptions" :key="i">
               <div class="item-type">
                 {{ it.交易类型 }}
               </div>
@@ -72,7 +83,7 @@
                     <div class="item-info-title">{{ it.title }}</div>
                   </div>
                   <div class="item-info-amount number">
-                    {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
+                    {{ it.收入还是支出 == "支出" ? "-" : "+" }}{{ it.amount }}
                   </div>
                 </div>
                 <div class="item-detail-remark">{{ it.description }}</div>
@@ -88,7 +99,8 @@
   <nut-popup
     pop-class="consumption-rules-popup"
     v-model:visible="rulesPopupOpen"
-    :close-on-click-overlay="false">
+    :close-on-click-overlay="false"
+  >
     <consumption-rules @complete="rulesPopupOpen = false" />
   </nut-popup>
   <nut-popup
@@ -96,244 +108,252 @@
     :style="{ height: '40%' }"
     round
     :close-on-click-overlay="true"
-    v-model:visible="datePickerOpen">
+    v-model:visible="datePickerOpen"
+  >
     <date-filter
       v-if="datePickerOpen"
       :from="filtering.dateFrom"
       :to="filtering.dateTo"
       @reset="onDateReset"
-      @complete="onDateFilterComplete"/>
+      @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" />
+    v-model:visible="filterOpen"
+  >
+    <consumption-filter
+      :modelValue="[
+        filtering.账户类型,
+        filtering.收入还是支出,
+        filtering.交易类型,
+        filtering.权益类目,
+      ]"
+      @complete="onFilterComplete"
+    />
   </nut-popup>
-  <app-drawer
-    v-model="secondBalanceOpen"
-    title="小云豆余额">
+  <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)
+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: ''
-  }
-)
+  app: string;
+};
+const props = withDefaults(defineProps<AccountViewProps>(), {
+  app: "",
+});
 
-const emit = defineEmits(['recharge'])
+const emit = defineEmits(["recharge"]);
 
-const filterOpen = ref<boolean>(false)
+const filterOpen = ref<boolean>(false);
 
 // 规则说明弹窗
-const rulesPopupOpen = ref<boolean>(false)
+const rulesPopupOpen = ref<boolean>(false);
 
 const filtering = reactive<账户流水筛选项>({
-  账户类型: '全部',
-  收入还是支出: '全部',
-  交易类型: '全部',
-  权益类目: '',
-  dateFrom: '',
-  dateTo: '',
+  账户类型: "全部",
+  收入还是支出: "全部",
+  交易类型: "全部",
+  权益类目: "",
+  dateFrom: "",
+  dateTo: "",
   page: 1,
   pageSize: 20,
-})
+});
 
-const reachedLastPage = ref<boolean>(false)
+const reachedLastPage = ref<boolean>(false);
 
 /**
  * 全新搜索
  * 重置某些查询条件
  */
-function restartSearch () {
+function restartSearch() {
   // 从第一页开始
-  filtering.page = 1
-  consumptionGroups.value = []
-  loadConsumptions()
+  filtering.page = 1;
+  consumptionGroups.value = [];
+  loadConsumptions();
 }
 
 // 时间筛选
-const datePickerOpen = ref<boolean>(false)
+const datePickerOpen = ref<boolean>(false);
 
-function openDateFilter () {
-  datePickerOpen.value = true
+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
-})
+  let startTime = filtering.dateFrom?.replace(/-/g, ".").substring(2);
+  let endTime = filtering.dateTo?.replace(/-/g, ".").substring(2);
+  return startTime + " - " + endTime;
+});
 
-const consumptionGroups = ref<ConsumptionGroup[]>([])
+const consumptionGroups = ref<ConsumptionGroup[]>([]);
 
 /**
  * 余额数据
  */
 const balance = ref<Balance>({
   total: 0,
-  privileges: []
-})
+  privileges: [],
+});
 
 useDidShow(() => {
   Taro.setNavigationBarTitle({
-    title: '我的账户',
-  })
-  loadConsumptions()
-  loadBalance()
-})
+    title: "我的账户",
+  });
+  loadConsumptions();
+  loadBalance();
+});
 
-function groupDataByDate (data: 账户流水[]): ConsumptionGroup[] {
+function groupDataByDate(data: 账户流水[]): ConsumptionGroup[] {
   // 按照日期分组
-  const groups: ConsumptionGroup[] = consumptionGroups.value || []
+  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)
+  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)
+        consumptions: [],
+      };
+      groups.push(group);
     }
-    group.consumptions.push(d)
-  })
-  groups.sort((a, b) => a.date > b.date ? -1 : 1)
-  return groups
+    group.consumptions.push(d);
+  });
+  groups.sort((a, b) => (a.date > b.date ? -1 : 1));
+  return groups;
 }
 
 /**
  * 请求账户流水
  * @param append 搜索结果累加 上拉分页时
  */
-async function loadConsumptions (append: boolean = false) {
+async function loadConsumptions(append: boolean = false) {
   if (!append) {
-    consumptionGroups.value = []
+    consumptionGroups.value = [];
   }
-  const $http = useHttp()
+  const $http = useHttp();
   Taro.showLoading({
     title: `加载中...`,
     mask: true,
-  })
-  $http.get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
+  });
+  $http
+    .get<WithPaging<账户流水[]>>(endpoints.获取账户流水, {
       app: props.app,
-      ...filtering
-    }).then(response => {
-      consumptionGroups.value = groupDataByDate(response.data)
+      ...filtering,
+    })
+    .then((response) => {
+      consumptionGroups.value = groupDataByDate(response.data);
       if (filtering.page >= response.totalPages) {
-        filtering.page = response.totalPages
-        reachedLastPage.value = true
+        filtering.page = response.totalPages;
+        reachedLastPage.value = true;
       } else {
-        reachedLastPage.value = false
+        reachedLastPage.value = false;
       }
-      Taro.hideLoading()
-    })
+      Taro.hideLoading();
+    });
 }
 
 /**
  * 获取账户余额明细
  */
 async function loadBalance() {
-  const $http = useHttp()
-  $http.get<Balance>(endpoints.获取余额明细, {
-    app: props.app,
-  }).then(data => {
-    balance.value = data
-  })
+  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()
-}
+  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')
+  filtering.dateFrom = value.from;
+  filtering.dateTo = value.to;
+  datePickerOpen.value = false;
+  restartSearch();
+};
+
+function gotoRecharge() {
+  emit("recharge");
 }
 
-function loadNextPage () {
-  filtering.page ++
-  loadConsumptions(true)
+function loadNextPage() {
+  filtering.page++;
+  loadConsumptions(true);
 }
 
 // 以下这一大段处理下拉刷新、上滑分页以及弹窗与页面滑动的逻辑
-const scrolled = ref<number>(0)
+const scrolled = ref<number>(0);
 
 /**
  * 记录 scroll-view 滚动的位置
  */
 const onScroll = (e) => {
-  const { scrollTop } = e
-  scrolled.value = scrollTop
-}
+  const { scrollTop } = e;
+  scrolled.value = scrollTop;
+};
 
 /**
  * 下拉刷新 pull down refresh
  */
 const onPullDownRefresh = () => {
-  refreshing.value = true
+  refreshing.value = true;
   // 重新请求余额数据
-  loadBalance()
+  loadBalance();
   setTimeout(() => {
-    refreshing.value = false
+    refreshing.value = false;
   }, 500);
-}
+};
 
 /**
  * 滑动到底部请求下一页并合并查询结果
  */
 const onReachBottom = () => {
   if (reachedLastPage.value) {
-    return false
+    return false;
   }
-  loadNextPage()  
-}
+  loadNextPage();
+};
 
 /**
  * 浮窗弹出时不允许
@@ -341,51 +361,53 @@ const onReachBottom = () => {
  * 2. 上滑分页
  */
 const isAnyPopupOpen = computed(() => {
-  return rulesPopupOpen.value ||
+  return (
+    rulesPopupOpen.value ||
     datePickerOpen.value ||
     filterOpen.value ||
     secondBalanceOpen.value
-})
+  );
+});
 
-const secondBalanceOpen = ref<boolean>(false)
+const secondBalanceOpen = ref<boolean>(false);
 
-function onSecondBalanceButtonClick () {
-  secondBalanceOpen.value = true
+function onSecondBalanceButtonClick() {
+  secondBalanceOpen.value = true;
 }
 
 watch(secondBalanceOpen, () => {
   Taro.setNavigationBarColor({
-    frontColor: secondBalanceOpen.value ? '#000000' : '#ffffff', 
-    backgroundColor: '#ffffff',
+    frontColor: secondBalanceOpen.value ? "#000000" : "#ffffff",
+    backgroundColor: "#ffffff",
     animation: {
       duration: 400,
-      timingFunc: 'easeIn'
-    }
-  })
-})
+      timingFunc: "easeIn",
+    },
+  });
+});
 
-function onDateReset () {
-  resetDateRange()
+function onDateReset() {
+  resetDateRange();
 }
 
 /**
  * 充值筛选的起止时间
  */
-function resetDateRange () {
+function resetDateRange() {
   // 筛选的起止时间
-  filtering.dateTo = dayjs().format('YYYY-MM-DD')
-  filtering.dateFrom = dayjs().add(-3, 'M').format('YYYY-MM-DD')
+  filtering.dateTo = dayjs().format("YYYY-MM-DD");
+  filtering.dateFrom = dayjs().add(-3, "M").format("YYYY-MM-DD");
 }
 
-function onPageHeaderClose () {
+function onPageHeaderClose() {
   Taro.navigateBack({
-    delta: 1
-  })
+    delta: 1,
+  });
 }
 
 onMounted(() => {
-  resetDateRange()
-})
+  resetDateRange();
+});
 </script>
 
 <style lang="scss">
@@ -397,13 +419,13 @@ onMounted(() => {
     background-repeat: no-repeat;
   }
   .page-header {
-    background-color: #3B393C;
+    background-color: #3b393c;
     position: sticky;
     top: 0;
     z-index: 1;
-    transition: background-color .3s;
+    transition: background-color 0.3s;
     &.with-background {
-      background-color: #3B393C;
+      background-color: #3b393c;
     }
   }
   &.popupOpen {
@@ -431,7 +453,7 @@ onMounted(() => {
     display: inline-block;
     padding: 0 10px;
     line-height: 22px;
-    color: #E7CAAD;
+    color: #e7caad;
     font-size: 12px;
     label {
       background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDZMMTYgMTJMMTAgMThWNloiIGZpbGw9IiNFN0NBQUQiIHN0cm9rZT0iI0U3Q0FBRCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
@@ -443,7 +465,7 @@ onMounted(() => {
   }
   .balance {
     border-radius: 15px;
-    background: linear-gradient(105deg, #F4E2CE 1.88%, #DEBB9B 98.18%);
+    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;
@@ -491,11 +513,7 @@ onMounted(() => {
       padding: 0 20px;
       height: 32px;
       line-height: 32px;
-      background: linear-gradient(
-        187.18deg,
-        #353535 10.04%,
-        #433f46 90.21%
-      );
+      background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
       border-radius: 16px;
       color: #e7caad;
       font-size: 15px;
@@ -507,9 +525,9 @@ onMounted(() => {
     background: #fff;
     position: sticky;
     z-index: 10;
-    transition: box-shadow .3s;
+    transition: box-shadow 0.3s;
     &.with-shadow {
-      box-shadow: 0px 1px 10px 0px #99999933
+      box-shadow: 0px 1px 10px 0px #99999933;
     }
     .text {
       color: #353535;
@@ -562,7 +580,7 @@ onMounted(() => {
         }
         .item {
           border-radius: 5px;
-          background: rgba(255, 255, 255, 0.50);
+          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;