@uxda/appkit 4.1.25 → 4.1.28

package/src/balance/components/ListFilter.vue

@@ -1,64 +1,64 @@
-<template>
-  <div class="list-filter" @click="openPicker">
-    <span class="text">筛选</span>
-    <img
-      class="icon"
-      src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, PropType, reactive } from 'vue'
-import { useNutshell } from '@uxda/nutshell/taro'
-import ListFilterPicker from './ListFilterPicker.vue'
-
-const $n = useNutshell()
-
-export type ListFilterValue = {
-    type: string,
-  }
-
-const model = defineModel({
-  type: Object as PropType<ListFilterValue>,
-  default: {
-    type: ''
-  },
-  required: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: ListFilterValue): void,
-  (e: 'change'): void,
-}>()
-
-const openPicker = () => {
-  $n.sheet({
-    component: ListFilterPicker,
-    props: {
-      modelValue: model,
-      onComplete: (result) => {
-        emit('update:modelValue', {
-          type: result[0]
-        })
-      }
-    }
-  })
-}
-</script>
-
-<style lang="scss">
-.list-filter {
-  display: flex;
-  align-items: center;
-  height: 22px;
-  padding-left: 5px;
-  .icon {
-    display: block;
-    font-size: 0;
-    width: 12px;
-    height: 12px;
-    margin-left: 4px;
-  }
-}
+<template>
+  <div class="list-filter" @click="openPicker">
+    <span class="text">筛选</span>
+    <img
+      class="icon"
+      src="https://cdn.ddjf.com/static/images/bpms-workBench/clound-bean-select-icon.png"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType, reactive } from 'vue'
+import { useNutshell } from '@uxda/nutshell/taro'
+import ListFilterPicker from './ListFilterPicker.vue'
+
+const $n = useNutshell()
+
+export type ListFilterValue = {
+    type: string,
+  }
+
+const model = defineModel({
+  type: Object as PropType<ListFilterValue>,
+  default: {
+    type: ''
+  },
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: ListFilterValue): void,
+  (e: 'change'): void,
+}>()
+
+const openPicker = () => {
+  $n.sheet({
+    component: ListFilterPicker,
+    props: {
+      modelValue: model,
+      onComplete: (result) => {
+        emit('update:modelValue', {
+          type: result[0]
+        })
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.list-filter {
+  display: flex;
+  align-items: center;
+  height: 22px;
+  padding-left: 5px;
+  .icon {
+    display: block;
+    font-size: 0;
+    width: 12px;
+    height: 12px;
+    margin-left: 4px;
+  }
+}
 </style>

package/src/balance/components/ListFilterPicker.vue

@@ -1,187 +1,187 @@
-<template>
-  <div class="list-filter-picker">
-    <div class="list-filter-picker-title">
-      <h3>选择筛选项</h3>
-    </div>
-    <div class="consumption-filter-content">
-      <template v-for="(item, index) in filterSections" :key="index">
-        <div class="title">{{ item.label }}</div>
-        <div class="info">
-          <div
-            v-for="(it, i) in item.data"
-            @click="() => onFilterSectionClick(item.name, it.value)"
-            :class="getItemClass(item.name, it.value)"
-            class="info-item"
-            :key="i">
-            {{ typeof it === 'string' ? it : it.label }}
-          </div>
-        </div>
-      </template>
-    </div>
-    <div class="consumption-filter-btn spa-between">
-      <div class="btn" @click="reset">重置</div>
-      <div class="btn confirm" @click="onOkClick">确定</div>
-    </div>
-    <div class="consumption-filter-bottom"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import { endpoints, useHttp } from '../api'
-import { UniData, UniDataItem } from '@uxda/nutshell/taro'
-
-const $http = useHttp()
-
-type ListFilterPickerModel = Record<string, string[]>
-
-interface ListFilterPickerProps {
-  modelValue: ListFilterPickerModel
-}
-
-const props =
-  defineProps<ListFilterPickerProps>()
-
-const emit = defineEmits(['complete'])
-
-const result = ref<ListFilterPickerModel>(props.modelValue)
-
-type FilterSecion = {
-  label: string,
-  name: string,
-  data: UniDataItem[]
-}
-
-/**
- * 筛选项目里面所有按钮
- */
-const filterSections = ref<FilterSecion[]>([
-  {
-    label: '明细类型',
-    name: 'type',
-    data: [
-      {
-        label: '全部',
-        value: ''
-      },
-      {
-        label: '提现',
-        value: 'withdrawal'
-      },
-      {
-        label: '收益',
-        value: 'income'
-      },
-      {
-        label: '兑换',
-        value: 'exchange'
-      }
-    ]
-  },
-])
-
-const getItemClass = (name: string, value: string) => result.value[name]?.includes(value) ? ['current'] : ['']
-
-const onFilterSectionClick = (index: string, value: string) => {
-  result.value[index] = [value]
-}
-
-const reset = () => {
-  result.value = {}
-}
-
-const onOkClick = () => {
-  emit('complete', result)
-}
-</script>
-<style lang="scss">
-.list-filter-picker {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  &-title {
-    position: relative;
-    height: 44px;
-    line-height: 44px;
-    font-size: 17px;
-    color: #353535;
-    background: #f5f5f5;
-    text-align: center;
-  }
-  &-content {
-    flex: 1;
-    margin: 15px;
-    overflow-y: scroll;
-    color: #353535;
-    font-size: 13px;
-    .title {
-      opacity: 0.6;
-      line-height: 18px;
-    }
-    .info {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 10px;
-      margin: 10px 0;
-      &-item {
-        height: 30px;
-        line-height: 30px;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        text-align: center;
-      }
-      .current {
-        border-radius: 5px;
-        border: 1px solid #EFD082;
-        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
-      }
-    }
-  }
-  &-btn {
-    margin: 0 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .btn {
-      flex: 1;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border: 1px solid #ccc;
-      box-sizing: border-box;
-      color: #666;
-      font-size: 16px;
-      border-radius: 6px;
-    }
-    .confirm {
-      margin-left: 11px;
-      color: #000;
-      border: none;
-      background: linear-gradient(
-        90deg,
-        #ffebc1 0%,
-        #ffd7a7 52.29%,
-        #ffb875 100%
-      );
-    }
-  }
-  &-bottom {
-    height: 32px;
-    background: #fff;
-  }
-  .icon {
-    display: block;
-    width: 20px;
-    height: 20px;
-    background-size: 40px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    &.icon-x {
-      position: absolute;
-      right: 10px;
-      top: 11px;
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MSA0MUgxVjFINDFWNDFaIiBmaWxsPSIjRDhEOEQ4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjM1NjEgMjAuOTk5OUwzMy45NjM3IDMxLjYwNzJDMzQuNjE0NiAzMi4yNTgxIDM0LjYxNDYgMzMuMzEzNCAzMy45NjM3IDMzLjk2NDJDMzMuMzQyNSAzNC41ODU1IDMyLjM1MjcgMzQuNjEzOCAzMS42OTc5IDM0LjA0ODlMMjAuOTk5NCAyMy4zNTY2TDEwLjM5MzUgMzMuOTY0MkM5Ljc0MjY1IDM0LjYxNTEgOC42ODczOCAzNC42MTUxIDguMDM2NSAzMy45NjQyQzcuNDE1MTkgMzMuMzQyOSA3LjM4Njk3IDMyLjM1MzIgNy45NTE3OSAzMS42OTg0TDE4LjY0MjggMjAuOTk5OUw4LjAzNjUgMTAuMzk0QzcuMzg1NjMgOS43NDMxNCA3LjM4NTYzIDguNjg3ODcgOC4wMzY1IDguMDM2OTlDOC42NTc3OSA3LjQxNTY4IDkuNjQ3NTQgNy4zODc0NiAxMC4zMDIzIDcuOTUyMjdMMjAuOTk5NCAxOC42NDMzTDMxLjYwNjcgOC4wMzY5OUMzMi4yNTc2IDcuMzg2MTIgMzMuMzEyOSA3LjM4NjEyIDMzLjk2MzcgOC4wMzY5OUMzNC41ODUgOC42NTgyOCAzNC42MTMzIDkuNjQ4MDMgMzQuMDQ4NSAxMC4zMDI4TDIzLjM1NjEgMjAuOTk5OVoiIGZpbGw9IiMxNzFBMUQiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjAxIi8+Cjwvc3ZnPgo=")
-    }
-  }
-}
+<template>
+  <div class="list-filter-picker">
+    <div class="list-filter-picker-title">
+      <h3>选择筛选项</h3>
+    </div>
+    <div class="consumption-filter-content">
+      <template v-for="(item, index) in filterSections" :key="index">
+        <div class="title">{{ item.label }}</div>
+        <div class="info">
+          <div
+            v-for="(it, i) in item.data"
+            @click="() => onFilterSectionClick(item.name, it.value)"
+            :class="getItemClass(item.name, it.value)"
+            class="info-item"
+            :key="i">
+            {{ typeof it === 'string' ? it : it.label }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="consumption-filter-btn spa-between">
+      <div class="btn" @click="reset">重置</div>
+      <div class="btn confirm" @click="onOkClick">确定</div>
+    </div>
+    <div class="consumption-filter-bottom"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { endpoints, useHttp } from '../api'
+import { UniData, UniDataItem } from '@uxda/nutshell/taro'
+
+const $http = useHttp()
+
+type ListFilterPickerModel = Record<string, string[]>
+
+interface ListFilterPickerProps {
+  modelValue: ListFilterPickerModel
+}
+
+const props =
+  defineProps<ListFilterPickerProps>()
+
+const emit = defineEmits(['complete'])
+
+const result = ref<ListFilterPickerModel>(props.modelValue)
+
+type FilterSecion = {
+  label: string,
+  name: string,
+  data: UniDataItem[]
+}
+
+/**
+ * 筛选项目里面所有按钮
+ */
+const filterSections = ref<FilterSecion[]>([
+  {
+    label: '明细类型',
+    name: 'type',
+    data: [
+      {
+        label: '全部',
+        value: ''
+      },
+      {
+        label: '提现',
+        value: 'withdrawal'
+      },
+      {
+        label: '收益',
+        value: 'income'
+      },
+      {
+        label: '兑换',
+        value: 'exchange'
+      }
+    ]
+  },
+])
+
+const getItemClass = (name: string, value: string) => result.value[name]?.includes(value) ? ['current'] : ['']
+
+const onFilterSectionClick = (index: string, value: string) => {
+  result.value[index] = [value]
+}
+
+const reset = () => {
+  result.value = {}
+}
+
+const onOkClick = () => {
+  emit('complete', result)
+}
+</script>
+<style lang="scss">
+.list-filter-picker {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  &-title {
+    position: relative;
+    height: 44px;
+    line-height: 44px;
+    font-size: 17px;
+    color: #353535;
+    background: #f5f5f5;
+    text-align: center;
+  }
+  &-content {
+    flex: 1;
+    margin: 15px;
+    overflow-y: scroll;
+    color: #353535;
+    font-size: 13px;
+    .title {
+      opacity: 0.6;
+      line-height: 18px;
+    }
+    .info {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 10px;
+      margin: 10px 0;
+      &-item {
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        text-align: center;
+      }
+      .current {
+        border-radius: 5px;
+        border: 1px solid #EFD082;
+        background: linear-gradient(180deg, #FFF7E3 0%, #FEFDE6 100%);
+      }
+    }
+  }
+  &-btn {
+    margin: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+      color: #666;
+      font-size: 16px;
+      border-radius: 6px;
+    }
+    .confirm {
+      margin-left: 11px;
+      color: #000;
+      border: none;
+      background: linear-gradient(
+        90deg,
+        #ffebc1 0%,
+        #ffd7a7 52.29%,
+        #ffb875 100%
+      );
+    }
+  }
+  &-bottom {
+    height: 32px;
+    background: #fff;
+  }
+  .icon {
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-size: 40px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    &.icon-x {
+      position: absolute;
+      right: 10px;
+      top: 11px;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MSA0MUgxVjFINDFWNDFaIiBmaWxsPSIjRDhEOEQ4IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIzLjM1NjEgMjAuOTk5OUwzMy45NjM3IDMxLjYwNzJDMzQuNjE0NiAzMi4yNTgxIDM0LjYxNDYgMzMuMzEzNCAzMy45NjM3IDMzLjk2NDJDMzMuMzQyNSAzNC41ODU1IDMyLjM1MjcgMzQuNjEzOCAzMS42OTc5IDM0LjA0ODlMMjAuOTk5NCAyMy4zNTY2TDEwLjM5MzUgMzMuOTY0MkM5Ljc0MjY1IDM0LjYxNTEgOC42ODczOCAzNC42MTUxIDguMDM2NSAzMy45NjQyQzcuNDE1MTkgMzMuMzQyOSA3LjM4Njk3IDMyLjM1MzIgNy45NTE3OSAzMS42OTg0TDE4LjY0MjggMjAuOTk5OUw4LjAzNjUgMTAuMzk0QzcuMzg1NjMgOS43NDMxNCA3LjM4NTYzIDguNjg3ODcgOC4wMzY1IDguMDM2OTlDOC42NTc3OSA3LjQxNTY4IDkuNjQ3NTQgNy4zODc0NiAxMC4zMDIzIDcuOTUyMjdMMjAuOTk5NCAxOC42NDMzTDMxLjYwNjcgOC4wMzY5OUMzMi4yNTc2IDcuMzg2MTIgMzMuMzEyOSA3LjM4NjEyIDMzLjk2MzcgOC4wMzY5OUMzNC41ODUgOC42NTgyOCAzNC42MTMzIDkuNjQ4MDMgMzQuMDQ4NSAxMC4zMDI4TDIzLjM1NjEgMjAuOTk5OVoiIGZpbGw9IiMxNzFBMUQiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1vcGFjaXR5PSIwLjAxIi8+Cjwvc3ZnPgo=")
+    }
+  }
+}
 </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>