@uxda/appkit 1.0.0

package/src/balance/components/AccountView.vue

@@ -0,0 +1,519 @@
+<template>
+  <div class="consumption-view">
+    <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">{{ 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">
+                  {{ item.amount }}
+                </div>
+                <div class="title">
+                  {{ item.title }}
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="operation-title spa-between">
+      <div class="search-time">
+        <div class="title">收支明细</div>
+        <div class="time" @click="openDateFilter" v-show="filtering.dateFrom">
+          <div class="text">{{ dataRangeDisplay }}</div>
+          <img
+            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.list.length > 0">
+        <div class="box-detail" v-for="(item, index) in consumptionGroups.list" :key="index">
+          <div class="title">{{ item.date }}</div>
+          <div
+            class="item"
+            v-for="(it, i) in item.consumptions"
+            :key="i">
+            <div class="item-type">
+              {{ it.type }}
+            </div>
+            <div class="item-detail">
+              <div class="item-info spa-between">
+                <div>
+                  <div class="item-info-type">
+                    {{ it.position }}
+                  </div>
+                  <div class="item-info-title">{{ it.title }}</div>
+                </div>
+                <div class="item-info-amount">
+                  {{ it.direction == '支出' ? '-' : '+' }}{{ 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="info-not">
+        <img
+          class="info-not-img"
+          src="https://cdn.ddjf.com/static/images/fnfundkit/bean-no-thing.png" />
+        <div class="info-not-text">暂无数据</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"
+      @complete="onDateFilterComplete"/>
+  </nut-popup>
+  <nut-popup
+    position="bottom"
+    :style="{ height: '70%' }"
+    round
+    :close-on-click-overlay="false"
+    v-model:visible="filterOpen">
+    <consumption-filter :modelValue="[
+      filtering.position,
+      filtering.direction,
+      filtering.type,
+    ]" @complete="onFilterComplete" />
+  </nut-popup>
+  <div class="back-to-top" @click="backToTop" v-show="scrollY > 300">
+    <img
+      class="back-to-top-icon"
+      src="https://cdn.ddjf.com/static/images/bpms-workBench/top.png" />
+  </div>
+  <balance-reminder v-model="balanceReminderOpen" />
+</template>
+
+<script lang="ts" setup>
+import Taro, { usePageScroll } from '@tarojs/taro'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { endpoints, makeHttp } from '../api'
+import { ConsumptionFiltering, ConsumptionGroups, Balance } from '../types'
+import ConsumptionFilter from './ConsumptionFilter.vue'
+import DateFilter from './DateFilter.vue'
+import ConsumptionRules from './ConsumptionRules.vue'
+import BalanceReminder from './BalanceReminder.vue'
+
+const emit = defineEmits(['recharge'])
+
+const filterOpen = ref<boolean>(false)
+
+// 规则说明弹窗
+const rulesPopupOpen = ref<boolean>(false)
+
+const filtering = reactive<ConsumptionFiltering>({
+  position: '全部',
+  direction: '全部',
+  type: '全部',
+  dateFrom: '',
+  dateTo: ''
+})
+
+// 时间筛选
+const datePickerOpen = ref<boolean>(false)
+
+function openDateFilter () {
+  datePickerOpen.value = true
+}
+
+const dataRangeDisplay = 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 balance = ref<Balance>({
+  total: 0,
+  privileges: []
+})
+
+onMounted(() => {
+  Taro.setNavigationBarTitle({
+    title: '我的账户',
+  })
+  loadConsumptions(true)
+  loadBalance()
+})
+
+async function loadConsumptions (firstTime?: boolean) {
+  const $http = makeHttp()
+  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
+    }
+  })
+  Taro.hideLoading()
+}
+
+async function loadBalance() {
+  const $http = makeHttp()
+  $http.get<Balance>(endpoints.getBalance, {
+  }).then(data => {
+    balance.value = data
+  })
+}
+
+const onFilterComplete = (value) => {
+  filtering.position = value[0]
+  filtering.direction = value[1]
+  filtering.type = value[2]
+  filterOpen.value = false
+  loadConsumptions()
+}
+
+const onDateFilterComplete = (value) => {
+  filtering.dateFrom = value.from
+  filtering.dateTo = value.to
+  datePickerOpen.value = false
+  loadConsumptions()
+}
+
+function backToTop() {
+  Taro.pageScrollTo({
+    scrollTop: 0,
+    duration: 300, // 滚动到顶部的动画持续时间
+  })
+}
+
+function gotoRecharge () {
+  balanceReminderOpen.value = true
+  emit('recharge')
+}
+
+const balanceReminderOpen = ref(false)
+
+const scrollY = ref<number>(0)
+usePageScroll((e) => {
+  const { scrollTop } = e
+  scrollY.value = scrollTop
+})
+</script>
+
+<style lang="scss">
+.consumption-view {
+  .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: 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;
+          }
+        }
+      }
+      .line {
+        height: 3px;
+        width: 100%;
+        margin: 10px 0;
+        background: linear-gradient(90deg, #e7c39f 0.84%, #e6c9ad 27.74%);
+      }
+      .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;
+          }
+        }
+      }
+    }
+  }
+  .operation-title {
+    padding: 10px 15px;
+    background: #fff;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    .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 {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .search {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .operation-list {
+    margin: 0 15px;
+    .box {
+      &-detail {
+        .title {
+          line-height: 22px;
+          font-weight: 700;
+          font-size: 12px;
+          color: #000;
+          opacity: 0.5;
+          margin-bottom: 10px;
+        }
+        .item {
+          box-shadow: 0px 5px 18px 2px #00000029;
+          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;
+      }
+    }
+    &-not {
+      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;
+      }
+    }
+  }
+}
+.back-to-top {
+  width: 38px;
+  height: 38px;
+  border-radius: 19px;
+  position: fixed;
+  right: 15px;
+  bottom: 100px;
+  background: #FFF2E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &-icon {
+    display: block;
+    font-size: 0;
+    width: 19px;
+    height: 19px;
+  }
+}
+
+.consumption-rules-popup {
+  border-radius: 16px;
+  width: 70%;
+  height: 70%;
+  padding: 24px;
+}
+</style>
+../../payment/services/remind-insufficient

package/src/balance/components/BalanceCard.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="account-card">
+    <div class="card">
+      <div class="card-row">
+        <div class="card-row-left">
+          <div class="bean-box">
+           <div class="bean-icon-box">
+            <img class="bean-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-bean.png" />
+           </div>
+            <span class="baan-name">云豆</span>
+          </div>
+          <div class="bean-nums">{{ balance.total }}</div>
+        </div>
+        <div class="card-row-right">
+          <div class="account-info-entry" @click="gotoDetail">
+            <div class="account-info-name">账户明细</div>
+            <div class="account-info-icon">
+              <img class="icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/gold-to.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="card-row">
+        <div class="card-row-left desc">仅云豆可充值，小云豆为平台赠送</div>
+        <div class="card-row-right">
+          <div class="pay" @click="gotoRecharge">
+            <div>充值</div>
+            <img class="pay-icon" src="https://cdn.ddjf.com/static/images/bpms-workBench/bean-right.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { endpoints, makeHttp } from '../api'
+import { Balance } from '../types'
+
+const balance = ref<Balance>({
+  total: 0,
+  privileges: []
+})
+
+const gotoRecharge = () => {
+  emit('recharge')
+}
+
+async function loadBalance () {
+  const $http = makeHttp()
+  $http.get<Balance>(endpoints.getBalance, {
+  }).then(data => {
+    balance.value = data
+  })
+}
+
+const emit = defineEmits([
+  /**
+   * 跳账户详情
+   */
+  'drill',
+  /**
+   * 跳充值页
+   */
+  'recharge'
+])
+
+function gotoDetail () {
+  emit('drill')
+}
+
+onMounted(() => {
+  loadBalance()
+})
+
+</script>
+
+<style lang="scss">
+.account-card{
+  .card{
+    background: #2F2F2F;
+    border-radius: 10px;
+    padding: 13px 20px;
+    margin: 0;
+    .card-row{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .card-row-left{
+        display: flex;
+        flex-direction: column;
+        .bean-box{
+          display: flex;
+          align-items: center;
+          .bean-icon-box{
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+            .bean-icon{
+              display: block;
+              font-size: 0;
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .baan-name{
+            color: #F3D59D;
+            font-weight: 600;
+            font-size: 11px;
+          }
+        }
+        .bean-nums{
+          color: #fff;
+          line-height: 22px;
+          font-weight: 500;
+          font-size: 16px;
+          margin-top: 3px;
+        }
+      }
+      .desc{
+        font-size: 10px;
+        color: #ccc;
+        line-height: 14px;
+      }
+    }
+    .line{
+      margin: 6px 0px 8px 0px;
+      height: 1px;
+      background: #C3C3C3;
+      opacity: 0.2;
+    }
+    .card-row-right{
+      .pay{
+        padding: 0 8px;
+        line-height: 18px;
+        color: #FFD6A5;
+        border: 1px solid #FFD6A5;
+        border-radius: 9px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        .pay-icon{
+          display: block;
+          font-size: 0;
+          width: 3px;
+          height: 6px;
+          margin-left: 6px;
+        }
+      }
+      .account-info-entry{
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 14px;
+        background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
+        .account-info-name{
+          color: #975213;
+          font-size: 13px;
+          font-weight: 500;
+          margin-right: 8px;
+        }
+        .account-info-icon{
+          width: 14px;
+          height: 14px;
+          border-radius: 7px;
+          .icon{
+            display: block;
+            font-size: 0;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>