@uxda/appkit 1.0.66 → 1.0.72

package/src/balance/components/AccountView.vue

@@ -1,51 +1,34 @@
 <template>
-  <div class="consumption-view" :class="{ popupOpen }">
-    <div class="header">
-      <div class="header_card">
-        <div class="clound-bean">
-          <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="line"></div>
-        <div
-          class="small-clound-bean clound-bean"
-          v-if="balance.privileges.length > 0">
-          <div class="bean-box spa-between">
-            <div class="bean-img">
-              <div class="bean-tag">小云豆</div>
-            </div>
-          </div>
-          <div class="bean-list">
-            <template v-for="item in balance.privileges" :key="item">
-              <div class="bean-list-item">
-                <div class="counts number">
-                  {{ item.amount }}
-                </div>
-                <div class="title">
-                  {{ item.title }}
-                </div>
-              </div>
-            </template>
-          </div>
+  <div class="account-view" :class="{ popupOpen }">
+    <page-header color-mode="dark" title="我的账户"
+      :class="{'with-background': scrollY > 0}" />
+    <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">
+    <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">{{ dataRangeDisplay }}</div>
+          <div class="text number">{{ dateRangeDisplay }}</div>
           <img
             style="margin-top: -2px"
             class="time-icon"
@@ -60,40 +43,35 @@
       </div>
     </div>
     <div class="operation-list">
-      <div class="box" v-if="consumptionGroups.list.length > 0">
-        <div class="box-detail" v-for="(item, index) in consumptionGroups.list" :key="index">
-          <div class="title">{{ item.date }}</div>
+      <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.type }}
+              {{ it.交易类型 }}
             </div>
             <div class="item-detail">
               <div class="item-info spa-between">
                 <div>
                   <div class="item-info-type">
-                    {{ it.position }}
+                    {{ it.账户类型 }}
                   </div>
                   <div class="item-info-title">{{ it.title }}</div>
                 </div>
                 <div class="item-info-amount number">
-                  {{ it.direction == '支出' ? '-' : '+' }}{{ it.amount }}
+                  {{ it.收入还是支出 == '支出' ? '-' : '+' }}{{ it.amount }}
                 </div>
               </div>
               <div class="item-detail-remark">{{ it.description }}</div>
             </div>
           </div>
         </div>
-        <div class="box-not-text">没有更多了</div>
-      </div>
-      <div v-else class="operations-empty">
-        <img
-          class="operations-empty-img"
-          src="https://cdn.ddjf.com/static/images/fnfundkit/bean-no-thing.png" />
-        <div class="operations-empty-text">暂无数据</div>
+        <div class="box-not-text" v-if="reachedLastPage">没有更多了</div>
       </div>
+      <empty-view v-else></empty-view>
     </div>
   </div>
   <nut-popup
@@ -112,30 +90,49 @@
       v-if="datePickerOpen"
       :from="filtering.dateFrom"
       :to="filtering.dateTo"
+      @reset="onDateReset"
       @complete="onDateFilterComplete"/>
   </nut-popup>
   <nut-popup
     position="bottom"
-    :style="{ height: '70%' }"
+    :style="{ height: '75%' }"
     round
     :close-on-click-overlay="true"
     v-model:visible="filterOpen">
     <consumption-filter :modelValue="[
-      filtering.position,
-      filtering.direction,
-      filtering.type,
+      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, usePageScroll, usePullDownRefresh } from '@tarojs/taro'
-import { computed, reactive, ref } from 'vue'
-import { endpoints, makeHttp } from '../api'
-import { ConsumptionFiltering, ConsumptionGroups, Balance } from '../types'
+import Taro, { useDidShow, usePageScroll, usePullDownRefresh, useReachBottom } 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()
+
+type AccountViewProps = {
+  app: string
+}
+const props = defineProps<AccountViewProps>()
 
 const emit = defineEmits(['recharge'])
 
@@ -144,14 +141,30 @@ const filterOpen = ref<boolean>(false)
 // 规则说明弹窗
 const rulesPopupOpen = ref<boolean>(false)
 
-const filtering = reactive<ConsumptionFiltering>({
-  position: '全部',
-  direction: '全部',
-  type: '全部',
+const filtering = reactive<账户流水筛选项>({
+  账户类型: '全部',
+  收入还是支出: '全部',
+  交易类型: '全部',
+  权益类目: '',
   dateFrom: '',
-  dateTo: ''
+  dateTo: '',
+  page: 1,
+  pageSize: 20,
 })
 
+const reachedLastPage = ref<boolean>(false)
+
+/**
+ * 全新搜索
+ * 重置某些查询条件
+ */
+function restartSearch () {
+  // 从第一页开始
+  filtering.page = 1
+  consumptionGroups.value = []
+  loadConsumptions()
+}
+
 // 时间筛选
 const datePickerOpen = ref<boolean>(false)
 
@@ -159,18 +172,17 @@ function openDateFilter () {
   datePickerOpen.value = true
 }
 
-const dataRangeDisplay = computed(() => {
+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<ConsumptionGroups>({
-  from: '',
-  to: '',
-  list: []
-})
+const consumptionGroups = ref<ConsumptionGroup[]>([])
 
+/**
+ * 余额数据
+ */
 const balance = ref<Balance>({
   total: 0,
   privileges: []
@@ -180,53 +192,99 @@ useDidShow(() => {
   Taro.setNavigationBarTitle({
     title: '我的账户',
   })
-  loadConsumptions(true)
+  loadConsumptions()
   loadBalance()
 })
 
-async function loadConsumptions (firstTime?: boolean) {
-  const $http = makeHttp()
+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<ConsumptionGroups>(endpoints.getOperations, filtering).then(data => {
-    consumptionGroups.value = data
-    if (firstTime) {
-      filtering.dateFrom = data.from
-      filtering.dateTo = data.to
+  $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()
   })
-  Taro.hideLoading()
 }
 
+/**
+ * 获取账户余额明细
+ */
 async function loadBalance() {
-  const $http = makeHttp()
-  $http.get<Balance>(endpoints.getBalance, {
+  const $http = useHttp()
+  $http.get<Balance>(endpoints.获取余额明细, {
+    app: props.app,
   }).then(data => {
     balance.value = data
   })
 }
 
 const onFilterComplete = (value) => {
-  filtering.position = value[0]
-  filtering.direction = value[1]
-  filtering.type = value[2]
+  filtering.账户类型 = value[0]
+  filtering.收入还是支出 = value[1]
+  filtering.交易类型 = value[2]
+  filtering.权益类目 = value[3]
   filterOpen.value = false
-  loadConsumptions()
+  restartSearch()
 }
 
 const onDateFilterComplete = (value) => {
   filtering.dateFrom = value.from
   filtering.dateTo = value.to
   datePickerOpen.value = false
-  loadConsumptions()
+  restartSearch()
 }
 
 function gotoRecharge () {
   emit('recharge')
 }
 
+function loadNextPage () {
+  filtering.page ++
+  loadConsumptions(true)
+}
+
 
 const scrollY = ref<number>(0)
 usePageScroll((e) => {
@@ -247,132 +305,175 @@ usePullDownRefresh(() => {
   }, 500);
 })
 
+/**
+ * 滑动到底部请求下一页并合并查询结果
+ */
+useReachBottom(() => {
+  if (reachedLastPage.value) {
+    return false
+  }
+  loadNextPage()  
+})
+
 const popupOpen = computed(() => {
   return rulesPopupOpen.value || datePickerOpen.value || filterOpen.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')
+}
+
+onMounted(() => {
+  resetDateRange()
+})
 </script>
 
 <style lang="scss">
-.consumption-view {
+.account-view {
+  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 .3s;
+    &.with-background {
+      background-color: #3B393C;
+    }
+  }
   &.popupOpen {
     height: 100vh;
     overflow: hidden;
   }
   .spa-between {
-    padding: 0 0 0 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-  .header {
-    position: relative;
-    background: linear-gradient(187.18deg, #353535 10.04%, #433f46 90.21%);
-    background-size: 100% 106px;
-    padding-top: 20px;
-    background-repeat: no-repeat;
-    &_card {
-      background: linear-gradient(104.85deg, #f4e2ce 1.88%, #debb9b 98.18%);
-      border-radius: 15px;
-      padding: 10px;
-      margin: 0 15px;
-      .clound-bean {
-        .bean-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: 5px;
-          .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;
-          }
-        }
+  .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;
       }
-      .line {
-        height: 3px;
-        width: 100%;
-        margin: 10px 0;
-        background: linear-gradient(90deg, #e7c39f 0.84%, #e6c9ad 27.74%);
+      .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;
       }
-      .small-clound-bean {
-        margin-top: 20px;
-        .bean-list {
-          margin-top: 8px;
-          display: flex;
-          flex-wrap: wrap;
-          &-item {
-            width: 50%;
-            line-height: 23px;
-            padding-left: 10px;
-            box-sizing: border-box;
-            margin-bottom: 10px;
-            .counts {
-              color: #353535;
-              font-size: 20px;
-              font-weight: 700;
-            }
-            .title {
-              color: #987356;
-              font-weight: 400;
-              font-size: 11px;
-            }
-          }
-          &-item:nth-child(2n) {
-            padding-left: 30px;
-          }
-        }
+      .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;
-    top: 0;
+    transition: box-shadow .3s;
+    &.with-shadow {
+      box-shadow: 0px 1px 10px 0px #99999933
+    }
     .text {
       color: #353535;
       font-size: 12px;
@@ -411,6 +512,7 @@ const popupOpen = computed(() => {
   }
   .operation-list {
     margin: 0 15px;
+    padding-bottom: 15px;
     .box {
       &-detail {
         .title {
@@ -422,7 +524,9 @@ const popupOpen = computed(() => {
           margin-bottom: 10px;
         }
         .item {
-          box-shadow: 0px 5px 18px 2px #00000029;
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.50);
+          box-shadow: 0px 2.5px 9.5px 2px rgba(0, 0, 0, 0.05);
           border-radius: 5px;
           padding: 12px 10px;
           display: flex;
@@ -479,28 +583,8 @@ const popupOpen = computed(() => {
         text-align: center;
       }
     }
-    .operations-empty {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 80px;
-      &-img {
-        display: block;
-        font-size: 0;
-        width: 144px;
-        height: 80px;
-      }
-      &-text {
-        opacity: 0.4;
-        color: #353535;
-        font-size: 12px;
-        line-height: 28px;
-      }
-    }
   }
 }
-
 .consumption-rules-popup {
   border-radius: 16px;
   width: 70%;