@uxda/appkit 4.2.14 → 4.2.16

package/src/balance/components/PromoterCard.vue

@@ -1,237 +1,237 @@
-<template>
-  <div class="promoter-card" v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
-    <img class="arrow"
-      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAxNyAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjM4MTQgMTIuMzIwN0MxNi43NjI4IDEzLjUxNyAxNi43NjI4IDE1LjY1OTkgMTUuMzgxNCAxNi44NTYyTDEuNjU0NjUgMjguNzQzOUMxLjAwNzAxIDI5LjMwNDggLTEuMzA0NTZlLTA2IDI4Ljg0NDggLTEuMjY3MTFlLTA2IDI3Ljk4OEwtOS41Njc5OGUtMDggMS4xODg5Qy01LjgyM2UtMDggMC4zMzIxNDYgMS4wMDcwMSAtMC4xMjc5MDUgMS42NTQ2NSAwLjQzMjk3MUwxNS4zODE0IDEyLjMyMDdaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTAyN185OTYpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTAyN185OTYiIHgxPSI0NiIgeTE9IjE1IiB4Mj0iLTUuNSIgeTI9IjE1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFRjlENTciLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZENDUwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="
-      alt="">
-    <div class="promoter-card-tab" v-if="useCase === 'company' && isAdmin">
-      <div class="promoter-card-tab-item" @click="onTabChange('person')" :class="{ focus: tab === 'person' }">个人</div>
-      <div class="promoter-card-tab-item" @click="onTabChange('company')" :class="{ focus: tab === 'company' }">企业</div>
-    </div>
-    <div class="promoter-card-hd" @click="emits('blance', tab)"
-      v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
-      <div class="promoter-card-hd-info">可提现余额(元)</div>
-      <div class="promoter-card-hd-num number">{{ formatAmount(promoter.balance || 0) }}
-        <img class="arrow-img" style="margin-left: 12px;" src="https://cdn.ddjf.com/static/images/appkit/arrow.png"
-          alt="">
-      </div>
-    </div>
-    <div class="promoter-card-ft">
-      <div class="promoter-card-ft-item" v-if="applyRecord.accessCheckStatus === 'Y'">
-        <div class="promoter-card-ft-info">销售累计收益(元)
-          <IconFont class="icon" name="ask" @click="onHelpClick('profits')" />
-        </div>
-        <div class="promoter-card-ft-num number" @click="emits('profits', tab)">
-          {{ formatAmount(promoter.totalIncome || 0) }}
-          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
-        </div>
-      </div>
-      <div class="promoter-card-ft-line"
-        v-if="applyRecord.accessCheckStatus === 'Y' && applyRecord.distributorFlag === 'Y'">
-      </div>
-      <div class="promoter-card-ft-item" v-if="applyRecord.distributorFlag === 'Y'">
-        <div class="promoter-card-ft-info">返佣累计收益(元)
-          <IconFont class="icon" name="ask" @click="onHelpClick('rebate')" />
-        </div>
-        <div class="promoter-card-ft-num number" @click="emits('rebate', tab)">
-          {{ formatAmount(promoter.totalRebateIncome || 0) }}
-          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { endpoints, useHttp } from '../api'
-import { Promoter } from '../types'
-import Taro, { useDidShow } from '@tarojs/taro'
-import { useAmount } from '../../shared/composables/useAmount'
-import { IconFont } from '@nutui/icons-vue-taro'
-
-type PromoterCardProps = {
-  useCase: string
-  applyRecord: any
-  isAdmin?: boolean
-}
-const props = withDefaults(defineProps<PromoterCardProps>(), {
-  useCase: '',
-  applyRecord: {},
-  isAdmin: false
-})
-
-const { formatAmount } = useAmount()
-const tab = ref('person')
-
-const promoter = ref<Promoter>({
-  balance: 0,
-  totalIncome: 0,
-  totalRebateIncome: 0,
-})
-
-function onTabChange(type: string) {
-  tab.value = type
-  loadPromoter()
-}
-
-async function loadPromoter() {
-  const $http = useHttp()
-  $http
-    .get<Promoter>(endpoints.获取推广方账户信息, {
-      useCase: tab.value,
-    })
-    .then((data) => {
-      promoter.value.balance = data?.balance || 0
-      promoter.value.totalIncome = data?.totalIncome || 0
-      promoter.value.totalRebateIncome = data?.totalRebateIncome || 0
-    })
-}
-
-const emits = defineEmits([
-  /**
-   * 跳可提现余额
-   */
-  'blance',
-  /**
-   * 跳收益页面
-   */
-  'profits',
-  /**
-   * 跳返佣统计页面
-   */
-  'rebate',
-])
-
-useDidShow(() => {
-  Object.keys(props.applyRecord)?.length && loadPromoter()
-})
-watch(() => props.applyRecord, () => {
-  Object.keys(props.applyRecord)?.length && loadPromoter()
-})
-
-defineExpose({
-  reload: loadPromoter,
-})
-
-const toastMap = {
-  profits: '推广北斗星报告获取，每笔报告销售收益= 客户查询价 - 我的成本价',
-  rebate: '推荐朋友使用北斗星、企明星获取，返佣收益= 返佣基数 * 返佣比例',
-}
-function onHelpClick(type: string) {
-  Taro.showModal({
-    content: toastMap[type],
-    showCancel: false,
-    confirmText: '知道了',
-  })
-}
-</script>
-
-<style lang="scss">
-.promoter-card {
-  position: relative;
-  padding: 20px;
-  background: #fff;
-  box-sizing: border-box;
-  margin: 0 auto;
-  border-radius: 15px;
-
-  .icon {
-    font-size: 10px;
-    color: rgba(53, 53, 53, 0.3);
-  }
-
-  .arrow {
-    position: absolute;
-    left: 0;
-    top: 22px;
-    width: 9px;
-    height: 16px;
-  }
-
-  &-hd {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    color: #353535;
-    margin-bottom: 12px;
-
-    &-num {
-      font-size: 26px;
-      font-weight: bold;
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-    }
-
-    &-info {
-      font-size: 14px;
-    }
-
-
-  }
-
-  &-ft {
-    display: flex;
-    align-items: center;
-
-    &-item {
-      flex: 1;
-    }
-
-    &-info {
-      font-size: 12px;
-      color: #434242;
-      margin-bottom: 5px;
-      display: flex;
-      align-items: center;
-    }
-
-    &-num {
-      display: flex;
-      align-items: center;
-      font-size: 20px;
-      color: #353535;
-    }
-
-    &-line {
-      width: 1px;
-      height: 19px;
-      background: rgba(53, 53, 53, 0.2);
-      margin-right: 30px;
-    }
-  }
-
-  &-tab {
-    position: absolute;
-    top: 10px;
-    right: 13px;
-    border-radius: 4px;
-    overflow: hidden;
-    background: rgba(204, 204, 204, 0.2);
-
-    &-item {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      height: 29px;
-      width: 90px;
-      box-sizing: border-box;
-      padding: 0 10px;
-      font-size: 13px;
-      color: #353535;
-
-      &.focus {
-        background: linear-gradient(90deg, #FFEBC1 0%, #FFF9ED 100%);
-        font-weight: bold;
-        border-radius: 4px;
-      }
-    }
-  }
-
-  .arrow-img {
-    width: 16px;
-    height: 12px;
-    margin-left: 5px;
-  }
-}
-</style>
+<template>
+  <div class="promoter-card" v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
+    <img class="arrow"
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAxNyAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjM4MTQgMTIuMzIwN0MxNi43NjI4IDEzLjUxNyAxNi43NjI4IDE1LjY1OTkgMTUuMzgxNCAxNi44NTYyTDEuNjU0NjUgMjguNzQzOUMxLjAwNzAxIDI5LjMwNDggLTEuMzA0NTZlLTA2IDI4Ljg0NDggLTEuMjY3MTFlLTA2IDI3Ljk4OEwtOS41Njc5OGUtMDggMS4xODg5Qy01LjgyM2UtMDggMC4zMzIxNDYgMS4wMDcwMSAtMC4xMjc5MDUgMS42NTQ2NSAwLjQzMjk3MUwxNS4zODE0IDEyLjMyMDdaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTAyN185OTYpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTAyN185OTYiIHgxPSI0NiIgeTE9IjE1IiB4Mj0iLTUuNSIgeTI9IjE1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IiNFRjlENTciLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkZENDUwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="
+      alt="">
+    <div class="promoter-card-tab" v-if="useCase === 'company' && isAdmin">
+      <div class="promoter-card-tab-item" @click="onTabChange('person')" :class="{ focus: tab === 'person' }">个人</div>
+      <div class="promoter-card-tab-item" @click="onTabChange('company')" :class="{ focus: tab === 'company' }">企业</div>
+    </div>
+    <div class="promoter-card-hd" @click="emits('blance', tab)"
+      v-if="applyRecord.distributorFlag === 'Y' || applyRecord.accessCheckStatus === 'Y'">
+      <div class="promoter-card-hd-info">可提现余额(元)</div>
+      <div class="promoter-card-hd-num number">{{ formatAmount(promoter.balance || 0) }}
+        <img class="arrow-img" style="margin-left: 12px;" src="https://cdn.ddjf.com/static/images/appkit/arrow.png"
+          alt="">
+      </div>
+    </div>
+    <div class="promoter-card-ft">
+      <div class="promoter-card-ft-item" v-if="applyRecord.accessCheckStatus === 'Y'">
+        <div class="promoter-card-ft-info">销售累计收益(元)
+          <IconFont class="icon" name="ask" @click="onHelpClick('profits')" />
+        </div>
+        <div class="promoter-card-ft-num number" @click="emits('profits', tab)">
+          {{ formatAmount(promoter.totalIncome || 0) }}
+          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
+        </div>
+      </div>
+      <div class="promoter-card-ft-line"
+        v-if="applyRecord.accessCheckStatus === 'Y' && applyRecord.distributorFlag === 'Y'">
+      </div>
+      <div class="promoter-card-ft-item" v-if="applyRecord.distributorFlag === 'Y'">
+        <div class="promoter-card-ft-info">返佣累计收益(元)
+          <IconFont class="icon" name="ask" @click="onHelpClick('rebate')" />
+        </div>
+        <div class="promoter-card-ft-num number" @click="emits('rebate', tab)">
+          {{ formatAmount(promoter.totalRebateIncome || 0) }}
+          <img class="arrow-img" src="https://cdn.ddjf.com/static/images/appkit/arrow.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { Promoter } from '../types'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useAmount } from '../../shared/composables/useAmount'
+import { IconFont } from '@nutui/icons-vue-taro'
+
+type PromoterCardProps = {
+  useCase: string
+  applyRecord: any
+  isAdmin?: boolean
+}
+const props = withDefaults(defineProps<PromoterCardProps>(), {
+  useCase: '',
+  applyRecord: {},
+  isAdmin: false
+})
+
+const { formatAmount } = useAmount()
+const tab = ref('person')
+
+const promoter = ref<Promoter>({
+  balance: 0,
+  totalIncome: 0,
+  totalRebateIncome: 0,
+})
+
+function onTabChange(type: string) {
+  tab.value = type
+  loadPromoter()
+}
+
+async function loadPromoter() {
+  const $http = useHttp()
+  $http
+    .get<Promoter>(endpoints.获取推广方账户信息, {
+      useCase: tab.value,
+    })
+    .then((data) => {
+      promoter.value.balance = data?.balance || 0
+      promoter.value.totalIncome = data?.totalIncome || 0
+      promoter.value.totalRebateIncome = data?.totalRebateIncome || 0
+    })
+}
+
+const emits = defineEmits([
+  /**
+   * 跳可提现余额
+   */
+  'blance',
+  /**
+   * 跳收益页面
+   */
+  'profits',
+  /**
+   * 跳返佣统计页面
+   */
+  'rebate',
+])
+
+useDidShow(() => {
+  Object.keys(props.applyRecord)?.length && loadPromoter()
+})
+watch(() => props.applyRecord, () => {
+  Object.keys(props.applyRecord)?.length && loadPromoter()
+})
+
+defineExpose({
+  reload: loadPromoter,
+})
+
+const toastMap = {
+  profits: '推广北斗星报告获取，每笔报告销售收益= 客户查询价 - 我的成本价',
+  rebate: '推荐朋友使用北斗星、企明星获取，返佣收益= 返佣基数 * 返佣比例',
+}
+function onHelpClick(type: string) {
+  Taro.showModal({
+    content: toastMap[type],
+    showCancel: false,
+    confirmText: '知道了',
+  })
+}
+</script>
+
+<style lang="scss">
+.promoter-card {
+  position: relative;
+  padding: 20px;
+  background: #fff;
+  box-sizing: border-box;
+  margin: 0 auto;
+  border-radius: 15px;
+
+  .icon {
+    font-size: 10px;
+    color: rgba(53, 53, 53, 0.3);
+  }
+
+  .arrow {
+    position: absolute;
+    left: 0;
+    top: 22px;
+    width: 9px;
+    height: 16px;
+  }
+
+  &-hd {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: #353535;
+    margin-bottom: 12px;
+
+    &-num {
+      font-size: 26px;
+      font-weight: bold;
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+    }
+
+    &-info {
+      font-size: 14px;
+    }
+
+
+  }
+
+  &-ft {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      flex: 1;
+    }
+
+    &-info {
+      font-size: 12px;
+      color: #434242;
+      margin-bottom: 5px;
+      display: flex;
+      align-items: center;
+    }
+
+    &-num {
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      color: #353535;
+    }
+
+    &-line {
+      width: 1px;
+      height: 19px;
+      background: rgba(53, 53, 53, 0.2);
+      margin-right: 30px;
+    }
+  }
+
+  &-tab {
+    position: absolute;
+    top: 10px;
+    right: 13px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: rgba(204, 204, 204, 0.2);
+
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 29px;
+      width: 90px;
+      box-sizing: border-box;
+      padding: 0 10px;
+      font-size: 13px;
+      color: #353535;
+
+      &.focus {
+        background: linear-gradient(90deg, #FFEBC1 0%, #FFF9ED 100%);
+        font-weight: bold;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .arrow-img {
+    width: 16px;
+    height: 12px;
+    margin-left: 5px;
+  }
+}
+</style>

package/src/balance/components/SecondBalance.vue

@@ -1,71 +1,71 @@
-<template>
-  <div class="second-balance">
-    <page-header title="权益余额" />
-    <div class="positions" v-if="data.length">
-      <div class="position" v-for="(item, index) in data" :key="index">
-        <div class="icon"></div>
-        <label class="title">{{ item.title }}</label>
-        <label class="number amount">{{ item.count }}{{ item.unit }}</label>
-      </div>
-    </div>
-    <empty-view v-else />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Privilege } from "../types";
-import EmptyView from "../../shared/components/EmptyView.vue";
-
-// 权益余额
-// 由账户页 AccountView 使用 AppDrawer 弹出
-type SecondBalanceProps = {
-  data: Privilege[];
-};
-
-withDefaults(defineProps<SecondBalanceProps>(), {
-  data: () => [],
-});
-</script>
-
-<style lang="scss">
-.second-balance {
-  width: 100vw;
-  .positions {
-    padding: 15px;
-    .position {
-      border-radius: 5px;
-      background: #f7f8fa;
-      height: 54px;
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      margin-bottom: 10px;
-      padding: 0 10px;
-      gap: 10px;
-      .icon {
-        width: 30px;
-        height: 30px;
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="),
-          linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
-        background-repeat: no-repeat;
-        border-radius: 15px;
-        background-size: 30px;
-        flex-basis: 30px;
-        flex-grow: 0;
-      }
-      .title {
-        flex-grow: 1;
-        color: #353535;
-        font-size: 14px;
-        font-weight: 500;
-      }
-      .amount {
-        flex-grow: 0;
-        color: #9e7b5a;
-        font-size: 14px;
-        font-weight: 700;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="second-balance">
+    <page-header title="权益余额" />
+    <div class="positions" v-if="data.length">
+      <div class="position" v-for="(item, index) in data" :key="index">
+        <div class="icon"></div>
+        <label class="title">{{ item.title }}</label>
+        <label class="number amount">{{ item.count }}{{ item.unit }}</label>
+      </div>
+    </div>
+    <empty-view v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Privilege } from "../types";
+import EmptyView from "../../shared/components/EmptyView.vue";
+
+// 权益余额
+// 由账户页 AccountView 使用 AppDrawer 弹出
+type SecondBalanceProps = {
+  data: Privilege[];
+};
+
+withDefaults(defineProps<SecondBalanceProps>(), {
+  data: () => [],
+});
+</script>
+
+<style lang="scss">
+.second-balance {
+  width: 100vw;
+  .positions {
+    padding: 15px;
+    .position {
+      border-radius: 5px;
+      background: #f7f8fa;
+      height: 54px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: 10px;
+      padding: 0 10px;
+      gap: 10px;
+      .icon {
+        width: 30px;
+        height: 30px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="),
+          linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
+        background-repeat: no-repeat;
+        border-radius: 15px;
+        background-size: 30px;
+        flex-basis: 30px;
+        flex-grow: 0;
+      }
+      .title {
+        flex-grow: 1;
+        color: #353535;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .amount {
+        flex-grow: 0;
+        color: #9e7b5a;
+        font-size: 14px;
+        font-weight: 700;
+      }
+    }
+  }
+}
+</style>